人もデザインも第一印象が大事！想像力を湧き立てるオーバーレイ手法を上手に活用したホームページ18選

更新日: 2018年01月31日

CMS・サイト制作

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

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

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

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

1. Deep Mind

https://deepmind.com/

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

2. NYC Pride

https://www.nycpride.org/

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

3. Method

http://method.digital/

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

4. KAZ ARAHAMA

http://www.kazarahama.jp/

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

5. FAST Project

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

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

6. Australian Design Radio

https://ausdesignradio.com/

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

7. 株式会社Gear8

https://gggggggg.jp/

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

8. Loop

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

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

9. Burciaga & Co.

http://burciaga.co/

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

10. ABEDNEGO COFFEE ROASTERS

http://abednegocoffee.com/

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

11. NUTS AND WOODS

http://nutsandwoods.de/en/

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

12. Holm Marcker & Co.

http://holmmarcher.dk/en/

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

13. SOURDREILLE

http://sourdoreille.net/

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

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

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

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

15. 日進木工株式会社

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

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

16. DeNA Games Tokyo

http://denagames-tokyo.jp/

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

17. Pioneer DJ

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

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