テキストを画像の上に置くとき、視認性をよくする方法
web制作ですと、バナー作成時によく当たる問題「テキストを画像の上に置くと視認性・可読性が悪い」
商品・製品や色数の多い写真の上にテキストを乗せると「テキストが見えにくい」という状態になります。
メインビジュアルはテキストが見えにくい画像にしています。
フォントサイズや使用する色は変えずに、テキストの視認性・可読性をあげていきます。
1. フォント変更・ウエイトを太く・ふち文字
フォント：明朝体 → ゴシック体・ウエイトを太く・ふち文字へ変更。
ハッキリと読めますが、写真との雰囲気が合っていないのでNG
2. フォントの外側に光彩
フォントの外側に光彩をかけましたが、一目で認識できないのでNG
ドロップシャドウは一定方向へ向かう影になるので、テキスト全体にかかる「光彩」が向いています。
テキストの一部分のみ可読性が弱いときなどは、光彩で解決できます。背景と同系色の光彩をかけると、馴染みが良くなります。
3. テキストを茶色・アルファをかけた白の帯
テキストを茶色にして、アルファをかけた白の帯を敷きます。
柄とテキストが同化して見えるので、テキストの認識が難しくなっているのでNG
4. テキストを白・アルファをかけた茶色の帯
テキストの色と、帯の色を入れ替え。
テキストは見えるようになりましたが、視認性が弱いのでNG
写真との雰囲気はこのくらいの透明度の帯が合いますが「文字を見せる」ことが目的なので、まだ弱いです。
5. テキストを白・アルファを高くした茶色の帯
帯のアルファ値を高くする。
一目でテキストを認識できるようになったのでOK
写真・テキストの雰囲気も重要ですが「テキストが見えない」のは、受け取り側に負担をかけることになるので注意が必要です。
おまけ
ベースの色を元に、あしらいを足す・テキストにジャンプ率をつけるなど写真に合わせて調整をして「伝えたいこと」を明確にしました。
Instagramではphotoshopを使用した写真のパターン出し、写真合成ステップなど公開しています。
いいね！・フォローいただけると制作の励みになります。