動物病院ホームページの視認性と誘目性

視認性と誘目性

こんにちは。株式会社HUMOの江鹿です。

動物病院ホームページに関する配色に関していくつか記事をまとめてきました。

今回で配色に関しては一旦一区切りとしたいと思いますが、「感性」に近い領域にも入ってきますのであくまでも一般論として捉えて頂けますと幸いです。

配色というのは、サイト全体のイメージを形成しるものでもあるのですが、例えばバナーであったり、アイコンであったりとしたより小型の制作物一つ一つをとっても配色によって大きな違いが生まれます。

それぞれの制作物が「見やすいかどうか」という基準で捉えるべき視認性と、少し似ているかもしれませんが「目を引く色かどうか」という基準で捉える誘目性などは配色の際には特に意識をすべきポイントになります。

明度や彩度、色相は以下リンクを参照になりますが、これらをコントロールすることによって視認性が高まったり低くなったりします。

具体的には、全く同じ構図の制作物を作ったとしても、明度に差をつけた構図、彩度に差をつけた構図、色相に差をつけた構図などよって、見えやすさが大きく異なりますし、また目の映る印象もまた同じように大きく異なるということです。

このような違いが生まれる理由には、「形そのものを認知できるかどうか」を基準で捉える明視性や「文字・数字の認知ができるかどうか」という基準で捉える可読性という2点が大きく影響をしているためです。

少々、抽象的になってしまいましたのでもう少し具体的に。

視認性とは背景色とその中の色の違い

ひとことに「見えやすさ」といっても実際には種類があり、視認性というのは、一色の背景色の中に例えばまた別の1色で文字がある場合、どれくらい離れてもその文字を認識できるか、という度合いを指しています。

あまりにも専門的なことは理解する必要がないかもしれませんのでなるべく単純な説明を心がけたいところではありますが、つまり背景色とその中の文字の色を単純に2色と捉えたとして、それぞれの色の明度・彩度・色相を変化させた場合にそれが見えやすか、見えにくいか、判断しながら配色をしていく必要があるということになります。

例えば、最も明度が高い白と、最も明度が低い黒は、【いずれかが背景色になりもう一方が中の文字色になった】としてもとても見えやすい視認性の高い組み合わせですが、最も明度の高い白に明度が高い黄色を組み合わせた場合、【背景黄色で文字が白であっても、背景白で文字が黄色】であっても、まぁとにかく見にくいわけですね。

或いは、当ブログは、背景色が白に青い斜線が入っているのですが、ブログも文字が表示される背景色は白になっています。画面から少しずつ離れていくとどこかのタイミングで青い斜線が見えなくなってしまい背景が全部白のサイト見えることでしょう。これも視認性が低いと言えるでしょう。

一方で、道路で注意を促すような標識は【背景色が黄色で文字が黒】などでつくられています。

このように、先の2例で用いた色の組み合わせを利用してみると特定の色が見えやすいのではないということがわかります。

つまり視認性というのは背景との色差によって作り出されるということで、明度・彩度・色相といった色の三属性における明度が最も視認性には影響を及ぼします。

※※

なお、色覚異常の特徴を持つ方々の多くは、明暗を分別することができるので、適度な明度差のある配色にすれば、ユニバーサルデザインの観点からも、かなりの程度で「視認性」を確保することは可能です。

※※

誘目性はさらに複雑

視認性もあまりこの領域について聞いたことがないと良くわからないと仰る方も多いかもしれませんが、誘目性はさらに複雑です。

一般的には色が目立つ、目立たないはこのような構図です。

• 色が目立つ≒高彩度≒高明度≒暖色系
• 色が目立たない≒低彩度≒低明度≒寒色系

視認性や誘目性は、知覚的な目立ち具合を表したもので単純ではありません。

誘目性が低めな寒色系に当たる青も、視認性は高い色のため沢山使えばなぜか目がチカチカする感じというか、つまりのところ「見ずらい」サイトになってしまうリスクもあります。

サイト制作を発注する側がこれらを少しだけ理解したところで、制作会社により良い指示が出来るとも限りませんし、下手に知っているが故に何も言わなければ素晴らしい制作をしてくれていたはずの制作会社が、院長のちょっとした一言に束縛されて、持ち前のクリエイティブティが発揮できないケースなども散見されます。

一方で、制作側の配色やデザインの意図を確認するための知識としては良く機能するとも言えます。

制作側がこれらの言葉を織り交ぜながら、わかりやすく動物病院側とのコミュニケーションをとっているようであればその制作会社はとても素晴らしいスキルと知識を持っている可能性が高くなるからです。

最後に

さて、4つの投稿にまで跨って配色について書いてみましたが、いかがでしたでしょうか？

WEB制作やWEBマーケティングといった領域は突き詰めていけばいくほど対象領域の知識が必要になります。

例えば、動物病院向けのホームページやWEB集客である場合には、動物病院業界そのものの特徴などをより細かく把握している方がより具体的な施策へと昇華できると思うのです。

一方で、餅は餅屋、といったように、それぞれの領域における最高峰のレベル同士が協業をした方がより良い形で戦略を遂行することが出来ると考えることもまた可能であるとも思っています。

例えば、大規模展開をしている動物病院と、値段は非常に高いが圧倒的なクオリティの制作を行う制作会社がタッグを組めばこれも当然良い結果を導き出すことは可能だろうということですね。

ではなぜ、制作についての配色などについて話題を向けているか。

それは、よりよい制作物の作成にも、よりよいWEB集客にも、動物病院とWEBを担当する制作会社の双方向のコミュニケーションと妥協の無い協業が必要だと考えているからに他なりませんし、そうであるが故に私自身も動物病院関連の書籍などにも多く目を通し、少しでも内情についての理解が出来るように心がけているつもりです。

互いに尊重し合い、協力し合い、よりよい形を目指したいとお考えの動物病院様からのご連絡を心よりお待ち申し上げております。

つなぐ広報部

『あってよかった』と思ってくださるサービスを提供し続けるために、つなぐのサービスを中心とした情報発信を行ってます。お気軽にお問い合わせいただけますと幸いです。