「この色のほうが目立つかな」「いや、こっちも入れたほうがきれいかも」
仕事のPowerPointやブログのアイキャッチを作っていると、配色で迷うことがあります。私も最初から明確なルールがあったわけではなく、良くしようとして色や情報を足しすぎたこともありました。
でも、いろいろ作って振り返ってみると、結局使いやすかったのはシンプルな配色です。今は基本的に3色程度に抑えています。
なぜ3色なのかというと、おしゃれに見えるからではありません。色を「背景」「全体の印象」「強調したいところ」と役割で分けられるので、作っている途中でも見直しやすく、最後に余計な色を削る判断もしやすい。迷ったときの基準が3つしかないぶん、そもそも迷いにくいんですよね。
この記事では、仕事の資料とブログで配色をどう変えているのか、色を増やしすぎて失敗した経験も振り返りながら、最後に3色に落ち着いた理由をまとめています。「センスで何となく選ぶ」状態から、何を基準に色を決めるようになったのかを書いていきます。
配色で迷ったら最初に「目的」を決める
デザインの配色というと、以前は私もどこか「センスのいい色を選ぶもの」というイメージがありました。
でも仕事でPowerPoint資料を作ったり、ブログのアイキャッチを何枚も作ったりしていると、それだけでは決めにくいんですよね。青もいい、黒も締まって見える、少し別の色を入れればもっと目立つ……なんて考えているうちに、選択肢ばかり増えてしまいます。
そこで今は、色を選ぶ前に「誰に、何を伝えるためのデザインなのか」を考えます。
たとえばクライアントに説明する資料なら、派手さより内容を追いやすいことが大事。一方、ブログのアイキャッチなら、スマホで流し見されたときでも「何の記事だろう？」と一瞬目に留まることも意識します。
同じ私が作るものでも、目的が違えば選ぶ色は変わります。
「何色がおしゃれか」から考えるより、「何を伝えたいか」から考えたほうが、私は配色で迷いにくくなりました。
これは私が従事しているITの仕事にも少し似ています。選択肢をどんどん増やすより、まず目的をはっきりさせる。あとから振り返ったときに「なぜこの色にしたのか」を自分なりに説明できるほうが、私は納得できます。
3色に絞ると配色が決めやすくなった
配色で迷っていた頃は、色を増やすことにあまり抵抗がありませんでした。
ここを目立たせたいから赤、こっちは青、その隣は少し違う色……。作っている本人としては、それぞれちゃんと理由があります。でも完成したものを改めて見ると、「で、結局どこを見ればいいんだ？」となることがあるんですよね。
作っている途中では、これがなかなか分かりません。ひとつずつ足しているので、そのたびに良くなったように見えてしまうからです。
そんな経験もあって、今は最初に2〜3色程度で考えるようになりました。色を絞ってからは、「ここは何色にしよう」と場所ごとに悩むより、「背景」「全体の印象」「強調したいところ」と役割で考えられるようになったんです。
色の候補そのものが減るので、作っている途中で迷いにくい。あとから見直したときも、「この色は何のために入れたのか」を判断しやすくなりました。
私が3色程度に落ち着いた一番の理由は、見た目がおしゃれになるからではなく、この分かりやすさでした。
ベース・メイン・アクセントに役割を分ける
「ベースカラー・メインカラー・アクセントカラー」という3色の考え方があり、ぞれぞれ役割があります。
- ベースカラー：背景や余白など、面積がもっとも広い土台の色。全体の印象を静かに支える
- メインカラー：デザインの主役になる色。全体の印象や世界観を決める
- アクセントカラー：「ここを見てほしい」という場所に使う、視線を集める色
面積の目安としてよく挙げられるのが、ベース70％・メイン25％・アクセント5％という比率です。
配色を考えるときは、背景の土台となる「ベース」、全体の印象をつくる「メイン」、見てほしい部分に使う「アクセント」に役割を分けています。
ただ、完成画像に含まれる色を厳密に3色だけにするわけではありません。写真やグラデーションには多くの色があるので、私が整理するのは、主に背景や文字に使う色の役割です。
以前使っていたのは、青いグラデーションの背景に、タイトルを白文字で入れる形でした。シンプルですが、文字がすべて同じ色なので、どの言葉を先に見せたいかまでは区別していませんでした。
その配色と現在のアイキャッチを、同じタイトルで比べてみます。Beforeは比較のためにタイトルを差し替えた画像です。
背景や文字の大きさも異なるため、配色だけによる比較ではありません。
Afterの画像では、青系の背景で全体をまとめ、白文字で文章を読ませ、名前などにゴールドを使っています。
Beforeではタイトル全体が同じ調子で並んでいますが、Afterでは「絶景スポット5選」が先に目に入ります。私が見せたい記事の話題を、文字色でも区別できる形です。
ただ、ゴールドを広く使えば、そのぶん強調する場所も増えます。さらに整理するなら、どの言葉を一番見せたいかを決め、ゴールドを使う範囲を絞ります。また文字の大きさや配置も変えています。見え方の違いは、配色だけによるものではありません。
私が配色で決めたいのは、「背景を何色にするか」「文字を何色で読ませるか」「どこだけ色を変えるか」の3つです。
最近では、白をベース、青をメインにして、強調したい部分だけ別の色を使う組み合わせも選びます。柔らかい印象ならピンク系というように、内容に合わせて色を変えながら、この役割は崩さないようにしています。
色を足すほど良くなるとは限らない
これは生成AIでブログのアイキャッチをたくさん作るようになって、特に実感したことです。
色を少し増やすとどう見えるか、ブログ記事のアイキャッチで比較サンプルを作りました。
下は青系を土台に、白文字とゴールドの強調文字でまとめた例です。
上の画像も文字は読めます。ただ、ゴールドの「絶景スポット5選」に加え、赤い「週末」やオレンジの「海・山・夜景」も目立つので、私には強調する場所が多く感じられます。
下の画像では、ほかの文字を白にそろえているため、「絶景スポット5選」に目が向きます。旅行先を紹介する記事だと伝えたいなら、私は下の配色を選びます。
写真にはさまざまな色が含まれていますが、背景の色味と文字色を整理するだけでも、全体のまとまりは変わります。
色を足す前に、その言葉まで強調する必要があるか考える。 この例では、赤やオレンジを加えるより、見せたい言葉にゴールドを絞るほうが、私には読みやすく感じられました。
仕事とブログでは同じ配色を使わない
3色程度に抑えるといっても、いつも同じ3色を使うわけではありません。私の場合、仕事とブログではかなり考え方を変えています。
配色に絶対の正解を作るより、そのデザインを見る状況に合わせたほうが使いやすいからです。
PowerPointは落ち着きと強調を優先
ITコンサルの仕事ではPowerPointを使う機会が多く、クライアント向けの資料ではグレーや黒などのシックな色を基本にすることがあります。そこへ、結論や特に見てほしい数字など、説明するときに視線を集めたい部分だけコーポレートカラーの紫などを入れます。
資料で避けたいのは、色が多すぎて「どこが重要なのか」をこちらから説明しないと伝わらない状態です。
図や数字、文章など、資料にはもともと情報がたくさんあります。そこへさらに何種類もの色を加えたら、肝心の情報まで埋もれかねません。
色を増やして華やかにするより、紫が出てきたら「ここを見てほしい」と分かるくらいのほうが、私は使いやすいと思っています。
全部を目立たせたら、結局どこも目立たないんですよね。
ブログは一瞬で伝わるかを考える
ブログのアイキャッチでは、仕事の資料とは少し考え方が変わります。
読者が一枚の画像をじっくり見るとは限りません。スマホでスクロールしながら、ほんの一瞬だけ見ることもありますよね。
そのため私は、まず「何についての記事なのか」が分かることを重視します。そのうえで、「おっ」と一瞬目に留まるものが少しあればいい。
色を決めるときは、アイキャッチの印象が記事の内容と合っているかも確認します。
たとえば、タイトルにゴールドを大きく使うと、私には豪華さや華やかさを感じさせます。お金やお得な情報、輝かしい実績などを扱う記事なら、その印象が内容に合うこともあります。
でも、本文の中心が苦い経験やつらかった出来事なら、同じゴールドでも華やかすぎると感じます。見た目から受ける印象と、読み進めたときの内容に差が出るからです。
そんなときは、タイトルを白や落ち着いた色に変えるなどして、強調の仕方を見直します。目立つ配色かだけでなく、記事が伝える雰囲気と合っているかまで確認しています。
単体ではきれいでも、記事の内容より画像の印象が強くなっていたらやり直す。生成AIで何枚も作るようになってからは、色の意味を考えるだけでなく、「この画像が前に出すぎていないか」も見るようになりました。
淡い雰囲気を残しながら文字を読みやすくする
文字色と背景色の明暗差については、「フォント選びで迷ったら？資料とブログの使い分けと確認ポイント」でも、以下の比較画像を使って説明しています。ここでは、淡い配色の雰囲気を残しながら、文字を読みやすくする方法を考えます。
柔らかい印象にしたいとき、私は淡いピンクやブルーを選ぶことがあります。ただ、背景を淡くしたうえに文字まで白や薄い色にすると、明暗の差が小さくなり、文字が背景に埋もれやすくなります。
柔らかく見せたいからといって、文字まで淡くする必要はないんですよね。
淡い背景はそのままにして、文字を濃いグレーやネイビーにする。白文字を使いたいなら、文字を置く部分の背景を濃くする。私は、残したい雰囲気に合わせて、背景と文字のどちらを調整するか考えます。
左側の文字は背景となじみすぎています。右側は文字が濃く、背景と文字の境目がはっきりしています。
背景の淡さを残しても、文字色を変えれば読みやすさを調整できます。配色全体を強い色に変える前に、まず文字と背景の組み合わせを見直すようにしています。
淡い配色を使うときほど、背景色と文字色の明暗差を確認する。 柔らかい雰囲気と文字の読みやすさを、両方残すために意識していることです。
まとめ
私が配色を3色程度から考えるのは、背景・文字・強調する部分の役割を決めやすいからです。写真やグラデーションまで含めて、厳密に3色だけにするという意味ではありません。
今は、次の点を確認しています。
- 背景や文字に使う主要な色と、強調色の役割を決める
- 強調色を増やす前に、その言葉を目立たせる必要があるか考える
- 色から受ける印象が、資料や記事の内容に合っているかを見る
- 淡い背景でも、文字との明暗差は確保する
比較サンプルでも、色を加えた画像より、補足部分の文字色をそろえた画像のほうが、私は読み進めやすく感じました。
まず主要な色を絞り、必要な部分だけ強調する。最後に背景と文字の明暗差を確認する。 今の私には、この順番が配色を決める基準になっています。
関連記事はこちら！↓
Canvaの使い方は初心者でも簡単？実際に作って分かったコツと失敗
Canva初心者の30代会社員でもできる？風景画・家族画の作り方と楽しみ方
デジタルで画像を作るなら何から？Canvaでアイキャッチを作って気づいたこと
