ページレイアウト設計：情報をどの順番で配置するか考える

この節で学ぶこと

この節では、Next.js の中で Tailwind CSS を使いながら、ページレイアウトをどう考えるか を学びます。

ここで大切なのは、いきなり色や装飾を触ることではありません。まず 何を先に見せるか、次に どこへ置くか、最後に どう整えるか の順で考えることです。

Next.js の App Router は page.tsx と layout.tsx でページと共通枠を分けて設計でき、Tailwind CSS は utility class を直接 JSX に書いて素早く見た目を調整できます。

この節のゴールは、次の一言を自分で言えるようになることです。

「見やすい画面は、情報の順番を決めてから、レイアウトを組む。」

さらに、見出し・説明・主要ボタン・補足情報の置き方を整理し、Next.js の page.tsx の中で、Tailwind CSS を使って読みやすい 1 画面へまとめるところまで進みます。

見出しは文書構造を作る基本要素で、<h1> が最上位の見出しです。読まれる順序は原則としてソースコード順に従います。

画面設計は何から始めるか

先に「順番」を決める

見やすい画面を作るとき、最初に考えるべきなのは 順番 です。

読む人は、まず「この画面は何の画面か」を知り、その次に「何をすればよいか」を知り、最後に「細かい補足」を読みます。

見出しや文書構造がはっきりしていることは、可読性とアクセシビリティの両方で大切です。

まず、順番が少し分かりにくい例を見ます。

export default function Page() {
  return (
    <main className="p-6">
      <p>登録後に確認メールが届きます。</p>
      <button className="rounded-lg border px-4 py-2">登録する</button>
      <h1>会員登録</h1>
      <p>名前とメールアドレスを入力してください。</p>
    </main>
  )
}

このコードでも表示はできます。

でも、最初に見えるべき「会員登録」が後ろにあり、ボタンが説明より先に出ています。

これでは、何をする画面かが一瞬で伝わりにくいです。読まれる順序は基本的にソースコード順なので、見せたい順番で書く ことが重要です。

まずは正しい順番に並べる

次のように並べ替えてください。

export default function Page() {
  return (
    <main className="p-6">
      <h1>会員登録</h1>
      <p>名前とメールアドレスを入力してください。</p>
      <button className="rounded-lg border px-4 py-2">登録する</button>
      <p>登録後に確認メールが届きます。</p>
    </main>
  )
}

これだけで、かなり読みやすくなります。

まだデザインは整っていませんが、情報設計 はすでに始まっています。Web では document source order が読み順の基準になるため、順番そのものが重要です。

画面を3つのまとまりで見る

画面をブロックに分ける

次に、画面を 3 つのまとまりに分けて見ます。

このように、

• 見出し
• 説明
• 主要操作
• 補足

のようなブロックで考えると、ページが整理しやすくなります。Next.js では page.tsx が route 固有の UI を返す場所なので、まずこの単位でページを組み立てると見通しがよくなります。

まずはブロックごとに余白を付ける

次のコードを打ってください。

export default function Page() {
  return (
    <main className="p-6">
      <section className="space-y-4">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="text-sm text-gray-600">
          名前とメールアドレスを入力してください。
        </p>
        <button className="rounded-lg border px-4 py-2 font-medium">
          登録する
        </button>
        <p className="text-sm text-gray-500">
          登録後に確認メールが届きます。
        </p>
      </section>
    </main>
  )
}

ここで新しく使った space-y-4 は、縦方向の子要素間に一定の余白 を入れる utility です。

Tailwind CSS は utility-first なので、このような「間隔だけ」のクラスを直接追加できます。

見出しと説明、ボタンと補足のあいだが整理され、1 つの流れとして読みやすくなります。

まず「1カラム」で整える

1つの柱に情報を積む

初心者が最初に作るページは、まず 1カラム で考えるのがシンプルで良いです。

無理に 2 カラムや複雑な配置へ進むより、縦に積んで、順番を明確にし、幅を制御する方が読みやすいページになりやすいです。

最大幅を制限する max-w-* 系の utility は、読みやすい横幅を作るのに役立ちます。

次のコードに置き換えてください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-6">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-6">
        <div className="space-y-4">
          <h1 className="text-2xl font-bold">会員登録</h1>
          <p className="text-sm text-gray-600">
            名前とメールアドレスを入力してください。
          </p>
          <button className="rounded-lg border px-4 py-2 font-medium">
            登録する
          </button>
          <p className="text-sm text-gray-500">
            登録後に確認メールが届きます。
          </p>
        </div>
      </section>
    </main>
  )
}

この形では、

• max-w-xl で読みやすい横幅へ制限
• mx-auto で中央寄せ
• bg-white と bg-gray-50 で背景を分離
• rounded-2xl と border でカード化

---

しています。

画面設計では、「どこに何を置くか」と同じくらい、「どこまで広げるか」も重要です。Tailwind の max-w-* utilities は、そのための基本道具です。

画面の中に「まとまり」を作る

フォームの前後を分ける

今の画面はまだ 1 枚の塊です。

次は、説明エリア と 入力・操作エリア に分けて、視線の動きを整理します。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-6">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-6">
        <div className="space-y-6">
          <div className="space-y-2">
            <h1 className="text-2xl font-bold">会員登録</h1>
            <p className="text-sm text-gray-600">
              名前とメールアドレスを入力してください。
            </p>
          </div>

          <div className="grid gap-4">
            <input
              className="rounded-lg border px-3 py-2"
              placeholder="名前"
            />
            <input
              className="rounded-lg border px-3 py-2"
              placeholder="メールアドレス"
            />
            <button className="rounded-lg border px-4 py-2 font-medium">
              登録する
            </button>
          </div>

          <p className="text-sm text-gray-500">
            登録後に確認メールが届きます。
          </p>
        </div>
      </section>
    </main>
  )
}

ここでは、space-y-6 で大きなまとまりの間隔を取り、説明部分の中だけは space-y-2 で少し狭くしています。

さらに、入力欄とボタンは grid gap-4 で 1 列に積んでいます。Grid は 2 次元レイアウト向けですが、こうした 縦積みのまとまり にも使えます。

重要なものを上、補足を下に置く

主要操作は見つけやすい位置に置く

画面設計では、主要操作は説明のすぐ近く、かつ見つけやすい場所に置くのが基本です。

今回なら「登録する」ボタンが主役です。だから、入力欄の直後に置くのが自然です。

逆に、補足情報は少し下へ置き、文字色も少し弱めにすると、主役の邪魔をしにくくなります。

シンプルな plain language と明確な構造は可読性にも有利です。

練習として、次のコードの順番を修正してください。

export default function Page() {
  return (
    <main className="p-6">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-6">
        <p className="text-sm text-gray-500">
          登録後に確認メールが届きます。
        </p>
        <button className="rounded-lg border px-4 py-2 font-medium">
          登録する
        </button>
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="text-sm text-gray-600">
          名前とメールアドレスを入力してください。
        </p>
      </section>
    </main>
  )
}

答えの一例です。

export default function Page() {
  return (
    <main className="p-6">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-6">
        <div className="space-y-4">
          <h1 className="text-2xl font-bold">会員登録</h1>
          <p className="text-sm text-gray-600">
            名前とメールアドレスを入力してください。
          </p>
          <button className="rounded-lg border px-4 py-2 font-medium">
            登録する
          </button>
          <p className="text-sm text-gray-500">
            登録後に確認メールが届きます。
          </p>
        </div>
      </section>
    </main>
  )
}

この並びの方が、「何の画面か」→「何をするか」→「補足」の順で理解しやすいです。

読まれる順番はソース順に強く影響されるので、レイアウト設計では順番そのものが大事です。

2カラムにするときの考え方

いきなり複雑にしない

1カラムが整理できたら、初めて 2 カラムを考えます。

2 カラムにするときは、たとえば「左に説明、右に入力フォーム」のように、役割ごとに分けます。

ここでも、役割が違うから分ける のであって、見た目のためだけに無理やり分けるのではありません。

Next.js の page と layout の考え方も、役割による分離に近いです。

次のコードを打ってください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-6">
      <section className="mx-auto max-w-5xl rounded-2xl border bg-white p-6">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
          <div className="space-y-3">
            <h1 className="text-3xl font-bold">会員登録</h1>
            <p className="text-sm text-gray-600">
              このページでは、登録に必要な情報を入力します。
            </p>
            <p className="text-sm text-gray-500">
              先に登録内容を確認してから送信してください。
            </p>
          </div>

          <div className="grid gap-4">
            <input
              className="rounded-lg border px-3 py-2"
              placeholder="名前"
            />
            <input
              className="rounded-lg border px-3 py-2"
              placeholder="メールアドレス"
            />
            <button className="rounded-lg border px-4 py-2 font-medium">
              登録する
            </button>
          </div>
        </div>
      </section>
    </main>
  )
}

ここでは、

• スマホでは grid-cols-1
• md: 以上で grid-cols-2 です。

つまり、スマホでは縦に積み、広い画面では左右に分けています。Tailwind のレスポンシブ指定は mobile-first なので、まず小さい画面を基準に作り、広い画面で広げます。

source order と見た目の順番に注意する

見た目だけ入れ替えればよいわけではない

CSS では order などを使って並び順を変えられますが、読み順や意味構造とのズレには注意が必要です。

MDN では、要素の読み順は原則ソースコード順に基づき、order は視覚的な並びを変えても情報理解に影響し得ることが分かります。

Grid のアクセシビリティでも、意味のある文書構造を保つことが強調されています。

つまり、

HTML の順番を雑にして CSS だけで見た目を並べ替える のは、最初の教材段階では避けた方が安全です。

まずは「読みたい順番」で書く。これが基本です。

レイアウト設計の最小チェックリスト

画面を作るときは、次の順で見ると整理しやすいです。

この 5 つを見れば、かなり多くの「読みにくい画面」は改善できます。

Tailwind CSS は、その改善をクラス追加だけで素早く試せるのが強みです。Next.js では page.tsx を編集して、すぐブラウザで確認しながら調整できます。

手を動かす確認問題

問題1

次のコードを、

見出し → 説明 → ボタン → 補足

の順番に直してください。

export default function Page() {
  return (
    <main className="p-6">
      <section className="rounded-2xl border bg-white p-6">
        <p className="text-sm text-gray-500">登録後に確認メールが届きます。</p>
        <button className="rounded-lg border px-4 py-2">登録する</button>
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="text-sm text-gray-600">名前とメールアドレスを入力してください。</p>
      </section>
    </main>
  )
}

答え

export default function Page() {
  return (
    <main className="p-6">
      <section className="rounded-2xl border bg-white p-6">
        <div className="space-y-4">
          <h1 className="text-2xl font-bold">会員登録</h1>
          <p className="text-sm text-gray-600">
            名前とメールアドレスを入力してください。
          </p>
          <button className="rounded-lg border px-4 py-2">登録する</button>
          <p className="text-sm text-gray-500">
            登録後に確認メールが届きます。
          </p>
        </div>
      </section>
    </main>
  )
}

解説

ソース順を整理し、space-y-4 で縦方向の間隔を整えています。読み順は基本的にソースコード順に依存するため、順番そのものが大事です。

問題2

次のコードを、

**スマホでは1列、****md**以上では2列 になるように直してください。

export default function Page() {
  return (
    <main className="p-6">
      <section>
        <div>説明エリア</div>
        <div>入力エリア</div>
      </section>
    </main>
  )
}

答え

export default function Page() {
  return (
    <main className="p-6">
      <section className="grid grid-cols-1 gap-8 md:grid-cols-2">
        <div>説明エリア</div>
        <div>入力エリア</div>
      </section>
    </main>
  )
}

解説

grid grid-cols-1 を基本にし、md:grid-cols-2 で広い画面だけ 2 列へ変えています。Tailwind のレスポンシブ指定は mobile-first です。

まとめ

ページレイアウト設計で最初に考えるべきことは、どの情報をどの順番で見せるか です。

そのあとで、1カラムにするか、2カラムにするか、どこまで横幅を広げるかを決め、最後に Tailwind CSS の utility classes で余白、文字、背景、枠線を整えます。

Next.js の page.tsx は route 固有の UI を返す場所なので、ここでレイアウトの骨組みを考えるのが自然です。

この節でいちばん大切なのは、

「見た目の調整の前に、順番を決める」

という感覚です。

ここが見えれば、次の節で「コンポーネント単位で見た目を整える」意味もかなり理解しやすくなります。