ページの雰囲気はホワイトスペースで決まる！

ウェブサイトのデザインを考えるうえで、大切な要素である「間」。ホワイトスペースとも呼ばれ、文字や写真などの要素が入らない空間を指します。使い方によって、デザインの雰囲気が大きく変わるため、これを意識しないデザイナーはいないでしょう。

このホワイトスペースは、使い方によって様々な視覚的効果を持ちます。上手に取り入れて、デザインの質をアップさせましょう！

こんなにある！　ホワイトスペースを使う効果

1. 強調したいものを目立たせる

広いホワイトスペースの中に置かれた要素は、それだけで目を引きます。白バックの紙面にブランドロゴだけがあるような、雑誌広告を思い浮かべてみると分かりやすいでしょう。

これを利用することで、大切な情報やリンクボタンなど、ユーザーの目を引きたい情報を強調することができます。例えばECサイトなどでは、商品の写真をホワイトスペースの中に配置することで、まわりの情報に埋もれることなくアピールできるでしょう。

2. 文章を読みやすくする

雑誌や新聞などでよく見かける、左上から右下まで、びっしり文字が埋まったテキストボックス。情報量の多さはアピールできますが、詰まっていて読みづらいと感じる人もいるでしょう。上下左右にホワイトスペースを入れることで、すっきりと読みやすい印象になります。

また、見出しと本文の間は5ピクセル、段落と段落の間は15ピクセルなど、ブロックごとのスペースにルールを与えることで、それぞれの要素が認識しやすくなり、読みやすくなります。デザイン上の制限などで、見出しと本文のジャンプ率が取れない場合などは特に重宝する方法でしょう。

3. 情報を絞って、ユーザーを落ち着かせる

誰でも、情報量の多いページには身構えてしまいます。たくさんの文章を読み、情報を取捨選択し、理解しなければいけないのは骨の折れる作業です。そんな情報過多のページの中に、情報の少ない、ホワイトスペースを多用したページが表れると、それだけでユーザーは落ち着いてページを見ることができます。

また、情報がぎっしりと詰まったページよりも、ホワイトスペースの多いページのほうが、情報が絞られているため、言いたいことが印象に残りやすいという利点もあります。

4. 視覚的なイメージを与える

情報が少なく、ホワイトスペースの多いデザインは、上品で、高級感のあるイメージを生み出します。腕時計や宝石など、高額商品が写っている写真の背景がシンプルなのは、こうした理由によるものです。

また、画面上にホワイトスペースを配置するためには、そのぶん情報量を制限する必要があります。結果としてミニマルなデザインになりやすく、モダンな印象を与えることが多いのです。

スペースをコントロールする

誤解してはいけないのは、ホワイトスペースは余った空間ではない、ということです。文字や写真を配置したあとの余った空間が、そのまま空けられているデザインを見かけることがあります。しかし、これはただ空間が間延びしているだけであり、ホワイトスペースが活用されているとは言えません。

視覚的なイメージや読みやすさなど、前述の効果を狙うためには、スペースの大きさや位置、まわりの要素との空き具合を調整し、もっともよいバランスを探る必要があります。

ホワイトスペースも大切なデザインの要素

「デザインの要素には、全て意味がある」デザインを勉強するうえで、こんな言葉を聞いたことはないでしょうか。文字の書体や大きさ、写真の位置などと同じように、ホワイトスペースにも意味があります。ただの空いた空間ではなく、デザインの一要素として、上手に活用していきましょう！

参考：
5 Ways How Whitespace Affects The User Experience
Why whitespace matters