ホームページと色
インターネット上には様々なホームページがありますよね。
クールでカッコいいデザインのサイトもあれば、落ち着いたデザインのサイトもあります。
ホームページは会社の顔でもありますから、クールな会社、派手な会社、自然を大切にする社風の会社など、それらの会社のカラーにあわせた見た目でなければなりません。
見た目を左右する要素というのはいくつかあります。その中でも特に重要なものが色です。
今回はこの「色」について解説します。
「テーマカラー」を選ぼう
ホームページを作る際に、まずコンセプトを決定します。コンセプトはホームページの役割によって変わります。企業のホームページであれば大体の場合、会社の紹介や製品の紹介になります。となればその会社や製品がどんなものなのかによってコンセプトは変わります。
例えば、オーダーメードのスーツを作っている会社であれば「余裕のある紳士を彷彿とさせる」といったコンセプトとなります。このコンセプトで、ピンク色のバブルガムを選ぶことはないはずです。
色にはイメージを連想させる効果があります。作ろうとしているホームページのコンセプトにあった色でなければなりません。
白 White □
清潔感や純粋、善意という印象を受ける色で、膨張色、進出色、 軽量色のイメージ効果を持っています。 そのイメージから企業ロゴでも洗練された高級感のある色として 人気があります。
黒 Black ■
収縮色、後退色、重量色といった色のイメージ効果を持っています。 黒は有彩色をもっとも引き立たせます。
グレー Grey ■
柔軟色、沈静色といった効果が色の特徴ですが、グレーの中でも 明るいグレーなら、白に近いイメージ効果、反対に暗ければ黒に 近いイメージ効果を持ちます。
灰色は自己主張せず周囲の色を引き立てる調和の色で、ホームページでも背景などでもよく使われる色です。
赤 Red ■
膨張色、進出色、温暖色、興奮色のイメージ効果を持っています。国や地域、時代に関係なくエネルギーを感じさせる色です。広告や商品パッケージに使われることが多いのは、販売色・購買色だとも言われていて、売上が20%変わると言われるほどです。
青 Blue ■
収縮色、後退色、寒冷色、鎮静色のイメージ効果を持っていま す。青色は涼しさや爽やかさ、知性や冷静を感じさせてくれる色 で、青い街灯に変えると犯罪率が下がったという報告もありま す。
緑 Green ■
中間色(中性色)なのでどの色ともバランスよく調和することが できます。また、緑色は自然の中でよく見られる色で、興奮を静 めたり集中力を増す効果がある色で、安心感を与える色のため、 紙幣に緑色が使われている国が多いです。
他にも、黄色や紫色、ピンクやオレンジと言った色もありますよね。
これらの色も、それぞれ効果を持っています。
色は無数にあります。どの色を選ぶべきなのか、と迷うこともあります。
冒頭のオーダーメードスーツの場合、深緑や紺色、グレーなども候補にあがります。
この中から何を根拠に選ぶべきなのでしょうか。
企業の場合、正解は簡単です。
ロゴマークの色、もしくはロゴマークと相性の良い色がテーマカラーにふさわしい色です。
ロゴマークというのは、それ単体が会社の象徴です。そこに使われている色こそ、その会社のテーマカラーです。
ロゴマークがない会社さんもあると思います。
その場合は、文字通り会社のカラーで決めると良いと思います。
「ウチはとにかく熱く行動する会社だ！」というのであれば赤系統といったシンプルな決定方法で良いと思います。
テーマカラーを支える色
テーマカラーが決まったからと言って、色選びは終了しません。
ホームページに使われる色の数は最低でも４色です。
その場合、パターンは以下になります。
・白 背景としてもっとも使い勝手の良い白
・黒 文字の色として背景の白と相性の良い黒
・テーマカラー 一番よく使われるテーマカラー
・もう一色 ワンポイントで目立たせるテーマカラーと相性の良い色
最も手軽な組み合わせではありますが、これもいくつかパターンがあります。
Example１
白と黒の他に赤とオレンジのパターンです。
テーマカラーの赤に対して、色の濃いオレンジが選ばれていますね。
これを類似色と言います。
類似色は、どんなデザインプロジェクトにも適用しやすい、多彩性がポイントとなります。 また、まとまりのある印象を与えることも類似色を配色として使うことのメリットと言えます。
Example２
白と黒の他に紺とオレンジのパターンです。
テーマカラーの紺に対して、オレンジが選ばれていますね。
これを補色と言います。
補色とは選択したメインカラーの反対側にある色との組み合わせを指しま す。赤とみどりや青とオレンジなどです。補色カラーは、コントラストが強く視線を惹きつけるとアクセントとなりやすい反面、 バランスや調和が取りにくく、適用しにくい点もあります。
紹介した「類似色」や反対側の「補色」を簡単に知ることができるツールをカラーホイールといいます。上の図がカラーホイールの例です。
「この色を使おう！」とテーマカラーが決まったら、別に使う色をカラーホイールから選択すると簡単に相性の良い組み合わせが得られます。
まとめ
各色のイメージや選び方がわかりましたでしょうか？
色はそのホームページの印象を大きく左右する要素です。できることなら良い組み合わせを使いたいですよね。
迷ったときには人に聞くのがベターです。
ホームページを作るプロに問い合わせていただいたら間違いありません。蛇の道は蛇といいます。お気軽にお問い合わせください！
中小企業をがっつりサポート！
当社では
など、企業のIT化のサポート・DX事業のサポートを行っています。
まずはお気軽にお問い合わせしてください。