こんにちは！ASUE株式会社広報のN村です。

さて、デザインする上でどうしても悩むことの一つ、配色。今回はWebデザインにおける配色のポイントと実際に色を選ぶときに使えるWeb配色ツールをご紹介したいと思います。

配色に重要な3つのカラー

Webデザインでは、基本的にベースカラー・メインカラー・アクセントカラーの3つを基準にデザインします。ベースカラーは最も画面を大きな割合を占めるカラーで、余白や背景に用いる色です。白や黒、グレーなどの無彩色が使用されることが多いです。メインカラーはデザインの印象を決める主役の色であり、主にコーポレートカラーやブランドカラーのような色を使用します。最後にアクセントカラーはユーザーの目を引くための色で、WebのコンテンツではCTAなどに用いる色です。

一般に、このベースカラー・メインカラー・アクセントカラーを75%・25%・5%の割合にするとまとまりのあるデザインになると言われています。完全にこの比率にするのは難しいですが、この目安比率を知っておくと配色を考えやすくなるので、覚えておくと便利です。

色相環と色の三属性

色相環とは、簡単に言うと色相を環状に配置したものです。色相とは赤・オレンジ・黄・緑……のような色の様相のことをさします。色は光の波長（可視光：380nm〜780nm）で連続的に変化しています。それを順番に並べて円状にし、色を円の角度で表現できるようにしたのが、この色相環です。

色相環では、隣り合っている色が近しい色（=類似色）や円上で反対側にある色（色相が180°違う色）が補色など、色を体系的に理解するのに役立ちます。

そして、色相の中で、赤やオレンジなどの暖かみを感じる色を暖色、青系の寒そうな印象を受ける色を寒色、2つに当てはまらない紫や緑系のカラーを中性色と呼びます。

続いて、色相以外の色の属性についてご紹介します。色には色相以外に明度・彩度という3つの属性があります。明度は色の明暗を指し、明るくなって白に近づくほど明度が高く、逆に暗くなって黒に近づくほど明度が低くなります。彩度は色の鮮やかさを指し、彩度が高ければ鮮やかなはっきりとした色、彩度が低いと暗く濁ったような色になります。（上のトーンチャート参照）

色相環から考える定番配色パターン

さて、ここまで色相環をはじめとした色の属性についてご紹介してきましたが、この色相環を使うと、配色の考え方のヒントを得ることができます！

同一色相配色

同じ色相で、彩度・明度を調整した濃淡のカラーで配色する方法です。同じ色相のカラーなので、全体的のまとまりを出しやすい配色です。

類似色相配色

同一色相配色と似ていますが、こちらは隣接する色相（30-60°程度の色相差）の3色を使って配色する方法です。

補色色相配色

補色同志の2色を使って配色する方法です。正反対の2色を組み合わせるので、目をひきやすい配色になります。
ちなみに、補色ではなく補色の隣付近を（基準の色と120〜150°くらい色相の違う色）を対照色と呼び、それらと組み合わせる場合は対照色相配色とよぶそうです。

分裂補色配色

こちらは補色色相配色と似ていますが、基準の色+補色と隣接する色相の2色を使う配色方法です。

3色配色

こちらは色相を120°ずつずらした3つの色相を使って配色する方法です。

4色配色

こちらは色相を90°ずつずらした4つの色相を使って配色する方法です。

同一色でまとめる場合は考えやすいかと思いますが、2色を使った配色や3-4色のマルチカラーの配色を考える場合は色相環内で規則的に選ぶとある程度調和の取れた配色をしやすくなるかもしれません。

もちろん今回紹介したようなパターン以外以外にも色の組み合わせ方は無限にあるし、自由なので、ターゲットや商品イメージに合わせた配色を考えると◎だと思います。

配色で気をつけるべきポイント

色数を少なくする

最初に挙げた3色以外に、テキストカラーなど別の色を使う場面が出てきます。それ自体は問題ありませんが、例えばここもここも目立たせたいからここは赤！こっちはオレンジ！のように、色数をどんどん増やしていくとデザインにまとまりがなくなり、ごちゃごちゃしてしまいます。

最初に挙げたベースカラー・メインカラー・アクセントカラーという基準の色を決めておいて、そこから全体をバランス良く配色するようにしましょう。

文字が読めない/目が疲れる……文字と背景のコントラストに要注意

続いて、文字色と背景色についてご紹介します。文字色と背景色のコントラスト（明度の差）は、文字の読みやすさに大きく関わってきます。

例えばブログなどの記事コンテンツであれば、白（#ffffff）背景に黒っぽい文字（#333333）などが多いですね。ちなみにASUE通信のプレーンテキストは#485566です。これがもし、薄いグレー（#aaaaaa）のような明るい文字色だと文字が読みにくく大変ですよね。視力がいい人であれば多少は問題ないかもしれませんが、視力が悪い方などは間違いなく大変でしょう。

一般に、文字色と背景色は一般にコントラストが4.5:1ほどの差があると良いとされており、例に挙げた#aaaaaaの場合は白とのコントラストが2.32となっています。文字のサイズや太さにもよってはもう少し低くても大丈夫ですが、基本的には最低限4.5のコントラストは保つようにしましょう。

逆に、コントラストが強い場合も考えてみましょう。

例えば、背景を真っ黒（#000000）にして文字色を白（#ffffff）にした場合。よくWebサイトでも見る色合いではありますが、細かいテキストを読むにはちょっと大変……と思いませんか？
真っ黒（#000000）と真っ白（#ffffff）では、コントラストが高すぎてしまい、長時間見ると目に負担となってしまいます（ちなみにこのときのコントラストは21らしいです）。そのようなデザインが絶対にNGというわけではありませんが、ブログやニュースサイトなど、読み物系のコンテンツなどだと向かない場合があります。

計算方法は調べてみたら難しそうだったので載せませんが、文字色と背景色を設定するとプレビューとコントラストを出してくれるサイトもあるので、デザイン前に一度確認しておくとベターです。

文字が読みにくいとユーザーから離脱される可能性も高まってしまうので、文字色や文字を乗せる部分の背景は気をつけて選びましょう！

おすすめ配色ツール

ここまで、配色の考え方や定番パターン、気を付けるべきポイントについてご紹介してきましたが、結局どうやって決めればいいの！？ってなりますよね。わたしはなります。

ということで、今回は実際の業務に役立つ配色を決めるのを手助けしてくれるツールをいくつかご紹介します。

あくまで参考や手助け程度であって、これらを使えば確実に探していた未だ見ぬ配色を発見できる！みたいなものではもちろんないですが、ぜひお役立てくださいね！

使いたい色（メインカラーなど）が決まっている場合

Colorbase

https://colorbase.app/ja

特定の色を指定すると、その色の詳細情報やシェードカラー・ティントカラー・グレースケール、さらに補色や色相が120°、90°、150°離れたカラー、色覚シミュレーションやコントラストチェッカーなどが表示されます。

これが個人的には一番お気に入りで、コーポレートカラーやブランドカラーなど決まっている色から合う配色を考えやすいツールになっています。

Pletton

https://paletton.com/

特定の色の濃淡カラーと類似色相配色・3色配色・4色配色のパターンを表示できるツールです。お手軽。

Adobe Color

https://color.adobe.com/ja/create/color-wheel

決めた色に対して、類似色・同一色相のカラー・3色配色などのマルチカラーパターン……など、いろいろな色パターンを出してくれるサイトです。
色覚シュミレーターなどもついているので、アクセシビリティに配慮した配色が考えられる他、画像からの色抽出なども可能です。
Creative Cloudにログインすれば配色パターンの保存なども可能です。

そもそも色が決まっていない……場合

Color HuntやScheme Colorでは、サイトのイメージ（例えばウェディング、クリスマス、ヴィンテージ、バレンタイン、夏など）で配色パターンを検索できるので、実際のデザイン用途に近い配色を探すことができます。

また、Happy Huesではパターン数は他の2サイトには及びませんが、実際のWebサイト上でのイメージが確認できたり、本文テキストや見出しテキストに使うカラーまで用意されています。

その他、今回はご紹介しませんがランダムに複数色の組み合わせを作ってくれるサイトなどもあるので、そちらを参考にしてみてもいいかもしれません。

綺麗なグラデーションカラーのためのツール

上の2つは綺麗なグラデーションの例がたくさん載っているので、色使いの参考になります。そしておすすめなのが3つ目に挙げた指定した2色によるグラデーション作成ツールです。

通常、選んだ2色のカラーでグラデーションを作るとこうなります。
例えば青とオレンジだと……。

これはこれでくすんだかんじもエモくてスタイリッシュ（言いたいだけ）な感じがしてありですが、くすんでいない明度・彩度高めのグラデーションが作りたい！と言う場合にこのツールに2色を設定するとこう！

続いて青と黄色のグラデーションの場合は、

こちらも、真ん中あたりがくすんでしまいました。青と黄色だと例えば夏っぽいイメージの配色だった場合はこれだと少しイメージに合いません。

こちらのツールを使うとこうなります。

爽やかな夏カラー！なグラデーションができました。

単純に2色のグラデーションをイラストレーターやフォトショップで指定すると、色相環の中を最短距離で変化するようなグラデーションを作ります。その場合、特に補色や対照色などのカラーだと円の中心部を通ってグラデーションを作ることになるため、くすんでしまいます。

このツールでは、真ん中を通らない形でグラデーションを作ってくれるので、くすまないグラデーションが作れます。

まとめ

デザインなどをするにあたってどうしても悩む配色。

基本的な部分を押さえた上で、便利なツールを駆使しながらターゲットや商品にあった素敵な配色にできるといいですね！