グラデ背景に文字をきれいに載せるコツ｜読みにくさの原因と5つの解決法

2026.08.12

はじめに

グラデーション背景を敷いて、その上に文字を載せた。全体としては悪くないのに、なぜか一部の文字だけ沈んで読みにくい——。

この「一部だけ」というのがポイントです。背景の色が場所によって変わるグラデーションでは、文字を置く場所によって読みやすさが変わります。単色背景では起きない、グラデーション特有の悩みです。

この記事では、その原因と、すぐ使える5つの解決法をご紹介します。

原因は「背景の明るさが場所によって違う」こと

単色の背景なら、文字色は1回決めれば全体で通用します。ところがグラデーションは、上と下、左と右で明るさが変わります。

上(濃い青)←白文字なら読める、黒文字は沈む
中央(中くらい)←白も黒も、どちらも中途半端
下(薄い水色)←黒文字なら読める、白文字は飛ぶ

つまり、文字を「中央のあたり」に置くのがいちばん危ないのです。白でも黒でもコントラストが足りず、どっちつかずになります。

これを踏まえると、対策は自然と決まってきます。

解決法①：文字は「端」に置く

いちばんシンプルで、いちばん効きます。

グラデーションのいちばん濃いところか、いちばん薄いところに文字を置いてください。そこなら背景の色がはっきりしているので、文字色を決めやすくなります。

上から下へ濃くなるグラデ → 文字は上寄せか下寄せ
中央から外へ広がるグラデ → 文字は中央（中央がいちばん明るいため）

「なんとなく真ん中」に置くのをやめるだけで、読みやすさは大きく変わります。

解決法②：背景と反対の明るさを選ぶ

文字色は、基本的に白か濃いグレー（ほぼ黒）の二択で足ります。凝った色を使うより、そのほうが読みやすくなります。

背景	文字色
濃い・暗いグラデ	白
淡い・明るいグラデ	濃いグレー〜黒
中くらい	濃さを調整して、どちらかに寄せる

ここでよくある失敗が、背景と同じ色系統の文字を使うことです。青いグラデに濃い青の文字を載せると、おしゃれには見えますが読みにくくなります。SNSは一瞬で流れていくので、読めることを優先してください。

解決法③：半透明の帯を敷く

どうしても文字が背景に負けるときは、文字の下に半透明の白または黒の帯を1枚はさみます。

明るい背景 → 白の帯（不透明度 60〜80%）＋黒文字
暗い背景 → 黒の帯（不透明度 40〜60%）＋白文字

グラデーションのきれいさは少し損なわれますが、読めない告知画像は仕事をしません。文字数が多いとき、写真とグラデを重ねているときは、迷わず帯を使ってください。

角を丸くしたり、帯の端をぼかしたりすると、なじみがよくなります。

解決法④：文字にふち取りか影をつける

帯を敷くほどではないけれど少し弱い、というときは、文字自体を強くします。

ふち取り（境界線） … 文字と反対色で、細めに。太くするとレトロな印象になります
ドロップシャドウ … ぼかしを強めに、不透明度は低めに。「影をつけた」と気づかれないくらいが上品です

やりすぎると一気に古い印象になるので、「言われないと気づかない」を目安にしてください。

解決法⑤：背景側をぼかす・暗くする

文字を触るのではなく、背景のほうを弱める方法もあります。

文字が乗る部分だけ、背景をわずかにぼかす
文字が乗る部分だけ、黒を薄くかけて暗くする（暗い部分から明るい部分へ抜ける半透明の黒がよく使われます）

写真を重ねたデザインでよく使われる手法ですが、グラデーション背景でも有効です。①〜④より手間はかかりますが、いちばん自然に仕上がります。

使う場面別・おすすめの組み合わせ

場面	おすすめ
SNSの告知（文字が短い）	①端に置く＋ ②反対の明るさ
バナー（文字が多い）	③半透明の帯
動画のサムネイル	②＋④ふち取り（小さく表示されるため強めに）
プレゼンの表紙	①＋②（シンプルがいちばん映えます）
ハンドメイドの商品画像	③帯（商品名と価格を確実に読ませる）

仕上げに必ずやってほしい確認

スマートフォンの大きさで見る

パソコンの大画面では読めていても、スマートフォンに縮むと読めなくなることがよくあります。作った画像を横幅390pxくらいに縮めて確認してください。それで読めれば、まず大丈夫です。

明るさを下げて見る

画面の明るさを一時的に下げると、コントラストが足りない箇所が浮かび上がります。屋外でスマートフォンを見ている人の状況に近づける確認です。

目を細めて見る

古典的ですが効きます。細部が見えなくなるので、文字が背景から浮いているかどうかだけが残ります。浮いていなければ、コントラストが足りていません。

よくある質問

文字色はブランドカラーを使いたいのですが

見出しなど短くて大きい文字なら、ブランドカラーでも読めます。ただし本文のような小さい文字は白か黒にしてください。大きさによって読みやすさの条件は変わります。

帯を使うとダサくなりませんか？

帯そのものより、不透明度が中途半端だとダサく見えます。しっかり敷くか、うっすら敷くか、どちらかに振り切ってください。角を丸めて余白をとると、ぐっと洗練されます。

グラデーションの上に写真も重ねたいです

その場合は必ず帯を使ってください。背景が2層になると明るさが読めなくなるので、①〜②だけでは安定しません。

どのくらいのコントラストがあれば十分ですか？

数値で判断したい場合は、Webのアクセシビリティ基準が参考になります。本文なら背景との明るさの比が4.5:1以上、大きな文字なら3:1以上が目安です。「コントラストチェッカー」で検索すると、色を入れるだけで判定してくれるサイトが見つかります。

まとめ

読みにくさの原因は、背景の明るさが場所によって違うこと
① 文字は端に置く（中央のあたりがいちばん危ない）
② 文字色は背景と反対の明るさ。白か濃いグレーの二択で足りる
③ 迷ったら半透明の帯。読めることが最優先
④ ふち取り・影は控えめに
⑤ 背景側をぼかす・暗くするのがいちばん自然
最後にスマホの大きさで確認する

グラデーション背景は、文字さえ読みやすければ、単色よりずっと表情のある仕上がりになります。