はじめに
この文書の目的
この文書は、Web初心者や小さな会社でWebサイトを作りたい方向けに、「webサイト 構成」に関する基本をやさしく整理したものです。設計図づくりとしての構成の意味を丁寧に説明し、目的やターゲットの決め方、サイト全体の地図（サイトマップ）、1ページの設計（ワイヤーフレーム）へとつなげます。
想定する読者
- これから自社サイトや店舗サイトを作るオーナー
- 個人でブログやポートフォリオを作る方
- 制作会社に発注する前に基本を知りたい方
具体例を交えて進めますので、専門用語が苦手な方でも読みやすく作っています。
この章で得られること
- 「構成」が何を指すかを理解できます
- 本書の全体像と各章の役割がわかります
- 次の段階（目的・ターゲット決定）にスムーズに進めます
読み方のヒント
各章は段階的に進みます。まずはこの章で全体像をつかんでください。実際の作業では、目的とターゲットを決めてからサイトマップ、ワイヤーフレームへと進むと効率的です。必要なら実例をまねしてみてください。
Webサイト構成とは何か？まず「骨組み」の意味を理解する
骨組みのイメージ
Webサイトの構成とは、サイト全体や各ページの「骨組み」を設計することです。建物で言えば設計図に当たり、見た目（デザイン）や文章（コンテンツ）を載せる土台を作ります。
全体の構成（サイトマップ）とは
サイトマップはページ同士のつながりと階層を図にしたものです。例として、トップページを起点に「会社概要」「サービス紹介」「事例」「ブログ」「お問い合わせ」などがあります。階層を整理すると、ユーザーは迷わず目的のページにたどり着けます。
ページごとの構成（ワイヤーフレーム）とは
ワイヤーフレームは1ページ内の要素配置を示します。具体例：
– ヘッダー（ロゴ・ナビ）
– メインビジュアル（キャッチと画像）
– サービス説明（特徴・メリット）
– 事例や信頼の要素（実績）
– CTA（問い合わせボタン）
– フッター（連絡先）
この順序を決めることで、伝えたい情報を優先して見せられます。
構成を決める目的
主な目的は二つです。第一に、ユーザーが目的の情報へスムーズに進める導線を作ること。第二に、制作前に関係者の認識を合わせ、無駄な手戻りを減らすことです。具体例を想像しながら骨組みを描くと、制作がぐっと進めやすくなります。
Webサイト構成を考える前に決めるべき「目的」と「ターゲット」
まず「目的」を決める
Webサイトに最も期待する成果を一つか二つに絞ります。例：
– 問い合わせを増やす（資料請求や相談予約）
– ECでの購入を増やす
– 会社情報や採用情報を分かりやすく伝える
目的によって必要なページや導線が変わります。例えば購入が目的なら商品ページ・購入フローを最優先にします。問い合わせが目的なら問い合わせ導線と信頼性を高める情報を優先します。
次に「ターゲット」を具体化する
誰に向けて作るかを年齢、職業、目的、ウェブの慣れまで具体的に書き出します。例：
– 30代の子育て世代、スマホ中心で簡潔な情報を好む
– 50代の経営者、詳細な価格・導入事例を重視
ターゲットごとに「何をどの程度求めるか」を整理すると、必要なページやコンテンツが見えてきます。
目的とターゲットを組み合わせて優先順位をつける
目的×ターゲットで必要な導線を洗い出します。優先すべきページと後回しにできるページを決めると、無駄のないサイト設計ができます。
実践の簡単ステップ
- 目的を1つに絞る
- 主要ターゲットを1〜2つ書き出す
- それぞれに必要な情報と理想のページをリスト化する
- 優先度順にサイトマップへ反映する
これらを決めてからサイトマップやワイヤーフレームを考えると、迷いが少なくなります。
サイト全体の構成を決める「サイトマップ」の考え方
サイトマップとは
サイトマップは、サイトにどんなページを置くかとそれらの関係を図で整理したものです。家でいう間取り図の役割を果たします。どのページに誰を導くかを明確にします。
作成の基本ステップ
- 目的とターゲットを再確認する（例：問い合わせ増加、商品購入など）。
- 必要なページを書き出す（トップ、サービス、会社情報、FAQ、お問い合わせ等）。
- ページの優先度と親子関係を決め、階層化する（主要導線を浅くする）。
- 内部リンクや回遊を設計し、ユーザーの流れを考える。
具体例（簡潔）
- コーポレート：トップ、会社概要、サービス、お知らせ、事例、採用、FAQ、お問い合わせ。
- EC：トップ、カテゴリ、商品詳細、カート・決済、ガイド、問い合わせ、規約。
- サービス：トップ、サービス紹介、強み、料金、導入事例、FAQ、お問い合わせ・見積り。
実務のコツ
- 階層は深くしない（3階層以内が目安）。
- ページ名は短く分かりやすくする。
- メイン導線を最優先で設計し、導線上のリンクを分かりやすく配置する。
- 図で可視化して関係者と確認する。
1ページの構成を決める「ワイヤーフレーム」と3つの基本要素
はじめに
ワイヤーフレームはページの設計図です。まずは「ファーストビュー」「メインコンテンツ」「クロージング・CTA」の3つのゾーンで考えます。各ゾーンの役割と押さえる要素を具体例で説明します。
1. ファーストビュー（最初に見える部分）
役割：ユーザーに「ここで解決できそう」と直感させること。
主な要素：ロゴ、グローバルナビ、メインビジュアル、キャッチコピー、主要CTAボタン。
例：商品サイトなら商品写真と短い価値説明、予約サイトなら予約ボタン。
ポイント：情報を絞り、CTAは1つか2つに限定します。スマホ表示での見切れを必ず確認してください。
2. メインコンテンツ（核心情報）
役割：詳細を伝えて信頼を高め、疑問を解消すること。
構成例：見出し→導入文→特徴説明（箇条書き）→画像や動画→お客様の声や事例。
ポイント：見出しで要点がつかめるようにし、段落は短めにします。最新情報や検索を意識する場合は、見出しにキーワードを自然に入れます。
3. クロージング・CTA（行動喚起）
役割：具体的な行動へ誘導する最終エリア。
要素例：お問い合わせボタン、資料ダウンロード、無料相談の案内、フォームへの導線。
ポイント：行動のハードルを下げる文言（例：無料、簡単、今すぐ）を使い、複数の選択肢を用意する場合は優先順位を明示します。
ワイヤーフレーム作成の実用的なコツ
- モバイルファーストで設計する。画面幅が狭いと要素の優先度が分かりやすくなります。
- 視線の流れを意識して重要な要素ほど上部または視線が向かう場所に置く。
- コンテンツの塊を増やしすぎず、余白で情報を整理する。
- CTAは色とサイズで目立たせ、一貫した配置にする。
これらをワイヤーフレームで紙やツールに起こし、まずはユーザーの動線を確認してください。
