デザインやレイアウトを考える際に、意外と軽視されがちなホワイトスペース。あなたはこのホワイトスペースをどれだけ有効に使えているでしょうか？
今回は、ホワイトスペースの重要性や効果的な使い方などを紹介していきます。
ホワイトスペースとは？
まずは、「ホワイトスペース」についておさえておきましょう。あなたは「ホワイトスペース」という言葉を聞いたことがあるでしょうか？
ホワイトスペースとは、余白や空白という意味を示しています。（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サイトを目指してデザインを考えていきましょう。
最後まで読んでいただき、ありがとうございました。
オンラインマンツーマンならCodeCamp
CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。
プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。
オンラインテキストを自習形式ならTechAcademy
基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。
TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。
