クライアントから資料をもらったのに、どのページが必要で、どう並べればいいのか決められない。デザインを作り始めてから「このページ、そもそも要りましたか」と気づいて巻き戻る。そんな経験はありませんか。結論から言えば、サイト設計は「ヒアリングで目的と制約を聞き出す」「情報を棚卸しして訪問者の探し方で分類し、ページ一覧に固定する」「階層・URL・ナビゲーションのルールを決めてワイヤーフレームに落とす」の順で進め、ページ一覧の承認と修正範囲を契約で固めて守るのが基本です。要件定義やデザインとの違い、ヒアリング項目、情報設計の4ステップ、GoogleのURLのガイドライン、ワイヤーフレームの失敗例、フリーランス法を踏まえた契約の注意点まで、このページで整理しました。
【結論】サイト設計はどう進めればいい？
サイト設計とは、要件定義とデザインの間で「どんなページを、どう並べ、それぞれに何を載せるか」を決め、その理由を残す工程です。フリーランスのWeb制作者が案件で進めるなら、次の3つを押さえてください。
- 設計の前に5つの情報を聞き出す目的と成功の判定方法、訪問者の現在地、既存サイトの資産、公開後の運用体制、動かせない制約条件を確認する
- 棚卸しから始めてページ一覧に固定する情報を全て書き出し、訪問者の探し方で分類して階層を決め、表形式のページ一覧で承認をもらう
- ルールと契約で設計を守る階層・URL・ナビゲーションのルールを決めてワイヤーフレームに落とし、修正回数と範囲外の扱いを事前に決めておく
URLは公開後に変えると引っ越しの手間が大きいため、ページ一覧の段階で決めておくのが安全です。
サイト設計の判断力は、要件定義から関われる案件の経験で伸びます。上流工程から関われる案件を探したいなら、エージェントで案件の幅を比べる方法もあります。
サイト設計とは？要件定義やデザインとどう違う？
要件定義は「何のために作るか」、デザインは「どう見せるか」を決める工程で、その間にあるサイト設計は「どんなページを、どう並べ、何を載せるか」を決める工程です。現場によって指す範囲が違うため、前後の工程との境目を先にクライアントと共有しておくと、話がかみ合います。
| 工程 | 主な成果物 | ここで決めること |
|---|---|---|
| 要件定義 | 要件定義書、見積書 | サイトの目的、対象の訪問者、予算、公開時期 |
| サイト設計（情報設計） | ページ一覧、サイトマップ、ワイヤーフレーム | 必要なページ、階層構造、URL、各ページの構成要素 |
| デザイン | デザインカンプ | 配色、書体、余白、トーン |
| 実装・構築 | ソースコード、CMSの設定 | 動き、更新のしやすさ、公開後の運用 |
設計を飛ばすとどうなる？
設計を省いてデザインから入ると、問題は後の工程でまとめて表に出ます。よくあるのは次のようなケースです。
- デザインの確認の場で「このページも必要だった」と分かり、作業範囲が膨らむ
- ページ同士の関係が決まらず、ナビゲーションが後付けのつぎはぎになる
- 公開直前にURLの構造を変えることになり、実装をやり直す
- 「なぜこの並びなのか」を説明できず、クライアントの好みで構造が崩れる
設計フェーズの価値は、唯一の正解を出すことではありません。後から「なぜこうなっているのか」と聞かれたときに、答えが残っている状態をつくることです。理由が残っていれば、前提が変わったときに構造を安全に組み替えられます。
設計の前にクライアントから何を聞けばいい？
設計に入る前に、目的と成功の判定方法、訪問者の現在地、既存サイトの資産、公開後の運用体制、動かせない制約条件の5つを聞き出します。クライアントは何を伝えればよいかを知らないことが多いため、こちらから具体的な質問で引き出します。
| 聞くこと | 質問の例 | 設計への影響 |
|---|---|---|
| 目的と成功の判定方法 | 公開から半年後、何がどうなっていれば成功ですか | トップページの上部に置く要素と、導線のゴールが決まる |
| 訪問者の現在地 | 訪問者は御社をどこで知って来ますか | 入口になるページと、必要な説明の深さが決まる |
| 既存サイトの資産 | 今よく読まれているページ、問い合わせにつながっているページはどれですか | 残すページ、まとめるページ、URLを引き継ぐページを判断できる |
| 公開後の運用体制 | 公開後は誰が、どのくらいの頻度で更新しますか | CMSで更新できるようにする範囲と、階層の深さが決まる |
| 動かせない制約条件 | 公開日、予算、連携するシステム、ドメインで決まっていることはありますか | 設計の選択肢そのものが絞られる |
「認知を広げたい」という目的は、問い合わせ件数なのか、採用の応募なのか、既存顧客からの問い合わせを減らしたいのかまで踏み込むと、設計の判断に使える形になります。更新の担当者が1人でパソコン操作に慣れていないなら、更新頻度の高いページを増やす設計は続きません。運用できない構造は、設計として失敗です。
リニューアルの案件では、アクセス解析やSearch Consoleの閲覧権限を早めにもらえるかどうかで、設計の精度が大きく変わります。どのページが検索や問い合わせにつながっているかが分かれば、残すべきページとURLを判断できます。
設計前のヒアリング依頼（例文）
このたびはご依頼ありがとうございます。ページ構成を決める前に、次の5点を伺えますでしょうか。
1. 公開から半年後に、何がどうなっていれば成功とお考えですか
2. 訪問される方は、主にどこで御社を知って来られますか
3. 現在のサイトで、よく読まれているページや問い合わせにつながっているページはありますか（アクセス解析の閲覧権限をいただけると助かります）
4. 公開後は、どなたがどのくらいの頻度で更新されますか
5. 公開日、予算、連携するシステム、ドメインなど、決まっている条件はありますか
いただいた内容をもとにページ一覧の案をお送りします。
あわせて読みたい（訪問者を理解する）
情報設計はどんな手順で進める？
情報設計は「棚卸し」「グルーピング」「階層化」「ページ一覧への固定」の4ステップで進めます。いきなりサイトマップを描き始めると、無意識に既存サイトや競合サイトの構造をなぞってしまうため、必ず棚卸しから入ります。
情報を棚卸しする
既存のページ、営業資料、よくある問い合わせ、社内にしかない情報まで、載せる可能性のある情報を粒度を気にせず全て書き出します。この段階では削りません。
訪問者の探し方でグルーピングする
似た情報を寄せ、グループに名前をつけます。情報を1枚ずつカードや付箋に書き、実際に並べ替える「カードソーティング」を使うと、グループの切れ目が見えやすくなります。
階層と優先順位を決める
グループ同士の親子関係を決め、同じ階層の中の優先順位を1位から並べきります。「どれも重要」は、どれも目に入らない状態になりがちです。
ページ一覧に固定する
ページ単位に落とし、表形式のページ一覧にまとめて承認をもらいます。図のサイトマップは全体像の共有に、表のページ一覧は見積もりと進行管理に使います。
グルーピングで避けたい失敗は？
最も多い失敗は、会社の組織図をそのままサイトの構造にしてしまうことです。訪問者は部署名を知りません。分類の軸は、作り手の都合ではなく訪問者の探し方に合わせます。クライアントの社内用語がそのままメニュー名になっていないかも確認しましょう。
ページ一覧には何を書く？
ページ一覧に次のような列を持たせておくと、承認後はそのまま進行管理表として使えます。
| ページ名 | 階層 | URL | ページの目的 | 原稿の担当 |
|---|---|---|---|---|
| トップ | 第1階層 | / | 事業の全体像を伝え、各サービスへ案内する | 制作者が案を作成 |
| サービス一覧 | 第2階層 | /service/ | サービスを比べて選べるようにする | クライアント |
| サービス詳細 | 第3階層 | /service/web-design/ | 内容、料金、流れを伝え、問い合わせにつなげる | クライアント |
| 事例一覧 | 第2階層 | /works/ | 実績で信頼してもらう | クライアント |
| お問い合わせ | 第2階層 | /contact/ | 相談の受け付け | 制作者 |
ページ一覧が確定した時点が、見積もりとスケジュールを固定できるタイミングです。ここを曖昧にしたまま進むと、後からの追加要望に対して「当初の範囲外です」と説明する根拠がなくなります。
あわせて読みたい（ページのまとめ方）
階層・URL・ナビゲーションはどう決める？
階層は深さと1画面の選択肢の数のバランスで決め、URLは意味のある単語をハイフンでつないだ形にして公開後は変えず、ナビゲーションは訪問者が「今どこにいるか」が分かるように作ります。ここで決めたことは公開後に変えるほど手間が増えるため、ページ一覧の段階で固めます。
GoogleはURLと構造について何と言っている？
Googleは、検索に関するドキュメントでURLとサイト構造について次のように説明しています。
| 意味のある単語 | 可能であれば、長いID番号ではなく意味のある単語をURLに使う |
|---|---|
| 単語の区切り | URLの単語を区切るには、アンダースコアではなくハイフンを使うことをすすめている |
| 日本語などの文字 | 日本語などASCII以外の文字を含むURLにリンクするときは、リンク先の指定でパーセントエンコードを行う |
| 余計な要素 | 可能な限りURLにセッションIDを使わず、内容に影響しない不要なパラメータを削除してURLを短くする |
| 大文字と小文字 | Google検索はURLの大文字と小文字を区別し、別のURLとして扱う |
| ディレクトリ | 類似のトピックをディレクトリにまとめていると、各ディレクトリ内のURLが変更される頻度をGoogleが学習しやすくなる |
| 重複 | 同じ内容が複数のURLで表示される場合は、各コンテンツにアクセスできるURLが1つになるようにする |
階層・URL・ナビゲーションの設計ルールは？
| 対象 | 設計のルール | よくある失敗 |
|---|---|---|
| 階層 | 深さと、1画面の選択肢の数のバランスで決める | 浅さを優先し、メニューの項目が多すぎて選べなくなる |
| URL | 階層と内容を表す短い単語にし、公開後は変えない | 日付や社内コード、連番を入れ、後から意味を失う |
| グローバルナビ | 訪問者の目的の単位で並べる | 社内の組織名や部署名をそのまま使う |
| パンくずリスト | 階層構造と一致させる | たどってきた順番と混同し、階層とずれる |
| フッター | 主要なページを網羅し、探し漏れを受け止める | グローバルナビの単なる複製になる |
| 内部リンク | 見つけてほしいページには、サイト内の別のページから少なくとも1つリンクする | どこからもリンクされていないページが残る |
目的のページまで少ないクリックでたどり着けるほうがよい、というのは制作の現場で共有されてきた目安で、決まった回数の基準はありません。階層の深さと、1画面あたりの選択肢の数は、どちらかを減らすともう一方が増える関係にあります。メニューの項目を詰め込みすぎないことも同じくらい大切です。
リニューアルでURLを変えるときは？
リニューアルでURLを変える場合は、古いURLから新しいURLへ、サーバー側の恒久的なリダイレクト（301や308）を設定します。Googleはサイト移転のガイドで、リダイレクトはできるだけ長く、一般的には1年以上維持するよう説明しています。古いURLと新しいURLの対応表を、ページ一覧に列として持たせておくと、設定漏れを防げます。
あわせて読みたい（検索に強い構造）
ワイヤーフレームでは何を決める？やってはいけないことは？
ワイヤーフレームで決めるのは、各ページの要素の配置と優先順位、導線と文言であり、配色や書体などの見た目は決めません。サイトマップが縦の構造なら、ワイヤーフレームは各ページの中身という横の構造です。
| ワイヤーフレームで決めること | ここでは決めないこと |
|---|---|
| 要素の配置と、上から下への優先順位 | 配色、書体、装飾のトーン |
| 各要素に入る情報の種類と、おおよその分量 | 写真やイラストの最終的な選定 |
| 次のページへの導線と、その文言 | アニメーションなど細かな動きの表現 |
| スマートフォンなど画面幅が狭いときの並び順 | 余白の具体的な数値 |
ワイヤーフレームでよくある失敗は？
- 作り込みすぎて見た目の相談になる：色や装飾を置くと、クライアントの意識が構造から見た目に移ります。「ボタンの色が気になる」という感想が返ってきたら、作り込みすぎのサインです
- 意味のないダミー文字のまま合意する：実際の原稿が入った途端にレイアウトが崩れます。少なくとも見出しと導線の文言は、実際に使う文言の案を入れておきます
- スマートフォンの並び順を後回しにする：実装の段階で要素の優先順位を決め直すことになります。縦一列に並べたときの順番は設計の段階で決めておきます
ワイヤーフレームの段階で出てくる「ページを1枚追加したい」「この要素も入れたい」という要望は、実装の工数に直結します。追加が当初の作業範囲に含まれるのか、別の見積もりになるのかは、設計フェーズに入る前に契約で決めておきましょう。
設計フェーズの報酬と範囲はどう守る？
設計フェーズは、ページ一覧とワイヤーフレームの承認を二段階に分け、修正回数と範囲外の扱いを着手前に文書で決めることで守ります。設計は成果物が目に見えにくいため、報酬が削られたり、修正が際限なく続いたりしやすい工程です。
承認はどう分ければいい？
ページ一覧とワイヤーフレームを一度に出すと、クライアントは両方を同時に判断できません。まずページ一覧で承認をもらい、それを固定してからワイヤーフレームに進みます。この二段階を守るだけで、手戻りの範囲を小さくできます。
「修正は各段階で2回まで」「ページの追加は1枚ごとに別途見積もり」のように、着手前に基準を文字にしておきます。基準がないまま断ると角が立ちますが、事前に合意していれば確認するだけで済みます。
契約前に確認したいことは？
- 設計フェーズの報酬が、実装の費用と分けて書かれているか
- ページ一覧の承認をもって作業範囲が確定する旨が書かれているか
- 修正回数の上限と、上限を超えた場合の扱い
- 成果物（ページ一覧、サイトマップ、ワイヤーフレーム）の著作権の帰属と、実績として公開してよいか
- 案件が途中で中止になった場合、完了した工程の報酬をどう扱うか
- 報酬の支払期日と、検収の条件
2024年11月1日に施行されたフリーランス法（特定受託事業者に係る取引の適正化等に関する法律）では、フリーランスに業務を委託する発注事業者は、業務の内容、報酬の額、支払期日などの取引条件を書面や電子メールなどで明示する必要があります。さらに、従業員を使用する発注事業者には、原則として成果物を受け取った日から60日以内のできる限り短い期間内で支払期日を定めることが求められ、6か月以上の継続的な業務委託を中途で解除したり更新しなかったりする場合は、原則として30日前までに予告する必要があります。個別の契約が法の対象になるか、成果物の権利がどちらに帰属するかは事情によって異なるため、不安がある場合は弁護士や「フリーランス・トラブル110番」などの相談窓口に相談してください。
あわせて読みたい（契約と見積もり）
公開の前後に何を確認する？
公開の前後には、設計どおりにページがつながっているか、古いURLから正しく転送されているか、検索エンジンと訪問者から問題なく見られているかを確認します。設計の意図が実装で崩れていないかを確かめる最後の工程です。
- ページ一覧のすべてのページに、サイト内の別のページからリンクがあるか
- リンク切れや、パンくずリストと階層のずれがないか
- リニューアルの場合、古いURLから新しいURLへの恒久的なリダイレクトが設定されているか
- XMLサイトマップを用意し、Search Consoleから送信したか
- スマートフォンで、設計した並び順どおりに表示されるか
- 表示速度に大きな問題がないか
公開後はSearch Consoleで、検索結果への表示や、登録されていないページがないかを確認します。設計のときに決めた「成功の判定方法」の数字も、公開から一定期間後に振り返り、構造の見直しに生かしましょう。
あわせて読みたい（公開後の確認）
よくある質問（FAQ）
サイト設計は、要件定義とデザインの間で「どんなページを、どう並べ、何を載せるか」を決め、理由を残す工程。着手前に、目的と成功の判定方法、訪問者の現在地、既存の資産、運用体制、制約条件の5つを聞き出す
情報設計は棚卸し、グルーピング、階層化、ページ一覧への固定の4ステップ。分類は訪問者の探し方に合わせ、URLは意味のある単語をハイフンでつなぎ、公開後は変えない。変える場合は恒久的なリダイレクトを設定する
ワイヤーフレームでは配置と優先順位だけを決める。ページ一覧とワイヤーフレームの承認を分け、修正回数と範囲外の扱い、権利の帰属を契約で決めて設計フェーズを守る
サイト設計の判断力は、扱った案件の規模と業種の幅がそのまま経験になります。実装だけでなく上流から関われる案件に出会える環境かを、一度確かめてみる価値があります。
