洗練されたWebデザインに欠かせない余白「ホワイトスペース」を活用しよう

洗練されたWebデザインに欠かせない余白「ホワイトスペース」を活用しよう

デジタルメディアや屋外広告、オンライン広告が溢れるなか、多くの人が注目するコンテンツをつくるためには、情報を正しく整理・デザインしなければなりません。

ひと目で必要な情報が知れて、消費者を惹きつけるコンテンツを作る上で有効な手法のひとつが、ホワイトスペースです。

今回は、その必要性や由来に迫ります。

ホワイトスペースのベストプラクティス

スペースを使用する方法と、それがどのように強力であるかを知るためにいくつかのブランドが実践している事例を見てみましょう。

White space best practices

Oculusのランディングページは、商品を使う男性の写真と最低限の文字情報のみで構成されています。

ビジュアルを際立たせ、購入意欲を高めた事例です。

ETQ

衣類の電子商取引ブランド ETQの例をみてみましょう。白バックに商品の切り抜き画像のみがレイアウトされています。

不要な情報を減らすことで、ユーザーの視線は製品に集中します。そして同時に、高級感や高品質を感じさせることもできます。

ホワイトスペースを使うメリット

ホワイトスペースは構図の中に含まれる要素間のスペースです。どのように使い、どのような効果を発揮するのか、まとめました。

What you can achieve with negative space

1. 内容が把握しやすくなる

ホワイトスペースを用いてバランスのとれた配置をすることで、全体の見通しが改善されWebサイトの内容について把握することが簡単になります。
ユーザーは自分の欲しい情報を簡単に見つけられるため、ユーザーのストレスが軽減します。

2. 読みやすさを向上させる

行間や字間を適切にすると、内容が読みやすくなります。読みにくいコンテンツはユーザーの離脱にも繋がるので、適度な余白をつくることは大切なポイントです。

3. ユーザーインターフェイス改善

不要な要素を減らすことでユーザーインターフェイスを向上させます。

迷惑メールやポップアップ、バナーのように不必要な視覚効果を取り除くのも、ホワイトスペースを生み出す方法のひとつです。

4.高級感を与える

要素が多いと、チープな印象をもたせてしまいますが、ホワイトスペースを使えば、WebサイトをWebサイトを軽く、エレガントに魅せることができます。

ホワイトスペースの種類

次は実際に使用している例を見てみましょう。
ホワイトスペースは、いくつかの種類に分けられます。

マクロスペース

Macro space

マクロスペースは、2種類以上の要素が存在する場合に使う手法。強調したいオブジェクトの周辺にレイアウトした大きなスペースをさします。優先的に注目して欲しい部分が明確にわかるので、サイトのフローを表現するのに役立ちます。

マイクロスペース

Micro space

マイクロスペースは要素間の小さなスペースを意味します。

文字間や行間、またはパディングやマージンのようなリズムを含んだスペースがそれに該当します。

アクティブスペース

アクティブスペースは、ユーザーの視線を誘導させる意図で、際立たせたいオブジェクトの周囲に設けられたスペースを意味します。
また、ユーザーの認識を集めるだけでなく可視性も向上させます。

パッシブスペース

パッシブスペースとは、バナーの太さや字間など、小さな余白を意味します。
主に、可読性を向上するために使用します。
大胆な余白を使ってデザインにメリハリをだすアクティブスペースばかりに注力しがちですが、美しいパッシブスペースこそ見やすさを担保します。

そもそもホワイトスペースとは?

ホワイトスペースとは、デザイン上に何も配置されていない余白のこと。意図的なレイアウトによる空白や、字間の空き具合などをさします。

文字通りの白いスペースである必要はなく、ユーザにとって重要な意味を持たない空間・余白を意味し、主要な要素を目立たせる役割をもっています。その効用を発揮させるためには、要素にあらかじめ順位付けを定めておく必要があります。

ホワイトスペースを使用したレイアウトは、文字やコンテンツを際立たせ読みやすくするだけでなく、コンテンツのトーンも作り出します。

COS online store
▲例:COS online store は「高品質」の印象付けに、ホワイトスペースを活用しました。

ホワイトスペースのはじまり

ホワイトスペースの歴史は1920年代にまで遡ります。
ドイツのタイポグラファー・カリグラファーのヤン・チヒョルトによる著書『Die neue Typographie』がきっかけとなりました。

同著で、ホワイトスペースは次のように定義されました。

  • 要素の非対称なデザイン
  • 階層によって設計されたコンテンツ
  • 意図的なホワイトスペースの利用
  • フォントは『サンセリフ』だけを使用する

彼が提唱した原則が発端で、ホワイトスペースの考え方が生まれたのです。

ベアトリス・ウォード(Beatrice Warde)のゴブレット

ここで、ホワイトスペースの手法を発展させてきた事例をひとつ紹介します。

1930年代にはアメリカのタイポグラファーであるベアトリス・ウォード(Beatrice Warde)が、「クリスタルゴブレット」というエッセイでホワイトスペースに影響を与えた概念について書いています。

エッセイには、次のような記述がありました。

金色で豪華に装飾されたのゴブレットと、ごくシンプルなワイングラスが置いてあった場合、本当のワイン好きなら透明なものを選ぶでしょう。(意訳)

「透明性(ホワイトスペース)」を意図的に使うことで、本当に売りたいものを強調できるのです。ワインを売る場合、美しく見せるべきはワインそのものであって、グラスではないのです。

ウォードはこのメタファー印刷物やタイポグラフィに対して応用しています。

チヒョルトとウォードの2人提唱してきたことは、現在の認知科学でも説明することができます。

The Crystal Goblet

まとめ

ホワイトスペースを用いたデザインは、新しくも革命的でもないと感じるかもしれませんが、その魅力を見直せたのでは無いでしょうか。

場合によっては要素がもりだくさんのユーザーインターフェイスが魅力的な場合もあるかもしれません。

必要に応じて、重要な要素だけを選別し明確なメッセージとWebサイト上でユーザー誘導するのがデザイナーの役割です。

(翻訳:Yuri Tanaka)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ