ビジュアルヒエラルキーを効果的に使うコツとは？

ビジュアルヒエラルキーとは何か？

ビジュアルヒエラルキーとは、デザインにおける視覚的な情報の重み付けを指します。別名は日本語で視覚的階層とも訳されることもあり、情報の重要度によってデザインを変えていく手法です。

例えば、たくさんの情報がある中で全てを整理せずにそのまま伝えてしまったら、「どこが重要なのか？」「伝えたいことは何なのか？」が分からなくなってしまいます。１番伝えたい情報、２番目に伝えたい情報というように順序立てしていき、誰でもそれが一瞬で分かるようにデザインを工夫することが大切なのです。紙媒体のプレゼンテーション用の資料、イベントポスターなどもそうですが、いかに相手に伝わりやすくデザインできるかがとても重要になります。

特に最近はインターネットの発達により、UIやUXなどを意識したwebサイトを多く見かけるようになりました。ユーザビリティーは、webデザインと切っても切り離せないものなのです。UIもUXもwebデザインをする上では、ユーザーの視点に立って考えなくてはなりません。いくら素敵なデザインでも自分の伝えたいメッセージを、デザインを通して伝えられなくては何の意味もありません。

ユーザーの探している情報をいち早くキャッチさせられ、さまざまな構成要素を十分に考えた上で作られたものが、最高のUIデザイン、UXデザインと言えるでしょう。

ビジュアルヒエラルキーを効果的に使う？

UIデザインやUXデザインを意識したビジュアルヒエラルキーは、具体的にどのように構成、制作していけば良いのでしょうか？いくつかのカテゴリーに分けてみましたので、どんなものがあるのかを見ていきましょう！

①文字サイズ・文字のフォント

チラシや広告、ポスターのような紙媒体なのか、スマホで見るwebサイトなのか、パソコンで見るのかによっても変わりますが、UIを意識した文字サイズをしっかり決めることが必要です。どの媒体だとしても、私たちの目は大きいものにひかれ、細かい文字はあまり見ていません。主張したいもの、アピールポイントとなるものの文字サイズを大きくして、目立たせましょう！

さらに、文字をデザインする時にも明朝体、ゴシック体、ポップ体などによってユーザーに与える印象が変わってきます。伝えたい内容によって、どのフォントが雰囲気を伝えやすいのかを考えて、使ってみましょう。

②色とコントラスト

デザインと言えば、やはり色とコントラストが大変重要になってきますよね？私たちの目はぼやけているものよりも、自然な明るく鮮明な色にひかれやすくできています。コントラストを利用して文字、フォント、背景色を構成し、メインタイトルやサブタイトルなどを強調する方法がよく使われます。

また、背景色などの色を全く使わないでユーザーの視線を引き付ける手法があります。UXデザインにおけるホワイトスペースとネガティブスペースです。どちらも同じ意味で使われることが多く、webの場合、ページの要素と要素の間や、その周りの空いた余白のスペースを全て指します。

文字と文字、デザイン画とデザイン画の間に必ず余白は必要です。紙媒体でもwebサイトにも言えることですが、上から下までギッシリ情報が書かれていたのであれば、見づらいのは言うまでもありません。しかし、良いバランスで余白（ホワイトスペース）があることで、自然と文字や画像などの情報をスッキリ分かりやすく見せてくれる働きをしてくれるのです。

色やコントラストにこだわるだけではなく、余白とのバランスも大切なのですね！

③トラッキングパターン

ビジュアルヒエラルキーを語る上で知っておくべきなのは、トラッキングパターンです。トラッキングパターンとは、ＦパターンとＺパターンです。どちらもアルファベットの形の通りに、ユーザーが視線を動かすことを利用したデザインパターンです。新聞や広告などにも使われてきた元来のデザイン手法でもありますが、今は主にwebサイトを制作する際に利用されます。

例えば、文章が多く画像が少ないwebサイトを見る時には、Ｆパターンのように私たちの視線が動きます。一方、反対に文章が少なく画像が多いwebサイトを見る時には、Ｚパターンのように私たちの視線が動くのです。その視線の動きを予測して、webデザインを行っていくことがＵＩデザイン、ＵＸデザインをより高めていくことにつながります。

まとめ

私たちが普段何気なく目にする広告やポスター、webサイトにはさまざまな仕掛けがあったのですね！ユーザビリティーに即したデザインをするためには、１つ１つのビジュアルヒエラルキーの要素や技術をより効果的に使うことが求められます。

またwebサイトの場合、ユーザーに見せたい情報と見せたくない情報なども存在する場合もあるでしょう。いかに強調してアピールしたいものを伝えていくかだけではなく、メディアリテラシーなどの感覚も持って、デザインをすることも必要になってくるのです。