はじめに石版、そしてパピルスの巻き物、紙が生まれました。その後、コンピュータの画面とタブレットが登場しました。ページを表示するための技術が進化すると、デザイナーの仕事として残っているのはコンテンツを見やすく整理することです。しかし、どうするのが一番いいのでしょう?

この問いはますます重要度を増しています。レスポンシブなフレームワークのせいで、デザイナーは多種多様なページを一度に考慮しなくてはならないからです。密度の高いテキストと閲覧される時間の短さに直面して、デザイナーは最も重要な情報に読者の目を導くための 6 原則を確立しました。

これから紹介する視覚的階層の6原則は、パンフレットからアプリにいたるまで、読んでよかったとエンドユーザが思えるデザインを作り上げるのに役立ちます。

tablets

左:粘土板(Wikipedia)、右:iPad(Apple

1. ページを流し読みする時のパターン

すべての文化において文書は上から下に読み進みますし、またほとんどの文化では左から右に読みます。これはページデザインにおいて重要な知識ですが、デザインの仕事はもっと複雑だと、デザイナーは知っています。

最近の研究では、人はページをじっくり読む前に、それが関心が持てるものかどうかを知るために流し読みをする、とされています。流し読みのパターンは、”F”か”Z”のどちらかの形を取る傾向があり、この傾向をあなたのデザインに生かすこともできます。

F字パターンは、昔からよくあるタイプの、テキストの多い記事やブログ記事のページに使われます。読者は、左揃えになっている見出しや冒頭の主題文に面白そうなキーワードがないか探しながら、ページの左側を下へと流し読みしていき、面白いものを見つけたら止まって(右方向に) 読みます。このときの目の動きがFのような形になるのです(Eの形や横棒に近くなることもありますが、「F」が定着しています)。

f_reading_pattern_eyetracking

ヒートマップ: Nielsen Norman Group

このパターンはどう活用すればいいのでしょうか? それは、重要な情報を左揃えにし、太字の短い見出しや箇条書き、その他の注意を引く仕掛けを使って、段落分けをするのです。

一方、Z字パターンは広告やウェブサイト等、情報が必ずしも段落のかたまりになっているわけではないページで使われます。読者はまず、重要な情報がある場合が多いページの上部を流し読みし、次に左下の角へと対角線を結ぶように目線を動かし、そしてページの下部をまた流し読みします。

3

tuts+より

ウェブデザイナーは通常、一番重要な情報を角に配置し、他の大切な情報をページの上部と下部に置き、対角線でつなぐことで、しっかりと読者の目線の動きに沿うように自分のページを構築しています。下の2010 Buildカンファレンスのデザインでは、ロゴ(左上)や「今すぐ登録」ボタン(右上)、登壇者リスト(下部)を含む重要な要素のすべてがZ字パターンのスイートスポットに配置されています。

build

ウェブサイト:Build

2. 大きさ

大きさについてはごく簡単です。人はより大きいものを最初に読みます。下のYoung Vic劇場の広告を見た時、あなたの目に“CRACKING”より先に“PERFORMANCE”が飛び込んできたとしたら、すぐに知覚心理学者に連絡を取るべきです。希少な例外として実験対象になり、結構な額のお金を手にできるでしょう。

cracking

ポスター:Rebecca Foster

興味深いのは、大きいものを最初に読む傾向は「上から下」と言うルールを事実上うわまわるほどに強力だということです。上の例では、“CRACKING”は“Time to act”を圧倒しています。より大きく、しかも左にあるからです(ですので「左から右」ルールも効いていると言えます) 。しかし、下の人権キャンペーン2012の年次報告書(デザインはColumn Five Media)では、 大きく書かれた“FIGHTING FOR EQUALITY ON THE CAMPAIGN TRAIL”がすぐ上の“ELECTION 2012”よりも先に目に入ります。

print-mag

年次レポート: Column Five

“ELECTION 2012”は、情報の順序としては最上位です。この情報によって、下に続く情報の全般的な内容がわかるからです。しかしデザイナーは、記事の見出しのほうが読者の興味をより強く引くと判断し、その部分を最初に読んでもらうためにサイズを調整したのです。

3. 余白とテクスチャ

注意を引くためのもう一つの方法は、コンテンツが十分に息ができるスペースを作ることです。ボタンのまわりに多く余白が取られていたり、連続したテキストでも行間がたっぷり取られていたりすると、これらの要素は読者にとって、より見やすくなります。

下の画像(DrawtoClickのウェブサイトの一部) を見るとわかるように、余白を取ることはサイズ調整の代わりにもなり、また付加的なサイズ調整にもなる、簡潔で美しい方法です。

下図では、“Notre agence vous accompagne …”というセールスポイントの部分は大変小さなフォントになっていますが、過剰なほどの白いスペースで囲むことで、重要さを示しています。ページ下部では “Le Compendre”、“Le Réaliser”、“Le Partager”といった語句が枠でまわりの余白から隔てられ、ますますくっきりと強調されています。

concept-agency

ウェブサイト:Draw to Click

視覚的階層における「テクスチャ」の話をしている時は、絵画における質感の効果のことを言っているのではありません。この種の「テクスチャ」はそれのみならず、配置、余白のパターン、テキスト、その他のページ細部といった全体的なものを指しています。Bright Pinkによる下のデザインは、この概念を説明するのによい例です。

sports

ポスター:Bright Pink(via Smashing Magazine

最初の画像では、“SPORTS”という単語は“BADMINTON”よりも階層が上です。高い位置にあり、文字も大きくて太いからです。2番目の画像では、2つの単語はだいたい同等になりました。“BADMINTON”を強調し、独自の空間を作った黒い長方形のおかげです。3番目の画像では、背景の落書きは“SPORTS”の空間にはかかっていますが“BADMINTON”にはかかっていません。その結果、階層が逆転し、“BADMINTON”は最上位になりました。このような成り行きを正確に予測するのは難しいので、デザイナーは「テクスチャ」に関する全体的な感覚がもたらすものだとしています。

4. 書体のウェイトと組み合わせ

書体の選定は視覚的階層を確立する際の決め手です。 書体の特性の中で最も重要なのはウェイト、つまり文字の描線の太さとスタイルです。セリフとサンセリフがいい例です。イタリックにするなどの修正も視覚的階層に関わってきます。

下のThe Tea Factoryのウェブデザインにおいて、単語の視覚的階層の順位に、書体がどのように影響を与えているか注目してください。“The perfect TEAS to keep you warm”が注意を引くべき箇所ですが、文字の配置に加えて書体のウェイトやイタリック処理で違いを出すことで、直線的な感じは控えめに、とても生き生きとした印象を作り上げています。“See our selection”という呼び掛けは、大きさや余白の調整によって、上のテキストよりも特に強調されています。

tea-factory

ブランディング: The Tea Factory

時には、どれも同じように緊急性の高い情報を寄せ集めて提示するのが目標となることもあるでしょう。全部を平等に扱うために同じサイズ・同じウェイトで、と処理すると、単調なデザインにも見えてしまいます。下の雑誌、Trendiの表紙のように、異なるフォントを組み合わせて使うことは、単調さを避ける方法のひとつです。この例では、ページの縁に沿って配置された5つのティザーはすべて階層が同じですが、メディウムのセリフと背の高いライトのサンセリフ、といったうまい組み合わせを切り替えて使うことで、バラエティを持たせています。

trendi

雑誌の表紙: Trendi(via The Kasper Stromman Design Blog

5. 色と色調

もうひとつ、考えるまでもなく明白なことがあります。明るい色は落ち着いた色やグレースケールの中に置くと目立つ、ということです。一方で、淡い色調はぼんやりした感じになるため、深くて濃い色調より階層が下になります。Where They Atのウェブサイトでは、白黒のグリッドの中に黄色のハイライトの部分と色の付いた明るい部分を配置して、劇的な効果を生んでいます。

Screen Shot 2014-06-09 at 12.10.15 PM

ウェブサイト:Where They At

The Guggenheimのウェブサイトでは、重要な情報、例えば美術館の場所や現在開催中の展覧会の一覧、特別展などを強調するために、色を使っています。

Screen Shot 2014-06-06 at 7.29.32 PM

ウェブサイト:Guggenheim Museum

一方、ホイットニー美術館のウェブサイトは、フォントやウェイト、トーンは単一ですが、濃淡をつける(暗いトーンに白を足して明るくすることを指します)ことで階層を築いています。“CORY ARCANGEL ON POP CULTURE”は明らかに“NEW ON WHITNEY STORIES”よりも視覚的階層が下ですが、これは配置が下だからというだけではなく、白い背景色の中では淡い色調が目立たないせいだとも言えます。

Screen Shot 2014-06-06 at 7.27.26 PM

ウェブサイト:Whitney Museum of American Art

色使いは、モバイルアプリケーションのデザインでは特に重要です。画面サイズが小さいため、色使い以外の、例えばいろいろなサイズの文字を使ったり広く余白を取ったりという手が使いづらいからです。Grainger Industrial Supplyのアプリでは、どの画面でも“Proceed to Checkout”というボタンには赤を使って目立たせています。これとは対照的に“Narrow Your Search Results”のボタンはグレーで、検索ボタンや商品へのリンクといった他の要素とほぼ同位の階層となっています。

Grainger

アプリデザイン:Grainger(via codrops

6. 向き

ページレイアウトは通常、縦線と横線のグリッドに合わせてデザインされます。それが慣例であり、最も読みやすい形式でもあるからです。そんな中で、階層を構築する新しい方法が出てきました。グリッドに合わせない、というやり方です。斜めの線やカーブに沿って配置されたテキストは、グリッドに沿ったテキストに囲まれた中では、センターステージにいるように自然に浮き出て見えます。この方法は、広告の世界では長きにわたって効果的に使われています。下のFrost Designによるバス停のポスターはその一例です。

paint it

ポスター:General Pants Co.(via Frost*collective

視覚的階層の原則において、一番重要なのは何だと思いますか? ぜひコメントをしてシェアしてください!

[ 翻訳:shunichi shiga ]