そもそも「視認性」とは、単なるデザインのテクニックではありません。
例えば、道路の標識や工事現場の看板、あるいはパトカーや救急車の色。
これらは「理解させる」ことよりも、一瞬で「認識させる」ことを最優先に考えられています。
そうです。一瞬の判断が状況を左右する危険な現場において、視認性は大変重要な役割を持つのです。
それは、生存に関わる大原則を表しているとも言えます。
この「視覚の仕組み」に訴えかけることこそが、「視認性」です。
また、それはデザインにとって大変重要だと思います。
私たちは何かを表現する前に、まずこの「目がとらえてしまう（認識してしまう）」という
本能の仕組みを理解して考えなければいけないと思うのです。
だから、ホームページを作るときは、「好きな色を選ぶ」のではなく、
誘目性（目を引く）と視認性（読める・見つけられる）を意識するというお話です。
とくに「絶対にこれを見てもらいたい、売りたい、選ばれたい」と考えるならば必須です。
デザインでの “誘目性”と“視認性”について
「誘目性」はパッと目がいく「見つけやすさ」のことで、
派手な色や強いコントラストで視線を引きつけることです。
また、「視認性」はパッと見て内容がわかる「理解しやすさ」のことで、
文字の読みやすさや形の識別性を指します。
デザインでは「まず誘目性で気づかせ、次に視認性で内容を伝える」
という情報の優先順位が重要になります。
例えば、遠くからでも目立つ赤い看板は「誘目性」が高く、
その中の文字がハッキリ読めるのは「視認性」が高い状態です。
どちらかが欠けると「目立つけど読めない」
あるいは「読めるけど気づかれない」と、なります。
Webサイトはもちろんですが、チラシでも看板でも、
もっと言えば並んでいる商品のパッケージでも同じことが言えます。
また、Webデザインでは、この2つを切り分けて考えることで、
「アクセスはあるのに、売れない…」などの悩みが解決できます。
街中で絶対に見落とさない “誘目性”と“視認性”のサイン
標識のように、誰にでも伝わるようにすることを専門用語で「ユニバーサルデザイン」と言います。
たとえばこんなの…
- 交通標識、信号機：あの速度で走っても見逃さないですよね？
- 店内の「SALE」ポスター：興味がなくても、ついつい寄り道… (-_-;)
- トイレのマーク（ピクトグラム）：インバウンドで日本語がわからない人でもOK
- 工事現場の黄色と黒のシマシマ：本能で危険を察知しちゃいます
- 非常口の緑のマーク：映画館や劇場で、ちょっと邪魔なアイツです…
- コンビニの看板：暗闇の中で「なんか欲しい、ほっとする」ずるいですね～
結局のところ…
- 赤、青、黒、黄色、緑は、目を刺激する「最強の原色」だからです。
特に、赤や黄色は波長が長くて遠くまで届くので、嫌でも目に飛び込む高明度な鮮やかな色だからです。 - 黒と黄色を並べれば、明度の差が最大になって、脳が「非常事態」を勝手に認識します。
- 青や緑は、自然界では背景の色になりますが、街中で使うと逆に「不自然さ」で目立つ特性があります。
つまりこれらは「脳が無視できない強い光の刺激」そのものです。
理屈の前に体が反応しちゃうんです。
「一瞬で判断させる知恵」は、街中の看板だけの話ではありません
むしろ、情報の波に揉まれている今のスマホ画面こそ、
この「ユニバーサルデザイン」の考え方が一番必要なんです。
街中の標識と同じように、パッと見て「どこを押せばいいか」「何についてのページか」が
分からなければ、ユーザーは一瞬で通り過ぎてしまいます。
だからこそ、私はホームページを作るとき、この「本能に訴えかける視認性」を何よりも大切にしています。
街中の標識と同じように、今のスマホの画面も「0.1秒の判断」がすべてです。
街中の看板で培われた目線を、Webに落とし込むだけで、お客様の反応は劇的に変わります。
人は、ものを認識するとき、「形」よりも先に「色」を見ています
たとえば、洋服を探すとき。
私たちは無意識に、
→「この形がいい」より先に
→「青が好き」「黒は避けたい」といった
色の条件で選別しています。
これは好みの話ではなく、
人間の視覚の仕組みによるものです。
人は「色 → 形 → 内容」の順で理解する
視覚情報は、まず 色や明るさ として捉えられ、
そのあとで 形や意味 が認識されます。
だからWebサイトや紙媒体でも、
- 色で「気づく」
- 形で「何かを理解する」
- 文字で「内容を読む」
という順番が自然に起きています。
「スマホ・屋外・老眼!?」あなたのWebデザイン大丈夫？
あなたは、オフィスで、最新のMacに向かって「この薄いグレー、おしゃれ〜」なんて言っていませんか？
そのデザイン、一歩 外に出た瞬間に「ただの真っ白な画面」に化けてしまうかも…
Webの視認性は、見る側のユーザーの「物理的な環境」に支配されることを考えていますか？
→例として書きますが、白い背景に薄いグレーの文字は、視認性では完全に負けだと思います…
- スマホ×太陽光：屋外で画面を見ると、コントラストが低い文字は消えます…
- 40代からの「見え方のリアル」：老眼って寂しい言葉ですが、「スマホ老眼」なんて言葉もあり、若くても見えにくい人増えています。
- 歩きスマホ（ダメだけど！）の視線：揺れる画面でも、一瞬で「何があるか」わかりますか？
「自分には見えているからOK」というのは、作り手のただの傲慢かもしれません…
特に40代以上の層をターゲットにするなら、視認性の低さはそのまま「機会損失」に直結です。
私たちが思っている以上に、30cm離れたスマホの文字は消えていますので…
おしゃれ、キレイを優先して「読ませる気がないサイト」を作るのは、いかがなものかと思います。
※生意気言ってすいません (*- -)(*_ _)ペコリ
“最強の視認性”を手に入れる、最初の一歩
考えすぎてしまうあなた、まずはこれをやってみてください。
- 外に出て見る：
作った画面をスマホで、晴れた日の太陽の下で見てください。文字、消えてませんか？ - 薄目で見る：
画面を目を細めて見てみてください。
一番最初に目に飛び込んでくるのは何ですか？それが「誘目性」の正体です。 - となりの同僚にチラ見してもらう：
「これ、何についてのページに見える？」と聞いてみてください。
3秒で答えが返ってこなければ、それは「伝わっていない」証拠です。 - 「違う世代の人」に見てもらう：
もしターゲットが40代以上なら、その世代の方に見てもらうのが一番です。
「キレイかな？」ではなく「読みやすい？」と聞いてみてください。
私たちが「普通」だと思っている文字サイズが、実は「苦行」レベルかもしれません。
「自分の席」という、一番なれた、恵まれた環境でOKを出さないこと、
それだけで、あなたのデザインは「伝わる」ものに変わるはずです。
迷ったらこの順番：
「まず読める（視認性）」→「次に目立たせる（誘目性）」
「どっちも大事なのはわかってるけど、どっち優先？？」と迷ったら、
0.5秒で「読めるかどうか」だけ確認してください。
- 「オシャレな色」を捨ててでも「コントラスト」を取る
背景に文字が溶けていたら、その時点で試合終了。
迷ったら、文字をもっと太く、背景との差をもっとハッキリ。
「これじゃ普通すぎる…」と思うくらいで、ユーザーにとっては「親切」なんです。 - 強い色は「ここぞ！」の1箇所に叩き込む
赤も青も黄色も…と欲張ると、画面がチカチカして脳が拒絶反応を起こします。
「ここをクリックしてほしい！」というボタン一箇所にだけ、最強の色を入れ込む。
それ以外は、極論「読めればいい」くらいの割り切りが、一番伝わるスピードを上げます。
毎日のお仕事、忙しいし、やることいっぱいです。
だからこそ、最低限これをやりましょう。
だって読めなかったら、何も起きないんですから ( ﾉД`)ｼｸｼｸ…
（執筆者：ころまるん）
