配色を役割で決め、背景・本文・強調の関係を統一します。
基本を理解する
同じ内容でも、色とフォント（書体）が違うだけで印象はまるで変わります。「センスがないから…」と諦める必要はありません。配色とフォントには「型」があり、それを知るだけでプロっぽく見せられます。
この教材を読み終えると、次のことができるようになります。
- 「3色ルール」で、まとまった配色ができる
- 失敗しない色の組み合わせ方が分かる
- フォントを選ぶときの基準を持てる
色は「3色ルール」で選ぶ
色選びで失敗しないコツは、使う色を役割ごとに3つに絞ることです。この黄金比を意識すると、まとまった配色になります。
- ベースカラー（約70%）：背景など広い部分。白やグレーなど落ち着いた色
- メインカラー（約25%）：主役の色。全体の雰囲気を決める
- アクセントカラー（約5%）：ボタンなど「ここを見て」の一点に使う目立つ色
迷ったら近い色でまとめる
色選びに迷ったら、青と水色のような「近い色」でまとめると失敗がほぼありません。たくさんの色を使うほど難しくなります。まずは「1つの色の濃淡でまとめる」くらいの気持ちで十分おしゃれに見えます。
色には「イメージ」がある
色は、それぞれ見る人に与える印象が違います。伝えたい雰囲気に合わせて選ぶと、メッセージがより伝わります。青は「信頼・清潔」、赤は「情熱・注目」、緑は「安心・自然」、ピンクは「やわらかさ・女性向け」、黒やゴールドは「高級感」。作るものの目的に合った色を、メインカラーに選びましょう。
フォントは2種類まで
フォントも、種類を増やすほど散らかって見えます。1つのデザインで使うのは、多くても2種類までに。力強い印象の「ゴシック体」、上品な印象の「明朝体」など、伝えたい雰囲気に合わせて選びましょう。見出しはゴシックで力強く、本文は読みやすい書体で、という組み合わせが定番です。
よくあるつまずきと対処法
- 色を選ぶとバラバラに見える → 色数が多すぎるサイン。3色ルールに絞り、それ以上は使わないようにしましょう
- おしゃれな配色が思いつかない → 参考デザインの色の役割を観察し、自分の主題と写真に合う配色を検討します
- フォントで迷って進まない → 迷ったら太めのゴシック体で統一。まず1つに決めて先へ進みましょう
色数のルールは、迷いを減らす出発点
3色などの目安は絶対の規則ではありません。大切なのは、同じ色に同じ役割を持たせることです。背景、本文、強調を決めておくと、どこを目立たせるか判断しやすくなります。写真に多くの色がある場合は、文字と装飾の色を控えめにするとまとまります。
例えば、背景を淡いクリーム、本文を濃い紺、強調を深い緑にします。薄い色の上に薄い文字を置くと、雰囲気は柔らかくても読みにくくなることがあります。好きな色をそのまま文字へ使うのではなく、背景との明暗差を確かめましょう。
フォントは読みやすさと用途で選ぶ
見出し用と本文用で役割を分けても、両方を個性的な書体にする必要はありません。同じ書体の太さ違いでも十分に強弱を作れます。手書き風は短いアクセントに使い、日時や注意事項には読み取りやすい書体を使うと、情報が伝わりやすくなります。
赤色だけで必須事項を示すなど、色だけへ意味を任せないようにします。「必須」「締切」の文字も添えると、色の見え方が違う人にも伝えやすくなります。縮小、暗い画面、印刷など、条件が変わっても読めるかを点検しましょう。
手を動かす：実践の手順
- 01背景・本文・強調の色を1つずつ決め、カラーコードを記録する。
- 02見出しと本文の書体、太さのルールを決める。
- 03告知画像全体に同じルールを適用し、例外になっている箇所を探す。
- 04スマホで明るさを少し下げ、日時や補足が読めるか確認する。
具体例で確かめる
【配色例】背景#F5F3EB、本文#203A37、強調#21675Aを出発点にします。この組み合わせは練習例です。写真の色や文字の大きさによって見え方が変わるため、コードを当てれば完成ではありません。強調が多すぎたら、色を足さず、強調箇所を減らします。
コピーして使えるワークシート
自分の条件に置き換えて使ってください。入力内容は、下の学習メモにも残せます。
背景色： 本文色： 強調色： 見出し書体・太さ： 本文書体・太さ： 色以外に意味を伝える文字：
この章の実践課題
告知画像の色と書体を統一し、変更前の案と比べてください。読みやすくなった箇所と、まだ読みにくい箇所を1つずつ挙げ、後者を修正します。
できたことを確認する
チェックはこのブラウザに保存されます。すべてにチェックしなくても、教材は自由に読み進められます。
理解度チェック
強調したい場所が増えたら、色を追加しますか？
答えと解説を確認する
まず情報の順位を見直します。強調の数を絞り、大きさや余白でも差を付ける方法を試します。
学習メモ
端末間では同期されません。共有端末ではご注意ください。パスワード、認証コード、お客様の個人情報は記入しないでください。
公式情報・確認先
操作画面・料金・利用条件は変わることがあります。利用時点の公式案内を確認してください。
教材改訂：2026年9月14日。具体例の数値や案件は、特記のない限り練習用です。