「目立たせる」と「目立ちすぎる」の境界線｜視覚的階層

今回のテーマは「視覚的階層」です。Webサイトの中で、何を大きく、何を小さく見せるか。その強弱のつけ方ひとつで、情報の伝わりやすさは大きく変わります。けれど「目立たせる」と「目立ちすぎる」の間には、思いのほか繊細な境界線があるのです。

つくり手が「ここを見てほしい」と思うと、つい文字を大きくし、色を濃くし、太字を重ねたくなります。ところが、強調を足せば足すほど、どれも同じくらい目立ってしまい、結局どこが大事なのかわからなくなる。全部を叫べば、何も聞こえなくなるのと同じです。見出しも本文もボタンも一斉に主張しはじめると、ユーザーの目は行き場を失います。UXデザインの出発点を「人間が情報を受け取る順番」に置くと、視覚的階層は読みやすさの設計図になります。

人は「強弱」で情報の順番を読み取る

新聞の一面を思い浮かべてみてください。大きな見出し、中くらいの小見出し、小さな本文。私たちはその大きさの違いだけで、どれが重要なニュースかを一瞬で判断しています。これが視覚的階層です。人の脳は、大きいもの・濃いもの・余白に囲まれたものを「重要だ」と受け取り、その順番で情報を処理していきます。つまり、デザインの強弱はそのまま「読む順番の指示」になっているのです。階層が整っていれば、ユーザーは説明されなくても、自然と大事な情報から目に入れていきます。

「全部大事」は「全部どうでもいい」と同じ

視覚的階層がうまくいかない最大の原因は、「どれも大事だから、どれも目立たせたい」という思いです。気持ちはよくわかります。けれど、すべてを強調することは、何も強調しないことと変わりません。10個の要素を全部太字にすれば、太字は「ふつう」になってしまう。本当に伝えたいことが、ほかの主張に埋もれてしまうのです。大切なのは、勇気を持って優先順位をつけること。「いちばん」を決めれば、「二番目」「三番目」も自然と決まり、強弱が生まれます。目立たせたいものがあるなら、まず周りを「目立たせない」と決めることから始まります。

境界線を越えると「うるさい」に変わる

強調は、効くからこそ使いすぎてしまう道具です。そして、ある一線を越えると「目立つ」は「うるさい」へと変わります。極端に大きな文字、ぶつかり合う原色、点滅する装飾——こうした過剰な強調は、注意を引く前に「読みたくない」という気持ちを呼び起こします。階層は、要素を強くすることだけでつくるものではありません。むしろ、余白を生かして「引く」ことで、残った要素が静かに際立ちます。引き算でつくる強調のほうが、ずっと上品で、ずっと伝わるのです。この「目立たせ方」は、見てほしいものを視線の通り道に置くという考え方とも響き合います。あわせて「選択的注意とは？見えているのに見落とす脳の仕組みとUX設計」もご覧いただくと、理解が深まります。

中小企業サイトで整える視覚的階層

視覚的階層は、特別なセンスがなくても整えられます。まず、1ページの「いちばん見てほしいもの」をひとつ決め、それを最も大きく・目立つ色にする。見出し、小見出し、本文の文字サイズに、はっきりとした差をつける。強調したい言葉だけを太字にし、太字を乱発しない。要素のまわりに余白を取り、詰め込みすぎない。そして時々、画面を遠くから眺めて「どこに目が行くか」を確かめてみてください。目が迷うなら、強調が多すぎるサインです。読みやすい文字の条件については「すべての人に届くWebサイトへ」シリーズもあわせてご参考に。強調を足すのではなく、優先順位を決めて引くこと。それが、伝わるサイトへの近道です。

記事監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。