画像の網掛け加工用パターンサンプル(無料ダウンロード)

写真の上に文字をのせる難しさ

ウェブページにおいて、写真に文字をのせて見せるというのは意外と難しいものです。

写真は場所によって色も違いますから、テキストの色がその写真の色と近い色になってしまう場合、どうしてもテキストの視認性が落ちてしまいます。

特に昨今主流のレスポインシブデザインでは、画面幅によってテキストが被る場所が可変のため、その調整は難しくなります。
 

写真上のテキストを目立たせる方法

写真上のテキストを目立たせるには以下のような手法があります。

  • ①写真の明度・彩度を変える
  • ②テキスト部分に背景色を入れる
  • ③テキストに縁取り・影を入れる
  • ④写真に網掛けをする

①写真の明度・彩度を変える

写真の彩度や明度を変えることでテキストを目立たせることが可能です。しかし、明度や彩度を変えることは写真の印象を大きく変えてしまうため、写真の持つ魅力をしっかり伝えたい場合にはあまりおすすめできない方法となります。

②テキスト部分に背景色を入れる

テキスト部分に背景を設置することも文字を目立たせる有効な方法です。この際、背景を透過にしてあげると圧迫感を防ぐことができます。しかし、この手法で格好良く見せるには高いデザインセンスが必要になるものと思います。

③テキストに縁取り・影を入れる

テキストに縁取りや影を入れることもテキストを目立たせる有効な方法です。縁取りをする場合は、配色を間違うと途端にダサくなるので注意が必要です。できるだけ文字色の彩度を変えた色にするのが無難です。影を入れる方法は比較的扱いやすい方法です。

④写真に網掛けをする

写真に網掛けをする方法は、高いデザインセンスがなくても使える手軽な方法です。写真の印象もそんなに損なうことなく、テキストも目立たせることができるのでお勧めです。
 

網掛けの効果

以下に網掛け画像の事例を紹介します。

網掛けなし

網掛けなし

網掛けあり

網掛けなし
画像の明度や彩度がそれほど変化した印象を与えずに、テキストを目立たせることが可能です。

また、写真をそのまま載せた感じではなく、ひと手間かけた印象も伝わるのではないでしょうか?

この方法は高いデザインセンスがなくてもそれなりに見栄えがするため、非常に扱いやすい手法です。

テキストのシャドウなどを併用するとさらに見やすくなるかと思います。
 

網掛けパターン画像サンプルダウンロード

以下に網掛け用のパターン画像サンプルを掲載しますので、是非ご活用下さい。

網掛けパターン画像サンプル
ダウンロード

Photoshopでパターン定義し、塗りつぶしで画像の上に乗せてもらえれば完了です。