ホームページの作成にあたって基調カラー、サブカラーを何色にするかはとても重要なことです。会社によってはコーポレートカラーがすでに決まっている場合もあるでしょう。コンテンツやデザインなどつい目立つ部分に目がいきがちですが、会社の事業内容や商品内容に合った「適切な色」を選択することでホームページの印象やイメージはグッとよくなります。ここではホームページの基調カラーの決め方についてご説明いたします。

色の種類と持つ印象について

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

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

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


ホームページの基調カラー、サブカラーを決める

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

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

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

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

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

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

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

三井住友銀行公式ホームページ
http://www.smbc.co.jp/

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

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

みずほ銀行公式ホームページ
http://www.mizuhobank.co.jp/

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

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

三菱東京UFJ銀行公式ホームページ
http://www.bk.mufg.jp/

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

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

  • 事業理念から導き出した色
    例えば「挑戦」「開拓」のような前向きで上昇していくような理念であれば少しアグレッシブな色、「共存」「奉仕」など人間の和を大切にしたような理念であれば穏やかで平和的な色、「未来」「明日」であれば地球や緑を想起させる色などなど。いろいろ考えてみるのも面白いですね。
  • 社長や創業者の好きな色
    社長や創業者が好きな色というのは会社のアイデンティティー(存在理由)を表しています(単純に好きだという場合もありますが)。理念と好きな色をうまく重ね合わせると「会社が一つのビジョンに向かって進んでいく」ための象徴的な色でありマークになります。
  • 業種や商品に合った色
    建設業であれば「緑」や「青」、小売業であれば「赤」や「黄色」「オレンジ」、高級ホテルや料亭であれば重厚な「黒」や「茶」「グレー」、エコロジー系の業種なら「緑」「青」などが似合いますね。

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

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


それでも決まらない、何色が良いかわからないという場合は

制作会社がよく使う「デザインピッカー」を使って試してみるといいでしょう。


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

米国の有名なWeb系企業のホームページカラー

一般的に企業のコーポレートカラーというのは重要な企業秘密なのでカラーコードは教えてくれません。
しかし有名なWebサービスの場合はバナーやボタン、スクリプトをユーザーに使ってもらってこそなんぼ、というものだからなのでしょうか、明らかになっていることが多いようです。いかかですか。確かにフェイスブックやツイッターカラーも色を見るだけでサイトイメージがわきますね。

Facebook

カラーコード
#3B5998

Twitter

カラーコード
#00acee

Yahoo!

カラーコード
#720e9e

Dell

カラーコード
#3287c1

Evernote

カラーコード
#5ba525

Amazon

カラーコード
#e47911

Pinterest

カラーコード
#c8232c

Android

カラーコード
#a4c639

Samsung

カラーコード
#0c4da2

Skype

カラーコード
#00aff0


色遣いのセンスは制作会社によって千差万別

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

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

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

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

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

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


ホームページに関することなら何でも We welcome any enquiry.

  • 同業他社と比較した時に選ばれるサイトが欲しい
  • 取引先から「良いね」と言われるサイトにしたい
  • 見た目が古くなってしまったので新しくしたい
  • もっとレスポンスの早い制作会社に頼みたい
  • 既存顧客に自社情報をスピーディーに届けたい
  • 担当者が退職して運営更新が滞ってしまっている
  • アクセス解析を入れてマーケティングに活かしたい
  • Yahoo!で検索した時にもっと上位に表示させたい

お気軽に資料をご請求ください。

私たちは御社の魅力が多くの人にアピール出来る最高のホームページをお作りいたします。今すぐではないが、ホームページで何ができるのか、トレンドは何か、だいたいの予算だけ把握しておきたいなどというお問い合せやご相談にも対応しています。お気軽に資料請求・お問い合せください。