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

tasan

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Follow me!