ホームページ
カラー(色調)の
決め方

色の種類には
赤色、黄色、オレンジ色などの「暖色系」、冷たい感じのする青色系の「寒色系」、どちらともいえない緑色、紫色など「中性色」があります。

各色が持つイメージも
赤なら太陽をイメージするエネルギッシュ、躍動感、情熱
青は海や空をイメージする冷静、理知的、清涼感
緑は草木植物を想起する自然ややすらぎ、安心でしょうか。
よく病室の壁は安らぎを感じるやわらかな緑系が多いとか、コカコーラはエネルギッシュな赤を採用したとか言いますね。

もちろん人それぞれ印象は異なりますのであくまでも参考にということになりますが、それでも企業は新しい商品を出す時にコンセプトに基づいたもっとも受け入れられそうなブランドカラーを考えているわけです。

コーポレートカラーが決まっている場合

一番確実なのは名刺や会社案内で使われている会社のロゴカラーベースにすることです。ロゴマークは会社の「理念」や「ビジョン」「ヒストリー」など会社のもっとも重要なものをカラー化、デザイン化しているはずです。何度も検討を重ねて決定に至った大事なものだと思いますので、ホームページカラーにもぜひ生かしましょう。

コーポレートカラーが決まっていない場合

一方、ロゴマークやコーポレートカラーが決まっていない会社は、今回のホームページ制作を機にあらためて「自社や商品・サービスの色は何色がふさわしいのか」を考えてみる必要があります。

ここでちょっと参考に日本の三大銀行のコーポレートカラーを見てみましょう。全国に支店がある都市銀行は、遠くから見ても看板の色だけで支店の存在がわかるように、色の決定にはかなり時間をかけています。
[two_third]

三井住友銀行は「若々しさと伝統信頼の緑色 GREEN」

三井住友銀行のコーポレートカラーはフレッシュグリーンとトラッドグリーンの2色です。フレッシュグリーン（若草色）は、同行のシンボルマークである右肩上がりの上昇カーブを描く“ライジングマーク”に使用する色。この色は、若々しさ、知性、やさしさを表し、トラッドグリーン（深緑色）は“ライジングマーク”の背景色や行名表示を中心として使用するこの色は、伝統、信頼、安定感を表しています。

みずほ銀行は「信頼・誠実を表す青色 BLUE」

シンプルで洗練されたロゴタイプ（字体）と動きのある赤い円弧によるデザインは、今まさに太陽が昇らんとする地平線をイメージしたもので、社員一人ひとりの強い意思と情熱を表しています。ブランドロゴには、二色のブランドカラーを使用、コズミックブルー（青色）は、信頼、誠実、ワールドスケール、クオリティを、ホライズンレッド（赤色）は、お客さまとのリレーションシップ、ヒューマニティ、情熱を表しています。

三菱東京UFJ銀行は「情熱的な赤色 RED」

MUFGグループのコーポレートカラー「MUFGレッド」は、常に最高レベルのサービスを追求し、これからの金融サービスをダイナミックに変えていく活力と、お客さまとの結びつきを大切に、お客さま一人ひとりに向き合っていく情熱を表しています。また、「MUFG」ロゴタイプに用いている「MUFGグレー」は、真に頼りがいのある総合金融グループとしての信頼感を表しています。

いかがでしょうか。三井住友の「緑」、みずほの「青」、三菱東京UFJの「赤」。各行ともよく練られたコンセプトとビジョンをベースにデザイン＆カラーが決められていることがわかります。銀行というのは経済社会の黒子的立場であり、私たちのひとりひとりの口座も管理するインフラ業です。コーポレートカラーも当然、好き嫌いの少ない普遍的で、かつ長く親しまれる色を採用しています。TVCM、看板から印刷物までありとあらゆるものに使用する重要なものなのです。

ロゴマークやコーポレートカラーをまだ決めていない会社は、今回のホームページ制作を機に検討してみてはいかがでしょう。ロゴマークは、今後、長きに渡って、各取引先やステークホルダーにアピールしていくものですし、なにより名刺やパンフレット、ホームページの見栄えがぐんと違います。
残念ながらそこまでお金と時間をかけて決める余裕もないということであれば、

など5色程度ピックアップして、社内で相談をしながら決めていくと良いと思います。

ホームページ制作にあたって、ロゴの色が少しきつすぎる、もう少し柔らかくした方が良いと思われる場合は、制作会社の方でオリジナルカラーを調合してくれるはずです。

それでも決まらない、何色が良いかわからないという場合は、制作会社がよく使う「デザインピッカー」を使って試してみるといいでしょう。

※左側の正方形をマウスでクリック、ドラッグすると色が変化します。
※右側の上下スライダーを動かすと色の濃淡が変化します。
※「H」は色相(Hue)、「S」は彩度(Saturation)、「B」は明度(Brightness)です。
※「RGB」はコンピュータで色の表現法のひとつです。デジカメ画像の表現などに使います。
※「16進表記」「#:」のボックスに入る「6桁の英数字」がWebカラーコードです。Webではよくこれを使います。
※「16進表記」「#:」のボックスに英数字を入力するとWebカラーコードを指定できます。例えばこのサイトの基調カラー　水色■■■　のコードは「#30a4e7」です。「#:」のボックスに　30a4e7　を入れてみて下さい。

Facebook

カラーコード
#3B5998

Twitter

カラーコード
#00acee

Yahoo!

カラーコード
#720e9e

Dell

カラーコード
#3287c1

Evernote

カラーコード
#5ba525

Amazon

カラーコード
#e47911

以上ここまで「ホームページカラーの決め方」についてざっと説明いたしました。

実際に制作会社にホームページカラーを依頼する際に、「カラーコードは#5ba525で」と具体的に指定することはあまりありません。打合せの中で「御社の業種と社風からすると、エコロジーを想起させる淡いグリーンが良いと思います」といった感じで、話ながら決めていく方が多いと思います。

最後に大事な注意点をひとつ。

色遣いのセンスは制作会社によって千差万別です。
「何度やり直してもデザインがダサイ会社」
「一発で気に入ったデザインが挙がって来る会社」
同じ制作費をかけるなら、最初から「デザインセンスの良い会社」にお願いしたいのは誰しも思うことです。

制作会社のホームページ制作実績を見て、直感的にデザインが良いと思う会社、自社のセンスと合いそうな会社、実績に多くのカラーバリエーションがある会社をじっくり選びましょう。

みなさまのホームページが取引先や社内から親しまれるものになることを願っております。