グラデーション配色のコツ｜濁らせない2色の選び方と使いどころ

グラデーションを使ったら、真ん中がくすんだ茶色になった——そんな経験ありませんか？

これは色の選び方だけで起きています。2色の距離を近く保つ。ここさえ守れば、濁りません。
このレッスンでは、濁らないグラデーションの作り方から始めて、線形と円形の使い分け、角度の目安、カラーコードでの指定方法、そして使わないほうがいい場所まで扱います。
最後は単色の背景をグラデーションに置き換えて見比べる課題です。同じ作品で並べると、効きどころが分かりますよ◎

グラデーションは色を段階的につなぐ配色

グラデーションは、2色以上を少しずつ変化させながらつなぐ配色です。日本語では「階調」と呼びます。

単色との違いは、面の中に変化があることです。この変化が奥行きと動きを出します。ただし変化があるぶん、上に置く文字は読みにくくなります。使うと決めたら、文字が乗る場所の色を必ず確かめてください。

つなぐ色は2色で十分です。3色以上にすると、色の変わり目が増えて落ち着かなくなります。2色でできないことは、たいてい3色でもできません。

濁らせない3つのコツ

失敗はほぼ1種類です。2色の中間がくすむ。原因と直し方を順に見ます。

色相の差を30度以内にする

色相環で離れた2色をつなぐと、中間に灰色や茶色が現れます。赤から緑につなぐと、真ん中は濁った茶色になります。

直し方は、色相環で隣り合う色を選ぶことです。角度でいうと30度以内。青から青紫、橙から黄、緑から青緑。この距離なら中間もきれいなままです。
同じ色相のまま明度だけ変えるやり方も安全です。濃い青から薄い青へ。これは濁りません。

明度も一緒に動かす

色相だけ変えて明度が同じだと、変化が伝わらず、のっぺりして見えます。

直し方は、片方を明るく、片方を暗くすること。色相を少しずらして、明度を大きくずらす。この組み合わせがいちばんきれいに出ます。
彩度は両端でそろえてください。片方だけ鮮やかだと、鮮やかなほうだけが浮きます。

離れた2色を使うなら中間に1色足す

ブランドカラーが赤と青、というように離れた2色でつなぎたいときもあります。

直し方は、中間に紫を1色置くことです。色相環をたどる順に並べると濁りが消えます。赤から青なら、赤 → 紫 → 青。ツール任せだと中間が最短距離で計算されて濁るので、手で1色足します。

迷ったら同系色の明度違いで作ってください。濃い青から薄い青。地味に見えても事故になりません。

線形と円形の使い分け

形は2種類覚えれば足ります。

種類	変化の向き	向く使い方
線形（リニア）	直線方向に変化する	背景全体、帯、ボタン
円形（ラジアル）	中心から外へ広がる	光の表現、主役の後ろ

角度は45度前後にすると自然に見えます。真横（0度）や真上（90度）は機械的に見えます。
光は上から当たるので、上を明るく下を暗くすると見慣れた見え方になります。逆にするのは狙いがあるときだけにしてください。

円形は主役の後ろに使うと効きます。中心を明るく外を暗くすると、真ん中の要素が浮き上がります。範囲を広げすぎると、ただの薄暗い背景になります。

カラーコードで指定する

グラデーションそのものに1つのカラーコードはありません。両端の色のコードと、変化の向きを指定します。

Webなら CSS で書きます。background: linear-gradient(135deg, #3e5c76, #98b1d3); と書けば、左上から右下へ濃い青から薄い青へ変化します。円形にしたいときは linear-gradient を radial-gradient に変えるだけです。

CanvaやFigmaならコードを書かずに作れます。塗りの設定でグラデーションを選び、両端の色にHEXを入力するだけです。

印刷物では1つ気をつけてください。画面のRGBと印刷のCMYKは出せる色の範囲が違うので、画面できれいだった中間の色が印刷でくすみます。印刷用なら、はじめからCMYKで作って色見本で確かめます。RGBとCMYKの違いはカラーコードの仕組みにあります。

使いどころと、使わないところ

グラデーションは、使う場所を絞るほどきれいに見えます。

• 背景全体に薄く：単色より奥行きが出ます。両端の明度差は小さめに
• 写真の上に重ねる：黒から透明へのグラデーションを下半分にかけると、白文字が読めます
• ボタン：わずかな明度差なら押せる感じが出ます。差が大きいと古く見えます
• 主役の背景：円形で中心を明るくして要素を浮かせます

逆に、使わないほうがいい場所もあります。

• 長い文章の背景：場所ごとに背景色が変わり、読みにくい行が出ます
• 小さい文字：細い部分の色が飛んで読めなくなります
• ロゴ：モノクロ印刷で潰れます。ロゴは単色で成立させます
• 1つの作品に何か所も：全体が落ち着きません

1つの作品でグラデーションを使うのは1か所まで。背景に使ったならボタンは単色、ボタンに使ったなら背景は単色にします。

ミニ実践：単色背景をグラデーションに置き換える

効果は並べると分かります。同じバナーで背景だけ差し替えます。所要時間は15分ほど、無料のCanvaで足ります。

1. 正方形のバナーを1枚作ります。要素は見出し・説明文・ボタンの3つだけです
2. 背景を単色にします。落ち着いた青など、濃いめの色を選んでください
3. できたバナーを複製します。レイアウトは動かしません
4. 複製したほうの背景を、グラデーションに変えます。いま使っている色を暗いほうの端にして、明るいほうの端は同じ色相で明度を上げた色にします
5. 角度を135度にします。左上が明るく、右下が暗くなります
6. 2枚を並べて見ます。文字の読みやすさと、全体の印象を比べます
7. 色相を30度ずらしたグラデーションで3枚目も作ります。青から青紫など
8. 3枚を並べていちばんいいものを選び、理由を1行書きます

やってみると、単色のほうがよく見える場合もあります。それも収穫です。グラデーションは必ず良くなる手法ではなく、選択肢の1つだと分かります💡

できたら次のチェックリストで確認してください。

• 2色の色相差が30度以内に収まっている
• 中間の色にくすみが出ていない
• 両端で彩度がそろっている
• 文字が乗る場所で、背景と文字の明度差を保てている
• グラデーションを使ったのは1か所だけ

やってしまいがちな失敗

両端の色を離しすぎる

いちばん多い失敗です。中間がくすんで、そこだけ汚れて見えます。
直し方は、色相の差を30度以内に縮めることです。それで物足りなければ、色相ではなく明度の差を広げてください。

文字を置く場所を考えずにかける

背景の明るい側に白文字を置くと読めません。暗い側では読めるので、作った本人は気づきにくいところです。
直し方は、グラデーションの向きを変えて、文字の下だけ一定の明るさにすることです。

たくさん使って豪華にしようとする

背景・見出し・ボタン・アイコンの全部にグラデーションをかけると、どこにも目が留まりません。
直し方は、1か所に絞ることです。残りは単色にします。減らすほど、残した1か所が効きます。

よくある質問

グラデーション配色とは何ですか？

2色以上を少しずつ変化させながらつなぐ配色です。日本語では階調と呼びます。
単色との違いは、面の中に変化があることです。この変化が奥行きと動きを出します。背景に薄くかけると、平らな面が立体的に見えます。
つなぐ色は2色で足ります。3色以上にすると変わり目が増えて落ち着きません。

グラデーションの色は順番に何色ですか？

虹のグラデーションなら、赤・橙・黄・緑・青・藍・紫の7色を順に並べます。色相環をたどる順番です。ただし実務で7色を使う場面はほとんどなく、使うのは2色、多くても3色です。
大事なのは色数ではなく順番です。離れた2色をつなぐときは、色相環をたどる順に中間の色を置いてください。赤と青なら、あいだに紫を入れます。順番を飛ばすと中間がくすみます。

グラデーションのカラーコードはどうやって作るの？

グラデーション自体に1つのコードはありません。両端の色のコードと、変化の向きをセットで指定します。
Webなら background: linear-gradient(135deg, #3e5c76, #98b1d3); のように書きます。135度は左上から右下への向き、そのあとが両端の色です。円形にするなら radial-gradient に変えます。
CanvaやFigmaならコードを書かずに作れます。塗りでグラデーションを選び、両端にHEXを入力するだけです。中間に色を足したいときは、バーをクリックして点を増やします。

グラデーションカラーの作り方は？

手順は3つです。基準になる色を1色決めます。パレットのメインカラーで構いません。次にもう一方の端の色を作ります。色相を30度以内でずらして、明度を大きく変えます。最後に彩度を両端でそろえます。片方だけ鮮やかだと、そこが浮きます。
迷ったら同じ色相のまま明度だけ変えてください。濃い青から薄い青。この作り方なら中間が濁りません。
作ったあとは、文字が乗る場所で明度差を確かめます。背景の明るい側に白文字を置くと読めません。

次に学ぶこと

このレッスンの要点です。

• 濁る原因は、両端の色が離れすぎていること。色相差は30度以内
• 色相を少しずらして、明度を大きく動かすときれいに出る
• 離れた2色をつなぐなら、色相環をたどる順に中間色を1つ置く
• 形は線形と円形の2つ。角度は45度前後、上を明るくする
• 1つの作品で使うのは1か所まで。長い文章の背景と小さい文字には使わない

グラデーションは、パレットができてから使う技です。まだ4色が決まっていないならカラーパレットの作り方へ戻ってください。
印刷で色が変わる話は印刷の色、色の組み合わせ方の型は補色と配色の型で扱っています。

ほかのレッスンはデザインの基本コース目次から選べます。