webカラーの配色について
ホームページを新規もしくはリニューアルをお願いされると、色はどうしましょうというお話をします。
弊社が気を付けている、色について解説します。
色によって人に与えるイメージやすでに決まっているロゴ色を考え、ホームページは制作します。
このイメージは、国によってすこしずれるようなので、下記は日本人のイメージと考えてください。
色のイメージについてはこちらを参照してください。
背景色、メインカラー、アクセントカラーを決める
大部分に使われる背景色をまず決めます。
白、薄いグレー、ベージュ、薄いパステル、黒などが多いです。
大部分ですので、これを変えるとかなり印象が変わります。
そして、背景と共に使うメインカラーを決めます。ロゴが決まっている場合はロゴの色を取る場合もありますし、
ロゴを白や黒に変更していい場合は、色の持つイメージを考えます。
アクセントカラーは、メインと同じにする時もありますが、ボタンや小さい面積で使う目立つ色の事です。
弊社が制作したデザインで具体例を出しましょう。
背景色：白、メインカラー：ブルー
こちらは、ターゲット層が10代、20代の若い女性です。
ロゴのブルーは決まっていました。写真が大量に入るので背景は白にしました。
アパレルなど写真を引き立てさせたい場合は、背景を白にされる場合が多いです。
白にブルーは、爽やかなイメージになります。
背景色：黒、メインカラー：金
背景が黒（真っ黒ではありません）、ポイント金です。
金、銀はブラウザでは表現できませんので、茶色を使いますが、背景を暗くすると光ったように見えなくもない・・・という表現をします。
黒と金は高級感を出したい時によく使われます。
背景色：白、メインカラー：銀
Trinity様
こちらは、背景が白、ポイント銀です。
こちらのサイトは残念ながら閉鎖されてしまったのですが、サプリメントのサイトで同じく高級感を求められていました。
これは、photoshopの加工で銀ぽくしている所もありますが、銀の代わりにグレーを使います。
黒が背景よりも、爽やかなイメージになります。化粧品サイトなどでよく使われるテイストです。
背景色：ベージュ、メインカラー：茶色、アクセントカラー：緑
緑のお仕事をされている会社様で、温かみのあるデザインを求められていました。
そのような場合は、背景が白よりも少しテイストがある背景を入れた方が雰囲気が出ます。
緑のお仕事なので、ポイントが緑ですが、可読性を上げる為に深緑になっています。
背景がベージュの場合は文字色を茶色にすると温かみが増します。
背景色：パステル、メインカラー：茶色、アクセントカラー：ピンク
保育園様、子供関係様に多いですがパステルを希望される事が多いです。
雰囲気がとてもやわらかくなります。
市が尾 こどものいえ保育園様は、園舎がピンクでピンクは初めから希望されておりました。
ポイントにピンクの量が多いのはその為です。はっきりしたポイント色はボタンの色に使う事も多いです。
オレンジのボタンなどはコンバージョン率（押される確率）がいいといわれています。
やわかいイメージには、黒やグレーの文字よりこげ茶や茶色の文字色がよく合います。
色は絞った方がいい
子ども関係などで、エネルギッシュな感じ、にぎやかな感じにしたい際に色をわざと大量に使う事もありますが、一般的な企業様、会社様の場合は、色を絞って使う方がデザインとしてまとまります。ファッションと同じですね。
Web特有の使いにく色もある
ホームページはブラウザを通してみるので、使いにくい色があります。
「黄色」です。黄色は一般的には黒と合わせて「注意喚起」や「元気」なイメージがあるのですが、様々なブラウザで見る為、光ってしまい文字は読めない、黄色に見えずほとんど白に見えるなど難しい色です。使われているサイトもありますが、上記の理由によりポイントとして使う際はかなり濃い黄色を使われている場合が多いです。背景に薄い黄色は大丈夫です。
まとめ
web制作の際に、よくある色見本や組み合わせを見られる方も多いと思います。
色のイメージや配分がその企業の伝えたいイメージに合うのか、どのブラウザでも可読性は大丈夫かなど考えなければいけない事がたくさんありまが、上記のように組み合わせで考えられる事をお勧めします。
余談ですが、日本の虹の色は7色です。赤、橙、黄、緑、青、藍、紫です。この色の順番で並べるととても綺麗に見えます。アメリカだと、虹は「藍（紺）」が抜けて6色になります。ドイツでは5色だそうです。日本人は色の持つイメージにとても敏感な国民なのかもしれません。
