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

視認性と可読性を高めるUI設計。読みやすく操作しやすい画面にする

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

この節でやること

本説では、文字が読みやすくて押しやすい画面 を作ります。やることは4つです。

  1. 文字を読みやすくする
  2. ボタンを押しやすくする
  3. 情報の強弱を付ける
  4. 1つの画面にまとめる Next.js では
page.tsx

に画面を書き、Tailwind CSS のクラスで見た目を整えます。Tailwind は utility-first の仕組みで、

text-sm

、

p-4

、

rounded-lg

のような小さなクラスを直接 JSX に書いて組み立てます。

先に覚えること

読みやすい画面の基本

まず覚えるのは、この順番です。

Rendering diagram…

読む順番は、基本的にコードの順番です。見出しは内容理解の入口なので、先に置くのが自然です。

文字の行間は読みやすさに影響し、WCAG 2.2 の text spacing では、利用者が行間を少なくとも 1.5 倍まで広げても読めることが求められています。

新しく出る言葉を表で整理する

言葉何をするものかよく使う Tailwind
文字サイズ文字を大きく小さくするtext-sm, text-base, text-2xl
行間行どうしの広さを決めるleading-6, leading-7, leading-8
コントラスト文字と背景の見分けやすさtext-gray-900, bg-white
余白要素どうしを離して見やすくするmt-2, p-4, gap-4
ターゲットサイズボタンの押しやすさpx-4 py-3, min-h-* 相当の考え方

コントラストは WCAG で最小値が定められていて、通常サイズの本文は少なくとも 4.5:1 が必要です。

ターゲットサイズは WCAG 2.2 で少なくとも 24×24 CSS px、WCAG 2.1 AAA では 44×44 CSS px、web.dev では実務上 48×48dp 前後が推奨されています。

まず悪い例を見る

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

export default function Page() {
  return (
    <main className="p-4">
      <section className="border p-2">
        <h1 className="text-base">会員登録</h1>
        <p className="text-xs text-gray-400">
          必要事項を入力してください。
        </p>
        <button className="border px-2 py-1">登録</button>
      </section>
    </main>
  )
}

この画面は、次が弱いです。

  • 見出しが小さい
  • 説明文が薄すぎる
  • ボタンが小さい
  • 余白が少ない つまり、読みにくく、押しにくい です。

手を動かす 1

文字を読みやすくする

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

export default function Page() {
  return (
    <main className="p-4">
      <section className="border p-4">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm leading-6 text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 border px-2 py-1">登録</button>
      </section>
    </main>
  )
}

ここで見てほしいのはこれです。

クラス役割
text-2xl見出しを大きくする
font-bold見出しを強くする
text-sm本文サイズを整える
leading-6行間を広げる
text-gray-600薄すぎない本文色にする
line-height

は行間を決める CSS の仕組みです。行間は読みやすさに直結します。

手を動かす 2

ボタンを押しやすくする

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

export default function Page() {
  return (
    <main className="p-4">
      <section className="border p-4">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm leading-6 text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 rounded-lg border px-4 py-3 font-medium">
          登録する
        </button>
      </section>
    </main>
  )
}

ここでは px-4 py-3 を使って、ボタンの押せる面積を大きくしています。

押しやすいボタンは、見た目だけでなく操作の失敗を減らします。

WCAG 2.2 の target size minimum は 24×24 CSS px、web.dev は実務上 48×48dp 前後のタップ領域を勧めています。

似ている言葉を表で整理する

言葉意味例
padding内側の余白px-4 py-3
margin外側の余白mt-4
押せる見た目ボタンらしく見えることborder rounded-lg
押しやすさ実際に指やマウスで操作しやすいこと十分な padding

ここは混同しやすいです。

見た目がボタンっぽくても、小さすぎると押しにくいです。

手を動かす 3

強弱を付ける

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

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

ここで見てほしいのは、情報の強弱です。

  • text-gray-900 = 強い
  • text-gray-600 = 普通
  • text-gray-500 = 補足

色の差だけでなく、サイズ差も使っています。

似ている概念を表で整理する

役割よく置くもの見た目の強さ
主役h1大きい、濃い
説明p普通
操作button目立つ
補足p小さい、少し薄い

本文のコントラストは WCAG で 4.5:1 以上が最低基準です。薄すぎる文字色は避けた方が安全です。

手を動かす 4

入力欄も読みやすくする

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

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

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

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

ここでは、

  • 入力欄も py-3 で押しやすく
  • text-base で読みやすく
  • gap-4 で行間を整理 しています。

手を動かす 5

ホバーで分かりやすくする

次のようにボタンを少し変えてください。

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

        <div className="mt-6 grid gap-4">
          <input
            className="rounded-lg border px-3 py-3 text-base"
            placeholder="名前"
          />
          <input
            className="rounded-lg border px-3 py-3 text-base"
            placeholder="メールアドレス"
          />
          <button className="rounded-lg border px-4 py-3 font-medium text-gray-900 hover:bg-gray-100">
            登録する
          </button>
        </div>

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

hover:bg-gray-100 は、マウスを乗せたときだけ背景を変える指定です。

操作できる場所が分かりやすくなります。

最後に小さな完成を作る

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

これが今日の完成です。

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

        <div className="mt-6 grid gap-4">
          <input
            className="rounded-lg border px-3 py-3 text-base"
            placeholder="名前"
          />
          <input
            className="rounded-lg border px-3 py-3 text-base"
            placeholder="メールアドレス"
          />
          <button className="rounded-lg border px-4 py-3 font-medium text-gray-900 hover:bg-gray-100">
            登録する
          </button>
        </div>

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

この画面には今日の内容が全部入っています。

  • 読みやすい文字サイズ
  • 行間
  • 色の強弱
  • 十分な余白
  • 押しやすいボタン
  • レスポンシブな余白と文字サイズ

練習問題

問題1

次の見出しを、もっと読みやすくしてください。

<h1>お知らせ</h1>

答え

<h1 className="text-2xl font-bold text-gray-900">お知らせ</h1>

解説

見出しは主役なので、大きく、濃く、強くします。

強弱があると、何を先に読むかが分かりやすくなります。

問題2

次のボタンを、押しやすくしてください。

<button>送信</button>

答え

<button className="rounded-lg border px-4 py-3 font-medium">
  送信
</button>

解説

px-4 py-3 で押せる面積を広げています。

押しやすさは見た目だけでなく、操作ミスを減らすことにもつながります。

問題3

次の本文を、読みやすい本文らしくしてください。

<p>必要事項を入力してください。</p>

答え

<p className="text-sm leading-6 text-gray-600">
  必要事項を入力してください。
</p>

解説

本文は見出しより弱く、でも読める濃さが必要です。

行間も広げると読みやすくなります。

読みやすくて使いやすい画面の基本

見やすい画面で大事なのは、派手さ ではありません。 大事なのは、読みやすさ と 押しやすさ です。

つまり、見る人にとってこうなっていることが重要です。

  • 何が大事かすぐわかる
  • 文章が無理なく読める
  • ボタンを迷わず押せる
  • 情報がごちゃごちゃしていない

まず意識すること

ポイントどうするかねらい
見出し大きく、少し強く見せる何の画面かすぐ伝える
本文薄すぎない色にして、行間を取る読みやすくする
ボタン小さすぎないサイズにする押しやすくする
補足少し小さく、少し弱く見せる主役の邪魔をしない
余白情報の間を空けるごちゃつきを防ぐ

Tailwind CSS でよく使うクラス

クラス何を変えるか使う場面
text-*文字サイズ見出しを大きくする、本文を整える
leading-*行間本文を読みやすくする
px-*左右の内側余白ボタンや入力欄を押しやすくする
py-*上下の内側余白ボタンや入力欄を押しやすくする
rounded-*角丸ボタンやカードを見やすくする
border枠線ボタンやカードの境界を見せる

画面の見方

次のように考えると整理しやすいです。

画面の部分強さ
見出しいちばん強い
本文ふつう
ボタン目立つ
補足少し弱い

つまり何が大事か

一言でまとめると、こうです。

読みやすい画面の条件

大きさ

濃さ

余白

押しやすさ

一番覚えてほしいこと

読みやすい = 大きさ、濃さ、余白、押しやすさ。

前の節レスポンシブデザインの基本：画面幅に応じてレイアウトを変える次の節【演習】YouTubeのUIを模写して再現する
教材トップへ戻る