ホームページの色で重要な3つの要素

色の3要素

 

色の3要素である「色相」「明度」「彩度」などと言った言葉を聞いたことはありますか?

中学校の美術の授業を思い出してください。

ちなみに私は美術がとても苦手で、

先生に何を書いているのか理解してもらえないので「美術=プレゼンの授業」と思って中学時代を過ごしました(笑)

実際には、動物病院の HP 制作をする際にはこのような細かい点は制作会社やデザイナーにお任せしてしまうことが大半ですが、

一つの知識として動物病院側が理解をしておくと、

「もっと明度を強くして!」や「彩度を低くして淡い色に!」など色の変更やイメー ジを伝える際の

「言葉」がより明確になるため、制作物がより希望に近い形で完成します。

また、色の 3 要素はホームページのみならず紙での制作物やオリジナル商品の制作などの際にも活用できる知識です。

また、ファッションにも広く取り入れられています。まず は、色相環からお話していきます。

 

色相環

このように、沢山の色を円形のような形で並べている図をみたことはありませんか?

これは色を順番に並べてもので色相環と呼ばれます。

この色相環のそれぞれ隣り合っている色のことは類似色、

色相環で正反対の位置にある色を補色、

正反対の色の隣近辺の色のことを反対色と呼んでいます。

類似色はサイト全体の雰囲気に統一性が得られますし、

補色はサイトをみた時のインパクトを強くして印象として残すことができます。

飼い主さんにどんな印象を持ってもらいたいかイメージして選ぶ色を検討するのが良いでしょう。

例えば、IKEA のロゴは青の補色である黄色を使うことで「IKEA」の文字列をより目立たせることに成功しています。

こちらの MasterCard のロゴは赤の類似色であるオレンジを並べることで、全体の統一感 を示すことができています。

動物病院の場合は、どちらかと言えばインパクトよりも落ち着いた雰囲気を重要視して HP 制作をすることが多いようです。

例えば、IKEA のロゴは青の補色である黄色を使うことで「IKEA」の文字列をより目立たせることに成功しています。

 

彩度

こちらも読んで字のごとく、色の「鮮やかさを示す度合い」です。彩度が高いと鮮やかな 色になり、彩度が低いと淡い、くすんだ色になります。

白、黒、グレーは無彩色、赤、青などの先ほどの 3 つ以外の色は有彩色と定義されます。

色は有彩色と白、黒が混ざり合うことによって作られます。

「鮮やかさ」とは「有彩色の割合」と考えるとわかりやすいでしょう。例えば色Aが 青90 白5 黒5で、色Bが 青30 白40 黒40で作られていた場合、「色Aは色Bより鮮やかな色」となります。

 

明度

明度とは、読んで字のごとく、「明るさの度合い」です。文字の見やすさにも関わります。

「明るさ」とは「その色に対する白と黒の比率」と考えるとわかりやすいです。

色は有彩色と白、黒が混ざり合うことによって作られます。その時の白と黒の比率が明度とされています。

ある色が 赤 50 白45 黒5 で作られていたとします。すると、白と黒の比率が 9:1 なので、「明るい色」となります。

同じ色でも明度の高低によって、私達が捉える色そのものが変わってきます。

つまり、色の名前が変わってしまうということです。この色なあに?と聞いたときに左端は「オレン ジ」や「橙」と言われますが、右端は「えんじ」や「茶色」と答える人が多いでしょう。

また、「彩度」とも密接に影響し合います。

明度の上限下限によって、彩度も連動して変化をしてしまう、という点は注意が必要です。

「くすんだ色」と「淡い色」の差は明度の調整により変わります。

どちらも彩度が低いの は同じです。一方で、淡い色は「彩度を低く、明度を高く」することによって作ることが できます。

淡い優しい色は、動物病院のサイトに活用しやすく、よく使われます。

 

まとめ

反対色や補色でインパクトを、類似色で統一感や親しみを演出できる。

彩度:白や黒に対する有彩色の量。有彩色の量が多いほど鮮やかで少ないほど淡くなる。

明度:白の量が多いほど明るく、黒の量が多いほど暗くなる。

 

以上を踏まえたうえで、制作業者に自身のイメージを正確に伝えてくださいね!

ご紹介はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.