【Figma練習OK】3色配色で作るシンプルで伝わるバナーの作り方
はじめに｜配色に悩むあなたへ
「バナーを作るとき、配色がごちゃごちゃしてしまう」
「センスに自信がなくて、毎回色選びで止まってしまう」
そんな悩みは、“色数を絞る”ことで驚くほど解決できます。
この記事では、Figmaを使って3色だけでバナーをデザインする方法を紹介します。
初心者でも迷わず、かつプロっぽく見える配色ルールとレイアウトのコツを一緒に学んでいきましょう。
1. なぜ「3色」だけでデザインするのか？
バナーをうまく見せるコツは、「色数を減らすこと」。
配色で迷う人の多くは、色が多すぎて調和が取れていないだけです。
3色で構成することで、次のようなメリットがあります：
- まとまりやすく見た目が整う
- 伝えたい要素が引き立つ
- 再現性が高く、誰でもマネできる
「まず3色で作る」ことは、配色トレーニングの最初の一歩に最適です。
2. バナー構成は「背景・文字・アクセント」の3役で考える
3色配色では、色に役割を与えることが成功のカギです。
| 色の役割 | 内容例 |
|---|---|
| 背景色 | 全体のベースとなる色（白・淡色系が多い） |
| 文字色 | メインテキスト用の濃い色 |
| アクセント色 | ボタンや重要語句など目立たせたい部分 |
たとえば、
- 背景：#F9F9F9（淡いグレー）
- 文字：#333333（濃いグレー）
- アクセント：#FF6F61（オレンジ系）
など、使う色を事前に固定すると、デザインがブレません。
3. 配色パターンの選び方（おすすめ3パターン）
パターンA：ナチュラル系（やさしい印象）
- 背景：#F6F6F6
- 文字：#2D2D2D
- アクセント：#5AB2A5（グリーン系）
パターンB：ビジネス系（信頼感・安定感）
- 背景：#F0F4F8
- 文字：#1C1C1C
- アクセント：#0D6EFD（ブルー）
パターンC：女性向け・ポップ
- 背景：#FFF6F6
- 文字：#3D3D3D
- アクセント：#F75C94（ピンク）
気に入ったパターンをひとつ選び、Figmaで再現してみましょう。
4. Figmaで3色バナーを作ってみよう（練習用レイアウト）
Figmaで再現しやすいバナー構成は以下のとおり：
┌────────────────────┐
│ 見出しテキスト ← 文字色 │
│ 補足文や説明 ← 文字色（薄めでも可） │
│ [ボタンCTA] ← アクセント色（背景） │
└────────────────────┘
- 見出しは16〜20px程度
- CTAボタンは丸み＋強調色
- 背景と余白で読みやすさを確保
1つ作ってみると、「3色ってこんなに整うんだ」と驚くはずです。
5. まとめ｜色は「数」ではなく「役割」で選ぶ
センスは「選ぶ力」ではなく「減らす力」。
色数を減らし、役割を明確にしたとき、デザインは一気に洗練されます。
「3色配色 × Figma」は、配色初心者にとって最高の練習法。
まずは1パターン試してみてください。きっと色選びに対する自信がついてきますよ。
関連リンク・次のステップ
- Figma模写 #7｜3色デザイン練習
- [配色ツールまとめ（準備中）]
- [フォント選びに迷ったら読む記事]
よくある質問（FAQ）
Q. Figmaでバナーを作る基本手順は？
まずフレームツールで目的サイズのカンバスを作成します。背景色を設定し、テキストツールでキャッチコピーとサブテキストを配置します。画像を挿入してレイヤー順序を調整し、Auto Layoutで要素間の余白を統一します。最後に「Export」からPNG/JPG/SVGで書き出します。3色以内のシンプルな配色にすることで、初心者でもまとまりのあるバナーが作成できます。
Q. 効果的なバナーのキャッチコピーの作り方は？
ターゲットの悩みや欲求に直接訴えかける一文（10〜15文字以内）を作成します。「〜する方法」「〜でお悩みの方へ」「今だけ〜」など、ベネフィットや緊急性を明確に伝える表現が効果的です。フォントサイズはバナー内で最大にし、色のコントラストで目立たせてください。
