ビジュアルヒエラルキー

ウェブサイトのユーザビリティを高めるためには、ユーザーのニーズや目的を十分理解したうえで、スムーズなユーザー行動を後押しするような情報デザインが必要です。実際のデザインプロセスにおいては、提示すべき情報を厳選し、優先度を付けることになりますが、その際に意識したいのが、ビジュアルヒエラルキー (視覚表現による情報の重み付け) です。

ビジュアルヒエラルキーを表現する要素

ビジュアルヒエラルキーを表現するための視覚的な要素としては、以下のようなものがあります。

位置関係

情報の位置関係によってビジュアルヒエラルキーが表現されることがあります。上に配置されているほど、上位に見えます。また、一般的な横書きのコンテンツであれば、右より左に配置されているもののほうが、上位に見えるでしょう。

サイズ (大きさ、広さ)

文字の大きさや太さ、アイコンや画像の大きさ、カードやパネルの大きさ、コンテンツブロックの広さ、など、サイズによってビジュアルヒエラルキーが表現されることもあります。サイズが大きいほど、上位に見えます。

黒い文字に対して色の付いた文字が目を惹いたり、背景色の付いたエリアが目を惹いたり、濃い色のボタンが目を惹いたり…という具合に、色がビジュアルヒエラルキーに影響することがあります。

ただし、色の種類 (色相) 自体には上下や優劣の関係はありませんし (赤は「危険 (danger)」、黄色は「警告 (warning)」とった慣習はありますが)、アクセシビリティの観点でも、情報識別を色のみに依存するべきではないので (WCAG 2.0/JIS X8341-3:2010 達成基準 (7.)1.4.1)、ビジュアルヒエラルキーの表現手段として色を用いる場合は注意が必要です。

設計 (デザイン) 時に気をつけること

受け入れられやすくロジカルなデザインスキームにする

ビジュアルヒエラルキーを表現するにあたっては、上記の各要素 (位置関係、サイズ、色) の取り扱いルールを定めたデザインスキームが必要です。デザインスキームは、ユーザーにとって受け入れられやすく、かつ、ロジカルでなければなりません。

たとえば、文章中に強調したい箇所が複数あって、片方は太字 (a)でもう片方は少し大きめの文字 (b) で表現された場合、(a) と (b) はどちらが優先度の高い情報なのか、ユーザーは混乱してしまうでしょう。また、同じ濃さの色違いのボタンがふたつ並んでいる場合、片方が優先的な Call To Action (行動喚起) であっても、それがユーザーに伝わらない恐れがあります。

実際には、上記の各要素 (位置関係、サイズ、色) を複合的に適用することも多いと思いますが、であればなおのこと、デザインスキームはロジカルであることが求められます。

モバイルファーストで考える

レスポンシブウェブデザイン (RWD) などで、デバイスによって見えかた (レイアウト) が変わるようなサイトの場合、旧来のように PC での表示を前提に設計してからスマートフォンで表示させると、想定していたビジュアルヒエラルキーがスマートフォンではきちんと表現できていない…という結果に陥る恐れがあります。

プロジェクトの性質にもよるかもしれませんが、基本的にはモバイルファースト (コンテンツファースト) で設計して、タブレットや PC といった大きな画面表示においては基本設計に対して nice-to-have (あったら便利) な工夫を拡張的に付加する、という考えかたでデザインすると、デバイスが異なってもサイトとして一貫性のあるビジュアルヒエラルキーが表現できると思います。

上流工程 (スケッチやペーパープロトタイピング) から意識する

ビジュアルヒエラルキーは、デザインの上流工程 (スケッチやペーパープロトタイピングの段階) から意識したいものです。

上述のように、色の違いはそれ単独ではビジュアルヒエラルキーの表現要素にならない (すべきではない) ので、モノクロのスケッチやペーパープロトタイピングでも、ビジュアルヒエラルキーを表現することは十分可能です。また、「ローファイ」で細かい作り込みをしない (できない) 分、スケッチやペーパープロトタイピングはビジュアルヒエラルキーの検討 (試行錯誤) にもっとも集中できる、よい機会だと思います。