画像の網掛け加工用パターンサンプル（無料ダウンロード）
たーさん写真の上に文字をのせる難しさ
ウェブページにおいて、写真に文字をのせて見せるというのは意外と難しいものです。
写真は場所によって色も違いますから、テキストの色がその写真の色と近い色になってしまう場合、どうしてもテキストの視認性が落ちてしまいます。
特に昨今主流のレスポインシブデザインでは、画面幅によってテキストが被る場所が可変のため、その調整は難しくなります。
写真上のテキストを目立たせる方法
写真上のテキストを目立たせるには以下のような手法があります。
- ①写真の明度・彩度を変える
- ②テキスト部分に背景色を入れる
- ③テキストに縁取り・影を入れる
- ④写真に網掛けをする
①写真の明度・彩度を変える
写真の彩度や明度を変えることでテキストを目立たせることが可能です。しかし、明度や彩度を変えることは写真の印象を大きく変えてしまうため、写真の持つ魅力をしっかり伝えたい場合にはあまりおすすめできない方法となります。
②テキスト部分に背景色を入れる
テキスト部分に背景を設置することも文字を目立たせる有効な方法です。この際、背景を透過にしてあげると圧迫感を防ぐことができます。しかし、この手法で格好良く見せるには高いデザインセンスが必要になるものと思います。
③テキストに縁取り・影を入れる
テキストに縁取りや影を入れることもテキストを目立たせる有効な方法です。縁取りをする場合は、配色を間違うと途端にダサくなるので注意が必要です。できるだけ文字色の彩度を変えた色にするのが無難です。影を入れる方法は比較的扱いやすい方法です。
④写真に網掛けをする
写真に網掛けをする方法は、高いデザインセンスがなくても使える手軽な方法です。写真の印象もそんなに損なうことなく、テキストも目立たせることができるのでお勧めです。
網掛けの効果
以下に網掛け画像の事例を紹介します。
網掛けなし
網掛けあり
画像の明度や彩度がそれほど変化した印象を与えずに、テキストを目立たせることが可能です。
また、写真をそのまま載せた感じではなく、ひと手間かけた印象も伝わるのではないでしょうか？
この方法は高いデザインセンスがなくてもそれなりに見栄えがするため、非常に扱いやすい手法です。
テキストのシャドウなどを併用するとさらに見やすくなるかと思います。
網掛けパターン画像サンプルダウンロード
以下に網掛け用のパターン画像サンプルを掲載しますので、是非ご活用下さい。
Photoshopでパターン定義し、塗りつぶしで画像の上に乗せてもらえれば完了です。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
