視覚的階層

定義

視覚的階層(hierarchy)とは、画面の中にある要素の重要度の順序を、目に見える形で はっきり示すことです。サイズを変え、太さを変え、色や余白に差をつけることで、 ユーザーが何を最初に見て、何を後から見るか、その順番を自然に決めてあげる働きを します。同じページでも階層がはっきりしていれば、見出し・要約・本文・補足情報が 層になって区別され、ひと目で構造が読み取れます。逆に階層がないと、すべてが同じ 重さで迫ってきて、どこから見ればいいのか途方に暮れてしまいます。階層は、これまで 学んだサイズ・太さ・色・余白を、目的を持って一つに束ねる考え方であり、それらの 要素をなぜそう調整するのかという問いへの答えでもあります。

なぜ重要か

ユーザーは画面を丁寧に読むのではなく、最初の数秒でざっと見渡して、どこに集中するかを 決めます。よい階層はまさにこの瞬間に効いて、ユーザーが一瞬で見るべき順番を自分で 決められるよう手助けします。いちばん大切なものがいちばん大きく濃く見えれば、目は 自然にそこから出発し、次に重要なものへと視線が流れていきます。反対に、すべての要素が 同じサイズと色で平らに並んでいると、ユーザーは何が中心なのかを自分で探し回ることに なり、やがて疲れて離脱してしまいます。階層は単にきれいに見せるためのものではなく、 情報を速く正確に伝えるための実用的なしくみです。よく練られた階層は、ユーザーが画面を 自分で読み解く手間を代わりに減らしてあげる、思いやりだとも言えます。

よくある間違い

• すべてを強調してしまうことです。あちこち全部太く、全部大きく、全部に色をつけると、 強調どうしが競い合って、結局どれも際立たず、階層がないのと変わらなくなります。
• 一つの手段だけに頼ることです。サイズをほんの少しずつ変えるだけで階層をつくろうと すると、差が弱くて見えにくくなります。サイズ・太さ・色・余白を組み合わせてこそ、 コントラストがくっきりします。
• 重要度と見た目の強調がずれてしまうことです。肝心の行動ボタンがぼんやりしているのに、 補足の案内のほうが濃く大きいと、ユーザーの視線が見当違いの場所へ先に向かい、本来 すべき行動を見落としてしまいます。

実務のヒント

• よい階層は、ユーザーが一瞬で見る順番を決められるようにしてくれます。画面をつくったら、 目を細めてぼんやり眺めたとき、何が最初に見えるか確かめてみましょう。いちばん先に 見えてほしいものが実際に先に目に入れば、階層はうまく整っています。
• 段階は三つか四つに絞りましょう。見出し・小見出し・本文・補足情報くらいに層を分け、 各層の差をはっきり広げると、層が多いときよりかえって構造が鮮明になり、読むべき順番も ずっと明確になります。
• 強調したいものを増やすより、それ以外を抑えてみましょう。補足情報の色を薄く落としたり サイズを小さくしたりすると、大事な要素をこれ以上大きくしなくても相対的に目立たせる ことができ、画面がやかましくなりません。

関連概念