• LIGの広告成功事例
WEB

【2015年版】圧倒的な3D表現にWebの未来を感じるWebGLを使った特設サイト10選

【2015年版】圧倒的な3D表現にWebの未来を感じるWebGLを使った特設サイト10選

こんにちは、エンジニアののびすけです。

最近、WebGLを使ったコンテンツの知名度が格段に上がっていると思います。
2014年9月にリリースされたiOS8で、iPhoneでもWebGLが使えるという発表があり話題になりました。その波に乗って、カヤックさんではWebGLを使った特設サイトを制作し、さらに話題となったことは記憶に新しいです。

また、最近はWebVRという言葉も出てきたように、Oculus RiftなどのVR向けヘッドマウントディスプレイやデバイスが話題になっていて、3Dコンテンツ自体が注目されてきています。UnityやUnreal Engineなども有名ですが、やはりWebの技術で3Dコンテンツを作れるWebGLがこのタイミングでまた関心を集めています。

こういった流れでWebGLはスマートフォンサイト構築でも使える技術としても認知され、Webコンテンツを作る際には今や自然と選択肢に上がるくらいになってきたと思います。

そこで、昨年5月に書いた「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」の記事に引き続き、今年気になったWebGLを使ったサイトをまとめたいと思います。今回は企業のキャンペーンや特設サイトをメインに紹介します。

なお、WebGLってなんだ?という方はこちらの「デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験」もオススメです。

360°TRIP IN SUNSETS BEACH

938

コロナビールのiPhone限定キャンペーンコンテンツ。
サイトに訪れると、コロナビールを飲んでいる若者が集うビーチの映像を360度で楽しむことができます。スマートフォンを上下左右に動かすと、色々な角度で見られるコンテンツです。

また、期間限定ですが原宿のラウンジバーでコロナビールを飲めるクーポンがゲットできるので、皆さんもチャレンジしてみてはいかがでしょうか。2015年7月31日まで毎日1,000枚限定です。

参考:ビーチリゾートをコンセプトにコロナビールが楽しめるラウンジバー「CORONA SUNSETS BAR HARAJUKU」が期間限定オープン!!
http://prtimes.jp/main/html/rd/p/000000003.000014090.html

WAY TO GO

WAY TO GO

彼はどこへ向かうのか、とても不思議なWebGLアートコンテンツ。
画面上のキャラクターがただひたすら走っていきます。これも360度を見回せるコンテンツです。キーボードやマウスである程度操作ができ、周りの風景などを見回すことができます。

操作はできますが基本的に一本道なので、いずれゴールが見えるはずです。筆者は途中で挫折しました(笑)
それにしても不思議な雰囲気が漂ってますね。

参考:[2015年上半期振り返り] 個人的に思い出深いオススメ WebGL 作品厳選 32!
http://webgl.souhonzan.org/entry/?v=0285

ANA PLANET

ANA PLANET   ANA国際線

ANAがスターウォーズとコラボしたキャンペーンコンテンツ。
ANAは、成田とヒューストンを結ぶ便を2015年6月に開設しました。ヒューストンはNASAの宇宙センターがある場所なので「ヒューストンといえば宇宙」というイメージを持つ人もいるのではないでしょうか。

スターウォーズで宇宙の世界観を表現しつつ、WebGLで3Dに表現された地球を見渡せます。

参考:ANAが「STAR WARSプロジェクト」を始動、秋には「R2-D2」特別塗装機が就航予定
http://gigazine.net/news/20150417-ana-star-wars-project/

COROLLA! presents MIXED REALITY LIVE!

MIXED REALITY LIVE    TOYOTOWN トヨタウン

トヨタカローラのキャンペーンコンテンツ。
カローラの新車発表会と、著名アーティストたちのライブをWebGL空間で再現した新感覚のコンテンツです。
OculusなどのVR向けデバイスで見てみたいところです。(手元にない……)

参考:【S5-Style】WORK | COROLLA! presents MIXED REALITY LIVE!
http://www.s5-style.com/works/corolla-presents-mixed-reality-live

安室奈美恵 Anything for Google Chrome

Namie Amuro  Anything  for Google Chrome

世界初となるGoogle Chromeの拡張機能を活用したMVコンテンツの特設サイト。

Web制作界隈ではかなり盛り上がっていたコンテンツです。
通常版のMVでは動画にちょっと謎めいた表現があるのですが、Chromeで確認することでその謎が明らかに。また、特設サイトでも拡張機能によって見ることができる仕掛けがされています。

余談ですが、制作会社的な目線としては、Chromeの拡張機能を使うという限られた条件で企画を実行できたところがすごいなと思います。

参考:安室奈美恵、世界初のGoogle Chrome版MV公開「新しい映像体験を」
http://www.oricon.co.jp/news/2053814/full/

Yahoo! トレンドコースター

TREND COASTER   Yahoo  JAPAN

ソーシャルメディア上の話題をリアルタイムに検索する、Yahoo!の「リアルタイム検索」を使ったコンテンツです。特定ワードの投稿数(話題、盛り上がり度合い)をもとに時間軸で波形をグラフ化し、その高低差をジェットコースターとしてWeb3Dで表現しています。

体験イベント会場では参加者がOculus Riftを装着し、ジェットコースターを体験できるアトラクションデバイスに乗って、バーチャル空間でジェットコースターを体感しました。

Web上だけでも見ることができます。こちらもWeb制作界隈ではかなり盛り上がりました。

参考:検索の波を体で体験する「ヤフー トレンドコースター」がグランプリ、「コードアワード 2015」贈賞式
http://web-tan.forum.impressrd.jp/n/2015/07/21/20440

株式会社リクルートホールディングス 2016年度新卒採用サイト

RECRUIT革命|リクルートホールディングス 2016年度新卒Web採用サイト

リクルートホールディングスの2016年新卒者向けの採用コンテンツ。

ネット上でも話題になりました。
数々のパーティクルが繋がったり離れたりするアニメーションで、幾何学的な模様になっています。「テクノロジーで世界を動かす」というキャッチコピーで、“テクノロジーを駆使している”というイメージブランディングをWebGLを使うことで果たしていると思いました。

ブラウザがWebGLに非対応の場合はCanvasなどに切り替わるような仕組みになっているみたいですが、新卒採用サイトでWebGLを使うのは攻めてるなと思います。

参考:株式会社リクルートホールディングス 2016年度新卒Web採用サイトのWebGL実装
http://webgl.souhonzan.org/entry/?v=0199

Uniba.inc

ユニバ株式会社 UNIBA INC.

LIGともお付き合いのある制作会社のユニバのコーポレートサイト。

サイトを見た際の現在地情報を取得して、Googleストリートビューでその付近のマップを画面内に描画しています。その中でWebGLで表現されたMac Bookの画面内にユニバのサイトが映し出されているというコンテンツです。

位置情報とGoogleストリートビューがメインになるコーポレートサイトはもしかしたら世界初なのではないでしょうか。

Divergent: Insurgent(ダイバージェントNEO)特設サイト

The Divergent Series   Insurgent   NOW PLAYING

映画ダイバージェントNEO(The Divergent Series: Insurgent)の特設サイト。
サイトのローディングから映画の世界観を表現するサブコンテンツまで、至るところでWebGLが利用されています。Samsung Gear VRと連動したコンテンツもあるみたいです。

映画は見ていないのですが、SFの世界観を伝える際の手法としてWebGLは適してるなと感じました。

Peugeot Catch the Dragon

Home   Peugeot Catch the Dragon

自動車メーカー PEUGEOT(プジョー)の新車特設サイトです。プジョーといえば高級車のイメージがありますね。

最初に動画が流れて、車からドラゴンが飛び出す様子が分かります。
その後、VRか360度動画コンテンツか選択する画面になり、どちらを選んでも車内からドライブする様子が流れるWebGL動画コンテンツに遷移します。ドラゴンを捕まえてゲージを貯めることで、本来のサイトを訪れることができるようになっていてゲーム性があります。

やってみたけど、難易度が高く挫折しました(笑)
プジョーの新車のコンセプトにドラゴン的な表現があるのでしょうか。車内の様子などを効果的に伝える手段としてWeb3Dを有効に使っているイメージです。

参考:自動車メーカー PEUGEOT の最新ウェブサイトは WebGL と VR を組み合わせた驚愕コンテンツ!
http://webgl.souhonzan.org/entry/?v=0292

まとめ

いかがでしたでしょうか。
昨年は個人が作ったデモコンテンツなどでWebGLが利用されるシーンを多く見かけましたが、今年に入り、企業のキャンペーンサイトや、サービスサイト、コーポレートサイトなどにもWebGLを利用しているものが増えてきた印象です。

WebGLが今のCanvasやSVGのように一般的なフロントエンド技術として利用されるようになるのももうすぐかもしれません。
今後はVRとうまく組み合わせたコンテンツが普及していき、リアルイベントなどのWeb以外の場面でもWebGLが使われる場面が広がりそうです。

LIGでもWebGLを使ったお仕事の依頼をお待ちしています! お問い合わせ@n0bisukeまで気軽にご連絡ください〜。

最後になりますが、実は最初にピックアップした360°TRIP IN SUNSETS BEACHクリスマス企画のときと同様に、シフトブレインさんとLIGで制作を担当しました。
7月31日までキャンペーンをしているので、ぜひアクセスして見てください。

それでは!

参考サイト

【S5-Style】Webデザインのリンク集・ポータルサイト
http://bm.s5-style.com/category/technic/webgl

この記事を書いた人

のびすけ
のびすけ バックエンドエンジニア 2014年入社
岩手から上京してきました。

ギークハウスを経て、現在は0円シェアハウスに住んでいます。

好きなスポーツはフットサル/雪合戦/わんこそばです。

2015年は東京Node学園で登壇してみたいです。

・milkcocoa公認エバンジェリストになりました。(https://mlkcca.com/)
・gihyo.jpで記事書いてます (http://gihyo.jp/dev/feature/01/milkcocoa-baas)
・html5experts.jpで記事書いてます。(https://html5experts.jp/n0bisuke/)