こんにちは！
WebデザイナーのNK細胞です！
本日は、個人的に魅力的だと感じたWebGLを活用したWebサイトを5つ紹介します！
WebGLとはなんぞや？と感じる方も多いかもしれませんが、この記事で少しでも興味が湧いてくれたら幸いです。
WebGLとは
WebGL（Web Graphics Library）とは、Webサイト上で3Dグラフィックスを高速に描画するJavascriptAPIです。HTMLのcanvas要素上でGPUアクセラレータを使用した物理シュミレーション、画像処理、画像効果などを表現できます。
昔に流行ったFlash Playerなどはブラウザにプラグインの実装が必要でしたが、WebGLはJavaScriptで動作するため、スマホが普及した現代に最適というわけですね～
WebGLを活用した魅力的なサイト5選
1. Junni is…
Webデザイン世界3大アワードを受賞。株式会社ジュニの”思い”を表現した特設サイトです。企業理念にもある「アソビゴコロ」を感じさせ、細かな表現とWebサイトのとしての見易さが両立されているように感じます。
2.SHIFT BRAIN 20周年特設サイト
デジタルクリエイティブエージェンシーである株式会社SHIFTBRAINの20周年特設サイト。ファーストビューにあるショールームや、BGM、スクロールアニメーションの没入感がとても心地よいWebサイトです。20周年記念にロゴ、グッズ、自作フォントなど力の入れようが尋常じゃないです（笑）。フォントの表現とノベルティグッズ（トートバッグ）のデジタルコンテンツと現実世界がリンクする表現には度肝を抜かれました。
3.インディゴ白書
45Rの2023年に発売決定した新色『影色納戸（かげいろなんど）』のプロモーションサイト。こちらのWebサイトは先ほど紹介したSHIFTBRAINが制作したものになります。絵巻物という”伝統的な表現”とダイナミックなアニメーションという”先進的な表現”の調和がとれた魅力的なデザインです。
4.SIRUP 5th Anniversary Special Site
SIRUPデビュー5周年を記念した特設サイト。ハイセンスなポスターのようなファーストビューに思わず目を奪われます。厚みのあるCDケースの表現や背景のノイズがかかったグラデーションなどの物質感がアーティストの楽曲のシティポップ感、ニューレトロ感をうまく表現しています。（筆者の好みのデザインです笑）
5.「すべてのお母さんに、ありがとう」ポーラ母の日特設サイト
2022年の母の日に公開した、POLAのメッセージ広告です。「今を生きる、すべてのお母さんへの感謝」テーマに作成されており、彩度を落とした色遣いと花畑のアニメーションで上品かつ高級感のあるデザインです。メッセージの出現時のアニメーションはポーラのコーポレートカラーとその補色にあたる色で表現し、全体的に過度なアニメーションはなく自然とメッセージに目が惹かれる表現で構成されています。
【番外編】WebGLで実装！ブラウザゲーム
Unity WebGLやplaycanvasなどゲームエンジンを駆使し、WebGLで書き出したハイクオリティなブラウザゲームを紹介します。
1.ROBOSTORM
PlayCanvas を使った本格的な WebGL 製のオンラインゲームです。シューティングアクションゲームで、WASDで移動したり、装備を変えたりといった操作が可能になっています。
まとめ
今回は、魅力的だと感じたWebGLを活用したWebサイトを紹介しました！WebGLいいですね～。ですが重要なのはWebGLという技術ではなく、その技術をどう活かすかです。今回紹介したWebサイトはどれも”効果的に”WebGLという技術を導入しているからこそ魅力的に感じるんです。
Webデザインは、紙面や映像のデザインより、よりユーザーとのインタラクティブ性が求められると思います。ユーザーにどうアクションさせるか、アクションしたときに何が起こるか、など。そういった部分にWebデザインの面白さが詰まっているように感じますね。
新しい技術や、魅力的なサイトを日々研究し、Webデザインライフを楽しみましょ～
参考サイト
