デザインやレイアウトを考える際に、意外と軽視されがちなホワイトスペース。
あなたはこのホワイトスペースを、どれだけ有効に使えているでしょうか？
そこで今回は、ホワイトスペースの重要性や効果的な使い方などを紹介していきます。
CONTENTS
ホワイトスペースとは？
まずは、「ホワイトスペース」についておさえておきましょう。あなたは「ホワイトスペース」という言葉を聞いたことがあるでしょうか？
ホワイトスペースとは、余白や空白という意味を示しています。（ikesai.comより）
一般的には、何も存在しないスペースを「ホワイトスペース」と呼んでいます。
つまり、ホワイトではなく、赤や青などの色がついていても空白であれば「ホワイトスペース」になります。
ふつうに見れば、ただの余白でしかありません。ですが、このホワイトスペースをうまく使えるようになると、見た目がスッキリとして、ユーザが得たい情報をすぐに得ることもできるようになります。
だからこそ、デザインをする際にはホワイトスペースが重要視されています。
また、一般的なグラフィックデザインにおいて一番面積の大きい要素はホワイトスペースだと言われています。
ホワイトスペースが与える重要な効果とは？
ホワイトスペースは、Webサイトのユーザエクスペリエンスに与える重要な効果があります。その重要な効果として挙げられている5つを紹介していきます。
その重要な効果が、ホワイトスペースの重要性につながってくるのです。
1．より読みやすく、理解しやすくなる
ホワイトスペースの重要な役割として、「同時に見える文字の量を減らしてより読みやすくする」ことが挙げられています。
ホワイトスペースによって読む速さは遅くなりますが、内容がより理解できるようになるという研究結果も出ています。
より読みやすく、理解しやすくするために、Webサイトのデザインを考える前に以下のことを考えておきましょう。
- ユーザはなぜそのサイトを見るのか？
- ユーザがそのサイトで何をするのか？
これを考えられるようになると、ユーザに対してサイトの案内をする効果的な手段としてホワイトスペースが使えるようになります。
そして、ビジターが探しているものを見つけやすくするためにホワイトスペースを有効活用できるようになります。
2．ホワイトスペースがコンテンツに読みやすさを加える
ホワイトスペースによって、テキスト要素が整えられ、1つの文字からパラグラフへとデザインを定義することができます。
内容に合わせてスペースを配置し、行間をデザインできます。
3．ホワイトスペースがビジターに休憩を与える
私たちは、1つの情報を得ようとすると時々圧倒的な情報量になってしまうことがあります。そんなときに必要となるのが沈黙と休憩になります。
ホワイトスペースで一番大事なのは、「ユーザを混乱させずに最も重要なことをシンプルに伝える」ことです。
ユーザがゴールまで迷うことなく進めるように、手助けをしていきましょう。
4．空白スペースによってデザインをモダンに見せる
ホワイトスペースをうまく使ったシンプルなデザインは、使いやすさだけでなく、信頼性も与えています。
ECサイトの商品画像の部分にホワイトスペースを入れることで、商品を美しく見せ、ユーザに多くの注意を引き付けています。
5．ホワイトスペースがデザインに感動を与える
ホワイトスペースによって、デザインに対して感動を与えることができます。
ホワイトスペースが、私たちの感情に訴えかけてある特定のことを感じさせるようにすることもできます。
ホワイトスペースの種類とは？
ホワイトスペースといっても、与える効果が場合によって異なることは理解していただけたと思います。そのうえで、ホワイトスペースについても触れていきましょう。
1．マクロスペース（Macro space）
マクロスペースとは、2つ以上の要素間を取り巻く、大きなスペースのことです。
このマクロスペースを操作することで、要素間に重要度の順番が生まれ、ホームページに流れが生まれてきます。
2．マイクロスペース（Micro space）
マイクロスペースとは、要素間における小さな余白になります。
例えば、CSSなどでレイアウトの設定を行う際に用いる「Padding」や「Margin」などが挙げられます。
このスペースによって、デザインにリズムが生まれてユーザに休憩を与えることができます。
3．アクティブスペース（Active space）
アクティブスペースとは、余白をとってオブジェクトに注目を与えることを指します。このスペースを活用することで、オブジェクトをより目立たせることができます。
4．パッシブスペース（Passive space）
パッシブスペースとは、要素間の小さなスペースを指します。
このスペースを活用することで、発見しやすいナビゲーションを設置し、読みやすくすることができます。
ホワイトスペースをうまく活用しているWebサイトとは？
ここまでホワイトスペースについて説明してきましたが、実際にホワイトスペースが意識されたサイトを見てみないとイメージがわきにくいと思います。
そこで、ホワイトスペースが上手く活用されているWebサイトをいくつか紹介します。
WE WERE SOFA
WWF
https://www.worldwildlife.org/species/tiger
A-net
Checkout
ホワイトスペースに関するまとめ
以上、いかがでしたでしょうか？
今回はホワイトスペースについてお伝えしてきました。ホワイトスペースと呼ばれているからといって、ホワイトにこだわりすぎないでくださいね。
ユーザが理解しやすく、ユーザーに読みやすくモダンな印象を与えるレイアウト、使いやすいWebサイトを目指してデザインを考えていくのがおすすめです。
最後まで読んでいただき、ありがとうございました。
