テキストを画像の上に置くとき、視認性をよくする方法

web制作ですと、バナー作成時によく当たる問題「テキストを画像の上に置くと視認性・可読性が悪い」

商品・製品や色数の多い写真の上にテキストを乗せると「テキストが見えにくい」という状態になります。

メインビジュアルはテキストが見えにくい画像にしています。

フォントサイズや使用する色は変えずに、テキストの視認性・可読性をあげていきます。

1. フォント変更・ウエイトを太く・ふち文字

NG：写真のテイストと合っていない

フォント：明朝体 → ゴシック体・ウエイトを太く・ふち文字へ変更。

ハッキリと読めますが、写真との雰囲気が合っていないのでNG

2. フォントの外側に光彩

NG：テキストは見えるようになったけど、一目で認識できない

フォントの外側に光彩をかけましたが、一目で認識できないのでNG

ドロップシャドウは一定方向へ向かう影になるので、テキスト全体にかかる「光彩」が向いています。

テキストの一部分のみ可読性が弱いときなどは、光彩で解決できます。背景と同系色の光彩をかけると、馴染みが良くなります。

3. テキストを茶色・アルファをかけた白の帯

NG：柄とテキストが同化している

テキストを茶色にして、アルファをかけた白の帯を敷きます。

柄とテキストが同化して見えるので、テキストの認識が難しくなっているのでNG

4. テキストを白・アルファをかけた茶色の帯

NG：テキストは見えるようになったけど、視認性が弱い

テキストの色と、帯の色を入れ替え。
テキストは見えるようになりましたが、視認性が弱いのでNG

写真との雰囲気はこのくらいの透明度の帯が合いますが「文字を見せる」ことが目的なので、まだ弱いです。

5. テキストを白・アルファを高くした茶色の帯

OK：ハッキリとテキストが認識できる

帯のアルファ値を高くする。
一目でテキストを認識できるようになったのでOK

写真・テキストの雰囲気も重要ですが「テキストが見えない」のは、受け取り側に負担をかけることになるので注意が必要です。

おまけ

デザイン調整

ベースの色を元に、あしらいを足す・テキストにジャンプ率をつけるなど写真に合わせて調整をして「伝えたいこと」を明確にしました。

Instagramではphotoshopを使用した写真のパターン出し、写真合成ステップなど公開しています。

いいね！・フォローいただけると制作の励みになります。