背景写真のカラーが強すぎて本文が目立たない。そんなときは透過処理をつかおう!

沢山の色彩、複雑な形や強いコントラストなどの個性の強い写真の上にテキストを貼り付ける場合、フォントにドロップシャドーなどのエフェクトを使っても、背景画像に埋もれてしまうときがある。そんなときは、テキストの背景部分だけを透過処理することで背景画像を損なうことなく、タイトルや本文を目立たせられる。図13の場合、背景の山岳写真によって、本文が完全につぶれてしまっている。本文は、白シャドーなどのエフェクトがかけられているがそれでも十分とはいえない。

図13 背景にフォントが埋もれている

ここで図の本文の背景にホワイトを透過処理した(図14)。これで本文は見やすくなり、サイトとしてかなり統一感が出てきたのがわかる。

図14 背景に透過された白バックを引くことで見やすくなった

背景に写真をつかうときは、彩度を変えるだけでここまで印象が変わる

背景に使う画像もただそのまま使うのではなく、必要に応じて加工した方が当然、より良いWebサイトになる。特に、花や彩り鮮やかな絵画、野菜、果物などの食品などは、彩度をあげることで劇的に変わってくる。逆光や暗め環境で撮影した写真なども画像修正ソフトで彩度を上げることで、強い印象がWebに反映される。LiVEで作るWebの場合は、写真がより大きなポイントにもなるので、なおさらだ。

図15は、椿の写真を背景にしたもの。逆光気味で全体に暗めだ。

図15 椿の色が暗く、全体的に沈んで見える

LiVEに入っている画像編集ソフト「SiGN Pro」で彩度の変更を行った背景画像(図16)。椿の彩りが映えまるで別な写真のよう。このように背景が変わるだけでサイトの印象も大きく変わるので注意が必要だ。

図16 彩度を上げることで印象ががらりと変わる