December 18.2019

ホワイトスペースが生み出す効果|デザインにおける余白活用の重要性と使い方

ホワイトスペース

こんにちは! デザイナーのアローです。

デザインをするうえで必要不可欠なのが、デザイン上の何もない空間、すなわち「ホワイトスペース(余白)」です。この空間をうまく活用することでユーザーのルートを作り、効果的にコンテンツへと誘導することが出来ます。

今回は、WEBデザインにおけるホワイトスペースの種類と生み出す効果について紹介したいと思います。

ホワイトスペースの種類

【マイクロスペース(Micro space)】

要素間の小さなホワイトスペースのことをいいます。マージンとパディングが該当します。

【マクロスペース(Macro space)】

2つ以上の主要な要素同士の大きな余白のことを指します。文章や画像間に使用されるものです。

【アクティブスペース(Active space)】

ユーザーの視線を誘導するなどの目的をもち、強調や構成に使用されるスペースのことを指します。デザインや可読性に大きく影響するスペースです。

【パッシブスペース(Passive space)】

行間や文字間、パンクズなどの小さな余白のことを指します。

ホワイトスペースの効果1.強調

十分なホワイトスペースを取ることでユーザーの視線が瞬時に集まり、特定の要素を強調することができます。

ユーザーは、細かく全ての情報を読む訳ではありません。そのため、もしも、要素が詰まっていたのであれば、重要な情報が埋もれてしまうかもしれません!

重要な要素が確実にユーザーの目に留まるように、余白を生かしたデザインにしたほうがいいでしょう。

【参考サイト】

グーグル株式会社

Google
https://www.google.com/

ユーザーにとって最重要コンテンツである検索窓を、大胆に中央に設置し、その他の情報をさり気なく右上に集約しています。

ユーザーの視線が中央に集まり、一瞬でどのような目的を持つページなのかを理解することができるのです。

forlife-kitchen

forlife-kitchen
http://forlife-kitchen.com/

メインビジュアルの左右に余白を取っています。

ヘッダーも薄いグレーにすることで、より視線がメインビジュアルに集中しやすく計算されて作られています。

NAOTO FUKUSAWA DESIGN

NAOTO FUKUSAWA DESIGN
http://naotofukasawa.com/

メインビジュアルにバランスよく余白を持たせ、大きめに配置することでユーザーにインパクトを与えています。

また、メインビジュアルにゆっくりとした動きを持たせることで、より印象に残るサイトとなっています。

ホワイトスペースの効果2.可読性

ユーザーは出来るだけ素早く簡単に、欲しい情報を得たいと思っています。そのため、デザインする際はページの「可読性(文章の読みやすさ)」を上げ、出来るだけユーザーのストレスがかからないようにすることが求められているのです。

たとえば、以下のパターンAとパターンBの場合、文字と文字の間、行間の距離感の違いはどのように感じられますか?

ホワイトスペース

パターンBのほうが、ホワイトスペースが適度に施されている分、一目でストレスなく情報を読み取ることができるかと思います。

このように、あえてホワイトスペースを作ることで、ユーザーの可読性を上げ、必要な情報に目が止まりやすくすれば、比例してコンテンツの魅力も上がると言えますね。

ホワイトスペースの効果3.整理

ホワイトスペース
視覚的構造を整理することで、ユーザーはコンテンツを読むことに集中することが出来ます。

また、グルーピングをして一貫した余白を取ることで、統一感のあるバランスの良いデザインに仕上がるため、サイトの印象として「高級感」や「エレガントさ」などをユーザーに与えることも可能です。

作業上では、マージンやパディングの調整もしやすくなり、デザイナーとコーダーのコミュニケーションにも活かすことが出来るでしょう。

余白でコンテンツの魅力を引き立たせよう!

Webサイトにおいて、コンテンツの内容は重要です。しかし、ホワイトスペース(余白)は、そのコンテンツを読み進める流れを作る重要な要素であり、押さえておくべきマストポイントと言えます!

出来るだけユーザーにストレスを与えない「ユーザビリティの高いデザイン」を目指し、ぜひ意識してホワイトスペースを取り入れてみてください。