WebGLは、どんなWebサイトに向いているのか

WebGLを使ったWebサイトを作りたい。
商品を3Dで見せたい。Webサイトに動きのある表現を取り入れたい。そんなときに候補になるのがWebGLです。

WebGLは、Webブラウザ上で3Dグラフィックスやインタラクティブな表現を実現するための技術です。

とはいえ、WebGLを使えば必ずWebサイトが良くなるわけではありません。大切なのは、WebGLそのものを見せることではなく、通常の写真や文章だけでは伝えにくいものを、Web上でどのように見せるか、どのように体験してもらうかです。

AgWORKSでは、これまで商品を3Dで見せるWebシミュレータから、イラストマップ、バーチャルミュージアムまで、さまざまなWebGL・Web3Dコンテンツを制作してきました。

ここでは、実際の制作事例をもとに、WebGLがどのようなWebサイトに向いているのかをご紹介します。

商品を3Dで見せたいWebサイト

商品の形や構造を、写真だけで伝えるのが難しいことがあります。

家具、住宅設備、建築物、アパレルなど、正面から撮影した写真だけでは商品の全体像を理解しにくい場合、Webサイト上で商品そのものを動かして見せる方法があります。

3DモデルをWebブラウザ上に表示すれば、ユーザーが商品を回転させたり、拡大したりしながら、さまざまな角度から確認できます。

さらに、色やパーツを変更できるようにすれば、「見る」だけではなく「選ぶ」ためのWebサイトにもできます。

Xis-Frame

Xis-Frameでは、商品の構成をWeb上で確認できる3Dシミュレータを制作しました。

複数の要素から構成される商品を、平面的な画像だけで説明するのではなく、3D空間上で確認できるようにしています。

商品の形状や組み合わせを直感的に理解してもらいたい場合、3Dシミュレータは有効な方法です。

[3Dシミュレータ開発事例：Xis-Frame]
https://www.ag-works.com/works/web-design/xis-frame/

三協フロンテア「簡単シミュレータ」

商品の仕様を選択しながら、完成イメージを確認できるWebシミュレータです。

Web上で商品を選び、組み合わせ、結果を確認することで、カタログや商品写真だけでは伝わりにくい内容をユーザー自身に体験してもらえます。

「商品を詳しく説明する」だけでなく、「商品を選んでもらう」ことまで考えたWebコンテンツです。

[3Dシミュレータ開発事例：三協フロンテア「簡単シミュレータ」]
https://www.ag-works.com/works/web-design/sankyo-frontier-kantan/

BAINCOUTURE 3Dシミュレータ

BAINCOUTUREの3Dシミュレータでは、商品をWeb上で確認しながら、仕様を選択していく体験を実現しています。

商品を組み合わせることで完成形が変わる場合や、オーダーメイド性の高い商品では、3Dシミュレータによって購入前のイメージを具体的にすることができます。

[BAINCOUTURE 3Dシミュレータ]
https://www.ag-works.com/works/web-design/baincouture_3dsimulator/

イラストやマップをインタラクティブにしたいWebサイト

WebGLの用途は、商品を3Dで表示することだけではありません。

一枚のイラストやマップを、ユーザーが操作できるWebコンテンツにすることもできます。

紙や画像として完成しているイラストマップを、そのまま掲載するだけでは、情報量が増えるほど目的の情報を探しにくくなります。

Web上で動かせるようにすれば、マップから場所を選んだり、カテゴリーから情報を探したり、シーンを切り替えたりすることができます。

「見るためのイラスト」から「情報を探すためのWebコンテンツ」へ。

WebGLは、そんな変化にも利用できます。

「暮らしと正興電機」

「暮らしと正興電機」は、3Dイラストマップを使って企業と暮らしの関わりを表現したWebコンテンツです。

街や建物などを立体的に表現することで、文章や写真だけでは伝わりにくい情報を、一つの空間として見せることができます。

3Dイラストマップは、企業紹介、地域紹介、施設案内、製品紹介など、さまざまなテーマに応用できます。

[暮らしと正興電機]
https://www.ag-works.com/works/web-design/seiko-denki_3dmap/

DIC インタラクティブマップ

化学メーカーの製品を、イラストマップから探せるWebコンテンツとして制作した事例です。

製品を単純な一覧表として並べるのではなく、関連する場所や用途と結びつけて見せることで、複雑な情報を視覚的に整理しています。

企業が持っている多くの製品やサービスを、ユーザーが楽しみながら探せるコンテンツにしたい。

そんな場合にも、インタラクティブマップという方法があります。

[インタラクティブマップ制作事例｜化学メーカーの製品をわかりやすく伝えるWebコンテンツ]
https://www.ag-works.com/works/web-design/dic_02/

空間そのものをWebサイトで見せたい

商品ではなく、「場所」や「空間」を見せたい場合にもWebGLは活用できます。

展示会場、ショールーム、ミュージアム、施設など、写真を何枚か並べるだけでは空間の広がりを伝えにくいものがあります。

そんなとき、Web上に空間を構築し、ユーザー自身がその中を見て回れるコンテンツにする方法があります。

花王 こども環境絵画ミュージアム

「花王 こども環境絵画ミュージアム」は、Web上で展示空間を体験できるバーチャルミュージアムです。

実際の展示を見るように空間を移動しながら、展示されている作品を楽しめるWebコンテンツとして制作しました。

実際の場所に行かなければ見られない展示をWeb上に展開することで、時間や場所の制約を超えてコンテンツを届けることができます。

展示会やイベントのオンライン展開、企業ショールーム、文化施設など、空間そのものをコンテンツとして見せたい場合に適した方法です。

[花王 こども環境絵画ミュージアム]
https://www.ag-works.com/works/3dcg/vmuseum/

Webサイトそのものに3Dやインタラクティブな表現を取り入れる

ここまで紹介したような大規模なコンテンツだけがWebGLではありません。

企業サイトや商品サイトの一部分に3Dを組み込んだり、LPのファーストビューにインタラクティブな表現を加えたりすることもできます。

スクロールに合わせて3Dオブジェクトを動かす。
マウス操作に反応して商品を動かす。
Webサイトを訪れた人が触れることで情報が変化する。

こうした表現によって、写真と文章を読むだけのWebサイトとは違った体験を作ることができます。

AgWORKSでは、他にも製造業の製品紹介サイトやプロモーションサイトなどでも、WebGLを使った開発を行っています。

WebGLを使ったWebサイトというと、大掛かりな3Dシステムを想像するかもしれません。

しかし、既存のWebサイトの一部分に3Dコンテンツを追加する、小さなインタラクションを実装する、といった開発もWebGLの活用方法の一つです。

WebGLで作れるのは「3D」だけではありません

WebGLという言葉から、3Dモデルを回転させるようなコンテンツを思い浮かべる人は多いでしょう。

もちろん、それはWebGLの代表的な使い方です。

ただ、WebGLの面白さは、Webブラウザの中でユーザーが「見る」だけでなく、「動かす」「探す」「選ぶ」「体験する」といった操作を組み込めるところにあります。

商品を回転させて見る。
マップを動かして情報を探す。
商品を選択して完成イメージを確認する。
バーチャルな空間を歩いて展示を見る。

Webサイトの中に3Dやインタラクティブな表現を組み込むことで、情報を一方的に見せるだけではないWebコンテンツを作ることができます。

WebGLを使うべきかどうかから相談できます

WebGLを使えば、必ず魅力的なWebサイトになるわけではありません。

大切なのは、「WebGLを使うこと」ではなく、WebGLを使うことでユーザーに何を伝えられるようになるのか、どんな体験を作れるのかを考えることです。

商品写真だけでは形が伝わりにくい。
製品の組み合わせをWeb上で見せたい。
イラストマップから情報を探してもらいたい。
展示空間をオンラインで体験してもらいたい。
Webサイトに、通常のページとは違うインタラクティブな表現を加えたい。

そんな課題があれば、WebGLが解決方法の一つになるかもしれません。

AgWORKSでは、WebGL・Three.jsを使ったWebサイトやWeb3Dコンテンツを開発しています。

大規模な3Dシミュレータだけでなく、Webサイトへの3D表示やインタラクティブなコンテンツなど、比較的小さなWebGL開発からご相談いただけます。

「こんなことはWebGLでできる？」

そんな段階からでも構いません。

Webサイトの目的や商品の特性を伺い、WebGLを使うべきかどうかも含めて、実現方法をご提案します。

WebGLを使ったWebサイト・Web3D開発のご相談

商品を3Dで見せるWebサイトから、インタラクティブマップ、バーチャルミュージアム、3Dシミュレータまで。

AgWORKSは、WebGL・Three.jsを利用したWebコンテンツの企画・設計・開発に対応しています。

「商品を3Dで見せたい」
「Webサイトに3Dを組み込みたい」
「WebGLを使ったLPを作りたい」
「既存サイトにインタラクティブな表現を追加したい」
「3Dシミュレータを開発したい」

など、実現したい内容が決まっている場合はもちろん、「WebGLを使うと何ができるのか」という段階からのご相談も可能です。

そのアイデアや課題について、一緒に実現方法を考え、解決し、形にしていきましょう。

• お問い合わせはこちらから