第18講

悪い例と改善例を比較する

この章では、レイアウトの悪い状態と改善後の状態を、言葉と簡単な画面サンプルで比較します。

比較1：余白がないページ

余白が少ない例

見出し本文ボタンが近すぎるカード同士も近い読む前から窮屈に見える情報の切れ目が分かりにくい

文字や部品の距離が近すぎるため、全体が圧縮された印象になります。

余白を整理した例

見出し

説明文

ボタン

情報のまとまりごとに余白があり、読む順序が分かりやすくなります。

悪い例見出し、背景、ボタン、補足、枠線がそれぞれ別の強い色になっている。どれが重要か分からず、落ち着かない印象になる。

改善例基本色、背景色、強調色を決める。主ボタンだけを強調し、補足情報は控えめにする。

ボタンは操作を促す部品です。ボタンが多すぎると、すべてが重要に見えて、逆に何を押せばよいか分かりにくくなります。

悪い例「詳しく見る」「申し込む」「問い合わせる」「資料請求」「戻る」「一覧へ」が同じ大きさ、同じ色のボタンで並んでいる。

改善例一番押してほしい操作だけを主ボタンにし、補助操作は文字リンクや控えめなボタンにする。

HTML上では、見出し、本文、ボタンが正しい順序で並んでいても、見た目では問題が残ることがあります。

悪い例見出しが本文と同じ大きさ。ボタンが本文から大きく離れている。余白が不均等。読み上げでは順番に分かるが、見た目では重要度が伝わりにくい。

改善例見出しを大きくし、本文との間隔を整え、ボタンを説明文の近くに置く。読み上げ順と視線誘導が一致しやすくなる。

悪い例と改善例を比較すると、デザインの問題は「好み」ではなく、情報の優先順位、まとまり、操作導線の問題として説明できます。