前回記事「トーンと色味をコントロールして配色を考えてみる（トーンと配色知識）」に引き続き今回もトーンと色味で配色を決めるというテーマで見ていきたいと思います。ちょうど前回はトーンと配色に関する基本的な知識についての内容でしたが、今回は実際に自分で配色を決めるまでの流れやポイントについてまとめていきます。  

効果的かつ効率的な配色選定方法

配色を効果的かつ効率よく決めるにはどのような方法でアプローチするのがいいのでしょうか？結論から言うと次の2つの方法があるかと思います。それぞれの方法について詳しく解説していきます。   1. ロジックに基づいた色選定 色の特性や印象、またトーンやカラーバランスなどの色彩知識を使うなど、ロジックを根拠に配色を決める方法です。  

メリット	しっかりとした根拠に基づいた設計ができる、効果測定やPDCAサイクルに落とし込みやすい。
デメリット	専門的な知識が必要になるので学習コストが増える、精度を上げるためには手間がかかる。

  この方法の場合、カラーチャートの専門書などを活用することで、デメリットをある程度補完できるのではないでしょうか。いろんな書籍がありますが、個人的には次のものがオススメです。     また、当サイトでも配色に役立つ知識に関する記事をいくつか挙げておりますので、是非参考にしていただけると嬉しいです。 （参考記事） 「トーンと色味をコントロールして配色を考えてみる（トーンと配色知識）」 「ナチュラルハーモニー・コンプレックスハーモニー配色を比べてみる」 「配色をイメージ別のマトリクス上に分類してデザインワークに役立てる」 「色味別のイメージや心理的効果についてまとめてみました」   2. 配色サンプルを使った色選定 もう一つの方法として、すでに用意されている配色サンプルを使う方法です。配色サンプルは紙媒体などの冊子で用意されているのもありますが、ウェブデザインの場合ですと、下記のようなウェブサービスを利用するとカラーコードをコピーできたりするので便利です。 【Coloooors - Color scheme Collections -】 https://lab.designsupply-web.com/coloooors/  

メリット	短時間で手軽にクオリティの高い配色を得ることができる
デメリット	配色サンプルごとの主観が含まれる場合がある、マッチする配色を探す時間がかかる。

  配色サンプルを利用する場合には、そのサンプルの品質を担保するためにも出所を吟味する必要がありそうです。ちなみに当サイトでもサンプルの配色に関する記事をいくつかアップしていますので、よければ是非参考にしてみてください。 （参考記事） 「イメージ別の配色についてまとめてみる（2）」 「イメージ別の配色についてまとめてみる（1）」  

配色のポイント

色を決める上で、どのような点に気をつければいいのでしょうか？求められるデザインや、プロジェクトの特徴によって様々ですが、概ね次の3点についてはどんな場合でも共通して気をつけておくと安心です。   「まとまり、調和」が取れているか？ 色数に限らず、良い配色は調和が取れてバランスが良く、まとまった印象を受けます。色を選ぶ際には組み合わせなどに気をつけながら、調和が取れているか？統一感があるか？などをしっかりと確認しておきたいですね。   「世界観、印象」を表現できるか？ 配色はただ単に調和が取れていれば良いわけではありません。デザインとしてしっかり付加価値が生まれるよう、配色によってできる世界観や、印象などを表現できているかも重要です。バランスがよくても求められている印象や世界観と大きく異なるようであれば、残念ながらその配色は必要とされません。   「機能性」を満たしているか？ 色の持つ機能として、視認性や可読性、識別性を高めたり、注目を集めるなどの効果があります。色は情報を伝えるための重要な要素ですが、使い方を間違えると途端に伝わりにくくなったり見えづらくなることもあります。十分なコントラストが確保され、ユーザーや環境を選ばず、正確に情報が伝えられるような配色で設計することが大事です。  

扱いやすい基本の配色構成を考えてみる

配色には様々なバリエーションがありますが、使いやすい配色もあれば、使いこなすが難しいものもあります。そこで、ある程度どんな場合でも使いやすい基本的な配色の構成パターンについて見ていきます。具体的には下記の構成で設計するとバランスが良い配色を作ることができます。  

プライマリーカラー	メインとなる色で、全体の印象を決める。全体の6割くらいを占める最もよく使いたい色に設定する
セカンダリーカラー	プライマリーを引き立たせる色で、類似色を採用することもあれば、全く異なる色味を使うこともある。
アクセントカラー	目立たせたい部分で使う色を指定します。使う箇所は限定的ですがコントラストの高い色を使うことで強い印象を与えます。

  これら3つのカラーを以下のように「6：3：1」の割合で構成することがポイントになります。こうすることで適度にコントラストやリズムをつけながら、調和も取れる配色になります。   ウェブデザインをする場合には、文字色や背景色などユーザーへの機能性を高めるために、この基本配色に加えて無彩色スケール（グレースケール）を加えるといろいろと便利です。また、アクセントはプライマリーの補色に設定することでコントラストを最大化できることも覚えておきたいですね。    

テーマ別の基本配色例

上記で説明した基本配色で、いろんなテーマに合わせた配色を作ってみました。色数は限られるため表現の幅は小さいかもしれませんが、シンプルで使いやすい配色になっているのではないでしょうか。   【クール】テーマの配色サンプル   【ウォーム】テーマの配色サンプル   【女性的な】テーマの配色サンプル   【男性的な】テーマの配色サンプル   【ポップ】テーマの配色サンプル   【知的な】テーマの配色サンプル   【カジュアル】テーマの配色サンプル   【高級感のある】テーマの配色サンプル   【近未来な】テーマの配色サンプル   【自然な】テーマの配色サンプル   【アクティブ】テーマの配色サンプル   【シック】テーマの配色サンプル   少ない色数でも充分にイメージや印象を使い分けることができますね。また、色味やトーンのバリエーションを増やすことで、もっと表現の幅を広げることができそうですね。  

---

  今回はトーンや配色の知識をもとに、基本的な配色構成を考えてみました。ここで触れた配色例はシンプルなもので、実際にデザイン制作を行う上では色味が足らない場合もあります。次回は、この基本的な配色をバランスよく拡張させて、デザイン制作で充分に使える配色に変えて行く流れについてまとめてみたいと思います。