おしゃれな資料を作りたいのに「いつもまとまりのない印象になってしまう」「どの色を使うべきか決められない」など、配色や色使いに悩んだ経験はありませんか？
SNSに投稿する画像を作ったり、ビジネスマンならスライド資料やパワーポイント、もしくはWebサイトのラフを起こしたりする際に、「配色」は内容以上に印象を左右する大きなポイントです。
一歩間違えると、まとまりがなくなることはもちろん、説得力も下がってしまいます。
そこで、今回はスライドやSNSの投稿に使用するカラーの決め方や、活用したい無料の配色ツール、押さえておきたいポイントなど、ノンデザイナーが最速で資料をかっこよく決めるカラー戦略をご紹介します。記事を監修するのはDUAL WORKのデザイナーでもある、中山亜希。これまでに広告代理店でコンビニエンスストアの広告デザインを手掛けてきたプロに、配色がまとまるコツを教えてもらいました！
色選びや配色のバランスに悩みを抱えている方は、永久保存版としてぜひ活用してください。なお、今回からの３回は「ノンデザイナーのためのデザイン戦略」として、配色、余白、フォントとテーマを設定して、最速で結果を出す方法をご紹介していきます。
デザインで失敗しないコツは、カラーは”4色まで”に絞ること
まず最初の結論として、統一感ある配色を作るために、「カラーは4色まで」に絞りましょう。
ノンデザイナーの方は新しい色の組み合わせを発明することは諦めましょう。無限の組み合わせに頭を悩ませるよりも、変数を減らしてその分内容で勝負するほうが賢明です。1色目、2色目は背景カラー・フォントカラーと限定することで、より簡単にカラーを決めやすくするのが鉄則です。
1色目の背景色カラーは名前の通り背景に使われる色のことです。ここでは、「白」もしくは「薄いベージュ」を使用します。奇をてらうよりも、スタンダードにものを作成しても中身が見劣りすることにはなりません。
また、2色目のフォントカラーは、文字に使われている色のことを示します。ここでは、「黒」もしくは「濃いグレー」を使用します。太めのフォントを使用する場合であれば「濃いグレー」を選ぶことで柔らかい印象を与えられます。
クリエイティブのイメージを左右する“3・4色目”の選び方
ここまでの1色目と2色目は、どんなものを作る場合も共通していると考えてください。その上で、クリエイティブのイメージを左右するのは、3・4色目です。ここさえ上手く決まれば、誰でも簡単に失敗しない配色を作れます。
ここからは、3・4色目のカラー選びについて、より具体的な考え方をご紹介します。
こちらが永久保存版の3色目・4色目を決める判断チャートです。
3色目に使うカラーは、メインの色として使います。
この3色目が自分が作りたい世界観に直結するため、適切な色を選んでください。
3色目に使いたいカラーが具体的に決まっている場合
3色目に使用するカラーが具体的に決まっているのであれば、3色目にぴったりな4色目を選びましょう。
具体的にカラーが決まっている、とは「実際に使うカラーコード(※1)が分かっている」状態のことです。
例えば「緑」とひとくちに言っても、緑のなかに無限の種類が存在しています。
その中で、自分が使いたい「緑のカラーコード」が判明している時に、有効な方法です。
(※1)カラーコード：アルファベットと数字の6桁で作られる、色を決める具体的な指標。白は #FFFFFF と表現され、黒は #000000 で表されます
あらためて、具体的に3色目が決まっている場合に、4色目を選ぶ基準は2通りです。
１．とにかく統一感を出したい
２．メリハリのある演出をしたい
それぞれの場合で選ぶ４色目の考え方が異なるので、以下に解説していきます。
A:とにかく統一感を出したいなら、３色目に使用したカラーの濃淡を選ぶ
全体的に統一感を持たせるのであれば、3色目に使用したカラーの濃淡を使って4色目を選びましょう。
3色目で使用した色を基準（上記の例では「緑」の #a4be46 ）を、カラーピッカー(※2)という”グラデーションの四角形”で表示します。そして、統一感を出すためにカラーピッカー上で、一直線を引くイメージで、その直線上の色を選択すると統一感が演出できるのです！今回の例ではもとのセレクトした緑を中心に、淡い色・濃い色を選びましたが、それらを4色目(5色目)と使っても統一感を維持したまま資料を作成可能です。
(※2)カラーピッカー：パレットのように、色をグラデーションの中から選択して取得するツール。カラーコードを知らなくても、同系統の色彩を取得することができる。Googleスライドやパワーポイント、その他デザインツールなどで、色を変更/カスタマイズする画面から表示できます。
こちらが、それらの色を利用したパワーポイントやデザインのイメージです。統一感を感じる事ができるのではないでしょうか？
B：メリハリのある演出をしたいなら、３色目の補色を選ぶ
続いて、クリエイティブの一部に目線を誘導させたメリハリのある演出をするのであれば、アクセントカラーを使用します。主に、メインカラーの補色または反対色を選ぶことで、パンチの効いた印象を作り出せます。
補色とはカラーホイールにおいて、対角線の位置にある色のことです。反対色とはその両隣の色になります。
これらのカラーホイールも、デザインの長い歴史の中で発明された、お洒落に演出するための先人の知恵です。ノンデザイナーは新しい組み合わせを発明・発見するのではなく、既存のベストプラクティスを借りることで、内容にこだわってデザインしていきましょう。
実際に、補色や反対色を利用して作成したスライドのイメージがこちらです。
統一感をキープしたまま視線がうまい具合に誘導されて、アクセントカラーを見てしまったのではないでしょうか？
なお、以下の Color Supply などのカラーホイールを利用すれば、簡単に様々なパターンの補色を選ぶことができるので、ぜひ活用してみてください。
・Color Supply （https://colorsupplyyy.com/app/）
3色目に使用するカラーが具体的に決まっていない場合 / どんな色を使うかから決めたい場合
C：カラー検索サイトで、実際に使用する3色目を決める
3色目に使いたいカラーの方向性は決まっているものの、より具体的に決めきれていないのであれば、カラー検索サイトを利用しましょう。
例えば、日本茶を販売するECサイトの配色を決めるにあたって、3色目で「緑」を使用したいと考えているとします。すでに書いているように、一口に「お茶の緑」と言っても、抹茶のような鮮やかな緑色もあれば、煎茶のような薄い緑もあるなど、「緑」だけでも無数に色が存在します。そんなときは、キーワード（日本茶・抹茶・茶葉など）や表現したいイメージ（温かい、高級、爽やかなど）からカラーをより細かく検討する方法が有効です。
一度、色彩が入らない文字情報として思考することで、多くのイメージを膨らませて、本質に素早くたどり着くことができます。そして何より文字情報として整理することで、より正しく思い描く色をイメージすることができるようになるのです。
ここで、表現したい色の方向性が決まったら、その後にぜひカラー検索サイトを活用しましょう。
その際に利用したいオススメは Adobe Color です。
無料で使える Adobe Color は、探索バーにキーワードを入力することで、おすすめのカラーを複数提案してくれるツールです。4色目に使用できそうなカラーも同時に提案されるため、それらを使用すれば、より統一感を演出しやすくなります。
Adobe Colorはクリエイティブのプロの現場でも利用されている、信頼性の高い無料ツールなので配色に困った際は、積極的に活用してください。
3色目に使いたいカラーが決まっていない場合
そうは言っても、テーマが特になく「単純におしゃれなビジュアルを作りたい」という方も多いですよね。それでも、お洒落にデザインをするためのカラーの選び方も解説していきます。
D：自然の写真から色を選ぶ
最も手軽で、独自性の出る色の組み合わせが「自分が好きな自然の写真」から色を作成することです。ご自身が撮影されたものでも、インターネット上で入手したものでも構いません。その自然の写真の中から、自分自身が心地よいと感じた色を抽出すれば、バランスの良い3色目・4色目を決める事ができるのです。
人の目は、自然界が生み出した色の組み合わせに調和を感じるように出来ています。その習性を利用して、自然の写真から色を抽出することで、全体的にバランスの取れた配色を実現することが出来ます。人工物が入った写真よりも、自然のもので作られている写真を利用してください。
実際に色を抽出するには、専用アプリなどを利用しても良いのですが、先程紹介した Adobe Color が便利です。サイトに写真をアップロードし「テーマ抽出」をすることで、バリエーションを想定して色を提案してくれます。
選んだ色からもカスタマイズや雰囲気の変更も可能なので、最終的に自分に見合う3色目・4色目を探してください。
・Adobe Color（https://color.adobe.com/ja/create/image）
E:パターンサイトから選ぶ
もしデザインに使用するカラーのイメージがまったく決まっていないのであれば、無機質なパターンサイトを利用するのも一つの方法です。世界中で配色に悩んでいる人の困りごとを解決すべく、世の中には便利なパターンサイトが溢れています。以下は、おすすめのサイトですので、ぜひ活用してみてください。
HELLO COLOR
クリックする毎に、3色目・4色目にピッタリの2色を提案してくれるサイトです。見落としがちな反対色の近くから、自分の色に似合う色が出てくるまで、クリックをして探すのも、楽しい活用方法です。
・HELLO COLOR（https://jxnblk.github.io/hello-color/）
画面をクリックするたびに配色パターンが変わります。クリエイティブに使用するカラーのイメージが湧いていない時や、直感的に選びたい時などにおすすめのサイトです。ポップでおしゃれな組み合わせも、これなら簡単に見つかります。
押さえておけば失敗しない！カラー戦略で心得るべき3つのこと
ここからは、まとめです。
心得1：クリエイティブで使うカラーは4色まで
繰り返しになりますが、ノンデザイナーが失敗しない配色を作るためには「4色」しか使わないと決めましょう。あまりたくさんのカラーを使用してしまうと、ちぐはぐな印象を与えてしまう可能性があるため、まずは基本を守ります。
心得2：新たな発明をしない
ついつい、「この色とこの色を組み合わせたら、おしゃれに見えるのでは？」と勝手に組み合わせを考えたくなることがありますが、いつの間にかバラバラなデザインになっていることは少なくありません。新たな発明を独自に行うのではなく、デザインツールなどを有効活用して失敗しない配色を作ることを目指しましょう。「新たな発明をしないこと」がノンデザイナーのデザイン戦略の要になります。
心得3：配色の比率は、70：25：5を意識する
4つのカラーは選んだら終わりではなく、使い方にも気を配りましょう。配色の基本ルールは、
ベース70%：1色目・2色目（背景・フォント）
メイン20%：3色目（ロゴや見出しなど）
アクセント5%：4色目（注目・統一感）です。
これらの比率を守れば、統一感ある印象を与えやすくなります。
・・・
来週以降のデザイン戦略の別記事で、ノンデザイナー向けの余白の作り方やフォントの選び方など、まだまだ副業する上で最低限押さえておきたいデザイン戦略についてご紹介していきます。ぜひ試行錯誤しながら、ご自身の副業やビジネスのブランディングにつなげてくださいね！
執筆： 大畑朋子
企画・編集： 新井勇作
デザイン・監修： 中山亜希
DUAL WORKでは副業関連情報を定期的に発信しています！
宜しければ、この機会にDUAL WORKメルマガにご登録くださいね！
