ニュースフィードに目を通しているとき、皆さんはどのようなコンテンツに目を引かれますか？YouTubeの動画や写真、GIFアニメなどのビジュアルコンテンツに目が行くことが多いのではないでしょうか？
だからと言ってテキストベースのコンテンツが重要ではないわけではありません。事実、皆さんも今こうしてこの記事を読まれているわけですから。
ただ、インフォグラフィックスや図表、グラフ、GIFアニメ、共有可能な画像といったビジュアル要素を提供することにより、読者の注意を引き、テキストベースのコンテンツを強化できるのは確かです。
「そう言われても、私はクリエイティブじゃないし、どうやって素晴らしいビジュアル要素を作ればいいか分からない」とおっしゃる方もいるかも知れません。
どうぞご心配なく。私自身まったく芸術家肌ではありませんが、それでもHubSpotでデータのビジュアル化を担当していますし、私の業務の大半は、ブログ用のインフォグラフィックやビジュアル要素の作成です。
つまりもともと芸術家肌ではないのに、説得力のあるビジュアルコンテンツを作成する方法を身につけられたということです。私ができたのですから、皆さんにも必ずできます。
まったく美的感覚のない私のような人間でも、説得力のあるビジュアルコンテンツを作ることができるツールは数多く存在します。ただ、グラフィックデザインの一部においては、多少の基礎知識があったほうが良い場合もあります。
例えば、適切な配色について考えてみましょう。色を選ぶのは、簡単なことのように思えます。しかし実際に色相環を見始めてみると、何か取っ掛かりとなる情報が欲しいと思うはずです。
そこで、今回は色彩理論の入門編をお届けしたいと思います。本記事をお読みいただき、色に関する用語、ツール、配色のヒントなどを学び、今後のデザインにお役立ていただければ幸いです。
無料で使える！デザイン作成ツールCanvaの使い方基礎
非デザイナーでも無料で楽にデザインを作成できる！ デザインツール「Canva」を使いこなす方法を画像入りで解説します
- 無料で使えるCanvaの始め方
- テンプレートの選び方
- 外部リンクの設置方法
- デザインの共有方法
今すぐダウンロードする
全てのフィールドが必須です。
色彩理論 入門編
それではまず、昔、美術の授業で習ったことからおさらいしましょう。
「原色」「2次色」「3次色」という単語は覚えているでしょうか？ 色に関する諸々を学ぶにあたり、まずこれらが基本になります。
原色、2次色、3次色
原色（PRIMARY）とは赤、黄、青のことです。絵の具を思い浮かべてみていただくと分かりやすいのですが、原色は、どれか2つを混ぜても残る3つ目の色を作ることができないという特徴があります。
2次色（SECONDARY）とは、原色同士を混ぜることでできる3つの色（緑、紫、オレンジ）のことです。
3次色（TERTIARY）とは、原色と2次色を混ぜるとできる色のことです。
さて、ここから少し複雑になります。デザインのプロたちがどのように配色を決めているのかを理解するために、色に関する他の要素についても学んでいきましょう。
中間のすべての色
ここまでで、基本となる「純色」（原色、2次色、3次色）について学びました。しかし、配色を決める際、特にコンピューター上で行う場合は、これら12の純色よりはるかに多い色の中から選ばなければなりません。
なぜこのように色の種類が多いのかと言うと、各純色に白、黒、グレーを混ぜることで、鮮やかにしたり、明るくしたり、やわらかくしたり、暗くしたりということが可能だからです。そして、こうして作られた色は、それぞれ別の用語で分類することができます。
色相（HEU）：色相は、普段私たちが使っている「色」という単語の類義語だと言ってよいでしょう。例えば、原色や2次色はすべて「色相」になります。
暗調（SHADE）：「暗調」という単語は聞いたことがない方でも、「色調」という単語は耳にしたことがあるのではないでしょうか。色調とは、同じ色相で、明るさや暗さが異なっている色のことを言います（例えば「赤」という色相なら、暗い赤や明るい赤）。そして「暗調」とは、そのうちの、純色に黒を加えてできる色調を指しています。加える黒の割合により、さまざまな暗調が生まれます。
明調（TINT）：明調は暗調の逆で、純色に白を加えてできる色調を指しています。加える白の割合により、さまざまな明調が生まれます。
トーン（TONEまたは彩度）：トーンは、中間色調とも呼ばれ、純色に黒と白の両方を加えてできる色調のことを指しています。トーンと彩度は基本的に同じことを意味していますが、デジタル画像の場合は「彩度」を使う場合が多く、塗料の場合は「トーン」を使うのが普通です。
加法混色と減法混色
これまでに何かしらのコンピュータープログラムを使って色をいじったことがある方は、RGBカラーまたはCMYKカラーの一覧を見たことがあるはずです。そして各色の隣には数字が記載されていたかと思います。
これらが何を意味するのか疑問に思ったことはありませんか？
CMYK
CMYKとはCyan（シアン）、Magenta（マジェンタ）、Yellow（イエロー）、Key（ブラック）の頭文字です。これらの色はプリンターのインクカートリッジでおなじみかと思いますが、これは偶然ではありません。
CMYKは、減法混色のカラーモデルです。なぜ減法混色と呼ばれているかと言うと、白色を得るために色を「減らす」必要があるためです。逆もまたしかりで、黒色を得るには色を加えます。色を加えれば加えるほど黒に近づきます。少しややこしいですね。
紙に印刷することを考えてみてください。
プリンターで印刷する場合、通常は白い用紙をセットして印刷すると思います。そして色を加えていくことで、白の波長を遮り、何かしらを印刷します。
次に、印刷した紙をもう一度プリンターにセットして、さらに上から何か印刷するとします。すると、重複してプリントされた部分が黒に近くなっているのが分かるはずです。
CMYKを対応する数字で考えると分かりやすいかも知れません。C＝100、M＝100、Y＝100、K＝100だと真っ黒になります。反対に4色すべてが0だと、真っ白になります。
RGB
一方のRGBは、コンピューターなど電子ディスプレイに使用されているカラーモデルです。
RGBは、Red（赤）、Green（緑）、Blue（青）の頭文字で、光波の加法混色に基づいたカラーモデルです。つまり、色を加えれば加えるほど、白に近づきます。
コンピューターでは、RGBは0～255の数値で表されます。黒はR＝0、G＝0、B＝0です。白はR＝255、G＝255、B＝255になります。
コンピューター上で色を作成する場合、通常RGBとCMYKの両方の数値が表示されていることがほとんどだと思います。適した色を見つけるためには、どちらを使ってもかまいません。一方の数値が変われば、もう一方は自動で変更されます。
ただ、多くのウェブプログラムでは、RBGまたはHEXコード（CSSおよびHTMLで色に割り当てられたコード）しか提供されていないことが多いので、デジタル画像作成のために色を選ぶ場合は、RGBを使うのがベストでしょう。
配色を決める
ここまでで色の基本が分かりました。では実際にこの新しい知識を実務にどう応用すれば良いかを見ていきましょう。
皆さんは、これまでにも、相性の良い色の組み合わせと、相性の悪い色の組み合わせがあることに気付いたことがあるかと思います。配色によって、デザインの良さをさらに高められる場合もあれば、デザインを損なってしまう場合もあります。
グラフィックをデザインする際に注意したいのが、人間の色の認識はコンテキストに左右されるという点です。
これをカラーコンテキストと言います。私たちは、他の色とのコントラスト（対比）によって、同じ色でも異なった認識をしています。
例として、以下の円の図をご覧ください。
それぞれのペアの内側の円は、同じサイズ、形、色になっており、唯一異なるのは背景の円の色だけです。それにもかかわらず、背景の色によって、内側の円がやわらかく見えたり、明るく見えたりしていませんか？ さらに、動きや奥行きまでも違って見えることもあります。
これは、2色をどう組み合わせるかによって、私たちの色の受け取り方が変化するために起こる現象です。ですから、グラフィックデザインの色を選ぶ際は、どのくらいのコントラストを実現したいのかを考えなければなりません。
例えば、シンプルな棒グラフを作成している場合、暗い背景に暗い棒を使おうと思うでしょうか？ おそらく思わないでしょう。読者には背景ではなく棒グラフにフォーカスしてもらいたいわけですから、棒と背景のコントラストははっきりさせようと思うはずです。
ただ、コントラストの強い色を選ぶのは、それほど難しいことではありません。難しいのは、互いによく合う色を選びたい場合です。
私もよく合う色を選ぶのは苦手です。ベストな配色の感じをつかむにはそれなりの時間がかかりますから、インフォグラフィックの色を決めるのに何時間も費やすということもありえます。
ただ現実的に、そのような時間の余裕はありません。（もし余裕があったとしても、配色を選ぶのにそこまで時間をかけるのは、おそらく時間の無駄でしょう。）
幸いなことに、相性の良い配色を決めるための、論理的なルールというのが存在します。それでは、そのルールを見ていきましょう。
類似色配色
類似色配色とは、色相環から1つの色を選び、その両隣に位置する色と組み合わせる配色です。3色ではなく5色使いたい場合は、両隣の色のさらに隣にある色を追加することも可能です。
類似色配色のコントラストは弱いため、通常はソフトなデザインを作るのに使用されます。例えば、秋の色や春の色を演出するのに類似色配色を使うことが考えられます。
私自身、暖色（赤、オレンジ、黄）、あるいは下の図のように寒色（紫、青、緑）のカラーパレットを作るのに、この配色を好んで使っています。コントラストは強くありませんが、色同士の相性が良いと思いませんか？
私でしたら、このカラーパレットは、インフォグラフィックや棒グラフではなく、画像に使うと思います。そうすることで、画像内のすべての要素をうまく調和させることができるからです。
単色配色
単色配色では、1つの色相の異なる色調を使用します。色のコントラストには欠けますが、とてもすっきりとした上品な印象になります。また色の暗さや明るさを簡単に変更することが可能です。
私は、強いコントラストが必要ではない場合に限り、図表やグラフに単色配色を使うのが好きです。ただ単色配色は、パッと目を引くものではありませんから、鮮やかで目を引くような配色を探している場合には向かないと言えるでしょう。
3色配色
3色配色は、同じトーンを保ちつつ、強いコントラストを実現する配色です。3色配色には、色相環上で等間隔の位置にある3色を使います。
3色配色はコントラストをはっきりさせたい時に最適です。ただ3色すべての色調を揃えると過度になりすぎる場合があります。
その場合は、メインの色を決め、他の2色では少しやわらかい色調を選ぶか、他の2色はアクセントとして使うようにすると良いでしょう。
3色配色は、何かを比較するときに必要となるコントラストを提供してくれるので、棒グラフや円グラフなどに最適です。
ただ、この配色でインフォグラフィックを作る場合、私であれば、おそらく黄色や薄緑色といった色を1つ背景色として選び、暗めでコントラストの強い色をメインの色として使うと思います。残りの3色もアクセントとして使うかも知れません。デザインの中で色の強さを変更することで、重要なポイントや覚えておいてほしい内容を強調することが可能です。
補色配色
名前から予想がつくかと思いますが、補足配色とは、色相環で向かい合う2色と、その2色の異なる色調を組み合わせたものです。
補足配色は、もっともコントラストの強い組み合わせです。そのため、デザインに補色を使う際は慎重に考える必要があります。1色をメインとし、もう1色はアクセントとして使うのが良いでしょう。
補色配色は、図表やグラフに向いています。強いコントラストで、重要なポイントや覚えておいてほしい内容を強調することができるからです。
ただし、インフォグラフィックでこれらの色を使う場合は、背景にはもっと明るい色を使う必要があるでしょう。以下のカラーパレットのオレンジのいずれかを背景に使い、青をテキストとアクセントに使った場合、おそらくどぎつ過ぎて読みにくいはずです。
分裂補色配色
分裂補色配色は、メインの色と、その補色の両隣の色を組み合わせる配色です。分裂補色配色を使うと、コントラストの利点は保ちつつ、補色配色ほど強烈でないカラーパレットを作成することができます。
分裂補色配色は、類似色配色や単色配色と違い、使用されている色すべてにコントラストがあるので、バランスを取るのが難しい場合もあります（補色配色も同様です）。
以下の分裂補色配色のカラーパレットは、様々な用途に使うことが考えられます。コントラストが強く、なおかつ見た目も魅力的な色なので、図表やグラフに使うのも良いでしょうし、インフォグラフィックに使うのも良いと思います。ただその場合、どの2色の組み合わせがベストかもう調節してみる必要がありそうです。
分裂補色配色のメリットは、どの2色を組み合わせてもコントラストが得られるということです。ただその反面、適切なバランスを見つけるのが難しいというデメリットがあります。そのためコントラストの適切な組み合わせを見つけるために、少し色を調節してみる必要があるかも知れません。
どの配色を使用する場合でも、グラフィックに何が必要なのかということを、まず考えるようにしてください。コントラストが必要なのであれば、コントラストの強い配色を選びましょう。あるいは、ある色の最適な色調を見つけたいだけなのであれば、単色配色を使って、完璧な明調・暗調を探しましょう。
このように配色の仕組みを簡単に理解しておくだけでも、適切な配色選びに役立ちます。「このグラフィックのゴールは何か？」を考えれば、どのくらいのコントラストが必要か（あるいは必要ないか）が自ずと決まってくるでしょう。
ただ上記の配色ルールを使って5色選んだとしても、その5色すべてを使わなければいけないわけではありません。1つのグラフィックに5色全部を詰め込むよりも、そのうち2色だけを使ったほうが、よほど効果的な場合もあります。
カラーツール
色の相性の良しあしとその理由を理解するにあたり、多くの理論と実用的な情報が存在することが分かりました。しかし、実際にデザインしながら色を選ぶ段階になったら、迅速かつ簡単に配色を決めることのできる便利なツールを使うことをお勧めします。
幸いにも配色に役立つツールは数多く存在します。
Adobe Color
私のお気に入りのカラーツールの1つがAdobe Color（旧Adobe Kuler）です。インフォグラフィックであれ、単なる円グラフであれ、色を決めるのに大活躍しています。
Adobe Colorは無料のオンラインツールで、前述した配色ルールに基づいて手早く配色を構成することができます。任意の配色ルールで好きな色の組み合わせを選んだら（選んだ色の組み合わせは「テーマ」と呼ばれます）、それらの色のHEXコードまたはRGBをコピーして、使用しているプログラムに貼り付けることができます。
また、事前作成された数百種類もの配色が用意されており、それをデザインに使うことも可能です。Adobeユーザーであれば、選んだテーマを簡単にアカウントに保存することが可能です。
Illustratorのカラーガイド
私は多くの時間を、Adobe Illustratorを使って過ごしています。その中でも最もよく使っているのがカラーガイド機能です。カラーガイドでは、1色基本となる色を選択すると、自動的に5色の配色を生成してくれます。また配色内のそれぞれの色の様々な色調も提供してくれます。
基本色を変更すると、対応する配色も自動的に変更されます。例えば、補色配色を選んで、基本色を青にした場合、補色はオレンジになりますが、基本色を赤に変えた場合、補色は自動的にオレンジから緑に変更されます。
Adobe Colorと同じく、カラーガイドにも多数のプリセットモード用意されており、そこから好きな配色を選択することが可能です。これにより既に使用しているプログラム内で適切な配色を選ぶのが簡単になります。
配色の作成が終わったら、「カラーテーマ」内に保存することが可能で、保存されたテーマは、今後のプロジェクトで使用することができます。
プリセットカラーガイド
Adobeユーザーではない方でも、おそらくMicrosoft Office製品なら一度は使ったことがあるかと思います。すべてのOffice製品にはプリセットカラーが用意されており、配色を決めるために使用、編集することが可能です。PowerPointにも多くのプリセット配色が用意されているので、デザインのインスピレーションを得るのに使うことができます。
配色が用意されている場所は、PowerPointのバージョンにより異なりますが、文書内で「テーマ」というメニューを探してください。テーマ内で配色を開いて、色を選択すると、RGBまたはHEXコードで色を調節できるはずです。
そのコードをコピーして、デザイン作業を行っているプログラムに貼り付けて使いましょう。
理論から実践へ
本記事では多くの理論を紹介しました。多すぎると思われた方もいるかも知れません。しかし実際に色を選択したり使用したりする際、背景にある理論を知っていると作業が格段に捗ります。
最後に、色を選択する際のコツをいくつかお伝えして終わりにしたいと思います。それでは、素晴らしい画像を作成して、ブログ記事やSNS投稿を強化してください！
- プリセットをそのまま使わない：ほとんどすべてのプログラムでプリセットカラーが用意されているかと思いますが、プリセット以外の色も検討し、独自の配色を作成してみましょう。デザインにどのような色を使うかプログラムの言いなりになる必要はありません。
- 好きな1色から始める：私は何かをデザインする際は、まず1色選んで、それから配色を構成するようにしています。複数の色で始めると、色同士の調和を見つけるのが難しくなりがちです。
- 配色を保存する：満足いく配色が作成できたら、おそらくまた後で役に立つこともあるでしょう。すべての図表やグラフに同じ配色を使うことはお勧めしませんが、好きな配色を保存しておけば、また別の機会に使用することができます。
- 努力に勝る天才なし：デザインや配色は練習すればするほど上手くなります。最初から最高の作品が作れる人はいません。
皆さんは、色選びにどのようなコツを使っていますか？ コメント欄で是非共有してください。
編集メモ：この記事は、 2015年8月に投稿した内容に加筆・訂正したものです。Bethany Cartwrightによる元の記事はこちらからご覧いただけます。
