こんにちは。LiSMOtechアシストデザイナーの山邊です。
SNSでの投稿画像やYouTubeの動画サムネイル、noteのヘッダー画像などなど…
最近は画像制作が身近になりましたよね！
こういった画像を作る時に悩みがちなのが、文字や背景の色をどうするか？だと思います。
配色については私も未だに悩むことが多いので、今回の記事ではそのまま使える配色リストを公開します！
可読性がわかるように、サンプル画像にはゴシック体と明朝体、白フチ文字と黒フチ文字を乗せていますので、参考にどうぞ。
それぞれ印象ごとにまとめているので、作りたい画像のイメージに近いものを探して使ってくださいね。

ポップにしたいとき

①グリーン×イエロー

グリーン：#00d49d　イエロー：#fedf03

黄色味のある明るいグリーンと濃いイエローの組み合わせは明るく元気な印象！
子供向けのお知らせや、元気さを出したい内容の画像にぴったりの組み合わせです。
太めのゴシックやキリギリスのようなポップなフォントを合わせたいですね✨

②イエロー×ピンク

イエロー：#fedf03　ピンク：#ff005d

明るいイエローとパッションピンクの組み合わせです。
かなり派手派手で可愛いですね！
エネルギッシュなイメージなので、夏のキャンペーンやセールの告知におすすめです。

③ピンク×ライトブルー

ピンク：#e08e9f　ライトブルー：#0eb5b9

やや落ち着いたピンクと緑がかったライトブルーの組み合わせ。
ポップな中にも可愛らしさがあります！
女性や子供向けの内容に合わせたら可愛いですよ！
白フチ文字を合わせると明るい印象に、黒フチ文字を合わせるとパキッとした派手な印象になります。

女性らしくしたいとき

①ピンク×ピンク

濃いピンク：#da85af　薄いピンク：#eab8e3

濃いピンクと薄いピンクで甘々配色です✨
白を入れると明るく甘さマシマシに💓黒を入れるとキッチュで小悪魔っぽくなります👿
明朝体を合わせると大人可愛くなっておすすめです！

②ベージュ×ブルー

ベージュ：#f1eef7　ブルー：#a6b8e1

オフホワイトに近いベージュと、やや紫寄りのブルーの組み合わせ！
冬っぽい配色です。
色のコントラストがやや低めなので、可読性を確保したい時はフォントサイズを大きくしたり、ウエイトを太くしたりして対応してください！

③パープル×ライトブルー

パープル：#ae8fb1　ライトブルー：#bedfff

赤みパープルと明るい水色で、甘すぎない大人配色です✨
こちらもコントラストやや低めなので、可読性に要注意！
アクセントにゴールドを加えても可愛いですよ！

かっこよくしたいとき

①グレー×ブルーグレー

グレー：#262626　ブルーグレー：b7c2ce

黒に近いダークグレーとうっすら青みがかったグレーの組み合わせ。
ただのモノトーンだとマンネリ…という時に使えます！
可読性が高く、ビジネス系にも使いやすい配色です。

②ネイビー×イエロー

ネイビー：#183883　イエロー：#f1d033

明るめのネイビー×黄色はインパクト抜群！
目を引きたいサムネイルやヘッダー画像におすすめです。
ネイビー多めなら落ち着いた印象に、イエロー多めなら明るい印象になります。

③レッド×ネイビー

レッド：#c83a3f　ネイビー：#272d68

落ち着いた赤とネイビーの組み合わせは、どことなくスポーティな印象。
派手だけどどこか上品な色合いです。

エレガントにしたいとき

①ボルドー×ピンク

ボルドー：#561220　ピンク：#e5bcd9

深いボルドーに落ち着いたピンクの組み合わせはとっても上品です。
ピンクを使いたいけど、甘すぎるのはちょっと…という時に使えます！
可読性もバッチリなので、お好みのフォントが使えますよ。

②ピンク×ベージュ

ピンク：#94516a　ベージュ：#e7d8d2

深いピンクと柔らかなベージュで、どことなく暖かみのある配色です。
明朝体を合わせると上品に、丸ゴシックを合わせるとほっこりした印象になります。

③グリーン×グレー

グリーン：#93ab79　グレー：#d2d1d6

若草のようなグリーンと明るいグレーで、アンティーク家具のような配色。
どちらも柔らかな色合いなので、ダークグリーンをポイントで入れると引き締まります！

透明感を出したいとき

①アクア×オフホワイト

アクア：#6bd3e0　オフホワイト：#f0f0f0

爽やかなアクアブルーにグレイッシュなホワイトの組み合わせです。
黒を入れると透明感が損なわれてしまうので、シャドウを入れたい場合はうすーく入れるのがおすすめ！
手書き風のフォントを合わせるとエモ感強めに！

②グリーン×ブルー

グリーン：#e0f7e6　ブルー：#0184a9

ミントグリーンとターコイズブルーの組み合わせは春夏向きです。
爽やかで明るい印象ですね。
ブルーを背景にすると細い書体が読みづらくなってしまうので、
グリーンを背景にするか、太めのフォントを使うのがおすすめです！

③ベージュ×グリーン

ベージュ：#eae7e3　グリーン：#cad8d2

柔らかなベージュとグリーンの組み合わせはナチュラルで爽やか。
可読性はかなり低いので、あしらいや背景として使うのがおすすめ。
読ませたいフォントには、ディープグリーンやダークブラウンを使いましょう。

クラシックにしたいとき

①ブルーグレー×グレー

ブルーグレー：#8096a8　グレー：#324052

ニュアンス感のあるブルーグレーと、やや明るめのグレー。
シックで紳士的な印象です。
ポイントで白を使うと重たくなりすぎるのを防いでくれます✨

②ブラウン×ベージュ

ブラウン：#471e0a　ベージュ：#dad0c4

暖かみと伝統を感じる、ブラウンとベージュの組み合わせ。
シックで大人っぽい印象です。
明るい差し色を入れると、食品系の画像にも使えます！
ブラウンもベージュもベーシックなカラーなので、さまざまなシーンで活躍してくれそうですね。

③グリーン×ベージュ

グリーン：#203231　ベージュ：#b19081

ダークグリーンと濃いベージュの組み合わせは、見ていて落ち着きます。
インテリアやリラックス系の記事に合わせると雰囲気が出ます。
可読性もいいので、細い明朝体でも読みやすいです！

全部で18パターンの組み合わせをご紹介しました。
色の組み合わせは無限大…その中から理想の配色を探すのはとっても大変です。
今回の記事が配色迷子の方の参考になれば嬉しいです！

背景デザインを考えてる方は「イメージ・業種から考える背景デザイン案」もチェックしてくださいね！
もっと色の組み合わせサンプルを見たい方は、この記事の第二弾【コピペOK！】背景×文字色の配色セット-色別サンプルも併せてどうぞ！

Instagram更新中です！制作実績や社内の様子などが見られますよ✨