動物病院ホームページの色相・彩度・明度

動物病院のホームページを制作する際に

こんにちは。株式会社HUMOの江鹿です。 動物病院のホームページを制作する際には「色相」「明度」「彩度」などと言った言葉を聞いたことはありますか？ 実際には、このような細かい点は制作会社やデザイナーにお任せしてしまうことが大半ではあると思いますが、一つの知識として動物病院側が理解をしておくと、色の変更やイメージを伝える際の「言葉」がより明確になるため、制作物がより希望に近い形で完成する可能性が高まると考えられます。 また、色はホームページのみならず紙での制作物やノベルティ、またはオリジナル商品の制作などの際にも活用できる知識です。

色相環

良く沢山の色を円形のような形で並べている図をみたことはありませんか？これは色を順番に並べてもので色相環と呼ばれます。この色相環のそれぞれ隣り合っている色のことは類似色、対極にある色を補色、対極よりももう少し範囲を広く取った色を反対色などと呼んでいます。 類似色はサイト全体の雰囲気に統一性が得られますし、補色はサイトをみた時のインパクトを強くして印象として残りやすかったりと、サイトそのものの目的などによって選ぶ色を検討するのが良いでしょう。 動物病院の場合は、どちらかと言えばインパクト重視よりも統一性を選ぶ傾向が強いかもしれませんが、やはり落ち着いた雰囲気作りにはどの動物病院も気を使っているように思います。 例えば、季節イベントページなどにはインパクト重視の配色を使ってみるなど、工夫をするのが良いでしょう。

明度

明度とは、読んで字のごとく、「明るさの度合い」です。明度が最も高い色は白で、一番低い色は黒。 参考までに作成した上記の画像をみていただくとわかりますが、同じ色でも明度の高低によって、私達が捉える色そのものが変わってきます。また、別途記載をする「彩度」とも密接に影響をしあっている関係があります。 明度の上限下限によって、彩度も連動して変化をしてしまう、という点は注意が必要です。 また、文字やアイコンの「見えやすさ」「見にくさ」というのは明度に大きく影響を受けている場合が多いです。

彩度

こちらも読んで字のごとく、色の「鮮やかさを示す度合い」です。彩度が高いと鮮やかな色になり、彩度が低いとくすんだ色になっていきます。 上記は、明度を一定に保って彩度を変更した場合の変化の例になります。同じような図で、彩度が引く場所が白になっているような図もありますが、それは変化に連動して明度も変化させた場合には白になるかと思われます。 白、黒、グレーは無彩色、それ以外の色は無彩色に対して有彩色となります。 明度をしっかりと調整する前提であれば、ですが、彩度を低くしていくと淡い優しい色にもなりますので、動物病院のサイトに活用しやすい色でもあるかと思います。

最後に

いかがでしたでしょうか？ 実際には、この３つのポイントをベースにして、色々なデザインや配色のテクニックを駆使してより依頼者の希望をWEBサイト上で具現化していく必要があります。 つまり動物病院としてサイト制作を業者に依頼する前には、まず下記のようなポイントでサイトの中心としておきたい色を決めます。 色の意味や視覚的に与える印象を加味し、動物病院として打ち出したいイメージと照らし合わせて色が決定した後は、今回の投稿で述べたようなポイントを確認しながら70:25:5の法則に照らし合わせてそれぞれの色を選択していくと、制作をする側もイメージを正確に把握してくれるでしょう。 皆様の動物病院ホームページがより希望に沿う形で出来上がることを願うばかりです。