第5講

レイアウトの基本原則

美しいレイアウトは、才能や感覚だけで決まるものではありません。余白、揃え、幅、まとまり、階層という基本で説明できます。

余白

余白とは、文字や画像の周囲にある空きスペースです。何も置かれていない場所ですが、無駄ではありません。余白は、情報を読みやすくし、まとまりを作ります。

視覚サンプル：余白がある状態

見出しと本文の周囲に空きがあります。情報のまとまりが分かりやすく、落ち着いた印象になります。

次の情報との間にも間隔があります。読み手は、ここから別の内容に入ると理解しやすくなります。

視覚サンプル：詰まりすぎた状態

見出し本文ボタン説明補足が近すぎるどこで区切れるのか分かりにくい読む前から窮屈に見える

揃えとは、文字、画像、ボタンの端や中心をそろえることです。左端がそろっている、中央がそろっている、上下の間隔がそろっている画面は、安定して見えます。

反対に、少しずつ位置がずれていると、意図がない乱れに見えます。わずかなずれでも、見える人には違和感として伝わることがあります。

本文の横幅が広すぎると、1行が長くなり、読む人の視線移動が大きくなります。狭すぎると、頻繁に改行され、文章が細切れになります。

そのため、Webページでは本文の最大幅を決めることが多いです。画面が広くても、本文が横に伸びすぎないようにするためです。

関連する情報は近くに置き、関係が薄い情報は離して置きます。これを近接の原則と呼ぶことがあります。

例えば、入力欄とその説明文は近くに置きます。送信ボタンはフォームの終わりに置きます。説明と関係のない広告や画像を近くに置くと、まとまりが壊れます。

階層とは、情報の重要度の差です。見出しは大きく、本文は標準サイズ、補足は控えめに表示します。

すべてを大きく、太く、目立たせると、重要度の差が消えます。その結果、見える人はどこから読めばよいか分かりにくくなります。

課題見える人に、あるページの「余白」「揃え」「幅」「まとまり」「階層」について、それぞれ1つずつコメントしてもらってください。「きれい」「普通」ではなく、具体的な言葉で聞くことが重要です。