最近、3Dグラフィックの表現が用いられたWebサイトを見かけるようになってきたのではないでしょうか。従来の動的なサイトではよくHTMLやCSS、JavaScriptが採用されていましたが、このような3D表現を再現するにはWebGLやthree.jsという技術がさらに必要です。

そこで今回は、WebGL/three.jsを使ってできることやメリットを、参考サイトとあわせて紹介していきます。サンプルとして日本・海外の最新事例を30選紹介するので、ぜひ一読してイメージをつけてみてください。

WebGLとは

WebGL（Web Graphics Library）とは、webブラウザ上でプラグインを使用せずに3Dグラフィックを表示させるためのJavaScript APIを指します。

ただし、WebGLだけで3Dグラフィックを表現するには、3Dの空間を2Dのブラウザ上で表現するための座標置換やGLSLというシェーディング言語の習得といった高い専門知識が必要となり、開発にも時間がかかります。

そこで用いられるのがthree.jsというライブラリです。three.jsを使えばJavaScriptの知識だけで簡単にwebGLを扱えるようになります。

WebGLの３つのメリット

 

1.WebGLのメリット①集客力の向上

画像やテキストを用いた2Dのサイトは情報提供を主な目的とするため、ユーザーが受け身になりがちです。

一方で、WebGLを用いたサイトはユーザーの操作に応じた動きをつけることができるなど、見る人をを引き込む強い訴求が可能になります。

 

2.WebGLのメリット②ゲームなどのリッチコンテンツが表現できる

Unityなどで作ったゲームをWebGLで出力することで、ブラウザ上でその作品を動かすことができるようになります。もちろん、ゲーム以外の動的なコンテンツも実行可能です。例えば、診断系コンテンツを設置して結果に応じてオススメ商品を表示するといったことも簡単にできます。

 

3.WebGLのメリット③ユーザーがインストールすることなくブラウザで実行できる

従来、ブラウザ上でゲームや3Dアニメーションを表示するためには、AdobeFlashなどのプラグインが必要でした。プラグインはあらかじめインストールが必要であったり、ユーザーの利用環境によっては対応しておらずうまく表示されないといった問題がありました。。

一方WebGLは、2022年5月時点で多く利用されている主要なブラウザで対応しており、ユーザーはダウンロードなどを特にすることもなく、WebGLで制作されたリッチな3Dコンテンツを楽しむことができます。

参考記事：https://caniuse.com/webgl2

【日本】WebGL/three.jsを活用したサイト事例 

ここからは国内でWebGL/three.jsを活用したサイトの事例を紹介します。

【寝具】まくらのキタムラ – コーポレートサイト

引用元URL：まくらのキタムラ　／※弊社による制作事例ではございません。

 

枕の老舗メーカー「まくらのキタムラ」のコーポレートサイトにおける事例です。

トップページでは、円状に敷かれた布団とその上で眠る幅広い年代の方々の寝姿を、自然なアニメーションで表現しています。

さらにマウスのスクロールに合わせてズームイン・ズームアウトし、また動きにあわせて起床から身支度をして出かけるまでの過程がコマ送りで再現されます。

このようなアニメーションにより、多忙な現代人に良質な睡眠を届けることで人々の健康を支えていく、という理念をユーザーに印象づけています。

【建築】高松伸建築設計事務所 – コーポレートサイト

引用元URL：高松伸建築設計事務所　／※弊社による制作事例ではございません。

 

日本を代表する建築家である高松伸さんの事務所のコーポレートサイトにも、WebGLが使用されています。

ページにアクセスすると、前衛的でユニークな建築物が現れ、メッセージとともにさまざまな角度から立体的に建築物を映しだすようなアニメーションが流れます。

その後に続く作品紹介ページを読みたくなるような、ユーザーの関心をかきたてる効果があります。

【音楽】BiSH is OVER !

引用元URL：BiSH iS OVER! 特設サイト　／※弊社による制作事例ではございません。

 

続いてご紹介するのは、2023年での解散を発表した大人気アイドル「BiSH」の特設サイトです。

トップページには、解散を惜しむ声やBiSHへの想いをつづったファンのメッセージを背景に、歴代のCDジャケットが配置されています。

マウスの動きに合わせてCDや背景が立体的に動くなど、アーティストの世界観に浸ることのできるサイトです。

【出版】小学館100周年

引用元URL：0から考えよう。　／※弊社による制作事例ではございません。

 

出版社「小学館」の創業100周年を記念して制作された特設サイトの事例です。

背景には単色のオーロラが表示されており、マウス操作に追従するように、新しいオーロラが生まれるかのような動きのあるグラフィックデザインです。

何もない背景からオーロラが生まれるパフォーマンスによって、「0（ゼロ）から考えよう。」というキャッチコピーをうまく表現しています。

【食品】RINGOアイスバー

引用元URL：RINGO アイスバー 　／※弊社による制作事例ではございません。

 

焼きたてカスタードアップルパイ専門店「RINGO」の特設サイトの事例です。

期間限定で発売するリンゴ味とベリーミックス味の2種類のアイスバーをPRするために制作されたサイトで、商品概要や特徴が紹介されています。

画面中央に置かれたアイスバーがマウスの動きに連動して、回転したり、立体的に動いたりします。

また、背景の円や画面の上の方から降ってくる氷も動くようになっており、空間や奥行きを感じるサイトです。

【マーケティング】Renxa – コーポレートサイト

引用元URL：Renxa　／※弊社による制作事例ではございません。

 

マーケティング会社「Renxa」のコーポレートサイトの事例です。

特に注目したいのが、トップページからRecruitページへ誘導する部分の表現です。ロゴマークである4つのドットが長方形型に並んでいて、マウスを近づけると近くのドットが回転し、まるで生きているような面白い動きとなっています。

【広告】日本経済社 – 2023年採用サイト

引用元URL：日経社 2023年度 採用サイト　／※弊社による制作事例ではございません。

 

大手広告会社「日経社」の採用サイトの事例です。

「ここは、0G。無重力。」というキャッチコピーにあわせ、仕事中の社員が宇宙船内でふわふわと浮いているアニメーションが用いられています。

中央のメニューをクリックすると、案内役のロボットから吹き出しが出てくるゲームのような演出も特徴的です。

宇宙船に入りこんだような没入感を生みだし、ユーザーに「無重力」というサイトテーマを強く印象づけています。

【機械】Brother工業 ブランドストーリー

引用元URL：ブラザーブランドストーリー 　／※弊社による制作事例ではございません。

 

大手電機メーカー「ブラザー工業株式会社」のコーポレートサイトの事例です。

コーポレートサイト内にあるブランドストーリーページにWebGLが使用されています。

トップページには各製品のさまざまな利用シーンがアニメーションで流れており、幅広い現場で活用されていることを訴求しています。

【HR】GREEN RIBBON – コーポレートサイト

引用元URL： GREEN RIBBON　／※弊社による制作事例ではございません。

 

続いて、人材サービス業「GREEN RIBBON」のコーポレートサイトの事例です。

多彩なカラースプレーで社員の顔を描くことで、「HELLO NEW COLORS 」というキャッチコピーを表現しています。このようにインパクトのあるデザインにさらにWebGLによる動きを組み合わせることで、記憶に残るWebサイトを作ることができます。

マウスをスクロールすると、社員が細かいドット状に変化して画面から消え、次の画面へ遷移するアニメーションが用いられています。

テキストにもエフェクトがかかっていて、ページが変わるたびにユニークな動きで画面上にコピーが現れるという細やかな演出が印象的です。

【デザイン】ELEVENCE – コーポレートサイト

引用元URL： 株式会社ELEVENCE　／※弊社による制作事例ではございません。

 

総合デザイン事務所「ELEVENCE」のコーポレートサイトの事例です。

トップページでは背景の格子が時折きらめくような控えめなアニメーションが用いられています。

全体的にモノクロの色調でまとめられている中で、トップページ下部の「SELECTED WORKS」の部分でマウスポインター部分がパッとカラーに変化するのがとても印象的です。

デザイン事務所らしい、洗練されたデザインです。

【VC】伊藤忠テクノロジーベンチャーズ – コーポレートサイト

引用元：ITV（伊藤忠テクノロジーベンチャーズ株式会社）　／※弊社による制作事例ではございません。

 

続いては、ベンチャーキャピタル「伊藤忠テクノロジーベンチャーズ株式会社」のコーポレートサイトの事例です。

雲の合間から地球がのぞいていて、表面がうごめきながら色が移り変わるような細かい演出が物語を感じさせます。

また、ページ全体を通してテキストへエフェクトがかかっていて、スクロールすると浮かびあがるような表現で目に留まります。

【専門技術】TMI総合法律事務所 – 採用サイト

引用元：TMI総合法律事務所 採用情報　／※弊社による制作事例ではございません。

 

大手法律事務所「TMI法律総合事務所」の採用サイトでもWebGLが用いられています。

「弁護士ってなんだろう？」という問いから始まり、スクロールすると弁護士の存在意義について説くメッセージが続き、物語の世界に入り込んだような感覚を覚えます。

メッセージが進むにつれ、だんだんと背景に高い山が映し出され、ユーザーの高揚感が湧くような演出が印象的です。

【美容】ポーラ – 目の前を救いたい。ぜんぶそこから始まる。

引用元：目の前を救いたい。ぜんぶそこから始まる。 – ポーラ　／※弊社による制作事例ではございません。

 

大手化粧品メーカーである「POLA」のサイトです。

ヘッダー内にはポーラの事業に関わる分野がそれぞれアイコンとして表現されていて、マウスオーバーすると、効果音とともに波打つような動きをします。

さらに、アイコンをクリックすると、事業概要がアイコン下に現れ、マウススクロールでスムーズにズームイン/アウトができます。

このような動きの心地よさから、ブランドに対して親しみやすさを感じるとともに、思わずアイコンを次々とクリックしたくなってしまいます。

【美容】花王 プリマヴィスタ ナチュラルグロウテクスチャシミュレータ

引用元：ナチュラルグロウテクスチャシミュレータ　／※弊社による制作事例ではございません。

 

大手消費財・化学メーカー「花王」は、人気化粧品ブランド『プリマヴィスタ』のリキッドファンデーションの感触を擬似的に体験することができるサイトです。

とろっとしたリキッドの感覚や、薄く伸ばした際の色味の表現などを、オンライン上でできる限り届けたいたいという意図が伝わってきます。

ユーザーが自分の肌色とファンデーションの色味を自由に組みあわせてシミュレーションをすることができます。

web上で自分の肌色と合うファンデーションを簡単に探すことができ、その後の購買へと繋げやすくしています。

【その他】AI MODEL

引用元：AI model（AIモデル） — AIで生成したファッションモデルでアパレル企業のDXを支援　／※弊社による制作事例ではございません。

 

AIで生成した各ブランド専属のオリジナルファッションモデルを提供するサービス『AI model』を手がけるAI model株式会社のサイトです。

トップページに表示されたモデルの写真にマウスカーソルを合わせる、その箇所の髪型や肌色、顔のパーツなどが多様に変化します。

ブランドのイメージにあわせ、人種問わず自由にモデルを生成できることを訴求しています。

【海外】WebGL/three.jsを活用したサイト事例

続いては、海外でWebGL/three.jsを活用したサイトの事例を紹介します。

【アパレル】365 A Year of Cartier

引用元：365 A Year of Cartier　／※弊社による制作事例ではございません。

 

フランスの高級宝飾ブランド『Cartier』の特設サイトの事例です。

スクロールすると、上下の動きではなく手前から奥の世界へと吸い込まれるような洗練された動きとともに、Cartierのブランドストーリーやさまざまな利用シーン・メッセージが映しだされます。

3Dグラフィックによる表現や、、多彩な写真を用いることで、長くても飽きのこないページに仕上がっています。

【アパレル】Montblanc Legend Red – The Race

引用元：Montblanc Legend Red – The Race　／※弊社による制作事例ではございません。

 

スイスの高級筆記具ブランド『Montblanc』が手がける男性向け香水ブランド『Montblanc Legend』の特設サイトの事例です。

カーレースのゲームがマウス操作だけで楽しめます。

ゴールまでにかかった時間が表示されたり、壁にぶつかると速度が落ちるなどゲームとして本格的に楽しめる仕様となっており、ブランドの遊びごころが感じられます。

【アパレル】LOUIS VUITTON Louis 200

引用元：LOUIS VUITTON Louis 200　／※弊社による制作事例ではございません。

 

続いて、フランスの高級ファッションブランド『LOUIS VUITTON』の特設サイトの事例です。

画面中央に浮かぶ正方形の3Dモデルにマウスカーソルを合わせると、ブランドストーリーブックやオリジナルアプリの紹介ページに遷移します。

【アパレル】GUCCI 24HourAce

引用元：GUCCI 24HourAce　／※弊社による制作事例ではございません。

 

イタリアの高級ファッションブランド『GUCCI』が手がけるシューズ『GUCCI Ace』の事例です。

スクロールすると、シューズが回転して別モデルのシューズへと次々と変わります。

単調な商品紹介ページではなく、ユーザーを楽しませようとする仕掛けが特徴的です。

【映像】Netflix – The Witcher

引用元：Netflix – The Witcher　／※弊社による制作事例ではございません。

 

アメリカの人気ドラマ『The Witcher』配信に伴うNetflix特設サイトの事例です。

ダイナミックな動きで自由に縮小・縮小ができたり、マウスにあわせて洞窟内が照らされるなど、ドラマの世界観に引きこまれるような演出になっています。

【映画】Turn of the Screw

引用元：Turn of the Screw　／※弊社による制作事例ではございません。

 

イギリスのオペラ会社「Opera North」が、ホラー映画『Turn of the Screw』を告知するために制作したサイトの事例です。

サイト内に映画の世界観を再現した仮想空間が用意されており、ユーザーは作品の世界に浸りながら映画の概要を知ることができます。

【映画】House of Gucci – An Inside Look

引用元：House of Gucci – An Inside Look　／※弊社による制作事例ではございません。

 

カナダの映画『House of Gucci』公開にともなう特設サイトの事例です。

高級ファッションブランド『Gucci』の創業者一族の実話にもとづく映画であり、タイトルにちなんでGucci一族の内情を明かすための「鍵」が中央に配置されています。

スクロールの動きにあわせて鍵が回転するなど、ページが単調になってしまわないような工夫が見られます。

【映画】Reminiscence – Now Playing In Theaters & HBO Max

引用元：Reminiscence – Now Playing In Theaters & HBO Max　／※弊社による制作事例ではございません。

 

アメリカのSF映画『Reminiscence』の特設サイトの事例です。

ユーザーは自分の名前と顔写真を登録することでアバターを生成し、映画の世界に入りこんだかのような擬似体験ができます。

【ゲーム】Xbox Museum

引用元：Xbox Museum　／※弊社による制作事例ではございません。

 

Microsoft社の人気ゲーム機『Xbox』発売20周年を記念して制作されたサイトです。

初代から最新版まで、歴代のXboxに関する展示とともに歴史をふりかえることのできるバーチャルミュージアムです。

【飲料】The Unconventional Gallery

引用元：The Unconventional Gallery　／※弊社による制作事例ではございません。

 

フランスの有名ワインメーカー『Ruinart』とイギリスの現代芸術家「David Shrigley」のコラボサイトの事例です。

ピンク色のワームがユーザーをギャラリー入り口へと誘導する演出がユニークです。

【機械】hp（ヒューレットパッカード）

引用元：hp（ヒューレットパッカード）　／※弊社による制作事例ではございません。

 

アメリカの電子計測機器メーカー『hp（ヒューレットパッカード）』のサイトの事例です。

メーカーらしくエンジンが背景画像に採用されていて、マウスを動かすとさまざまな角度からエンジンの設計をのぞくことができます。

【タイヤ】Vredestine New Horinzons

引用元：Vredestein New Horizons　／※弊社による制作事例ではございません。

オランダのタイヤメーカー『Vredestein』が、新しいタイヤ『Vredestein WINTRAC』の発売にともない制作した特設サイトの事例です。

オンラインの3Dミュージアムになっていて、展示されているタイヤの3Dモデルを360度好きな角度から見ることができます。

【自転車】VanMoof

引用元：VanMoof　／※弊社による制作事例ではございません。

 

続いては、オランダの自転車メーカー「VanMoof」の製品サイトの事例です。

マウス操作に合わせて、各モデルについて角度が異なる写真がスライド表示されるようになっていて、ユーザーが簡単に比較しやすくなっています。

【医療】Demophorius – コーポレートサイト

引用元：Demophorius healthcare　／※弊社による制作事例ではございません。

 

キプロスの医療機器メーカー「Demophorius 」のコーポレートサイトの事例です。

医療機器メーカーらしい白を基調としたサイトの背景には、広範囲に淡いグラデーションがかかっていて、濃淡や模様が少しずつ変化します。

【美術館】Magical Reflections – a virtual art experience

引用元：Magical Reflections – a virtual art experience　／※弊社による制作事例ではございません。

 

ドイツの画家「Johann Erdmann Hummel」の作品を紹介する、オンライン3Dミュージアムサイトの事例です。

中に入ると、リアルなミュージアムと同じように、作品に近づいて鑑賞したり写真を撮影することもできます。さらに作品をクリックすると、作品の世界の中に入ることもできるようになっていて、オンラインならではの楽しみ方で作品の世界観を味わえます。

WebGL/three.jsを使ったサイト制作はBALANCeにお任せください

ここまでWebGLの概要と国内外の事例を30選紹介してきました。

WebGLを使うと、特別なアプリなどを入れることなくサイト上で3Dアニメーションを表現することが可能です。さらに、インタラクティブな要素を取り入れることで、ゲームのようなユーザー体験型のコンテンツを制作することもできます。

訴求力の強いサイトを作りあげ、ビジネスチャンスを拡大する可能性を秘めている、WebGL/three.jsを使ったサイト制作。

当社BALANCeでは、このような3Dグラフィックを効果的に使用したサイト制作の実績が豊富です。