📚 ナレッジベース

02-08_サイト構成・IA設計

最終更新 2026年08月25日 ／ 21_ナレッジベース/マニュアル_ナレッジ/制作部署/02-08_サイト構成・IA設計.md

出典: 制作部署マニュアル サイト構成・IA設計（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）

サイト構成（IA：情報アーキテクチャ）の役割

サイトの「設計図」を先に決める。これを飛ばしてデザイン始めると、後で全部やり直しになる。

IA（Information Architecture）= ユーザーが迷わず目的の情報に辿り着ける構造を設計する

サイト制作の進め方（順番が命）

正しい順序

1. ゴール設定（誰の何の課題を、どう解決）
2. ターゲット定義（ペルソナ）
3. サイトマップ（ページ構成）
4. ワイヤーフレーム（各ページの骨組み）
5. デザインカンプ（見た目）
6. コーディング
7. 公開

NG順序（よくある失敗）

1. いきなりデザイン開始
2. 後でページ構成が決まる
3. デザインやり直し
4. クライアント追加要望でまたやり直し

→ 必ず構成・骨組み確定 → デザイン → コーディングの順で。

ゴール設定

サイトの目的を3つ以内に絞る

サイト種類 主なゴール
コーポレートサイト ブランド認知・採用・問い合わせ
サービス紹介LP コンバージョン（問合せ・購入・登録）
ECサイト 商品購入
ブログ・メディア PV・SNSシェア・広告収益
ポートフォリオ 採用獲得・案件獲得
採用サイト 応募・エントリー

→ 「ゴール3つ以上」だと焦点ぼやける。1〜2個に絞るのが理想。

KGI（最終目標）と KPI（中間目標）

  • KGI：月20件の問い合わせ
  • KPI：月1万PV、CVR2%

→ 数字で目標を持つと、後の改善が効く。

ペルソナ設定

簡易ペルソナ（最低限）

■ 名前：田中 太郎（仮）
■ 年齢：45歳
■ 役職：中小企業の代表
■ 年商：5,000万円
■ 抱える悩み：HPが古くて問い合わせが減った
■ 情報収集方法：Googleで検索、Facebookで友人の投稿
■ 決裁権：あり（自分で発注）
■ 予算感：30万円以内
■ 重視するポイント：価格・実績・スピード

→ 「誰のために作るか」を1人の人物像にまで落とし込むと、コピー・デザインが具体的になる。

サイトマップの作り方

ステップ1：必要ページを洗い出す

■ コーポレートサイトの典型例
- TOP
- 会社概要
- 代表メッセージ
- 沿革
- アクセス
- サービス一覧
  - サービスA詳細
  - サービスB詳細
- 実績・事例
  - 事例1
  - 事例2
- お知らせ・ニュース
- 採用情報
  - 新卒採用
  - 中途採用
- お問い合わせ
- プライバシーポリシー
- 利用規約

ステップ2：階層を整理

TOP
├── 会社情報
│   ├── 会社概要
│   ├── 代表メッセージ
│   ├── 沿革
│   └── アクセス
├── サービス
│   ├── サービスA
│   └── サービスB
├── 実績
├── お知らせ
├── 採用
└── お問い合わせ

[フッター]
├── プライバシーポリシー
└── 利用規約

ステップ3：URL構造を決める

/
/company/
/company/message/
/service/a/
/service/b/
/works/
/news/
/news/2026-05-26-new-product/
/recruit/
/contact/
/privacy/

→ URL は短く・英語・意味のある単語。日本語URLは避ける（パーセントエンコードで見苦しい）。

ページ役割の定義

各ページに「主目的」を1つ与える。

例：

ページ 主目的 主CTA
TOP 第一印象・全体把握 サービス詳細へ誘導
サービス詳細 機能・価値理解 問い合わせ
実績ページ 信頼獲得 問い合わせ
会社概要 信頼担保 採用 or 問い合わせ
お問い合わせ コンバージョン フォーム送信
ブログ記事 SEO流入・教育 関連サービスへ

→ 役割が曖昧なページは「いる/いらない」を見直す。

ワイヤーフレームの作成

ワイヤーとは

「グレースケールの骨組み図」。デザインの前に、配置と情報量を決める。

含めるもの

  • 各セクションの順番
  • 各セクションの主役（タイトル・本文・画像・CTA）
  • だいたいの文字量
  • だいたいの画像位置・サイズ

含めないもの

  • 色（白黒のみ）
  • 細かい装飾
  • 写真の選定

ツール

  • Figma - 業界標準・無料
  • Whimsical - 簡易ワイヤー特化
  • Miro - 共同編集
  • 手書き（紙とペン）でもOK

ワイヤー例（LP）

┌─────────────────────────┐
│ [ロゴ]    メニュー  [CTA] │
├─────────────────────────┤
│                         │
│     ヒーロー画像         │
│   キャッチコピー         │
│   サブコピー             │
│   [メインCTA] [サブCTA]  │
│                         │
├─────────────────────────┤
│   信頼の証               │
│ [ロゴ] [ロゴ] [ロゴ] ... │
├─────────────────────────┤
│                         │
│   ■ ユーザーの課題       │
│   - 課題1                │
│   - 課題2                │
│   - 課題3                │
│                         │
├─────────────────────────┤
│   ■ 解決策（私たちの提案）│
│                         │
│   [機能A]  [機能B]  [機能C]│
│                         │
├─────────────────────────┤
│   ■ お客様の声           │
│   "感想..." - 田中様      │
├─────────────────────────┤
│   ■ 料金プラン           │
│   [プランA] [プランB]    │
├─────────────────────────┤
│   ■ よくある質問          │
│   Q. ...                │
│   A. ...                │
├─────────────────────────┤
│      [メインCTA再]      │
│                         │
├─────────────────────────┤
│  フッター（リンク・SNS）  │
└─────────────────────────┘

1ページの黄金構成（LP）

1. ヘッダー
2. ヒーロー（3秒で離脱判断）
3. 信頼の証（実績ロゴ・受賞）
4. 課題提起（共感獲得）
5. 解決策（プロダクト紹介）
6. 機能・特徴（3-4個）
7. 使い方・流れ
8. お客様の声・事例
9. 料金プラン
10. よくある質問
11. CTA再強調
12. フッター

→ 「上から順に読んでも、途中で離脱しても、CTAに辿り着ける」構造に。

ナビゲーションのルール

グローバルナビ（上部メニュー）

  • 5〜7項目以内
  • 重要順 or 利用頻度順
  • 最後に必ずCTA（問い合わせ等）

フッターナビ

  • 全リンクを網羅
  • カテゴリ別に整理
  • 著作権・連絡先

モバイルナビ

  • ハンバーガーメニュー
  • タップしやすい（44px以上）
  • 検索ボックスがあれば便利

3クリックルール

目的ページに3クリック以内で到達できるようにする。

  • TOP → サービス一覧 → サービス詳細（2クリック）
  • TOP → 検索 → 結果ページ（2クリック）
  • TOP → ナビ → カテゴリ → 詳細（3クリック）← ここまでがギリ

→ 4クリック以上必要なサイトは離脱率激増。

パンくずリスト

ホーム > サービス > Web制作 > LP制作

メリット

  1. ユーザーの現在地が分かる
  2. 上位階層へ戻れる
  3. SEO効果（構造化データで検索結果にも表示）

実装

<nav aria-label="パンくず">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service/">サービス</a></li>
    <li>LP制作</li>
  </ol>
</nav>

→ 階層が2層以上あるサイトは必須。

CTAの配置戦略

配置場所

  1. ヘッダー右端：常時見える（追従ヘッダーで）
  2. ヒーロー：ファーストビューで最大インパクト
  3. 各セクション末尾：読み終わったタイミング
  4. ページ末：最後の背中押し
  5. フッター：保険的に

1ページのCTA数

  • LP：5-7箇所（同じCTA繰り返しOK）
  • コーポレートTOP：3-5箇所
  • 記事ページ：上・中・下に3箇所

→ 「右下に追従CTAボタン」もモダンサイトで定番。

ファーストビューの設計

最初の1画面（PCで800px、スマホで600px相当）で見える範囲。

必須要素

  1. ロゴ・ブランド
  2. キャッチコピー（一言で何屋か）
  3. メインCTA
  4. 信頼の証（ロゴ・実績数）

入れる順

┌────────────────────────┐
│ [ロゴ]      [メニュー][CTA]│ ← ヘッダー
├────────────────────────┤
│                        │
│   キャッチコピー         │
│   サブコピー             │
│   [メインCTA] [サブCTA] │
│                        │
│   [ロゴ][ロゴ][ロゴ]      │ ← 信頼の証
└────────────────────────┘

→ ファーストビューが薄いと、即離脱される。

レスポンシブの設計思想

モバイルファースト

スマホ画面で先に設計 → 大画面に拡張。

メリット：
- スマホでの操作性確保
- 情報の優先順位が明確になる
- ファイルサイズ・パフォーマンス意識できる

グリッドの変換

PC タブレット スマホ
3カラム 2カラム 1カラム
サイドナビ 上部メニュー ハンバーガー
横並びカード 横並び（縮小） 縦並び

ユーザーフローの設計

ユーザーが「来訪→目的達成」までの動線を設計する。

例：問い合わせまで

① 検索 →
② TOP着地 →
③ サービス紹介ページ →
④ 料金確認 →
⑤ お問い合わせフォーム →
⑥ 送信完了 →
⑦ サンクスメール

各ステップで離脱しない設計：
- 各ページの次のCTAを明確に
- 必要な情報がそのページで揃う
- 矛盾がない（料金が場所によって違う等）

サイト構成NG

NG 結果
サイトマップなしでデザイン開始 途中で大幅やり直し
ナビが10項目以上 ユーザー迷子
4クリック以上必要なページがある 離脱激増
CTA配置がページ1箇所だけ コンバージョン低下
ファーストビューに情報なし 即離脱
URL構造が支離滅裂 SEO不利・覚えにくい
スマホで横スクロール発生 UX破綻

チェックリスト：サイト構成の完成度

  • [ ] ゴール（目的）が3つ以内に絞られてる
  • [ ] ペルソナが具体的に1人定義されてる
  • [ ] サイトマップ（階層図）がある
  • [ ] 各ページの役割・主CTAが決まってる
  • [ ] URL構造が短く・英語・意味あり
  • [ ] グローバルナビが5-7項目以内
  • [ ] 3クリックで全ページに到達可能
  • [ ] パンくずリストある（階層2層以上）
  • [ ] ファーストビューに必須5要素揃ってる
  • [ ] CTAが3-5箇所に配置
  • [ ] モバイルファーストで設計
  • [ ] ユーザーフローが描けてる

参考：サイト構成が秀逸な事例

サイト 学べる点
SmartHR 大規模サイトの階層整理
SAKURA internet サービス多数の整理
BASE LPからサインアップへの動線
Notion プロダクト多種のナビ
Apple 商品ジャンルの整理