初心者向け講座早見表
前回のWeb系コラムはリンクの基本的なデザインと、予測可能性についてのお話をしました。
今回は、Webサイト全体の段組みを考える際に大切な「余白」に焦点を当ててみたいと思います。
余白とは、ボタンや画像を配置して余った場所、ではありません。
余白とは「意識的に」使用するものであり、余白を活用することで、文章やボタン・メニュー等の「まとまり」をユーザーにより分かりやすく認識させることが出来ます。結果として、伝えたい情報をより伝えやすくしたり、より分かりやすい操作が可能となります。
例えば上記のWebサイトについては、左のサイドバーを見ますと、珍しい縦書きのリンクとなっています。
縦書きのリンクですので、一般的なリンクに付く下線などもその性質上入っておりませんが、クリックしやすくするため、十分な余白がとられています。
縦書きのリンクという「クリック可能と思わせる予測可能性」が低い現状を、十分な余白を配置することでリンク一つ一つを把握しやすい構成になっていることが確認できます。
このように、ゆったりした余白をとることで、余白が隔てるパーツの一つ一つをすっきりと見せることができます。
これはリンクに限ったお話ではありません。
例えば次の例などでは、より広い要素を各グループとして、余白で区切られていることが確認いただけるかと思います。
装飾は多くありませんが、余白を生かして、下のグローバルナビゲーション、左のサイドバー、店の画像などの要素を、それぞれグループとして表現することに成功しています。
画像と画像の間にある余白と、左のサイドバーまでの余白にも違いがあります。これにより、それぞれの要素が別の意味を持つことを、余白で表現しています。
このように、余白を活用することで、色や枠線等のデザイン要素の利用を抑えつつ、情報を整理して表示することが可能になります。言い換えれば、余白の取り方に違いを持たせることによって、情報をグループ化して整理するレイアウトが可能となります。
これを逆の視点で考えますと、異なるグループ要素の余白の取り方を統一してしまうと、グループの役割の違いを把握しにくくなる可能性が高くなるということでもあります。
余白には文章・ボタン・リンクなどの要素を隔て、そのグループのイメージを把握しやすくする役割がありますので、全体のバランスを考えながら余白の設定を行う必要があります。
実際の余白設定については「デザイン的な好み」も絡んできますので、一概に「これがよい」という話をすることは難しいですが、多めの余白は優雅な印象（ただし、行き過ぎると間延びした印象）を与え、少なめの余白は緻密さや緊張感といった印象に繋がります。最初のうちは試行錯誤もあると思いますが、余白をきちんと設定できるようになると、安定感のある美しさをより実感できると思います。
以上、本日は余白の取り方と、その際の意識すべきポイントについてご紹介いたしました。
（担当：斉藤 万幾子）
