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

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

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

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

色味・彩度をフラットに

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

空が白飛び気味の元写真

空が白飛び気味の元写真

青のオーバーレイをかけた写真

青(#003399)でオーバーレイをかけた写真

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

テキストの可読性アップ

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

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

  • オーバーレイ有り(キャッチフレーズが読みやすくなっています)

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

  • オーバーレイ透過率0.2の例
    オーバーレイ透過率0.2

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

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

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

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

NG例:オーバーレイなし

  • オーバーレイなし(画像そのまま)

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

OK例:オーバーレイあり

  • カラーコード#004156(青系) 透過率0.2のオーバーレイ

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

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

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

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

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

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

オーバーレイ設定画面の一例

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

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

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

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

グラデーションオーバーレイ機能の設定画面

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

  • 単色オーバーレイ(#008EBF)

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