【余白】ホワイトスペースがデザインに与える6つの役割

デザインにおけるホワイトスペースの重要性デザイン

デザインを仕事にしていると必ずホワイトスペース(White Space)という言葉を耳にします。英語ではネガティブスペース(Negative Space)とも呼ばれ、いずれもデザインにおいては「余白」を意味します。

ホワイトスペースって、ページが埋まらず余った空間のことでしょ?

・・・なんてことを自分も昔は考えていました(汗)

デザイン初心者の頃は与えられた情報を画面いっぱいに収めることだけにとらわれていますが、経験とともにホワイトスペースの重要性に気づき、その技術を習得することが必須となります。

ホワイトスペースって何?

ホワイトスペース(White Space)またはネガティブスペース(Negative Space)とは、デザインの中で何もない余白のことを言います。

レイアウトの間、段落の間、異なる要素同士の間などに生まれる空間です。

ホワイトスペースと言っても、文字通り白い色の部分だけをを意味するわけではなく、様々な色や柄、あるいは写真やイラストなどの中にも適用されます。

以下はAppleのWebサイトのスクリーンショットですが、誰が見ても美しく機能的で一目見てAppleとわかる様なホワイトスペースの使い方です。

ホワイトスペースって何?

なぜホワイトスペースが重要なのか?

デザイナーがホワイトスペースをデザインの重要なデザイン要素とするのには、それなりの理由があります。

使い方次第で、デザインだけでなくそのデザインを用いるビジネスにも大きな影響を与えることができるからです。視覚的な美しさや効果だけではなく企業のブランディングイメージや売り上げさえも大きな影響を与えることがあります。

つまり、ホワイトスペースはページのUI(ユーザーインターフェイス)だけでなく、UX(ユーザーエクスペリエンス)も大きく向上させることができるのです。

わかりやすさが向上する

ホワイトスペースを上手に使用することで、内容の読みやすさわかりやすさを大幅に向上させることができます。

ある調査によると、段落の行間やその左右の余白を適切に使用することで、理解度が最大20%向上することがわかっています。

このような行間、段落間、メニュー項目間の小さなスペースは、Webデザインの世界ではマイクロホワイトスペースとも呼ばれています。

集中や注意をさせる事ができる

ホワイトスペースがある事で同じページ内の他の要素が強調され、集中させたり注意を引く事ができます。

レイアウトやレイアウト要素の間に大きなスペースを設けることは、マクロホワイトスペースとも呼ばれ、ユーザーをページ内に誘導したり、ユーザーのフォーカスエリアを優先させたりするのに大きく役立ちます。

余白によって情報を誘導する

情報が溢れるページにおいて余白はユーザーを無意識にゴールへと誘導してくれます。

お互いの近くにあるものは同じグループと認識する様に、ホワイトスペースによって分けれらた情報はそれぞれが異なったグループと認識させ、自然に伝えたい確信へと導きます。

グリッド間の余白や溝は、レイアウト要素の論理的なグループ化を処理するためのいくつかの方法です。

余白によって情報を誘導する
参考:moz:lla
https://www.mozilla.org/

行動につなげる

研究によると(参考:TIME:You Now Have a Shorter Attention Span Than a Goldfish)、インターネットユーザーの平均的な注意力の持続時間は8秒と言われております。

その様に移り気の早いユーザーに対して、ホワイトスペースを効果的に使用することで、デザインはユーザーに素早くメッセージを伝え、行動を起こさせてくれるため、ビジネスに繋げるチャンスを高めてくれます。

ブランディングイメージや印象をコントロールする

ミクロとマクロのホワイトスペースの使用頻度は、Webページの特徴を定義するのに役立ちます。

ニュースのWebサイトは、マクロホワイトスペースよりもマイクロホワイトスペースを使用しているWebサイトの良い例です。

マクロホワイトスペースを多く使用すると、洗練された高級感をもたらします。

この様にホワイトスペースの使い方によって企業の印象やブランディングイメージをコントロールする事ができます。

利用者のために息抜きの場を設ける

企業や顧客などクライアントはとにかく多くの情報をページに載せたがるものです。

情報をたくさん掲載した方が仕事の成約に結び付くと考え、実際ユーザーにとって重要な判断材料ともなることもあります。

しかし情報過多のページは読む気が失せ、集中力も無くしてしまいます。

デザイナーはそういった場面で効果的にホワイトスペースを設けることで、利用者が息抜きでき、離脱することなくゴールまで導く事ができます。

ホワイトスペースの問題点

ホワイトスペースは、デザインを知らない人からは、

  • ホワイトスペース=余った空間
  • ホワイトスペース=オシャレなもの
  • ホワイトスペース=気取ったもの

・・・といった先入観を持たれることもあり、機能性がない無駄なスペースと思われることもよくあります。

余白を作るくらいなら、もっと情報を載せてくれ!と言われることもあるでしょう。

しかし、ホワイトスペースはユーザビリティやコンバージョン、そしてブランディングの側面でビジネスに大きな価値を持ち、むしろ機能性しかありません。

こういったホワイトスペースの重要性をデザイナーがクライアントに伝えるのは、非常に難しいことです。

価値を納得させた後のもう一つの課題は、投資の準備ができているかどうかです。

ホワイトスペースの使用が多いということは、ページごとの情報が少ないということなので、それを補うためにページの数が多くなり、制作コストが高くなる場合もあります。

このような事態もビジネスとの相互効果を説明し、納得してもらうための労力が必要です。

まとめ

ホワイトスペースは余った空間でもなければ、単にオシャレを演出するものでありません。デザインに強力な力を持たせるテクニックです。

しかし、ホワイトスペースによってユーザーをコントロールするには長い経験や専門的な知識も必要になってきます。

以下の「けっきょく、よはく。 余白を活かしたデザインレイアウトの本」はホワイトスペースに特化した非常に珍しいデザイン書籍ですので、こういった書籍などを参考に腕を磨くことが大切です。

タイトルとURLをコピーしました