Webデザインを制作する際に、Webサイトの配色について悩んでしまうことはありませんか？
配色は非常に難しいと感じてしまう作業の１つです。
ですが、いくつかのコツをおさえることで、Webデザインを簡単に綺麗に配色することができます。
この記事では、Webデザインを配色する際の「考え方」と「おすすめの配色ツール」を紹介しながら解説します。
目次
Webデザインの配色の考え方
それでは早速、Webデザインの配色の考え方について学んでいきましょう。
配色とは
まずは、「配色」という単語の共通認識を合わせていきましょう。
配色とは、色を組み合わせることです。
Webデザインにおいては、白黒の状態で作成されたワイヤーフレームに、デザインカンプの工程で色付けをする作業のことをいいます。
上記の例では、ワイヤーフレームからデザインカンプに移るにあたり色が付けられていることが確認できるかと思います。
Webデザインの配色は難しそうに思える
Webデザインの配色の作業は、デザイナーの方々が頭に抱える悩みの種かと思います。
- 色の組み合わせがわからない
- 色をどれくらいの面積で使えばいいかわからない
- そもそも何色を使えばいいかわからない
上記の理由から、 配色は、自分で色を選んでデザインに反映させようと思うと中々大変な作業に感じます。
Webデザインの配色を簡単にするために
そこで、Webデザインを配色を簡単に行うために２つの考え方を覚えましょう。
- ３色だけ選ぶ
- 自分の頭だけで考えない
上記の２つの考え方を押さえておくことで、配色の作業をストレスフリーに行っていくことができます。
次の章では、この２つの考え方について詳しく解説していきます。
３色だけ選ぶ
まずは「３色だけ選ぶ」考え方を学んでいきましょう。
配色を簡単に行うコツは、「ルール」を作ることが大切です。
このルールは、Webデザインを配色する際によく利用されるルールです。
そして、このルールの中で選ぶ色は下記の３色となります。
- ベースカラー
- メインカラー
- アクセントカラー
これら「３色だけ選ぶ」というルールを設けることで、デザインの配色は簡単に綺麗に行うことができるのです。
次はこの３色について詳しく解説していきます。
ベースカラー
まずは、ベースカラーの解説をしていきます。
ベースカラーは、Webサイトの背景色にあたる箇所の色です。
一般的に「白」「黒」「灰色」など無彩色の色を使います。
これら無彩色の色を用いることで、他の色の妨げになりにくく配色のバランスが取りやすくなります。
ベースカラーは、Webサイトのデザインの中で最も大きな面積を占める色です。
Webサイト全体の面積におけるベースカラーの比率は「約７０%」ほどのイメージを持っておきましょう。
ベースカラーのポイント
ベースカラーのおすすめは「白色（#FFF）」です。
特に理由のない限り、一般的なWebサイトの背景色になります。
なので、まず初めはこの白色（#FFF）から作り始めましょう。
補足
「３色だけ選ぶ」ルールに慣れてくれば、ZeroPlusのサイトのように背景色をいくつかの色に分けて決めることもできます。
しかし、４色、５色と色を増やしすぎてしまうと、最初はバランスが取れません。
色も情報の１つです。 増やしすぎてしまうと、デザインを見ている人が混乱してしまいます。
なので、ひとまずは「３色だけ選ぶ」ルールを徹底してください。
メインカラー
次は、メインカラーの解説をしていきます。
メインカラーは、Webサイトの主要なイメージカラーとなる色です。
Webサイトの面積におけるメインカラーの比率は「約２５%」ほどでのイメージを持っておきましょう。
ベースカラーのポイント
ベースカラーは、「このWebサイトのイメージカラーならこの色！」となるような頻繁に目にする色になります。
ZeroPlusの公式サイトでは、「オレンジ」がメインカラーとなるように作成されています。
案件の場合は、お客様から指定された企業/サービスの色を用いることが一般的です。
企業のロゴやアイコンなどから色を抽出しましょう。
指定が特にない場合は、Webサイトのターゲットや雰囲気に合わせて自分で考える必要があります。
アクセントカラー
最後に、アクセントカラーの解説をしていきます。
アクセントカラーは、Webサイトの大事な情報につける色です。
アクセントカラーは、本当に大事な情報に対してのみ用いられます。
なので、Webサイトの面積におけるアクセントカラーの比率は「約５%」ほどです。
最後の最後に使う奥の手の色のイメージを持っておきましょう。
アクセントカラーのポイント
アクセントカラーは「デザインを見る人に絶対気づいてほしい！」と思う箇所に用います。
ZeroPlusの公式サイトでは、サイトの「お問い合わせ」に関する箇所にのみアクセントカラーが使われています。
ZeroPlusの場合は「集客」という目的があるので、お問い合わせに関する情報が非常に大事な位置付けをされています。
アクセントカラーは「Webサイトの目的を達成する＝ゴールに繋がる箇所」に用いるようにしましょう。
ここまでのまとめ
ここまでで「３色だけ選ぶ」という配色のルールを解説してきました。
- ベースカラー：サイトの背景色になる色
- メインカラー：サイトのイメージカラーになる色
- アクセントカラー：サイトの大事な情報に用いる色
非常にバランスの取れた綺麗なWebサイトに仕上がるので、上記３つだけ色を選んでWebデザインを作ってみてください。
補足
Webデザインの配色で陥ってしまうミスとして、色を使い過ぎてしまうことです。
筆者自身も経験がありますが、たくさん色を使いすぎると最終的にバランスを取ることが難しくなります。
なので、最小限の役割を持たせた色を３色だけ選ぶことで、バランスの取れた綺麗な配色が行えるようになるのです。
デザインを学ばれている方は、いきなりたくさん色を使わず、少ない色数に絞って作ってみることがポイントです。
自分の頭だけで考えない
ここまでで、Webデザインを配色を簡単に行うために２つの考え方のうち「３色だけ選ぶ」の部分の解説をしてきました。
次は、「自分の頭だけで考えない」というコツを学んでいきましょう。
配色の作業は自分の頭だけで完結させることは難しいです。
配色の作業で使えるものはとことん使っていきましょう。
色相環を使う
まずは、「色相環」を使って色を選んでいきます。
色相環とは、簡単にいうと色相（色の違い）を円状に配置した図のことです。
この色相環を用いることで、Webデザインの色選びを簡単にしていきます。
例.アクセントカラーを決めたい
まずは、アクセントカラーを選ぶ方法を確認していきましょう。
アクセントカラーを選ぶときは色相環の構造のうち、「補色」にあたる色を選びます。
補色とは、色相環の中で円の向かい側に対応する色のことをいいます。
補色は、お互いの色に同化せず、鮮やかに見せる組み合わせの色になります。
ZeroPlusの公式サイトを例にしてみると、色相環の中で「オレンジ」と「青」は補色の関係にあります。
メインカラーがオレンジのサイトに、アクセントカラーに補色の「青色」を用いれば、
お互いの色を活かしながら、サイト内で目立たせることができるのです。
このようにして、色相環を使ってメインカラーの補色の関係を持つ色をアクセントカラーに用いることができます。
例.サブカラーを決めたい
次に、少し発展的な例も見ていきましょう。
先ほど、「配色は３色だけ選ぶ」という話をしてきました。
デザインを作成するにあたり、３色だとどうしても物足りないタイミングが出てくる時があります。
そうなった際には、バランスを崩さないようにサブカラーとなる色を１色を加える必要が出てきます。
サブカラーを選ぶときは色相環の構造のうち、「同系色」に当たる色を選びます。
同系色とは、色相環の中で隣接している色のことをいいます。
同系色は、お互いの色と調和し、統一感が生まれる組み合わせの色です。
ZeroPlusの公式サイトを例にしてみると、メインカラーは「明るいオレンジ」と「深みのあるオレンジ」の２つがグラデーションになっています。 これらは同系色の関係になっています。
メインカラーがオレンジのサイトのサブカラーには、赤や黄色などの同系色を用いても調和を保つことができます。
このようにして、色相環を使ってメインカラーに対応する同系色の色をサブカラーに用いることができます。
色相環を使った配色の方法まとめ
- アクセントカラーは「補色」の関係の色を用いる
- サブカラーは「同系色」の関係の色を用いる
ここまでで「色相環」を用いて配色を決める方法を説明してきました。
先ほどの色相環を用いた色の決め方は、ある程度使う色が決まっていないと難しい方法でした。
次の説明では、そもそも０からどうやって色を選ぶかの方法を学んでいきます。
配色ツールを使う
０から色を考える際は、配色ツールを使っていきましょう。
配色ツールとは、デザインで使用する色選びを助けてくれるツールです。
配色ツールの中には、プロ顔負けの配色パターンを提案してくれるツールもあるので、自分で考えるよりも圧倒的に素早く配色のアイデアを得ることができます。
今回は、デザインを学び始めた初学者の方でもわかりやすく使いやすい配色ツールを紹介していきます。
Adobe Color CC
「Adobe Color CC」は、トップページでは自身でカラーパレットを作成できます。
メニューから「探索」を押すことで、世界中Adobeユーザーが公開している配色パターンを探すことができます。
おすすめポイント
Adobeのアカウントがあれば、配色パターンをCreative Cloudに保存できるので、すぐにAdobe IllustratorやPhotoshopに反映できます。Adobeのデザインツールを使っている方はぜひ活用してみてください。
colorsupplyyy
色相環とカラーホイールを使って簡単に配色パターンを考えることができます。
色の明るさの調節もカラーパレットをクリックするだけでとても簡単です。
先ほと説明した色相環を見ながら、配色の例も確認できるのでよく利用するサービスです。
おすすめポイント
カラーコードも表示してくれるので、コピーすることで簡単に色を扱うことができます。 自動でグラデーションも作成されるほか、アイコンにしたときにどのように見えるか確認できるのでとても便利です。
Pigment
「Pigment」は、色のコントラスト(対比)を参考にしたいときに便利なサイトです。
見たい配色パターンをクリックするだけで確認することができます。
おすすめポイント
配色パターンも掲載数もかなりの数があります。
色の指定や明るさの調節をはじめとした、色の検索機能も優秀なので、配色のアイデアを探す際にとても便利です。
NIPPON COLORS
和風な配色をしたいときにおすすめのサイトです。見たい色をクリックするだけで確認することができます。
おすすめポイント
掲載されている色もかなりの数があるので、日本の色の名前を調べることにも使えるのでおすすめです。
「自分の頭だけで考えない」のまとめ
ここまでで「自分の頭だけで考えない」という配色のコツを解説してきました。
- 色相環を使う
- 配色ツールを使う
自分の頭だけでは配色のアイデアは生まれにくいです。 色を選ぶためには色々な場所からアイデアを得ることが肝心です。
補足
色相環や配色ツール以外にも、以下のような方法もあります。
- 配色サンプルの書籍：配色ツールの書籍版
- 色のイメージから選ぶ：「青＝信頼感」などの色のイメージから選ぶ
色の選び方は他にもたくさんありますが、 大事なことは、自分の頭だけで抱え込まず、頼れるものは頼って配色の作業をすることです。
配色のコツを覚えていこう
今回は、Webデザインの配色の考え方を学びました。
配色を決める作業はプロのデザイナーの方でも難しいと言うほどの作業です。 ですが、考え方を押さえるだけで普段の配色の作業を楽しく簡単に行うことができます。
特に、デザイン初心者の方は、配色に苦手意識を持たないことが大切です。
配色のコツをおさえながらどんどんスキルアップしていきましょう！
