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

Post on:2013年8月30日

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

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

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

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

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

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

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

Bree

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

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

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

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

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

WWF

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

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

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

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

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

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

Dropbox

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

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