Webサイトの画像の統一感を演出する「オーバーレイ」の解説

プログラミングやデザイン用語として「オーバーレイ」という言葉があります。

オーバーレイとは「重ねて貼る」という意味で、Webデザインの世界では、画像の上にさらに色や画像などを重ねて、印象を変える役割があります。具体的に得られるメリットは次のようなものです。

• 色味・彩度をフラットに
• テキストの可読性アップ
• サイト全体に統一感を演出

オーバーレイは、見た目の印象を変えるだけでなく、コピーの訴求力までアップさせるというマーケティングの観点から見ても、効果の高い技法なのです。

本稿では「オーバーレイでどういう効果を得られるのか」について解説していきます。

色味・彩度をフラットに

様々な色味や彩度が交差する1枚の画像を一旦フラットな状態にもっていくため、オーバーレイで透過色を重ねることがあります。例えば、下記の例ですと白飛び気味の空（左）も青色のオーバーレイをかけることで改善でき、画像のトーンをフラットにできます。

オーバーレイは、画像を一旦フラットにすることに役立つため、1つのページで色んな画像を使うWebサイト上で有効な技法です。

テキストの可読性アップ

画像にオーバーレイすることで、テキストの可読性が大きく向上することがあります。オーバーレイさせる色味の調整で、写真の奥行き感や色味の雰囲気を変えたり、写真とテキストのメリハリを出すことができます。

例えば、以下を見比べてみてください。同じ画像とキャッチフレーズでも可読性に差を感じると思います。

TCDテーマのオーバーレイ機能では、色を重ねるだけでなく、オーバーレイの透過率まで簡単に調整可能です。例えば、以下のように透過率を0.2と0.6（どちらも#000の黒）で比較してみましょう。

テキストの色が白ならば、画像の彩度を抑えると可読性が上がります。オーバーレイを活用することで、画像とキャッチコピーのバリエーションの差が広がることになります。

サイト全体に統一感を演出

サイトのキーカラー（メインカラー）に合わせて、画像にオーバーレイさせる色を統一することで、サイト全体の整合感や統一感を演出できます。

例えば、キーカラーが青系のサイトなら、各ページのヘッダーやフッターに入っている画像に青系のオーバーレイを敷くことで、サイト全体の整合性を保つことができます。

NG例：オーバーレイなし

オーバーレイなしの場合、各パーツごとの統一感の演出に失敗しています。テキストの可読性も悪くなっています。

OK例：オーバーレイあり

同じカラーコード#004156（青系）のオーバーレイをかけることで、各パーツの統一感が出ました（事例：CUREのデモサイト）。

サイト内に設置されている画像の色味がバラバラでも、オーバーレイで統一感のある印象が出てきますね。

TCDテーマを使ったサイト制作を行う場合は、サイトのキーカラーやコーポレートカラーなどに合わせた色味でオーバーレイをかけるといいですよ。

オーバーレイ機能を標準実装するTCD

ここ数年以内にリリースされているTCDテーマには、トップページや各ページのヘッダーにオーバーレイ機能や透過率の設定が標準実装されています。

Photoshopなどの画像編集ツールでもオーバーレイをかけられますが、TCDテーマなら管理画面から簡単にワンタッチで適用できます。

なぜTCDではオーバーレイが標準実装されているのか？理由はサイトを見ながら、テキストの可読性や全体の統一感を調整できるからです。これによって、画像をアップしたけど合わなかった・・・という手間を減らすことができます。

キャッチコピーの可読性は、サイトの売上にも直結することですので、ぜひオーバーレイを意識してみてください。

グラデーションオーバーレイ機能

TCDテーマ「DROP」や「EGO.」には、特別仕様のグラデーションオーバーレイ機能を搭載しています。

一部のオーバーレイ設定で、カラーを2色まで選択してグラデーション表示できます。↑の設定では「縦方向」になっていますが、横方向にも変更可能です。

単色のオーバーレイでも可読性や統一感をアップいただけますが、グラデーションオーバーレイを使えばよりスタイリッシュにまとめられます。グラデーションの配色はこちらの記事を参考にご覧ください。