Google ハードウェアを使用したインタラクティブな 3D ウェブ アプリケーション: 次世代のプロダクト学習体験

Melissa Mitchell
Melissa Mitchell
Aron Halil
Aron Halil
Bernice Yung
Bernice Yung
Emmett Lalish
Emmett Lalish

Google のデバイスおよびサービス マーケティング(DSM)組織は、スマートフォン、スマートウォッチ、イヤホン、タブレット、スマートホーム デバイス、関連する定期購入など、幅広い製品の市場投入戦略を監督しています。これらの製品はすべて、Google ストアとグローバルなサードパーティ ベンダーの両方で購入できます。ユーザーはオンラインと実店舗でこれらの商品について知ります。

このチームが常に直面している課題の一つは、Google のハードウェア エコシステムと高度な AI エクスペリエンスのユースケースとメリットを消費者と販売者に説明することです。消費者が製品と機能をよりよく理解できるように、DSM チームは、高度なウェブ技術を活用して 3D 仮想空間を作成しました。これにより、こうした課題の多くに対処しています。このケーススタディでは、チームが顧客により没入感のあるエクスペリエンスを作成し、従来のデジタル アセットの 4 倍の速さで、半分の費用でこれらの新しいエクスペリエンスをリリースした方法について説明します。

課題: プロダクトの説明

相互運用性や AI などの機能のメリットを、Google ハードウェア プロダクトを初めて利用する販売員やお客様に説明するのは、費用と労力がかかり、難しい作業です。従来のプロダクト教育戦略では、実機を使用して制作されたデジタル コンテンツをデジタル学習プラットフォームでホストしています。これらの学習プラットフォームでは、製品の技術仕様、画像、動画を提供していますが、物理的な製品や接続された製品にはアクセスできません。

動画などの学習コンテンツは、制作費が高く、グローバル市場向けにローカライズするのが複雑で、プロダクト間で再利用することはほぼ不可能です。最初のアセットを作成する場合は、キャスティング、衣装、ロケーション スカウト、ロケーション料金、スタジオ料金、撮影クルー、ポストプロダクション作業の予算が必要です。制作費と成果物にもローカライズを考慮する必要があります。アセット、ロケーション、商品、コピー、出演者を変更することは、従来のマーケティングでは大規模に管理するのが特に困難です。サポートされているほとんどのプロダクトで数か月ごとに機能がリリースされることを考えると、これらのアセットは完成する頃にはすでに古くなっています。

商品情報をより効果的に共有する方法の検討

商品情報を共有するより良い方法を見つけようと、DSM チームはアプリでの VR/AR エクスペリエンスをテストしました。その結果、販売時点のエンゲージメントの強化とカートのサイズの増加という有望な結果が得られました。ただし、アプリのダウンロードは、営業担当者とお客様の両方にとって大きな障壁でした。また、エクスペリエンスをアプリに限定すると、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 チームはウェブ用に最適化されたローポリ レンダリングをエクスポートできました。これを実現するために使用したベスト プラクティスの一部は次のとおりです。

  • ジオメトリ:
    • あらゆる角度からジオメトリ(形状とスケール)を正確にすることに重点を置きます。
    • エッジのベベルに法線マップを使用しないでください。
    • デカールを個別のジオメトリとして作成します。
  • 色と素材:
    • 目標: 物理的なプロパティの一貫した視覚的表現。
    • リアルタイムの照明のダイナミクスを考慮する。
    • メッシュタイプ(不透明、透明、デカール)ごとに個別のテクスチャセットとマテリアルを使用します。
    • さらなる調整が必要な場合は、元の 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 トーンマッピング(映画業界の標準)が色の消失の原因であることが判明しました。この問題を解決するために、Google は、これらの欠陥に対処し、線形トーン マッピングに関連するハイライトの白飛びや色相の変化を回避しながら、色を正確に画面に表示するために、新しい 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 モデルをテストし、スターター ウェブサイト全体をダウンロードするには、エディタをお試しください。

three.js を使用した大規模なソリューション

<model-viewer> は、1 つの 3D モデルを表示して操作するのに最適な方法です。ただし、DSM チームは、<model-viewer> では実現できない、より没入感のある相互接続されたウェブ エクスペリエンスを必要とすることがありました。たとえば、Google Nest Mini + C のリリースがこれに該当します。<model-viewer> では、見込み顧客にウェブ上で商品を 3D で体験してもらうことはできましたが、他の Google ハードウェア プロダクトやアシスタントなどの AI 機能と組み合わせてその有用性をアピールすることはできませんでした。

このタスクでは、<model-viewer> の基盤となるライブラリである three.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 倍の速さで、かつ費用を半分以下に抑えて、新しいプロダクトの教育コンテンツをリリースできるようになりました。