Next.jsによるWebアプリケーション開発概論

コンポーネント単位のスタイリング：部品ごとに見た目を整える

第5節画面設計基礎：レイアウトを組み、スタイルで整える
Next.jsTailwind CSSアプリ開発開発Web開発

この節でやること

この節はこれだけです。

  1. 何を先に見せるか決める
  2. 1カラムで並べる
  3. 2つのまとまりに分ける
  4. 広い画面だけ2カラムにする

Web は、基本的に ソースコードの順番 で読まれます。見出しは内容理解の入口なので、先に置くのが基本です。

Next.js の page.tsx は、そのページの UI を返す場所です。Tailwind CSS は p-6 や max-w-xl のようなクラスを直接 JSX に書いて整えます。

まず悪い例を見る

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

これだと、何の画面かが後ろです。

まずは順番を直します。読まれる順番は原則としてソース順です。

手を動かす 1

正しい順番に並べる

次のコードにしてください。

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

見るポイントはこれだけです。

  • h1 を先に置く
  • 説明をその下
  • ボタンをその下
  • 補足は一番下

覚える形

Rendering diagram…

手を動かす 2

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">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          名前とメールアドレスを入力してください。
        </p>
        <button className="mt-4 rounded-lg border px-4 py-2 font-medium">
          登録する
        </button>
        <p className="mt-2 text-sm text-gray-500">
          登録後にメールが届きます。
        </p>
      </section>
    </main>
  )
}

ここで使った大事なクラスだけ見ます。

  • max-w-xl = 横幅を広げすぎない
  • mx-auto = 真ん中に置く
  • p-6 = 余白
  • border = 枠線
  • rounded-2xl = 角丸
  • bg-white = 白背景

手を動かす 3

説明と入力を分ける

次は、画面を2つのまとまりに分けます。

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>
  )
}

ここでの考え方はこれです。

Rendering diagram…

画面は、文章のかたまりで分けると考えやすいです。

手を動かす 4

広い画面だけ2カラムにする

次のコードにしてください。

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 = 最初は1列
  • md:grid-cols-2 = 広い画面だけ2列 Tailwind は md: のような接頭辞でレスポンシブ指定できます。

最低限のチェック

画面を作るとき、毎回これだけ見てください。

  • タイトルは先にあるか
  • 説明はタイトルのすぐ下か
  • 主要ボタンは見つけやすいか
  • 補足は一番下か
  • 横幅は広すぎないか

練習問題

問題1

次のコードを、

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

の順に直してください。

export default function Page() {
  return (
    <main className="p-6">
      <p className="text-sm text-gray-500">登録後にメールが届きます。</p>
      <button className="rounded border px-4 py-2">送信</button>
      <h1 className="text-2xl font-bold">お問い合わせ</h1>
      <p className="text-sm text-gray-600">内容を入力してください。</p>
    </main>
  )
}

答え

export default function Page() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">お問い合わせ</h1>
      <p className="mt-2 text-sm text-gray-600">内容を入力してください。</p>
      <button className="mt-4 rounded border px-4 py-2">送信</button>
      <p className="mt-2 text-sm text-gray-500">登録後にメールが届きます。</p>
    </main>
  )
}

解説

順番を直すだけで、かなり読みやすくなります。

読み順はソース順が基本です。

問題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>
  )
}

解説

最初は1列、広い画面だけ2列です。

Tailwind のレスポンシブは md: のような接頭辞で指定します。

まとめ

ページレイアウト設計で最初にやることは、飾ることではなく、順番を決めること です。

次に、1カラムで整理し、それでも必要なら2カラムに広げます。

Next.js の page.tsx はそのページの UI を返す場所なので、ここで順番と配置を考えるのが自然です。

Tailwind CSS は、その配置を max-w-xl、grid-cols-1、md:grid-cols-2 のようなクラスで素早く試せるのが強みです。

今日いちばん大事なこと。

先に順番。あとで見た目。

前の節ページレイアウト設計：情報をどの順番で配置するか考える次の節レスポンシブデザインの基本：画面幅に応じてレイアウトを変える
教材トップへ戻る