「スペースがもったいなくて、つい詰め込んでしまう」——この記事は、配色の次に進む方への「Webデザイン」2本目です。読み終わる頃には、余白を勘ではなく数字で決められるようになり、自分の画面のどこが窮屈なのかを指で示せるようになります。

先に結論から。余白は「何も置けなかった残り」ではなく、情報をかたまりに分けるための部品です。余白の量そのものが「ここまでが1つの話です」という説明になります。だから、余白を削ると情報は増えず、意味だけが伝わらなくなります。

話し上手な人は、必ず「間」を取る

人前で上手に話す人を思い出してください。その人は、大事なことを言う前に一度だけ黙ります。逆に、早口で息継ぎなく話し続ける人の内容は、どれだけ中身が良くても頭に残りません。言葉の量は同じでも、間があるかどうかで伝わり方が変わります。

画面の余白は、この「間」とまったく同じ働きをします。文字を詰めれば載る情報は増えますが、読む人にとっては息継ぎのない長話です。余白は、読む人が一度息を吸うための場所です。

余白の本当の仕事は「グループ分け」

人の目は、近いものを仲間だと判断します。見出しと本文のあいだが広く空いていて、その見出しの上が詰まっていると、見出しは「上の文章の締めくくり」に見えてしまいます。逆に、見出しの上を広く、下を狭くするだけで、「ここから新しい話が始まる」と伝わります。

これはデザインの基本原則のうち近接と呼ばれるものです。難しい言葉ですが、やることは1つ。仲間どうしは近づけ、別のものとは離す。色も線も足さずに、距離だけで意味を作れます。

余白は3種類に分けて考える

余白がうまくいかないとき、たいてい「どの余白の話をしているか」があいまいです。3つに分けましょう。行と行のあいだ（行間）は文章の読みやすさを決めます。CSSではline-height: 1.8;のように、文字の大きさの何倍かで指定します。

部品と部品のあいだは、かたまりの区切りを作ります。margin-bottom: 24px;のように書きます。外側のふちは画面の端との距離で、スマートフォンでは左右に16ピクセル以上ないと、文字が画面の角に張りついて読みにくくなります。

数字は8の倍数から選ぶ

「もう少し空けたい」と感じるたびに13ピクセル、21ピクセルと感覚で数字を打つと、画面全体がそろいません。私たちは8の倍数から選ぶ決まりにしています。8・16・24・40・64。使う数字を5つに絞るだけで、初めて作る人でも整った画面になります。

数字を決めておく利点はもう1つあります。後から「全体をもう少しゆったりさせたい」というご要望が来たとき、24を32に、40を48に置き換えるだけで済むことです。決めごとは、あとで直すときに効いてきます。

スマートフォンでは、同じ数字でも印象が変わります。パソコンで64ピクセル空けた章の区切りは、狭い画面ではただの間延びに見えることがあります。私たちは画面が狭くなったときだけ、64を40に、40を24に一段ずつ下げる指定を書き添えています。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズがトップページの初稿をお見せしたとき、依頼主から「ここ空いていますよね。キャンペーンのバナーを入れられませんか」とご相談をいただくことがあります。空いている場所は、たしかにもったいなく見えます。

そんなときは断らずに、その場でバナーを入れた画面と、入れない画面を並べてお見せします。並べると、入れた側は主役のボタンが埋もれることが目で分かります。ご担当者から「たしかにこっちの方が押したくなりますね」と返ってきたら、決まりです。余白を守るのは私たちの好みのためではなく、依頼主が本当に押してほしいボタンを守るためです。

余白は、読む人へのゆずりあい

詰め込まれた画面を見た人は、探すのをやめて閉じます。ゆとりのある画面を見た人は、次の行に目を運びます。余白は、読む人がその場に留まるかどうかを決める——私たちはそう考えています。載せたい情報が多いときこそ、削るのは余白ではなく、伝えなくてもいい情報のほうです。

今日からできる、たった1つのこと

まとめ

余白は残りものではなく、情報をかたまりに分ける部品です。仲間は近づけて別のものは離す、余白は行間・部品の間・外側のふちの3種類に分ける、数字は8の倍数から選ぶ。この3つで、詰め込みぐせは直ります。私たちCCコミュニケーションズは、依頼主と画面を並べて話し合う場面まで経験できる環境で、Webデザインを学びたい仲間を探しています。