📚 ナレッジベース

02-04_レイアウト

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

出典: 制作部署マニュアル レイアウト（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）

レイアウトの目的

情報を「読んでもらう」ための骨組み。レイアウトが破綻するとどんなに良いコピーも読まれない。

グリッドシステム

12カラムグリッド（業界標準）

  • PCの画面を12等分
  • 配置の自由度が高い：6+6（半分）、4+4+4（3分割）、3+9（サイドバー）、4+8（記事サイドバー）など
  • Bootstrap、Tailwind、Figma、全てこの基準

コンテンツの最大幅

.container {
  max-width: 1280px;   /* デスクトップ */
  margin: 0 auto;
  padding: 0 24px;
}

→ 横幅1920pxのモニターで開いても、コンテンツは中央1280pxに収まる。両端余白で目線を集中させる。

本文の理想幅

  • 1行35〜50文字が読みやすい上限
  • max-width: 720px 〜 max-width: 800px が読み物の標準

8pxグリッド（余白の鉄則）

すべての余白を8の倍数で揃えるだけで、見た目が一気に整う。

用途 推奨px
アイコンと文字 8px
ボタン内パディング 12-16px
カード内パディング 24-32px
要素間 16-24px
段落間 16-32px
セクション間（中） 48-64px
セクション間（大） 80-120px
ヒーロー上下 100-200px

→ 「8の倍数」で迷わない。

視線誘導パターン

F型レイアウト

  • 上端を左 → 右へ読む
  • やや下がって左 → 右へ（短く）
  • 左端を下へスクロール

使い時：記事、ブログ、検索結果、ニュース

Z型レイアウト

  • 左上 → 右上 → 左下 → 右下 へZ字に
  • 左上：ロゴ・タイトル
  • 右上：CTA（問い合わせ等）
  • 左下：補足情報
  • 右下：メインCTA

使い時：1画面で完結するLP、ヒーロー

グーテンベルクダイアグラム

  • 4つの領域：
  • 左上（一次視覚領域・最強）
  • 右上（強い休憩領域）
  • 左下（弱い休憩領域）
  • 右下（終端領域）

使い時：均等に並ぶ画像グリッド、商品一覧

ヒーローセクションの黄金構成

LP・トップページの「最初に見える画面」=3秒で離脱判断される命。

必須5要素

┌──────────────────────────────────┐
│  ① 一言キャッチコピー（最大インパクト）  │
│                                  │
│  ② サブコピー（具体的価値・1〜2行）       │
│                                  │
│  [メインCTA]  サブCTA              │
│                                  │
│  ③ 信頼の証（実績数・導入企業ロゴ）       │
└──────────────────────────────────┘
要素 ポイント
1. キャッチコピー 5〜15文字で何屋か即わかる
2. サブコピー 「誰の」「どんな悩みを」「どう解決」
3. メインCTA 主要アクション（問い合わせ・無料登録）
4. サブCTA デモ動画・資料DL等の補助
5. 信頼の証 数字・実績・ロゴで一発の権威

ヒーローの背景パターン

  • 単色ベタ（最ミニマル）
  • グラデーション（モダン・テック系）
  • 大きい写真（人物・サービス利用シーン）
  • 動画ループ（インパクト最大・ただし重い）
  • アニメーション（リッチ・要技術）

ページの全体構成テンプレ（LP / コーポレートTOP）

LP（コンバージョン特化）

1. ヘッダー（ロゴ + 限定的ナビ + CTA）
2. ヒーロー（キャッチ + サブ + メインCTA）
3. 信頼の証（実績ロゴ・数字・受賞）
4. 課題提起（ユーザーの悩み）
5. 解決策（プロダクト紹介・3-4特徴）
6. 機能詳細（スクショ + 説明）
7. お客様の声（顧客事例）
8. 料金プラン
9. よくある質問
10. CTAセクション（再強調）
11. フッター

コーポレートTOP

1. ヘッダー（ロゴ + フルナビ + 問い合わせ）
2. ヒーロー（事業ミッション + ビジュアル）
3. サービス紹介（一覧 + 個別ページへ）
4. 強み・特徴
5. 実績・事例
6. お知らせ・新着情報
7. 会社情報サマリ
8. 採用情報リンク
9. お問い合わせCTA
10. フッター（サイトマップ・SNS）

レスポンシブの基本

ブレークポイント（業界標準）

デバイス 幅
モバイル 〜 599px
タブレット 600 〜 1023px
デスクトップ 1024 〜 1279px
ワイド 1280px 〜

CSS実装（モバイルファースト推奨）

/* デフォルトはモバイル */
.container {
  padding: 16px;
}

/* タブレット以上 */
@media (min-width: 600px) {
  .container {
    padding: 24px;
  }
}

/* デスクトップ以上 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1280px;
    margin: 0 auto;
  }
}

モバイルで気をつけること

  • タップ範囲は最低 44×44px（指でタップしやすいサイズ）
  • フォントは最低14px（できれば16px）
  • ハンバーガーメニュー化
  • 1カラム配置（縦並び）
  • 横スクロール発生しないこと（厳禁）

カラム・グリッドのレスポンシブ

3カラム → スマホで1カラム

.cards {
  display: grid;
  grid-template-columns: 1fr;  /* スマホ：1列 */
  gap: 16px;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);  /* タブレット：2列 */
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);  /* PC：3列 */
  }
}

auto-fill による自動レスポンシブ

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

→ 1行で「最低280px、自動で列数決める」が実現できる。モダンWebの定番。

セクションのリズム

ページに「呼吸」を作る：

セクションA（重め・情報多い）  ←背景白
↓
セクションB（軽め・余白多い） ←背景グレー
↓
セクションC（CTA・目立つ）    ←背景ブランド色

→ 背景色を交互に変えて視覚的リズムを作ると単調にならない。

レイアウトNG

NG 何が悪い
余白がない 圧迫感・読みにくい
要素のサイズがバラバラ 統一感なし
1画面に情報を詰め込みすぎ 何が大事か不明
中央揃えで全部 整列感なく散漫
ヒーロー文字が15文字超 一発で理解されない
グリッドが揃ってない 素人感丸出し
スマホ最適化なし モバイル離脱率激増
横スクロール発生 UX破綻

チェックリスト：レイアウト合格基準

  • [ ] 12カラムグリッドに沿ってる
  • [ ] 全余白が8pxの倍数
  • [ ] 本文max-width 800px以内
  • [ ] ヒーロー5要素が揃ってる
  • [ ] スマホで横スクロール発生しない
  • [ ] タップ範囲44×44px以上
  • [ ] セクション間に呼吸（リズム）がある
  • [ ] 視線誘導（F/Z型）に沿ってる
  • [ ] 余白で要素のグループ化ができてる

参考：レイアウトの教科書サイト

サイト 学べる点
Linear グリッド・余白の極み
Stripe ヒーロー〜下層の流れ
Vercel レスポンシブの参考
Apple 縦に長いLPの教科書
BASE 日本企業の整ったLP