デザインの重要ポイントである「配色」ですが、デザイナー入門の方やデザイン初心者には何を基準に色を選んだらいいのかとても難しいところです。
また、色はたくさんの種類があり、組み合わせると無限大…！
色を知れば知るほど、どんな色を使ったらいいのかわからなくなる…そんなお悩みを解決するために、今回は、現役のWEBデザイナーが配色を決めるときのポイントや、参考になる配色サービスをいくつかご紹介します！
- WEBサービスやアプリ開発に携わっている方
- デザインスキルをアップしたい方
- デザインの配色の選び方にお悩みの方
- 配色サービスのおすすめを知りたい方
モグモグさん
デザイナーの方じゃなくても、配色を知っていることで
センスに頼らずに目的にあったデザイン(パワポ資料などでもいかせます)を作ることができるよ！
配色選びのポイント
まずは配色選びのポイントから解説します。
モグモグさん
ポイントを抑えておけば、イチから配色を選ぶときにとても参考になり、スムーズに決めることができるよ！
1.それぞれの色の印象を知る
2.配色の比率を知る
3.カラーホイールを参考にしてみる
1.それぞれの色の印象を知る
色には心理的な要素があり、色から与える印象や影響があるのをご存知ですか？例えば、赤だと情熱的、活発的などの印象を与えます。
- 赤：情熱的、活発的
- 青：信頼感、清潔感、寂しさ、悲しさ
- 黄色：明るい、楽しい
- オレンジ：明るい、家庭的、親しみやすい
- 緑：環境的、生命力、穏やか、落ち着きがある
- 紫：神秘的、エキゾチック
- ピンク：可愛らしさ
- 黒：重厚感、高級感
- 白：清潔感、新しさ
デザインを作るときに、ユーザーにどんな印象を与えたいのかを基準に配色を選ぶのがポイントです。
2.配色の比率を知る
WEBサイトなどを作る際には、ベースカラー、メインカラー、アクセントカラーという３つのカラーを使用して、使用する比率を知るだけで美しい配色ができるようになります。
配色の比率
ベースカラー：70%
もっとも使用する比率が大きいカラーで、主に背景や余白などに使用する、ベースとなるカラーです。
メインカラー：25%
サイトのメインとなるカラーで、先ほど述べた、どんな印象にしたいのか？のカラーはここのメインカラーに配置するととても綺麗な配色にすることができます。
アクセントカラー：5%
全体の5%だけ使用するカラーで、メインカラーよりも目立つ色を配置することがポイントです。このアクセントカラーがあることで、全体が引き締まり、ユーザーの目を引く役割があります。
モグモグさん
これらの配色の比率を守ることで、綺麗で見やすく美しいWEBサイトを作ることができます。
3.色相環（カラーホイール）を参考にしてみる
色相環(しきそうかん)とは、色相を環状に配置したもので、これを使えば簡単に反対色（補色）や類似色などを見分けて配色に生かすことができます。
例えば、先ほど「2.配色の比率を知る」で紹介した「メインカラー」と「アクセントカラー」がありましたね。
メインカラーの反対色（補色）をアクセントカラーに使用すると、アクセントカラーがとっても綺麗に映えて、綺麗な配色を作ることができます。
モグモグさん
最初は、色相環を全て覚えるのは大変なので、印刷して壁に貼っておくなどしていつでも見れるようにしておくと、配色に迷わなくなりますよ！
おすすめの配色サービス
配色のポイントを説明したところで、おすすめの配色サービスをいくつかご紹介します。
Adobeカラー
Adobeツールを使っている人なら誰もが知っているAdobeカラー。
配色に悩んだ時はまずこのツールを見てみると新たな発見がある可能性が高い！
カラーを探すだけではなく、さまざまなカテゴリでのトレンドも知ることができて、色の知識を深めるのもおすすめなカラーツールです。
Happy Hues
配色を選んだのはいいけど、実際にサイトに使ったらどんなイメージになるんだろう、、、そんなお悩みを解決できるサイトはこちらです。
すでに選ばれたカラーパレットをクリックするだけで、表示されているサイトがそのままその配色に変化します。
モグモグさん
サイトをみつつ、配色のイメージを決めていくのもおすすめ！
colorkitty
この画像で使われている色が気になる、、、そんなときに便利なツールがこちらのcolorkittyです。
画像をサイトにアップロードすると自動で色を抽出して綺麗なカラーパレットを作成してくれます。
画像から配色を抽出するにはとてもおすすめなツールです。
Color Supply
Color Supplyは、色相環ベースで色が表示されており、補色や類似色を簡単に選んで綺麗な配色を作ることができます。
実際に選んだ色をアイコンなどに当てはめて確認しながら配色選びができるのでとても楽しくゲームのようにチョイスできます！
Nippon Colors
日本っぽさを出したデザインを作りたい！そんなときにおすすめなのが、Nippon Colorsです。
全ての色に日本語で名前がついていて、伝統的な日本の色を見ながら名前まで調べることができます。
カラーチャートも見やすいので、色も選びやすいのがポイントです。
ColorMind
人工知能を使用して色を自動生成してくれる便利サイト。
素敵な美しいカラーパレットを自動生成してくれるので使い方も無限大です。
写真や映画、人気のアート作品をモチーフにした配色カラーパレットもあるので、「っぽさ」を表現するにはとても便利なツールです。
LOL Colors
現役のデザイナーが作る配色サイトです。
美しい配色パレットが可愛らしい形で並んでいて、選ぶのが楽しくなるサイトです。
色をクリックするだけでHEX値が表示されるのでそのままコピーして使えます。
WebGradients
綺麗なグラデーションを作りたいけど、配色がなかなか難しくて全然綺麗にならない、、、そんなお悩みを解決するのにぴったりなグラデーションカラーツールがWebGradientsです。
好きなグラデを選んでクリックするだけで、CSSコードをコピーできるのでそのまま使えるのもポイントです。
ColorSpace
ColorSpaceは好きな色を選んで「GENERATE」ボタンを押すだけでその色を使ったグラデを自動で作ってくれるツールです。
CSSコードもそのまま表示されるのでコピペして使える便利ツールです。
おすすめ配色本
最後に、おすすめ配色本を厳選してご紹介します！
配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック
配色の基本から、配色のサンプルまでを網羅している本で、
この一冊さえあれば色の知識を深めることができて、基本が学べます。
初心者の方は特におすすめです。
配色アイデア手帖 めくって見つける新しいデザインの本
Amazonでもベストセラーとなっているこちらの一冊。
横長の本で見開きで見やすく工夫されているので、何かを作りながらや、パソコンを見ながらなどでも見やすく、色が選びやすいのもポイントです。
配色例も多いので、新たな発見も見つかります！
見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色
さまざまなデザイン関連の初心者向けのわかりやすい本を作成している「ingectar-e社」から出ている配色の本です。
3色だけでこんなデザインが作れるんだ！とびっくりする例も多く、可愛らしくおしゃれなデザインばかりなので、女性向けのデザインをするときに持っていると便利です！
まとめ
配色だけでもデザインの印象も変わってくるので、さまざまな世の中にあるデザインの色を意識しながら見てみると面白い発見があるかもしれません！
また、色は専門の資格が存在するほど、奥が深く、学べば学ぶほど楽しくなる知識です。初心者でもチャレンジできる「色彩検定」というものもあるので、今回の記事をきっかけに色の勉強をトライしてみるのもいいかもしれませんね！
