配色に悩まず、もっとラクにできたらいいのに・・・
と思っていませんか？
配色をラクにする方法は、すでにバランスよく整った配色をマネる！のです。
デザインが本業でない人でもできそうなマネる方法やコツを、この記事ではご紹介したいと思います。
具体的には、
- 0から配色するための方法を4つ
- 決まった1色に合わせる色を決める方法を2つ
を、お伝えします。
この6つの配色方法のどれかを使えば、今までよりラクに配色ができるようになるかと思いますので、ぜひご一読ください！
ちなみに、この記事ではWeb上で使えるデザインツール「Canva（キャンバ）」でアイキャッチを作成することを想定しています。
Canvaは無料で使え、デザイン経験者でなくても感覚的に操作でき簡単にアイキャッチが完成するのでおすすめです。よかったら会員登録して実際に使ってみてください。
また登録方法については、よかったらこちらの記事を参考にしてください。
配色する前に知っておいて欲しいこと3つ
配色し始める前に、知っておいて欲しいことが3つあります。
それでは、それぞれについて詳しくご説明していきますね。
1.配色イメージを決めよう
まずは配色のイメージを決めましょう。これ、とても大事です！イメージを決めずにとりあえず配色していくのは、たとえデザイナーであっても難しいもの。
具体的には、
- ポップ
- ナチュラル
- エレガント
- シック
- クール
- レトロ
- 和
- 北欧
など、このような「単語」でイメージしてください。
イメージの決め方は、その記事のターゲットの「年代」や「職業」から連想しましょう。
例えば、赤ちゃんなら「ナチュラル」。シニアなら「シック」。富裕層であれば「エレガント」。ビジネスであれば「クール」などが浮かびませんか。
まずは、あなたの記事が対象とするターゲットから、配色イメージを決めてみてください。
2.「カラーコード」とは色の番号
「カラーコードって何？」という方にご説明します。「カラーコード」が何かわかる方は、次におすすみください。
カラーコードとは、Web上での色の番号です。その番号を入れるとその色が表示されます。
先頭が「#（シャープ）」で、そのあとに6個の数字とアルファベットの組み合わせで表されます。配色する際によくカラーコードを使用するので、知っておくと便利です。
例えば白は「#ffffff」、黒は「#000000」で、このサイトのイメージカラーであるの黄緑は「#b5d569」です。
カラーコードに使用するアルファベットは、大文字でも小文字でも、混ざっていても大丈夫。
組み合わせと順番が変わると、別の色になってしまうので、気をつけてくださいね。
3.3色ではなくまずは2色を見つける
配色は2色だと足りなくなり、4色以上だとどんどん難しくなってくるので、3色で配色するといいと思います。
しかし、3色を選ぶときに
バランスがむずかしい・・・
と、つまずいたことありませんか？
そのような方は、ひとまず2色をセレクトしてみてください。その色に2色のどちらかの濃淡の色を足す。もしくは、白黒グレーを足してみてください。この3色だと、バランスがとりやすいのではないかと思います。
それでは、次から具体的に配色の方法を説明していきますね。
0から配色する場合の4つの方法
配色イメージは決まったものの、使いたい色が1色も決まっていないなら、
の4つの方法をおすすめします。
特に「1.配色本を見る」は、配色イメージを決めるときにも役立ちます。いつも長い時間悩んでしまうようであれば、1冊持っておくと便利だと思います。
それでは、1つずつ詳しくご説明していきますね。
1.配色イメージを固めるにも見つけるにも本がおすすめ
配色本が1冊あれば、とても便利です。本なら、イメージごとに色が紹介されているので、そこからセレクトできます。
また掲載されている配色から、イメージを掴むこともできます。パラパラとページをめくり「いいな」と思う配色を選んでみましょう。選んだ配色から、あなたがアイキャッチに持つイメージがはっきりしてくることもあります。
わたしがおすすめする配色本は、2冊あります。
1つずつ、さらに詳しくご紹介していきますね。
配色アイデア手帖
『配色アイデア手帖』
桜井輝子（著）／￥1,780（税抜）
こちら、配色テーマごとに9色が紹介され、カテゴリーごとに分類されています。全部で127の配色テーマと13ものカテゴリーがあり、バリエーションが豊富です。
1つのテーマに9色もあると迷いそうですが、その中の2・3色を組み合わせた配色例や、いくつかの色を使ったデザインとパターン、イラストも掲載されているので、選びやすくなっています。
またライターさんやブロガーさんには、各配色テーマにある「イメージ」「配色の仕方」「ポイント」が、文字で書かれていることも手助けになりそうです。
配色後のイメージがわきやすく、色のセレクトが楽になるのではないでしょうか。
3色だけでセンスのいい色
『3色だけでセンスのいい色』
ingectar-e（著）／￥1,800（税抜）
こちらは、あらかじめバランスの取れた3色を紹介。
「ナチュラル」「ポップ」「エレガント」など、イメージのカテゴリーごとに3色のグループがわけられています。
また、3色のうちどの色を「ベース」「アクセント」「サブ」にもってくると、どのようなイメージになるのかも、デザイン例とともに提示してくれているので、視覚的にもわかりやすいです。
さらに、購入者特典の「配色一覧」のPDFを無料でダウンロードもできます。会員登録（無料）する必要がありますが、全部の配色が一気に眺められるので、セレクトする際には便利ですよ。
この本の提案はシンプルに「3色」ですので、迷いが少なくなるのではないでしょうか。
2.「カラーパレット」を検索する
GoogleやPinterest（ピンタレスト）で「カラーパレット」と画像検索してみてください。写真と、その写真からセレクトした色がある「カラーパレット」とよばれる画像が表示されるかと思います。こちらを配色に利用しましょう。
下は、Pinterestで検索した結果です。
Canvaのブログにも記事があり、ここにもカラーパレットがあります。こちらも参考にしてください。
この「カラーパレット」は、一緒に元になった写真があるため、視覚的に理解しやすいかと思います。また、配色後のイメージのズレが起こりにくくなるのがいいところです。
Pinterestだと、「カラーパレット」に「レトロ」や「ナチュラル」など、欲しい配色イメージを足すと表示を絞ってくれて便利です。
3.Canvaの「スタイル」を利用する
Canvaの中には、バランスの取れた3色を提案して、それをいいように配色してくれる「スタイル」という機能があります。これを利用すると便利です。
ある程度デザインが出来上がってから試してみてくださいね。
- 手順1「もっとみる」を選択
左端にあるサイドバーから「もっとみる」を選択する。
- 手順2「スタイル」を選択
「Canvaのその他のアプリ」にある「スタイル」を選択する。
（すでにサイドバーにアイコンがある場合も）
- 手順3気に入った配色をクリック
さまざまな3色の組み合わせが提案されています。この中から気に入った配色をクリックすると、画像がその配色になります。
同じ配色をクリックするたびに3色のバランスが変わりますので、気に入るまで試してみてください。
残念ながらこの方法には検索機能がありません。「ポップ」や「ナチュラル」などのワードで検索したり、「赤系の配色」などを並べたりができません。（2021年5月末現在）
そのため、先にご紹介した本やカラーパレットで、ある程度の配色のイメージをつかんでおくのをおすすめします。
4.Canvaのテンプレートで見つける
Canvaのテンプレートを配色見本として利用しましょう。
Canvaのテンプレートは、「ポップ」や「ナチュラル」などで検索しやすく、出てくる画像はバランスの取れた色で配色されています。もちろんそのままテンプレートとして使ってもいいのですが、配色だけ利用する方法をご紹介します。
- 手順1イメージで検索
Canvaの検索スペースに、先に決めたイメージの単語を入れて検索してください。
- 手順2気に入った配色をクリックする
そうすると、そのイメージのテンプレートが表示されます。この中から、いいなと思う配色のテンプレートをクリックします。
- 手順3テンプレートをスクリーンショットする
表示されたテンプレートをスクリーンショットしてください。
もしくは、テンプレートの画像サイズが、作成したいアイキャッチと同じサイズであれば手順5にすすんでください。
- 手順4ページに貼り付けるとパレットが出る
アイキャッチの作成ページに戻り、スクリーンショットをした画像を貼り付けます。そうすると「写真の色」として、使用されている色がパレット化して表示されますので、この色を使って配色しましょう。
- 手順5使われている色が「使用中のカラー」として出る
テンプレートに使われている色は「使用中のカラー」として表示されるので、この色を利用して配色していきましょう。
どちらの場合も、配色見本にした画像やテンプレートを消すと、色も消えてしまいます。デザインは新しいページで作成してくださいね。
次からは、使いたい色が1色は決まっている場合の配色方法を説明していきますね。
1色は使いたい色が決まっている
サイトのイメージカラーや、ロゴカラーなどを使用するので、1色は使いたい色が決まっているけど、それに合う色に迷っているなら、
の2つの方法をおすすめします。この方法なら、その1色に合う色がすぐに見つかりますよ。
それでは、1つずつ詳しくご説明していきますね。
1.Canvaのパレットを利用する
1色は決まっているなら、Canvaの「パレット」を利用すると簡単です。その色のカラーコードを入力すると、いくつかの配色を提案してくれます。
以下の手順で試してみてください。
- 手順1「カラー（背景色）」をクリック
色をつけたい素材や背景を選択し、「カラー（背景色）」のアイコンをクリック。
- 手順2カラーコードを入力
検索スペースに、カラーコードを入力します。
- 手順3あなたの色が表示される
あなたが入力した色が表示されます。
- 手順4あなたの色に合った配色が提案される
その色に合った配色が提案されますので、この中から選んでみてください。
- 5気に入ったパレットをスクリーンショットする
別の作業をすると、このパレットは消えてしまいます。気に入った配色は、スクリーンショットで残します。
- 6スクリーンショットを貼り付ける
スクリーンショットで残した配色を、ページに貼り付けてください。
その画像から色を取り出し、新たに「写真の色」としてパレット化したものが表示されます。これを利用すると簡単に配色できます。
貼りつけた配色（画像）が消えると、「写真の色」のパレットも消えるので、注意してくださいね。ページを追加して、デザインとは別のページに貼ると邪魔になりませんよ。
2.配色サイトで見つける
「赤」や「青」などおおまかな1色は決まっていて、それに合う色に迷っているのなら「Color Picker（カラーピッカー）」を利用すると簡単です。あらかじめ決めている色をクリックすると、その色に合う配色を提案してくれます。無料で利用できます！
カラーコードは入力できませんが、近い色で探してみてください。
色相環の横にある矢印のどちらかをクリックすると、色数やバランスなどが変化します。
画像は、補色関係にある2色の配色です。補色は自分で組み合わせるとなると少し難易度が上がりますが、ここではバランスが取れた配色が右に表示されます。
その中から気に入った配色を選ぶと、下にその配色でイラストやパターンが表示されますので、イメージの確認もしやすいです。各色のカラーコードも表示されます。
また「Fresh（新鮮）」や「Manga（マンガ）」、「Nature（自然）」など、いくつかのイメージパターンもあります。こちらからも探してみてください。
まとめ：配色はマネると簡単
この記事では、配色前に大事なこと3つと、配色方法を6つご紹介してきました。
結局のところ、すでにある整った配色をマネると簡単です。
記事やデザインなどとは違い、配色に著作権は発生しないので、安心して利用してください。
一番大事なのは、記事内容に合った配色イメージを初めに決めることです。これがずれてしまうと、違和感のあるアイキャッチになりかねないので、注意してくださいね。
記事の中で登場したCanvaは、登録も利用も無料で、簡単にステキなアイキャッチが作成できるツールです。よかったら利用してみてください。
