ウェブデザインで大切な空白スペースの効果的な5つの使い方

空白スペース(ホワイトスペース)が、ウェブサイトのユーザエクスペリエンスに与える5つの重要な効果を紹介します。

サイトのキャプチャ

5 Ways How Whitespace Affects The User Experience

下記は各ポイントを意訳したものです。

はじめに:空白スペースの基礎知識

空白スペース(ホワイトスペース)は、ウェブデザインにおいて非常に人気の高いデザイン要素です。この空白スペースは元々は印刷デザインからのもので、「テキストとグラフィックの欠如」を現します。と同時に空白スペースは「空きスペース」以上の役割を果たします。
この空白のスペースというのは、それ以外にもフォントのウェイトやサイズ、テキストの行間、グラフィックの周りのテキストのオフセット、マージンなどを含め、ページの全体的な密度を指します。

ウェブデザインでは、この空白スペースを同じように定義することができます。ホワイトスペースと呼ばれますが、白である必要はありません。空白スペースは形と色によって生じます。
空白スペースが構造を作りだし、意味を成して、ビジターを導くことができます。しかし、空白スペース自身はビジターの注意を引くことはできません。

空白スペースがもたらす、ウェブサイトのユーザエクスペリエンスに与える5つの重要な効果をみてみましょう。

1. 空白スペースがデザインに使いやすさを加える

まず最初に知っておいてほしいのは、空白スペースはデザインをより有用にするのに役立つ重要なデザインの原則であることです。「使いやすい」は、成功しているウェブサイトにとって非常に重要なポイントです。
ビジターのため、ビジターのゴールのために、サイトをデザインすることを忘れないでください。

ビジターはなぜ訪問しますか? ビジターはあなたのサイトで何をしますか?
ウェブサイトのデザインを始める前に、これらの質問に答えられる必要があります。デザインする際に明確な目的をもつと、ビジターにサイトの案内をする効果的な手段として空白スペースを使うことができ、ビジターが探しているものを見つけるために空白スペースをうまく利用することができます。

サイトのキャプチャ

Bree

Breeでは空白スペースを加えることで、最も重要な内容にビジターのフォーカスがあたるようにデザインされています。またこのサイトは非常にクリーンでミニマルで、明確な階層を使ってコンテンツを管理しています。

このページのデザインでは、ハンドバッグの写真、名前、説明文、価格が目立ちます。サイトのメインのナビゲーションなどのエレメントは利用可能ですが、表面にはでないようになっています。

2. 空白スペースがコンテンツに読みやすさを加える

良いユーザビリティで重要なポイントは、コンテンツの読みやすさです。この読みやすさとは、多くの異なる要因に依存します。例えば、あなたが選ぶフォント、フォントのサイズと色、テキストの構造、ハイライト、イメージと小見出しの関係などがあります。そして同時に、空白スペースが読みやすさの重要な役割を果たします。

空白スペースがテキスト要素を整えて、一つの文字からパラグラフへとデザインを定義します。内容に合わせてブレスとして、パラグラフ間にスペースを配置したり、行間をデザインします。

サイトのキャプチャ

WWF

このテキストは非常に読みやすいようにデザインされています。なぜなら読みやすさのためのルールを用いているからです。

空白スペースは前述の通り、白でなくても構いません。コンテンツ間のスペースを意味します。WWFのページでは非常に多くのテキストを使用していますが、詰め込まれているようには見えません。これは空白スペースを使って、ポジティブな読みやすさを与えているためです。具体的には、パラグラフは互いからはっきりと分離されており、2つのカラム間にも十分なスペースが確保されています。そして行間はテキストが読みやすいよう十分にとっています。もちろん、空白スペースがすべてではありません。読みやすいフォント、高いコントラスト、読みやすさと構造化されたテキストもここでは実践されています。

3. 空白スペースがビジターに休憩を与える

わたし達は情報とそれがもたらす選択の渦を扱っています。これは時々、圧倒的な量になることがあります。そんな時に必要なのは、沈黙と休憩です。

ここでのポイントは「シンプリシティ」の単純明快です。世界には無数のウェブサイトがあり、おそらくいくつかは類似しています。休憩を欲しているユーザーを損なっていませんか? デザインをシンプルに保ってください。

空白スペースで最も重要なことは、フォーカスを合わせるために完璧なデザイン要素であることです。あなたのビジターを混乱させないで、最も重要なものを伝えてください。不必要な飾りで注意をそらないようにし、ビジターがゴールにフォーカスを合わせるのを手伝ってください。

サイトのキャプチャ

Dropbox

空白スペースは気を散らす邪魔なものを許しません。ビジターを少数のキーエレメントに注意を引きつけ、落ち着かせる効果を与えます。

Dropboxでは非常にたくさんの空白スペースを用いて、ミニマルなランディングページを作りました。気を散らす邪魔なものは一切なく、するべきことは一つです。このデザインは非常にシンプルで、すがすがしいです。
ページを下にスクロールさせた時に、余分な情報を配置しています。ビジターがもっと多くの情報を探したい時には、これらが役立ちます。

4. 空白スペースがデザインをモダンに見せる

たくさんの空白スペースを使ったシンプルなデザインは、あなたのサイトにユーザビリティを与えるだけでなく、ヴィジュアル的な効果も加えます。ミニマリズムはモダンなスタイルで、多くの空白スペースが機能したデザインは非常にプロフェッショナルで、信頼感を生み出します。

特にEコマースサイトでは、プロダクトに空白スペースを与えると非常に美しく見えます。これは単に見た目の良さを手にいれるだけでなく、ビジターにより多くの注意を引きつけることになります。

サイトのキャプチャ

Rolex

空白スペースを与えたことで、ビジターが一つの要素にフォーカスすることができます。

Rolexはそのブランド自身非常に高価で、特別です。ウェブサイトをデザインする上で、空白スペースを使うことは賢い選択でした。ビジターはRolexに訪問すると、プロダクトがフォーカスの中心に配置されます。画像に伴う若干のテキストがあり、それ以外のデザインは静かで、魅力的といってもよいでしょう。

デザインは非常にバランスがとれており、スカスカのデザインには見えません。腕時計のシャドウは奥行きを引き起こして、ちょっとした立体感を加えています。この繊細なディテールはより価値があるよう見え、プロダクトにより多くのチャンスを与えています。

5. 空白スペースがあなたのデザインに感動を与える

最後になりますが、決して軽視すべきでないこととして、空白スペースがデザインに感動を加えることができます。あえてもう一度言いますが、空白スペースは白である必要はありません。どんな色でも、どんな形・パターンでもOKです。背景画像とまったく同じで、背景の色が感動的な効果を与えることができます。

最近ではスクロールしてパララックスするサイトで、空白スペースを使い、より面白い効果を生み出しているものも見かけます。空白スペースをどこに置くべきか、それがあなたのデザインにどのような影響を与えるか決めてください。

サイトのキャプチャ

Cirque du soleil

空白スペースはわたし達の感情に訴えて、ある特定のことを感じるように誘因することができます。

Cirque du soleilでは空白スペースが魅力的で不思議な形状を作っています。多くの空白スペースを使い、そのスペースをサイトのメインとなるヴィジュアル要素と統合しています。このヴィジュアルはあなたの注意を引きつけ、非常に面白く、魅力的です。

デザインは統一されており、非常に気持ちのいいデザインです。ビジターが何を期待し、それを選択した途端に好奇心を強くするでしょう。

top of page

©2017 coliss