ホワイトスペース(余白)を活かしたスマートなWebデザインを。事例13選

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

ファーストビューで必要な情報を得ることができ、かつ消費者を惹きつけるコンテンツを作る際に有効な手法として、「余白（ホワイトスペース）」が注目されています。

今回はホワイトスペースの意味や種類、メリット、実際の事例13選をご紹介します。

ホワイトスペースとは？

ホワイトスペースとは、デザイン上に何も配置されていない「余白」のこと。意図的なレイアウトによる空白や、字間の空き具合などをさします。文字通りの「白いスペース」である必要はなく、シンプルな空間・余白を意味するのです。

ホワイトスペースは、主要な要素を目立たせる役割をもっています。その効用を発揮させるためには、要素にあらかじめ順位付けを定めておく必要があるでしょう。

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

▲COS online store は「高品質」というイメージを与えるため、ホワイトスペースを活用した

ホワイトスペースの起源

ホワイトスペースの起源は1920〜30年代にまで遡ります。

1928年：ヤン・チヒョルト（Jan Tschichold）のホワイトスペース

ドイツのタイポグラファー・カリグラファーのヤン・チヒョルト（Jan Tschichold）による1928年の著書『Die neue Typographie』をきっかけに、ホワイトスペースの概念は広まったとされます。

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

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

1930年：ベアトリス・ウォード（Beatrice Warde）のゴブレット

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

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

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

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

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

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

そしてチヒョルトとウォードの2人が提唱してきたホワイトスペースの考え方は、現代のWebデザインでも有効なのです。

ホワイトスペースを活かしたWebデザイン13選

Webデザインに多くの要素を詰め込みすぎると、逆にユーザーを混乱させてしまいます。

今回はコンテンツを絶妙に区切り、効果的にホワイトスペースを取り入れたWebデザインを13事例ご紹介します。

1. Beyond Theory

『Beyond Theory』のWebデザインは極めてシンプル。

余白がヒーローエリアの大部分を占めており、タイトルに視線が集まるようデザインされています。

Beyond Theory

2. Heartbeat Labs

キャッチフレーズやナビゲーションのみで、ヒーローエリアが構成されています。

先述の『Beyond Theory』と同じくシンプルで、余白によるギャップを活かしたWebデザインです。

Heartbeat Labs

3. Olio Intini

画像とキャッチフレーズを中央に配置し、両側に大きな余白を設けたWebデザイン。

画面の中央部分に注意を向けさせつつ、デザインの魅力も高めています。

Olio Intini

4. Polar Bears Pools

『Olio Intini』と同じく、左右に余白を設けたWebデザイン。

ヒーローエリア以外の部分にも余白が効果的に使われており、ブロック型のコンテンツが配置されています。ホワイトスペースなしでは成立しない、魅力的なWebデザインです。

Polar Bears Pools

5. Archi Graphi

大きなホワイトスペースと縦書きの文字がデザインに溶け込んでいます。

ヘッダー部分にもホワイトスペースがあるところがポイントです。

Archi Graphi

6. Azura

『Archi Graphi』と同じく、縦書きの文字とホワイトスペースを組み合わせています。流行の縦書き文字とホワイトスペースの相性が良いことがわかりますね。

こちらは文字だけでなく、背景に縦線も採用。バランスのとれた魅力的なデザインです。

Azura

7. Tappezzeria Novecento

多くのコンテンツを、大きなホワイトスペースによってうまく整理しています。

洗練されたWebデザインですが、特別なものは使っていません。レイアウトを工夫して、ユニークなデザインを実現しています。

Tappezzeria Novecento

8. Gucci Gift

画像ではなくホワイトスペースをインタラクティブにするという、大胆なWebデザインを採用。

ホワイトスペースを遊び場として、ユーザーに提供しています。

Gucci Gift

9. Spindle

小さめの画像、縦書きのナビゲーション、そしてロゴで構成された、ミニマルで現代的なヒーローエリア。さわやかでパリッとした印象です。

Spindle

10. Kolaps

インタラクティブなアニメーションとホワイトスペースが、お互いを補完し合っています。

Kolaps

11. Editions – Jordan Sowers

左右に配置した大きなホワイトスペースを、デザインとしてきちんと成立させています。ミニマルで広々とした印象です。

Editions

12. Oculus

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

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

Oculus

13. ETQ

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

不要な情報を減らすことで、ユーザーの視線は商品に集中します。同時に高級感・高品質といったイメージも与えられるのです。

ETQ

ホワイトスペースを取り入れるメリット

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

Webサイトの内容を把握しやすくなる

ホワイトスペースを用いてバランスのとれた配置をすることで、全体の見通しが改善され、Webサイトの内容を一目で把握できるようになります。

ユーザーは自分の欲しい情報を簡単に見つけられるため、ストレスを軽減させられます。

読みやすさを向上させる

行間や字間を広く取ることで、読みやすさが向上します。

読みにくいコンテンツはユーザーの離脱にも繋がるので、適度な余白をつくることは大切です。

UXを向上させる

不要な要素を減らすことで、UX（ユーザー体験）を向上させられます。

余計なポップアップやバナーのような、不必要な視覚効果を取り除くだけでも、ホワイトスペースの効果を実感できるでしょう。

高級感を与える

要素が多いと、チープな印象をもたせてしまいます。

ホワイトスペースを広く取ることで、Webサイトをエレガントに魅せることができるのです。

ホワイトスペースの種類

ホワイトスペースは、いくつかの種類に分けられます。

マクロスペース

マクロスペーストは、強調したいオブジェクトの周辺に、画面全体を使って広くホワイトスペースを取ることを指します。ヒーローエリアなどで用いられることが多いです。

特定のコンテンツを一目で伝えられるため、Webサイトのコンセプトやメッセージを表現するのに役立ちます。

マイクロスペース

マイクロスペースとは、要素間の小さなホワイトスペースを意味します。文字間や行間、またはパディングやマージンなどがそれに該当します。

コンテンツを読むときの細かなリズムに影響する、重要な要素です。

アクティブスペース

アクティブスペースとは、ユーザーの視線を誘導させる意図をもったホワイトスペースです。際立たせたいオブジェクトの周囲にホワイトスペースを設けます。

ユーザーの注目を集めるだけでなく、可読性を高める効果もあるでしょう。

パッシブスペース

パッシブスペースとは、バナーの太さや字間など、小さな余白を意味します。おもに可読性を向上させるために使用します。

大胆な余白を使ってデザインにメリハリをだすアクティブスペースばかり注力されがちですが、美しいパッシブスペースこそWebデザインの真髄です。

まとめ

ホワイトスペースを用いたWebデザインは、新しくも革命的でもありません。昔から変わらぬ効果を発揮し続ける、不変のデザインなのです。

もちろん場合によっては、要素が盛りだくさんのWebデザインの方が魅力的なこともあるでしょう。必要に応じて目立たせたいコンテンツを選別し、適切にホワイトスペースを活用するのがデザイナーの役割です。

（原文：Jakub Paniączyk 　翻訳：Yuri Tanaka, Asuka Nakajima　参考：Room to Breathe: Using Whitespace in the Hero Area ）

こちらもおすすめ！▼