余白は、ただ空ければいいわけじゃない。Web制作の初心者が試せる情報の分け方

Webデザインを初めて学ぶと、「余白を取りましょう」という言葉に出会います。
でも、どこをどれだけ空けるのかが分からない。
広げてみたら、かえってまとまりがなくなることもあります。

最初に考えたいのは、余白の数字より、情報の仲間分けです。何と何を一緒に読んでほしいのか。
それが決まると、離す場所を考えやすくなります。

空いている場所にも、役割を持たせます。

同じ内容は近く、違う内容は区切る

架空の陶芸体験の紹介ページを、練習例にします。
ページには、所要時間、持ち物、会場への行き方、問い合わせ方法が並んでいるとします。

この四つをすべて同じ間隔で置くと、どこまでが一つの説明か分かりにくくなる場合があります。
例えば「所要時間」とその説明文は近くに置きたい。
所要時間の説明と、次の持ち物の見出しの間には、内容が変わったと分かる間隔がほしいところです。

余白の前に、「見出しと説明は一組」と決めます。文字を一つずつ移動させるのではなく、
情報の組を見ながら整えます。

まず、色を付けずに丸で囲む

紙でも、印刷した画面でも構いません。
今作っているページを見て、一緒に読む情報を丸で囲んでみてください。
「日時＋説明」「場所＋住所＋地図」「問い合わせ先＋注意事項」という具合です。

囲む範囲に迷ったら、見出しを読み直します。
「ご案内」という見出しの中に日時も持ち物も申込方法も入っているなら、内容を分ける余地があります。

先に言葉を分ける方法もあります。

例えば「当日の案内」を「日時と会場」「持ち物」に分ければ、読む人が探す単位と近くなります。
その後で、それぞれの説明の間隔を調整します。
余白だけで、曖昧な文章を全部解決しようとしないことです。

数値を変える前に、比較の条件をそろえる

余白の調整を練習するときは、文字サイズや色まで同時に変えないようにしてみてください。
何が読みやすさに影響したのか、後で比べにくくなるからです。

例えば、見出しと本文の間隔だけを少し狭くした版を作る。
次に、別の情報の組との間だけを広げた版を作る。
画面を並べて、「どの説明がどの見出しに属しているか」を見ます。

正解の数字を、一つに決めなくて大丈夫です。
文章量や画面の幅が変われば、同じ数字でも見え方は変わります。
見た人が情報のまとまりを追えるかを判断の中心に置きます。

余白を増やしたら、スマホも見る

パソコンではすっきり見えたのに、スマホでは一つの説明を読むために何度もスクロールする。
そんなときは、余白を増やしすぎていないか、文章の区切りが細かすぎないかを確認します。

逆に、狭い画面に収めようとして詰め込みすぎると、見出しと本文の違いが分かりにくくなることもあります。
画面の幅を変えながら、日時を探す、持ち物を探す、といった用事を一つずつ試してください。

見る目的を決めると、調整しやすくなります。

「なんとなく寂しい」と感じて装飾を足す前に、情報が足りないのか、区切りが弱いのか、見出しが曖昧なのかを
分けてみましょう。余白の問題だと思っていたものが、内容の問題だったと気付く場合もあります。

変更の理由を一文にする

調整後は、「日時と場所が別の項目だと分かるように間隔を空けた」と記録します。
「おしゃれにした」より、何を確かめればよいかが伝わります。

その理由を持って変更前と変更後を比べると、自分の好みだけで選びにくくなります。
もし見出しと説明が離れすぎたなら、そこは戻せばいい。最初から一回で決める必要はありません。

情報を減らすことと、間隔を空けることを混ぜない

余白を調整している途中で文章も削りたくなったら、変更を二回に分けてみます。
まず間隔だけで比べ、その後で必要なら文章を整理します。
読みやすくなった理由を、自分で追えるようにするためです。

例えば、持ち物の説明が長くてまとまりが見えないなら、先に一つの段落として見える間隔へ整えます。
それでも探しづらければ、持ち物の名前と補足を分ける方法を試せます。

最初の案が使いにくくても、失敗作として片付けなくて大丈夫です。
「余白だけでは解決しなかった」と分かることが、文章や見出しを見直す理由になります。
何を試したかが残っていれば、別の方法を選ぶ判断に使えます。

正直、余白は言葉だけで覚えても、すぐ使いこなせるものではありません。情報を分け、少し動かし、読み直す。
その経験を小さく重ねるほうが、何となく数値を暗記するより学習の疑問がはっきりします。

今日は、練習ページの一部分だけを選び、情報の組を三つまで囲んでみましょう。
その組の中と外で間隔を変え、「どこが一組か分かるか」を確かめてください。