【UXの迷信】ホワイトスペースは無駄?

Zoltán Kollin

Zoltánはウェブアプリケーションやインターネットを愛してやまない、Mito(ブダペストの広告代理店)のUXデザイナーです。

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

Myth #28: White space is wasted space

ホワイトスペースまたはネガティブスペース、つまりデザインやページのレイアウトの隙間や周りにある何もない空間は軽視、あるいは無視されたりすることがよくあります。

多くの人はこれが貴重なスクリーンの場所を無駄にしていると考えるでしょう。しかし、ウェブデザインにおいてホワイトスペースは必要不可欠な要素であり、「受容的ではなく積極的な要素であると考えるべき」なのです1930, Jan Tschicholdより

ホワイトスペースは読みやすさやコンテンツの優先順位づけのためだけにあるのではありません。視覚的なレイアウトと市場での商品のブランドポジショニングに非常に役立っているのです。

ウェブデザインにおけるホワイトスペースの重要性

より読みやすく、理解しやすくなる

ホワイトスペースを有効に使うことを教えるtuts+のチュートリアルでは、「同時に見える文字の量を減らしてより読みやすくする」ことがホワイトスペースの基本的な役割だと指摘しています。乱雑なページは魅力的ではありませんし、ユーザーもそんなページを読みたいとは思わないでしょう。文字が目に見える階層構造で書かれていない場合はなおさらです。ウィチタ州立大学の研究所が行った研究では、ホワイトスペースによって読む速さは遅くなるものの、内容がより理解できるようになることが示されています。

UI要素の優先順位づけが出来る

Luke WroblewskiDeveloping the Invisibleで次のように指摘しています。「ホワイトスペースは往々にして、内容と同じくらい大切です。なぜなら、そういったインターフェースの目に見えない要素によって、最も大切なものは何か、何が関係しているのか、そして注意すべきは何かが伝わるからです」

ページ上でユーザーのガイドの役割を果たす

Carla Roseによると、ホワイトスペースはコンテンツの各要素に焦点をあてることが出来るので、「ユーザーをある地点から次の地点へと次々に導いていくことが出来る」と言います。ホワイトスペースの極めて重要な役割は「デザイナーの意のままにページの閲覧者を導く」ことであると、Jason Santa Mariaホワイトスペースに関する記事の中で述べています。

精巧さや優雅さを引き立たせる

惜しみなくホワイトスペースを使うことで、望ましい形でのブランドポジショニングも実現しやすくなります。A List Apartcomprehensive article about white spaceを書き、ホワイトスペースが「高級なブランドとしての精巧さ、優雅さといったイメージを構築することも出来ると主張しています。例えば化粧品の宣伝材料には、質の高さを際立たせるためにホワイトスペースを広範囲にわたって使用されています。

バランスよく、調和のとれたレイアウトに不可欠である

「何もないスペースは、ページ上のあらゆる表現が占めるスペースと同じくらいに重要です。何もないスペースでもページの目的に一役買ったり、レイアウトの視覚的な統合性をサポートしたりするからです」Jason Santa Mariaより

ホワイトスペースの種類

・図表や画像の周囲のスペース

・余白や埋め込み、側面など

・行間や文字の間のスペース

・列の間のスペース

ホワイトスペースをふんだんに使った綺麗なウェブサイト

http://www.madebysofa.com/

http://www.informationarchitects.jp/en/

http://thisismedium.com/

http://checkoutapp.com/

・よりよい例はこちらをご覧ください。

 A Showcase of Clean White Web Designs

 Great Uses Of White Space

私達のウェブサイトがのようにホワイトスペースを使っているかも見てみてください。

ホワイトスペースがなければ人の生活はどうなるか

White Space Eliminator(=ホワイトスペース除去装置)をチェックしてみてください!


イベント