← 記事一覧

WebGLとは? 商品やブランドを「触って分かる」Webへ

ブラウザー上の3D表現を、商品の比較やブランドの説明にどう使うか。

Webサイトで商品を回して見る。色を切り替える。画面の操作に合わせて光や形が変わる。こうした表現を支える技術の一つがWebGLです。

WebGLでは、ブラウザーからGPUを使う描画を行えます。海外の開発ドキュメントでも、3DモデルをWebへ載せる方法が紹介されています。neneでは、この技術を「お客様が何を理解しやすくなるか」から考えます。

商品を選ぶための操作にする

たとえば、正面写真だけでは分かりにくい側面や厚みを見る。色違いを同じ角度で比べる。組み立てる順番を示す。商品の理解に関係する操作なら、3D表現を入れる理由を説明できます。

画面が動くだけで、価格、サイズ、素材、配送条件が分からない状態になると、選ぶための情報が足りません。3Dは、文章や写真と一緒に設計します。

最初は一つの商品で試す

すべての商品を3D化する前に、比較したい特徴がはっきりしている一つを選びます。形のデータがあるか、色や素材をどこまで再現するか、誰が更新するかを確認します。

写真から3Dデータを用意する作業と、既にあるモデルをWebで表示する作業では、制作の範囲も変わります。見た目の再現度や費用は、素材を見て決めます。

neneのWebから考える

nenewebには、WebGLによる背景表現が実装されています。自社サイトの表現としてご覧いただけるもので、顧客の販売成果を示す事例ではありません。

商品の比較へ使う場合は、操作しやすさ、スマートフォンでの表示、読み込み、動かない環境での案内を確認します。「触って分かる」が、選ぶ人の理解につながっているかを確かめたいと考えています。

neneでは、現在のWebと紹介したい商品をもとに、通常の写真・文章で伝える範囲と、操作できる表現が役立つ範囲をご相談いただけます。

合同会社nene / FIELD NOTES

Webをつくる。AIで回す。日本とタイをまたいで事業を動かす。会社について ↗