Google のデバイス&サービス マーケティング（DSM）組織は、スマートフォン、スマートウォッチ、イヤホン、タブレット、スマートホーム デバイス、関連サブスクリプションなど、幅広い製品の市場開拓戦略を監督しています。これらの製品はすべて、Google ストアとグローバルなサードパーティ ベンダーから入手できます。人々はオンラインや実店舗でこれらの商品の情報を得ています。
このチームにとって絶え間ない課題の一つは、Google ハードウェア エコシステムと高度な AI エクスペリエンスのユースケースとメリットを消費者と小売業者に説明することです。消費者が製品や機能を理解しやすくするために、DSM チームは高度なウェブ テクノロジーを使用して 3D 仮想空間を作成し、これらの課題の多くに対処しました。このケーススタディでは、チームが従来のデジタル アセットの 4 倍のスピードと半分の費用で、より没入感の高いエクスペリエンスを創出し、どのように顧客に提供したかをご覧ください。
課題: 製品教育
Google のハードウェア プロダクトを初めて使用する販売員やお客様に、相互運用性や AI などの機能のメリットについて教育することは、コストが高く困難です。従来の製品教育戦略では、物理的な製品を使用して作成され、デジタル学習プラットフォームでホストされるデジタル コンテンツに依存しています。これらの学習プラットフォームは、製品の技術仕様、画像、動画を提供しますが、物理製品や接続された製品にはアクセスできません。
動画などの学習コンテンツは制作コストが高く、グローバル市場向けのローカライズが複雑で、プロダクト間で再利用することはほぼ不可能です。初期アセットを作成するには、キャスティング、ワードローブ、ロケーション スカウト、ロケーション フィー、スタジオ料金、撮影スタッフ、ポストプロダクション作業の予算が必要です。制作費用と成果物についても、ローカライズを考慮する必要があります。従来のマーケティングでは、アセット、場所、プロダクト、コピー、人材の変更が特に困難です。また、サポートされているプロダクトのほとんどに数か月ごとに機能が追加されることを考慮すると、これらのアセットは作成が完了する頃にはすでに古くなっています。
商品情報を共有するよりよい方法を検討している
商品情報を共有するためのより良い方法を見つけるために、DSM チームはアプリの VR/AR エクスペリエンスをテストしました。その結果、エンゲージメントの強化と、POS における購入額の増加の両方で、有望な結果が見られました。しかし、アプリのダウンロードは、販売員と顧客の両方にとって導入の大きな障壁となっていました。また、操作が 1 つのアプリに限定されるため、store.google.com などの他のファースト パーティまたはサードパーティのプロパティにそのアプリを埋め込むことができなくなりました。
<model-viewer> を使用した軽量のソリューション
製品教育用の 3D 製品モデルが成功を収めた同社のチームは、このアプローチをウェブでも採用することを決定しました。これを実現する 1 つの方法は、<model-viewer> を使用して個々の商品の 3D エクスペリエンスを作成することです。
<model-viewer> はウェブ コンポーネントです。これを使用すると、独自のサイトでモデルをホストしながら、3D モデルを宣言的にウェブページに追加できます。実際の動作は、Google ストアの Google Pixel Fold のページでご覧になれます。<model-viewer> を使用すると、ユーザーは Google Pixel Fold をさまざまな折りたたんだ位置から任意の角度から見ることができます。3D モデルは、カメラのアングルやインタラクティブなカラー バリエーションを通じてストーリーを伝えるボタンを備えており、他の HTML UX に容易に統合できました。<model-viewer> を使用すると、思い描くあらゆる体験をユーザーに提供できます。
3D モデルの作成
3D 仮想体験を開発するための最初のステップは、3D 商品モデルの作成です。DSM チームは CAD で 3D モデルを作成しました。商品の CAD を作成するデザイナーと緊密に連携することで、DSM チームはウェブ向けに最適化できる低ポリレンダリングをエクスポートできました。これを達成するために使用されたベスト プラクティスは、次の領域です。
- ジオメトリ:
- ジオメトリ（シェイプとスケール）をあらゆる角度から正確に作成することに重点を置きます。
- 法線マップをベベルエッジに使用しないでください。
- ステッカーは別のジオメトリとして作成します。
- 色と素材:
- 目標: 物理的特性を一貫して視覚的に表現する。
- リアルタイムの照明のダイナミクスを考慮します。
- メッシュタイプ（Opaque、Transparent、Decal）ごとに別々のテクスチャ セットとマテリアルを使用します。
- さらに調整が必要な場合は、元の CAD デザイナーとデザインを繰り返します。
- ファイルサイズ:
<model-viewer>でモデルを使用できるように、GLB 形式のローポリモデルとしてエクスポートします。- ジオメトリ メッシュは、3D デザイナーまたはベンダーが手動で圧縮するか、DRACO（OS）などの圧縮ソフトウェアを使用して圧縮します。
これらの 3D モデルはスマートフォンで頻繁に使用されるため、古い世代のデバイスと弱いインターネット接続をサポートするために、テクスチャの最大ファイルサイズを 2 MB に設定して最適化されました。
<model-viewer>
DSM チームは、Google の <model-viewer> オープンソース ウェブ コンポーネントを使用して、新しく作成した 3D モデルをウェブページに埋め込みます。ステップ 1 で作成したモデルに <model-viewer> との互換性を持たせるには、アセットが gITF 形式または GLB 形式（拡張子 .glb）である必要があります。どちらの形式もコンパクトで圧縮可能で、GPU に高速に読み込まれます。<model-viewer> コンポーネントは、すべての主要なエバーグリーン ブラウザでサポートされています。
このステップで DSM チームが遭遇した最大の問題は、Google ハードウェアのカラーパレットが正確にレンダリングされなかったことでした。チームは最終的に、ACES（フィルム業界標準）のトーン マッピングが色の損失の原因であることに気づきました。この問題を解決するために、新しい Khronos PBR ニュートラル トーン マッパーを開発しました。これは、線形トーン マッピングに伴うハイライトや色相のシフトを回避しながら、こうした欠陥に対処し、画面に色を正確に表示するためのものです。
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
<model-viewer> の詳細については、modelviewer.dev をご覧ください。3D モデルをテストして、スターター ウェブサイト全体をダウンロードするには、エディタをお試しください。
3.js を使用した重いソリューション
<model-viewer> を使用すると、1 つの 3D モデルを効率的に表示して操作できます。しかし、DSM チームは、<model-viewer> よりも没入感のある相互接続されたウェブ エクスペリエンスを必要とする場合があります。その一例が、Google Nest Mini + C の発売です。<model-viewer> を使用すると、ウェブで商品を 3D で体験できますが、他の Google ハードウェア プロダクトやアシスタントなどの AI 機能と組み合わせた場合、その有用性をアピールすることはできません。
このタスクのために、チームは <model-viewer> の 3.js を支えるライブラリに注目しました。Three.js はオープンソースの JavaScript ゲームエンジンです。チームは、Google Nest の屋内カメラ、照明、スピーカーを含む仮想ホーム環境向けに、再利用可能なアセットのフレームワークを作成することができました。これにより、デバイス間の相互作用をリアルタイムでフィードバックできる基盤ができました。
Dialogflow
相互接続されたエクスペリエンスを構築するための最後の要素は、Google アシスタントの追加です。これにより、ユーザーは相互接続された仮想体験で本物のコマンドやルーティンを試すことができます。しかし、ユーザーの既存のアカウントから Google アシスタントを挿入すると、プライバシー上のさまざまな問題が生じます。プライバシー最優先のソリューションを作成するために、DSM は Google Cloud Dialogflow サービスと連携して、この空間で Google アシスタントを模倣しました。次の概要図は、ウェブアプリが Dialogflow の API をどのように使用しているかを示しています（Dialogflow の基本をベースとしています）。会話ターンごとに、ウェブアプリは Dialogflow のインテント分類を使用し、API がインテントに一致する事前定義のエンドユーザー表現を返しました。
Dialogflow の詳細については、Google Cloud のドキュメントをご覧ください。
最終結果: 埋め込み可能な iFrame
最終的には、<model-viewer> を使用してウェブページに埋め込むことも、完全な仮想環境で使用することもできるアセットのライブラリを作成できます。これにより、お客様は個々のプロダクトやプロダクトの相互接続の詳細を知ることができます。このエクスペリエンスは信頼性が高く、スケーラブルで、費用対効果に優れています。この最初の仮想体験は 2021 年 5 月にリリースされました。Google ストアのウェブサイトには公開されなくなりましたが、引き続き試してみることができます。
結果
Google Nest Mini +C の発売以来、DSM は過去 2 年間の Google Pixel ポートフォリオ リリースでフレームワークを再利用して拡張し、成功を収めています。これらの 3D アセットとエクスペリエンスのイテレーションを運用化することで、チームはこれまでにインタラクティブな製品教育エクスペリエンスの数を 4 倍にし、このウェブ テクノロジーから恩恵を受けるプロダクトの数を 3 倍にすることに成功しています。
その結果、以前の戦略よりもサステナブルでまとまりのある、インタラクティブなユースケースを大規模に展開しながら、ブランドにふさわしい信頼性の高いプロダクト教育が実現します。DSM チームは将来に向けて、動的なビジネス目標に迅速に適応できる没入型エクスペリエンスのコンポーネントの堅牢なポートフォリオを手にしました。こうした改善により、DSM チームは以前の従来のプロセスに比べて 4 倍の速さと半分の費用で新しい製品教育コンテンツをリリースできるようになりました。