「配色を考える」そういうとなんだか難しそうに聞こえるかもしれませんが、少しのポイントを押さえるだけでホームページの印象がプロっぽく引き締まります。

今回はこの「配色」について、いくつかポイントをご紹介します。

好きなカラーをイメージカラーにしていいの？

色にはそれぞれ役割があります。例えば食品の写真では青っぽいカラーは好まれません。これは「青い色が食欲を減退させる効果」を持っているからです。逆に赤い色には「食欲を増進させる」という効果があります。

こちらの画像を見てください。それぞれに赤と青のカラーフィルターを施しましたがどちらが「美味しそう」と感じるかは一目瞭然ですね。

このように、「何を伝えたいか」ということを考えその役割にあったカラーを使うことはとても大切です。

カラーは同系色でまとめる

カラーは使い過ぎるとまとまりが無く雑然としたデザインになります。 例えば「虹」はカラフルで美しいと感じますが、このようにいくつもの色をあちこちでルール無く使うと、そのデザインのメインカラーがわかりずらく、視点がさだまらないデザインになります。

いくつもの色を重ね合わせても全体的に美しいデザインを作ることは上級なテクニックが必要となり、あまり理由もなくカラフルにすることは出来れば避けたいところです。

カラーが多いという理由で、訪問された方が「どこを見ていいかわからない」という状態になると、訴求したい箇所を見てもらえないだけではなく、「見づらい」というストレスが発生します。こうなってしまうとホームページからの離脱の原因にもなり非常にもったいないですよね。

しかしそうならない為のポイントは簡単です。

Sponserd Links

カラーは３色程度に抑えること同系色を使うこと

これを守るだけで、全体がまとまりのあるデザイン + プロっぽい仕上がりになります。プロの作ったデザインをよく見ると、全体の色系統は統一し、目立たせたい個所に「少しだけ」アクセントカラーとなる色を使用します。このような使い方で、「さりげなく視点の誘導」を促しています。

業種別カラー

カラーが与えるイメージによっては業種とかみ合わないものもあります。極端な例ですが、「清潔なイメージが大切な【医院】」のイメージカラーに派手な赤や金色を使うことは普通はしません。

逆に、薄いピンクを使うと「保育園」や「介護職」などの優しいイメージを伝えることが出来ます。このように業種に合いやすいカラー例をご紹介します。

飲食	赤・オレンジ・桃色などの暖色系、グリーンなどで自然をイメージする、木目などで手作り感も。 ■ ■ ■ ■
介護	オレンジ・青緑・ベージュ・ピンクなどの優しい色や暖色系 ■ ■ ■ ■
土木	黄・赤・青・黒などのはっきりした色使いでパワフルなイメージ ■ ■ ■ ■
IT	青系の色と白を組み合わせてスッキリとした印象を作る ■ ■ ■
病院	白基調とし清潔感のある色（青緑・水色など）、元気の色（オレンジ・赤）や優しい色（ピンク系など）を組み合わせる。原色カラーを使う面積は少なく、アクセントにしないとどぎつい印象に。 ■ ■ ■ ■ ■
美容	赤・黒・ベージュ・パープル・金などで高級感。曲線などのラインを使うと美容的なイメージにつながりやすい。 ■ ■ ■ ■ ■
ブランド	黒・ベージュ・金などでサイドを抑えカラフルにしない。グラデーションを使うと高級感が出しやすい。 ■ ■ ■
男性ターゲット	紺・青・黄色・茶などの渋さや清涼感のある色合い ■ ■ ■
女性ターゲット	ピンク・ベージュ・桃色などの淡い色合い ■ ■ ■

色のイメージを合わせても、使い方によってはまた違う雰囲気になってしまうというのが配色の奥深いところですが、ひとつカラーを決めて同系色２～３色に抑え、アクセントカラーを少し、基調となる（一番多い面積で使う背景カラーなど）を白に近い薄色にすればまず失敗することはないでしょう。

まとめ

おまけに、配色を考える際にとても役に立つリンクをご紹介します。 簡単に直感的な配色を表示してくれるAdobeの「Adobe Color CC」です。

このサイトでやることは「ベースとなるカラーを設定する」だけ。あとはカラールールから求める配色を選んでカラーを確認します。直感的に使いやすく、使用するデザイナーも多いです。

デザインアイデアの参考になれば幸いです。
最後までお読み頂き有難うございました。