webデザインにおける色の決め方

おおくぼ（デザイナー）

2023.06.19

IT技術

Webデザイン

はじめに

こんにちは！福岡本社でデザイナーをしているおおくぼです。
デザイナーの観点から見た、エンジニアさんが知っておいて損はないデザインの知識をお教えできたら良いなと思い、筆を取ることにしました。

今回はエンジニアだけでなく、デザイナー初心者もよく迷うであろう「webデザインにおける色の決め方」についてです。
基本的なお話になると思いますが、よければ最後までお付き合いください。よろしくお願いします。

ブログ記事を書かせていただくのは初めてで少しの緊張。。

キホンを簡単におさらい

カラー

今回は3色に絞り（色数が増えるとバランスが難しくなります）、主に「ベースカラー」「メインカラー」「アクセントカラー」の決め方についてお話をしようと思います！各用語については以下説明を参照してください。

●ベースカラー：デザインの中で最も面積が多く使用される色。「背景」「余白」に使用する。
●メインカラー：デザインの中心となる色。コーポレートカラーやブランドカラーなどの一番主張したい色を使用する。
●アクセントカラー：要所要所で使用したり、メリハリをつけるために使用する色。ボタンや見出しなど、目をひきたい部分に使用する。

例えば、このコーポレートサイトのそれぞれのカラーは以下のようになります。

配色比率

配色の基本となる黄金比率は「70:25:5」です。上のカラーにそれぞれ当てはめていくとベースカラー：70%、メインカラー：25％、アクセントカラー:5％の使用になります。
うまくこの黄金比率に当てはめることで、バランスの取れた美しい配色にできます。

意外と簡単？メインカラーの選び方

私は、前職からエンジニアさん・コーダーさんとさまざまな関わり方をしてきました。同じ会社の仲間として、外部委託のパートナーとして、採用担当者として…。その中で、よく聞く言葉があります。

「色を選ぶセンスがないから、〇〇を参考にしてみた。」

「どうやって色を選べばいいのかわからないから考えてほしい。」

ふむ🤔

個人的な考えの話になってしまいますが、デザインというのは「センス」や「才能」ではないと考えています（もちろん、感覚的に優れている人がいないわけではないのですが）。

デザインのインプット量や経験則を基に、心理学や客観的なデータ、ターゲット層の思考や文化など、様々な要素をロジカルに組み立てることで、いかに正解（コンバーションや売上などの結果をよりよくすること）に近づけるかを試行錯誤して成果物をつくり上げることだと考えています。

これは色にも言えます。例えば、就活では大抵の人が黒髪に染めますよね。それはなぜかと言うと、一般的に黒髪が明るい茶髪よりも「真面目に見える」「第一印象が良くなる」「就活意欲が高く思われる」などと言われるからです。客観的事実に基づいて、より内定の確率を高めるために、自分をデザイン(=セルフプロデュース)しているわけです。

つまり「ターゲット層にどのようなイメージを伝えたいか」「目的は何か」で、メインカラーは自ずと決まってくるものなのです。
ただ、ここで注意したいのは、ターゲット層によって色の持つイメージが変わってくる場合もあります。一概に、一般的に持つ色のイメージが全ての年代・国籍に当てはまるとは言い切れません。しっかり調査してデータを集めた上で、決めていきましょう。

色が決められない、わからない、自信がない、なんだかイマイチと言った方は、目の前のデザインが誰のためのものなのか、何のために作るのかと言った部分が抽象的になっている可能性があります。言語化してイメージをしっかり固めましょう。

色の持つイメージについてはこちらの記事を要ちぇけら！（外部サイトに飛びます）

影の立役者！ベースカラーの決め方

メインカラーが決まったところで、ベースカラーを決めていきましょう。
ベースカラーは「背景」や「余白」に使用される色です。一番面積が広く使われる色になるので、メインカラー・アクセントカラーの邪魔にならない色を選んでいきたいところです。

一般的に、白〜薄い色（グレー系、メインカラーやアクセントカラーの明度を上げたもの）が使われることが多いです。文字色や写真とも組み合わせてみて、見やすい・読みやすいベースカラーを意識すると良いでしょう。

背景に暗い色を指定しない方が良い理由としては、暗い色だと文字が読みづらくなるからです。暗いベースカラーを使用したい場合は、フォント・文字色との組み合わせを注意してください。

初心者の方は、まずは無彩色からベースカラーを決めるようにしたら良いかもしれません🤔慣れたら有彩色の方にもチャレンジしてみてください。

名の通りアクセントにしよう！アクセントカラーの決め方

メインカラー・ベースカラーが決まったら最後はアクセントカラーを決めましょう。
アクセントカラーとは、名の通り強調したい部分や目立たせたい部分に使用します。

例えば、LPなんかで言う資料請求、問い合わせのボタンに使うべき色です。他には、それを使うことによって、サイト全体を引き締めたり、メリハリを出すための目的もあります。

基本的に、補色（=色相環上で反対の位置にある色の組み合わせのこと）を選ぶと、色同士のコントラストが一番強くなるので、目立ちます。なので、補色、分裂補色（=色相環上のある色と補色の両隣の位置にある色の組み合わせのこと）周辺の色を使いつつ、メインカラー・ベースカラーと併せながら、明度や彩度を調節してください。