如何なるホームページにとっても"配色"は、決して見過ごすことのできない重要な要素です。
どんな色をしていて、どんな見た目をしているのか、でそのホームページの第一印象は大きく異なってきます。

そこで2016年に注目を集めたのが『オーバーレイ』です。
オーバーレイは色のついた半透明のボックスの中に画像や映像を表示させる手法で、上手に活用すると自然と画像や映像に視線が集まり、想像力を湧き立てます。
今年、デザインにグラデーションや単色のオーバーレイを上手取り入れたホームページが数多く登場しました。

そこで今回は、国内外問わず、ヒーロー画像が印象的な『オーバーレイ』を上手に活用したホームページをまとめてご紹介します。

ヒーロー画像が印象的なオーバーレイを上手に活用したホームページ 21選

1. Deep Mind

deepmind.jpg
https://deepmind.com/

こちらは、世界的にも有名な人工知能(AI)であるDeep Mindの公式ホームページです。
"インテリジェントさ"をイメージさせる幾何学模様も印象的ですが、少しスクロールするとサムネイルにも単色のオーバーレイがかかっています。主に青と紫を使用しており、知的さを感じさせる配色となっています。

2. NYC Pride

nycpride.jpg
https://www.nycpride.org/

1969年にスタートしたニューヨークのLGBT団体「Pride」のホームページでは、グラデーションがかかった鮮やかなオーバーレイを使用しています。
鮮やかなオーバーレイを重ねる時には、元の写真を黒ベースにしたり白ベースにすることがありますが、このページでは元の写真を黒ベースにしてオーバーレイを重ねています。

3. Method

method.jpg
http://method.digital/

ニュージーランドに拠点を構えるホームページ制作会社「Method」のページでは、デュオトーンと呼ばれる2色をチョイスしたオーバーレイを活用したホームページとなっています。

4. KAZ ARAHAMA

kazarahama.jpg
http://www.kazarahama.jp/

写真家のKAZ ARAHAMAさんのポートフォリオサイトです。KAZさんは日本生まれの日本育ちですが、長く海外で活躍されていたフォトグラファーです。
トップページでは、薄暗いグレーのオーバーレイに光が輝くエフェクトを使って、写真の美しさを引き立たせています。

5. FAST Project

fastproject.jpg
http://www.fast-project.org/

次世代の地上での極高エネルギー宇宙線観測計画「FAST計画」を広く告知・普及するためのプロジェクトサイトでは、薄暗いオーバーレイを重ねて宇宙を想起させます。
宇宙的な暗めの青や紫の配色が印象的です。

6. Australian Design Radio

australiandesignradio.jpg
https://ausdesignradio.com/

オーストラリアのラジオステーション「Australian Design Radio」では、ブルーとホワイトのトーンを採用したホームページとなっています。
また、縦方向に3カラム構成になっており、スクロールすると真ん中のカラムだけが動く面白い設計になっています。

7. outlines

outlines.jpg
http://outlines.pt/

茶色のオーバーレイが印象的なのが、「outlines」のホームページです。outlinesはノン・トラベラーによる非営利のトラベルエージェンシーです。
ページ中程には世界各地の写真が鮮やかに配置されており、ページ上部のオーバーレイ写真との対照的な関係も楽しめます。

8. 株式会社Gear8

gear8.jpg
https://gggggggg.jp/

札幌・福岡・バンコク・チェンマイに拠点を置くWebディレクションチーム集団の「株式会社Gear8」のページでは、ブラックアンドホワイトのシネマトグラフに注目が集まります。
制作事例・実績を集めた「Works」のページでは、白黒のサムネイルにマウスカーソルを合わせるとカラーに半透明の黒のオーバーレイがかかります。

9. Loop

loop.jpg
https://loop.ableton.com/2016/

2016年11月にベルリンで行われた、音楽関係者のためのイベント「Loop」のホームページです。
ピンクとブルーのグラデーションがかかったビビッドな固定背景によって、活発な印象を受けます。イベント登壇者の一覧が載っている「Participant」のページでは、先ほどの背景と同じようにテキストにもオーバーレイがかかっており、非常に鮮やかで洗練されたデザインになっています。

10. Burciaga & Co.

burcirgaco.jpg
http://burciaga.co/

オーストラリアで活躍する写真家・デザイナーのIshmaelさんのポートフォリオページでは、ご自身の写真が薄い灰色のオーバーレイでかかっており、「Call me Ish(Ishと呼んでください)」という文字とともに来訪者にインパクトを与えます。太字のゴシックと細めのセリフを使い分けているのも洗練したイメージを与えます。

11. ABEDNEGO COFFEE ROASTERS

abedonegocoffeeroaster.jpg
http://abednegocoffee.com/

ワシントンのコーヒー焙煎所「ABEDNEGO COFFEE ROASTERS」では、オーバーレイのかかったヒーロー動画が背景で再生され、ユニークなロゴデザインを真ん中に配置しています。
クロールすると背景動画とロゴが時差をつけて動くパララックスも取り入れられており、ホームページを見る人を楽しませてくれます。

12. NUTS AND WOODS

nutsandwoods.jpg
http://nutsandwoods.de/en/

ベルリンにある家具のデザインスタジオ「NUTS AND WOODS」のホームページを訪れると、サーモンピンクのグラデーションのかかったテーブルの写真に視線を奪われます。
鮮明な商品画像にカーソルを合わせると、下からサーモンピンクのオーバーレイがかかるユニークな「仕掛け」が施されています。

13. Holm Marcker & Co.

holmmarcher.jpg
http://holmmarcher.dk/en/

ニューヨークのデジタルマーケティング会社「Holm Marcker & Co.」のホームページは、薄暗いサーモンピンクと渋めのネイビーのデュオトーンが印象的なヒーロー画像を使っています。
ロゴデザインにはセリフフォントを使っていますがそれ以外はすべて極太のゴシックを使っており、ドッシリとした信頼のおけるデザインとなっています。

14. SOURDREILLE

sourdreille.jpg
http://sourdoreille.net/

フランスのクリエイターグループ「SOURDREILLE」のホームページでは、サーモンピンクと薄い水色を基調としたサイトとなっており、所々にオーバーレイが施された写真が点在しています。

15. 株式会社東京大学エッジキャピタル

tokyounivedgecapital.jpg
https://www.ut-ec.co.jp/

渋めのブルーを基調としたヒーロー動画を全面に敷いているのが、東京大学の技術移転関連事業者として出発したベンチャーキャピタル「東京大学エッジキャピタル」のホームページです。
トップページ下部には3人の起業家のストーリーのサムネイルが配置されていますが、サムネイルもあえてコントラストを落とし、マウスオーバーでオーバーレイがかかるようになっています。

16. Nation

nation.jpg
https://www.wearenation.co.uk/

ロンドンのデザインスタジオ「Nation」のホームページは、遊び心が満載です。ブルーのオーバーレイに「Nation」と書かれた旗がアニメーションで動きます。
その他のページも青をベースにしながら、オーバーレイのかかったヒーロー動画を使ったりして、動きのあるデザインになっています。

17. 日進木工株式会社

nissin.jpg
https://www.nissin-mokkou.co.jp/

岐阜県・飛騨の木工インテリア会社「日進木工株式会社」のコーポレートサイトです。
このサイトでは、薄暗いオーバーレイをかけた写真を前面に出しながら、どのように製品が作られているか、ストーリーテリングの手法を上手に取り入れて、来訪者を魅了します。

18. DeNA Games Tokyo

denagames.jpg
http://denagames-tokyo.jp/

ゲーム運営会社「DeNA Games」のコーポレートサイトでは、薄暗い黒を半透明にオーバーレイをかけたヒーロー動画をサイレントスクイザーとして取り入れています。

19. Pioneer DJ

pioneerdj.jpg
https://www.pioneerdj.com/ja-jp/

日本を代表する音楽機器メーカーPioneerのDJ製品のフィーチャーサイトでは、ミキサーをイメージしたヒーロー画像をトップに配置しています。
その上には円盤が回るアニメーションを取り入れており、ターンテーブルをイメージさせます。エメラルドグリーンを部分的に取り入れているのも、モダンな印象を与えます。

20. CENTURION MAGAZINE

centurionmagazine.jpg
https://centurion-magazine.com/

ロンドン発の「旅」と「おみやげ」をテーマとしたキュレーションマガジン「CENTURION MAGAZINE」のホームページです。
トップのヒーロー画像は、渋めの配色で単色面と写真を半分にわけたインパクトのあるものになっています。

21. SAS

sas.jpg
http://sas-diving.co.jp/

株式会社FLAGが展開するダイビンググッズのブランド「SAS」のブランドサイトにアクセスすると、半透明の黒のオーバーレイがかかったヒーロー動画が再生されます。
その上には、キャッチコピーが添えられ、メッセージとともに独自の世界観へと誘います。

まとめ

今回は、鮮明ではっきりとした画像ではなく、あえて単色やグラデーションでオーバーレイを施すことで注目を引くユニークなホームページを集めました。
オーバーレイを施すと、どこか懐かしく、またどこか新しい世界に来たかのような新鮮な感覚を与えることができます。

また、今回の21種類のホームページを見てもわかるように、一口にオーバーレイといっても、様々な切り口でオーバーレイを使用しています。
これからオーバーレイを取り入れていくなら、どんな色で重ねるかも含めた全体的な見せ方を意識していきたいです。