【ホワイトスペース】余白は「センス」じゃなく「意図」だった｜ログ！（札幌・長期インターン）

こんにちは！株式会社LANTERNインターン生の堀川です。今回は、Webデザインにおける「余白（ホワイトスペース）」について学んだことを共有します。

余白には「意図があるかどうか」で名前が変わる

参考にした記事によると、余白とは単に「空いているスペース」ではなく、「空間をデザインする」ための能動的な手段です。

特に印象に残ったのが、余白の分類です。意図して作った余白をアクティブホワイトスペース、配置の結果として自然にできた余白をパッシブホワイトスペースと呼ぶそうです。余白には「センスで生まれるもの」と「意図で作るもの」の2種類がある、という整理は目から鱗でした。

また、Webデザインにおいては紙媒体と異なりページサイズに制約がない分、余白を多めに確保しやすい一方で、PCとスマホで画面サイズが大きく異なるため「どの端末で見ても見やすい余白」を意識することが重要とされています。

「削る」ことへの向き合い方が変わった

正直に言うと、余白の概念自体はデザインの基礎として一通り学んでいました。文字間の余白も、要素間の空間も、それなりに意識できていたつもりです。

ところが、実際にWebページを制作してレスポンシブ対応に取り組んだとき、思わぬ壁にぶつかりました。PCでは余白がちょうどよく見えても、スマホサイズになった途端にレイアウトが崩れ、デザインの要素をそぎ落とさなければならない場面が何度も出てきたのです。

そのとき自分がやっていたのは、「なんとなく収まりが悪いから削る」という判断でした。つまり、パッシブな削り方です。

今回「アクティブホワイトスペース」という概念を改めて知って気づいたのは、余白を意図して作るためには、そもそもデザイン要素に優先順位をつけておく必要があるということです。優先度の低いものから削り、残した要素の細部を整える。このプロセスを意識できていなかったから、取捨選択がストレスになっていたのだと腑に落ちました。

「削るプロセス」を習慣にする

今後のWebデザイン業務では、デザインの段階で要素の優先順位を明確にしてから着手するプロセスを習慣にしていきたいと思います。まず「これは絶対に伝えたい情報か？」を問い、優先度の低いものはスマホ表示では思い切って省く。そのうえで、残った要素の余白や文字詰め（カーニング）を丁寧に調整していく。

余白は「センスで生まれるもの」ではなく、「意図で作るもの」。その感覚を実務の中で体に染み込ませていきたいです。