Webサイトの「空白」がデザインに与える3つの効果

Tomer Lerner

Tomerは、受賞歴のあるデザイナーであり、プロのデザイナー向けのコードフリーWebサイトデザインプラットフォームWebydoのUXマネージャーです。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

How to Effectively Use Whitespace in Web Design

完成したデザインを見つめて「何かが足りない」と感じたことはありませんか? より具体的に言えば、デザインが「空っぽだ」、「散らかりすぎだ」という結論に達したことはないでしょうか? 私たちデザイナーにとって、このような状態に陥らないよう、制作物に十分な時間を費やすのは難しいことです。

このような現実は衝撃的ではないでしょう。結局のところ、デザインのもっとも基本的な原則は、クリエイティブに要素を取り除き空白を作ることに関連しています。しかし、この作業は私たちの仕事の中核であるにもかかわらず、もっとも難しい作業の1つです。どのようにすれば空白を効果的に利用できるでしょうか?

空白の本当の意味

空白を「デザインの間のスペース」と考えていませんか? デザインの退屈な部分を考慮するうえで、この考え方は広く普及していますが、これは完全に間違った認識です。空白はただデザインの要素の間を埋めるものではなく、空白自体がきわめて重要なデザイン要素として働きます。

空白は、レンガの間のモルタルや、ステンドグラスにおける接着剤のようなものです。私たちの目はコンテンツ(レンガやガラス)を重視してしまいがちですが、コンテンツをまとめ、デザインの全体的な流れを形成するものはその間に存在します。

空白スペースの効果的な使用例:Beatbox Academy.

接着剤を使わないモザイク画のように、空白のないデザインは単なるカラフルな色の寄せ集めでしかありません。デザインにおいて「要素がない要素」の重要性を理解すれば、空白を最大限に活用できるようになります。

焦点

デザインにおいて空白の重要性を意識できたら、それをどのように利用すれば良いでしょうか?

ちょっとした演習から始めてみましょう。お気に入りのブラウザで新しいタブを開いて、google.comを見てください。最初に目に入るものは何でしょうか? 鮮やかなGoogleのロゴではありませんか? そのロゴはどこにあったでしょうか? 目線が最初に向かうとされる、画面の上端では決してありませんでした。では、どのようにして視線は画面の中央に向けられたのでしょうか?

空白の効果的な使用例:Google

ご想像の通り、空白によってです。Googleは空白をふんだんに活用することで、ミニマルデザインの本質を活かせるページの中心に、自然と焦点を絞っています。空白は、訪問者の目線を導くもっとも簡単な方法の1つです。

空白を活用すれば、レイアウトに自然な焦点を作り出すことができます。その地点にユーザーの注目と意識を集めることで、重要なコンテンツをそこに配置し、メッセージをより効果的に伝えることができるのです。

整理

ユーザーの注目を直接集められる効果に加えて、空白を活用すれば、デザイナーはデザインの異なる要素を簡単にまとめることができます。文字の壁を読みやすい段落に分けるのと同じように、空白はデザインのコンテンツを整理するのに非常に効果的です。

空白の効果的な使用例:Bagigia

空白を使ってデザインを整理したいときに役立つヒントとして、一貫性を保つことが挙げられます。空白を使用する際にコンテンツを分類することを念頭に置くと、このヒントは非常に役立つでしょう。マージンやセクション、テキスト、グラフィック要素などに、一貫した空白を適用してください。

空白を使った構成のもっとも優れた側面の1つは、簡単に調整でき、デザインの広範囲に影響を与えることができる点です。そのため、気軽に試してみてください。

強調

ユーザーの視線を誘導する驚異的な能力を再び活用することで、空白はデザインの特定の要素を際立たせることができます。前章で述べた整理を目的とした一貫性に基づいて、普遍的なデザインからクリエイティブに脱却することで、瞬時に注目を集められるようになります。

空白スペースの効果的な使用例:Cultured Code

デザインに空白の効果を定着させることで、ユーザーの視点を瞬時にサイトに慣れさせることができます。空白がデザインを誘導し続けるため、それらが一貫していれば、微細な要素でも自然に目立たせることができるのです。

この効果の好例であり、簡単に実装できる方法として、強調したいタイトルの文字送りをわずかに変更してみてください。それを習得したら、デザインにあるセクションの要素の間隔などでも微細な変更を実践してみましょう。

必ずしも白である必要はない

上記のヒントは、どれもユーザーの視線を誘導することに関連しています。つまり、空白が適しているのはこの領域に尽きるのです。ところで、空白と呼ばれているからといって、文字通り白である必要はありません。デザインにおいて主な要素の間のスペースに使用する色を制限する規則はありません。

空白の効果的な使用例: Huge Inc

わかりやすい実践例は、シングルページというデザイントレンドで理解することができます。コンテンツを1ページのみに委ねる場合、効果的に空白を活用することは、焦点、構成、強調というすべての側面において決定的に重要です。

コンテンツのかたまりは、以上のようなプロセスで継続的にデザインされることが多いです。単にスペースの色を変更するだけでも、これまでに説明したデザインにおける3つの領域を壊さずに、狭いスペースにあるコンテンツを一新させることができるでしょう。

この記事のヒントを参考に、新しい視点で空白を活用していただけたら幸いです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて