Webデザインが学べるコミュニティを作りました!

初心者デザインから脱出!写真の上の文字を見やすくするテクニック7選

masaca(@masaca_dApps)です。

Webデザインのメインビジュアルやバナーで、写真の上に文字を乗せる表現はよく使います。
写真の上の文字が見づらかったり、文字が読めない状態はデザイン初心者によくある失敗です。

写真の上に文字を乗せるときにPhotoshopでちょっとした効果をテキストや、写真にかけることで見やすさを向上させることができます。

今回はカンタンで、しかもずっと使えるテクニックを紹介します。どんな風に作っているのか参考になるようにpsdデータもDL可能にしました。

masaca

写真の上の文字の扱い方はこれでバッチリ!

ドロップシャドウを使う

Before

文字の中心部が読みづらい状態になっています。どんなに素敵なキャッチコピーも見づらければ機能しません。

After

ドロップシャドウのレイヤー効果をかけて、文字の視認性を高めました。不自然にならない程度に抑えることがポイントです。

光彩を使う

After

光彩のレイヤー効果をかけて、文字の視認性を高めました。色は草の部分からスポイトで取ることで写真に馴染みます。
うすく広範囲にかけることで写真のやわらかいイメージと合っています。

masaca

ドロップシャドウよりも光彩の方が写真のイメージと合っているね。

境界線を使う

Before

白い文字を乗せた場合、まったく文字が読めない状態になってしまいました。

After

境界線のレイヤー効果をかけることで、文字がくっきり読めるようになりました。
境界線の色は写真からスポイトで取りました。

文字の背景にボックスを配置する

Before

文字の一部が読みづらい状態になっています。

After

文字の下にボックスを配置し、視認性を上げました。スポーティやデジタルなイメージの表現とよく合います。
ボックスはベタ塗りでも良いですが、少し透明にして使ったりします。

画像を暗くする

Before

全体的に文字が読みづらい状態になっています。

After

カラーオーバーレイのレイヤー効果をかけることで、文字の視認性が高まりました。
黒のカラーオーバーレイを薄くかける方法はいろんな場面で使えます。

画像にパターンオーバーレイを使う

After

パターンオーバーレイのレイヤー効果をかけることで、文字の視認性を高めることと質感を出すことができます。
やや見づらかったので、光彩のレイヤー効果も併用しました。

画像をぼかす

Before

読めないことはありませんが、もう少し読みやすくしたいですね。

After

「フィルター」→「ぼかしギャラリー」→「虹彩絞りぼかし」をつかって画像の一部をぼかしました。
画像全体をぼかして文字を乗せることもありますが、主題をぼかしたくない場合は画像の一部のみぼかしをかけます。

psdデータのダウンロード

今回紹介したすべてのサンプルデータのpsdをダウンロード可能にしました。(再配布可能なpixabayの写真素材を使っています。)
レイヤー効果の使い方の参考にしてくださいね。

まとめ

写真の上に文字をのせるときは、はっきりと見える状態にしていなければ機能しません。

紹介した方法を使うだけで、文字の視認性を確保することができますのでデザインのテイストにあわせて手法を使い分けてくださいね。

masaca

メインビジュアルにもバナーにも使える便利なテクニックだね。
【永久保存版】Webデザイン初心者でもわかる!フォントの選び方を5つの事例で解説

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA