タドワークスコンテンツへスキップタドワークス個人や団体、企業のホームページ集客・運用を総合的に支援します。網掛けパターン画像サンプルダウンロード写真の上に文字をのせる難しさウェブページにおいて、写真に文字をのせて見せるというのは意外と難しいものです。写真は場所によって色も違いますから、テキストの色がその写真の色と近い色になってしまう場合、どうしてもテキストの視認性が落ちてしまいます。昨今主流のレスポインシブデザインでは、画面幅によってテキストが被る場所が可変のため、その調整は難しくなります。写真上のテキストを目立たせるには以下のような手法があります。1写真の明度・彩度を変える2テキスト部分に背景色を入れる3テキストに縁取り・影を入れる4写真に網掛けをする1写真の明度・彩度を変える写真の彩度や明度を変えることでテキストを目立たせることが可能です。明度や彩度を変えることは写真の印象を大きく変えてしまうため、写真の持つ魅力をしっかり伝えたい場合にはあまりおすすめできない方法となります。2テキスト部分に背景色を入れるテキスト部分に背景を設置することも文字を目立たせる有効な方法です。この際、背景を透過にしてあげると圧迫感を防ぐことができます。この手法で格好良く見せるには高いデザインセンスが必要になるものと思います。3テキストに縁取り・影を入れるテキストに縁取りや影を入れることもテキストを目立たせる有効な方法です。縁取りをする場合は、配色を間違うと途端にダサくなるので注意が必要です。できるだけ文字色の彩度を変えた色にするのが無難です。影を入れる方法は比較的扱いやすい方法です。4写真に網掛けをする写真に網掛けをする方法は、高いデザインセンスがなくても使える手軽な方法です。写真の印象もそんなに損なうことなく、テキストも目立たせることができるのでお勧めです。以下に網掛け画像の事例を紹介します。網掛けなし網掛けあり画像の明度や彩度がそれほど変化した印象を与えずに、テキストを目立たせることが可能です。写真をそのまま載せた感じではなく、ひと手間かけた印象も伝わるのではないでしょうか?この方法は高いデザインセンスがなくてもそれなりに見栄えがするため、非常に扱いやすい手法です。テキストのシャドウなどを併用するとさらに見やすくなるかと思います。網掛けパターン画像サンプルダウンロード以下に網掛け用のパターン画像サンプルを掲載しますので、是非ご活用下さい。ダウンロードPhotoshopでパターン定義し、塗りつぶしで画像の上に乗せてもらえれば完了です。