サイト設計（IA・構成・ワイヤー）｜ホームページ制作の流れ Step 3
Step 3のサイト設計は、Step 2「要件定義・戦略設計」で固めた方針を、サイトの具体的な「設計図」に落とし込む工程です。サイトマップ、各ページの構成、ワイヤーフレームを通じて、サイト全体の「何をどこに置くか」を明文化していきます。
Step 3で行うこと
サイト設計は、Step 2で決まった方針を、サイトの具体的な構造とレイアウトに展開する工程です。サイトマップ、ページごとの構成、ワイヤーフレームを作成し、ビジュアルデザインに進む前の「設計図」を完成させます。
このステップを終えた段階で、サイトの構造・ページ構成・各ページの大まかなレイアウトが固まり、Step 4「ビジュアルデザイン」に進める状態になります。
サイト設計はビジュアルデザインの土台
ビジュアルデザインに入る前にサイト設計を丁寧に行うのは、デザイン以降の手戻りを最小化するためです。
ワイヤーフレームの段階で「何をどこに置くか」「どの情報を優先するか」を関係者で合意できれば、デザイン以降は「見た目」の議論に集中できます。逆に、設計が曖昧なままデザインに入ると、デザインしながら構成も議論することになり、判断の根拠が曖昧になりがちです。
ENVY DESIGNでは、ワイヤーフレームの段階でお客様と十分に議論し、構造と情報の優先順位を固めてからデザインに進む流れを大切にしています。
サイト設計で進めること
サイト設計の中では、主に以下のテーマを進めていきます。
1. サイトマップの作成
サイト全体のページ構成を、階層構造として整理します。トップ・サービス・実績・お知らせなどの大カテゴリと、各カテゴリ配下のページを一覧化し、サイト全体の構成を確定します。
グローバルナビ、フッターナビ、サイドナビなどのナビゲーション設計の方針もここで決定します。
2. 各ページの構成設計
サイトマップで定義した各ページについて、「どの情報を、どの順序で、どのセクションとして並べるか」を設計します。
例えばトップページなら、ファーストビュー、強み紹介、サービス概要、実績、ニュース、お問い合わせ導線などのセクション構成を整理し、それぞれの役割と内容方針を決定します。
3. ワイヤーフレームの作成
各ページのレイアウトを、線画レベルで表現したワイヤーフレームを作成します。テキストや画像の配置、ボタン位置、コンテンツのおおよその比率を、装飾なしで設計します。
ワイヤーフレームは、デザインの「設計図」であり、お客様との認識合わせの中心ツールとなります。
4. SEO・AIOを見据えた情報配置
Step 2で整理したSEO・AIOの方針を、ワイヤーフレームに反映します。
FAQセクションの配置、著者情報・運営者情報の表示位置、構造化データを想定したコンテンツの並び方、E-E-A-T観点で必要な要素（実績・実体験・お客様の声など）の配置を検討します。
検索エンジンやAIにも内容を理解されやすいように、情報の配置や見せ方を設計段階から検討します。
5. 内部リンク・導線の設計
ピラー＆クラスター構造、関連ページへの導線、お問い合わせや資料ダウンロードなどコンバージョン導線を設計します。
各ページから次に読ませたいページへの誘導、お問い合わせまでのステップを明確にしていきます。
6. レスポンシブ設計の方針
PC、タブレット、スマートフォンでの表示方針を決定します。スマートフォン中心の閲覧が想定される場合は、モバイルファーストでワイヤーフレームを作成します。
サイト設計の進め方
サイト設計は、Step 2の戦略設計が完了した時点からスタートします。
最初にサイトマップを固め、その後ページ単位で構成・ワイヤーフレームを順次作成していきます。各ページのワイヤーフレームができた段階で、お客様にレビューいただき、フィードバックを反映しながら確定させていきます。
ワイヤーフレームの作成には、Figmaなどのデザインツールを使用します。お客様もFigma上で直接ご確認・コメントいただけます。
アウトプット（成果物）
サイト設計の工程では、以下のような資料をアウトプットとして整理します。
- サイトマップ（確定版）
- 各ページの構成案
- 全ページのワイヤーフレーム（Figma等）
これらは次のStep 4「ビジュアルデザイン」で、具体的なデザインへと展開されます。
所要期間の目安
サイト設計の所要期間は、ページ数や複雑さによって変動しますが、概ね以下を目安としています。期間中、お客様には主にワイヤーフレームレビューや社内確認でのご協力をお願いする形になります。必要に応じて、原稿・画像・資料などの素材確認をお願いする場合もあります。
- 小規模（5〜10ページ）：2〜4週間
- 中規模（10〜30ページ）：1〜2ヶ月
- 大規模（30ページ以上・複雑な機能を含む）：2〜3ヶ月
お客様にご協力いただきたいこと
サイト設計では、ワイヤーフレームへのレビューとフィードバックが中心となります。
- ワイヤーフレームレビュー（提示後1週間以内を目安にフィードバック）
- 構成や情報優先度に関するご判断
- コンテンツ素材（テキスト・画像・データ等）の準備状況の共有
- 社内関係者への確認・共有
ワイヤーフレームのレビューでは、「このセクションは本当に必要か」「順番はこれでよいか」「もっと前に出すべき情報はないか」を一緒に議論していきます。
次のステップ｜Step 4「ビジュアルデザイン」へ
サイト設計で固めたワイヤーフレームをもとに、Step 4「ビジュアルデザイン」へと進みます。
Step 4では、ブランドトーン・カラー・タイポグラフィを反映した、サイトの実際のビジュアルデザインを作成していきます。
サイトをテンプレートで作るか、オリジナルで設計するかによって、この工程の進め方も変わります。違いはテンプレートとオリジナル設計の違いで整理しています。
すでに公開しているサイトで、ページが増えすぎて整理できなくなっている場合は、ページを増やし続けた結果、ホームページが整理できなくなっているもあわせてご覧ください。
サイト設計に関するよくあるご質問
Q. ワイヤーフレームを作らず、いきなりデザインから入ることはできますか？
ご要望によっては可能ですが、ENVY DESIGNでは推奨していません。デザインから入ると、「色・装飾」と「構造・情報」を同時に判断することになり、議論が散漫になりがちです。ワイヤーフレームで構造を先に固めることで、デザイン以降は見た目の判断に集中でき、手戻りを減らしやすくなります。
Q. ワイヤーフレームの段階で原稿は必要ですか？
すべての原稿が完成している必要はありません。ただし、見出しや主要なメッセージ、掲載予定の情報がある程度整理されていると、より精度の高いワイヤーフレームを作成できます。原稿作成が必要な場合は、サイト設計と並行して内容を整理していきます。
Q. ワイヤーフレームのレビューは、どのような観点で見ればよいですか？
主に「情報の優先順位」「セクションの順番」「不足や過剰なコンテンツ」「導線の自然さ」を見ていただきたいです。色や装飾はこの段階では考慮不要で、Step 4のビジュアルデザインで議論します。
Q. サイトマップとページ構成は、Step 2で決めた情報設計とどう違いますか？
Step 2では「方針」を決定し、Step 3でその方針を具体的なページ単位・セクション単位に落とし込みます。たとえばStep 2で「サービス紹介の充実」が方針なら、Step 3では「サービス一覧ページの構成」「個別サービスページのテンプレート」「導線設計」として具体化します。
Q. ワイヤーフレームの修正は何回まで対応していただけますか？
基本的には、合意できる状態になるまで必要な調整を行います。ただし、当初の方針やStep 2の戦略に戻るような大幅な変更が必要な場合は、別途ご相談のうえで対応します。
お問い合わせ
ENVY DESIGNへのお問い合わせは、お問い合わせフォームよりお願いいたします。
出典
- Schema.org（構造化データの公式仕様）
- Google Search Central（検索・構造化データの公式情報）
- Web Vitals（Core Web Vitalsの公式定義）
- Google検索公式ブログ（AI Overview等の発表情報）
関連記事