2022年6月15日

独自の3Dコンフィギュレーターを作成しましょう

外注不要で作成できる、インタラクティブな製品ショーケース。

コンフィギュレーターとは、インタラクティブな操作ポイントを備えたシーンやオブジェクトのことで、ユーザーが自由に動かしながら、追加情報やオプション、製品バリエーションを確認することができます。

プロダクトコンフィギュレーターによる体験は、購入に向けた意思決定の決め手になり得ます。また、ビジネスに変革をもたらす製品デザインを魅力的に紹介するための理想的なツールでもあります。豊富な情報を盛り込みながらも、常にユーザー目線のわかりやすさを追求しています。

Vectaryなら、これらをすばやく作成し、そのままウェブサイトに直接埋め込むことができます。

3Dコンフィギュレーターではどのようなものをデザインできますか？

3Dコンフィギュレーターは、Floating UIとコンテンツ要素、Hotspots、Object Switcherという3つのツールを使用して作成できます。これらは、インタラクティブでカスタマイズ可能なコンポーネントです。

フローティングUI

フローティングUI はコンフィギュレーターのコンテンツを格納するコンテナです。表示設定は、表示するコンテンツに応じてカスタマイズできます。 UIコンテンツ要素 は、フローティングUI内でさまざまなデータ（マテリアル、カラー、オブジェクトリスト、画像、テキスト、ボタンなど）を表示するブロックです。ユーザーのインタラクションに対応するために、それぞれの要素に合わせたデザインが必要になります。

ホットスポット

ホットスポットは、 フローティングUIを表示させるためのトリガーです。ホットスポット自体も、位置、デザイン、アニメーションなどをカスタマイズできます。

オブジェクトスイッチャー

オブジェクトスイッチャー は、ライトやホットスポットを含むオブジェクト全体またはオブジェクトグループを表示、非表示、または切り替えることができるツールです。

コンフィギュレーターを使用するメリットとは？

コンフィギュレーターを使用することで、3DデザインとWebを融合させた可能性を最大限に引き出し、顧客エンゲージメントを高めたり、ビジネスニーズを満たしたりすることができます。3Dビューワーで実際に製品を操作してもらうことは、記憶に残るユーザー体験を生み出す最良の方法です。

コンフィギュレーターは、製品デザインの全プロセスに組み込むこともできます。ブレインストーミングからユーザーリサーチ、プロトタイピング、仕様書の作成、さらにはサンプルテストまで対応可能です。

コンフィギュレーターを活用すれば、シンプルな3DのWeb埋め込みを、より魅力的でインタラクティブなものに引き上げることができます。例えば、ホットスポットは完全にカスタマイズ可能です。Lottieファイルや、アニメーションマテリアルとしてのGIFを使用することで、動きのあるカスタムアイコンに変えることができます。

コンフィギュレーターはどのような場所で活用できますか？

Eコマース

Eコマース は、プロダクトコンフィギュレーターを活用する最初にして最も代表的な場所です。製品と直接インタラクションできるため、顧客エンゲージメントが高まります。ユーザーはカラーやマテリアル、さらにはパーツまで変更して、好みのオプションを選択できます。それぞれのインタラクションは、外観のデザイン変更だけでなく、機能性を伝えるように調整することも可能です。多くの人がオンラインで購入決定を行う現代において、プロダクトコンフィギュレーターの導入はこの意思決定プロセスを加速させます。

プロダクト紹介

プロダクト紹介 も、コンフィギュレーターによってさらに魅力を高めることができます。ページ内の貴重なスペースを占有することなく、多様な情報を表示可能です。長さに関わらずテキスト説明を追加したり、関連ページへのリンクを設置したりできます。また、連結パーツを着脱させることで、製品のモジュール性（拡張性）を視覚的に示すことも可能です。この紹介方法は製品単体にとどまりません。建築、ランドスケープ、ファッション、そして多くのB2B業界で用いられるような、空間や環境全体のシーンを再現することもできます。

プロトタイプ

プロダクトコンフィギュレーターは、 プロトタイプの代替として活用することもできます。これは、実際に製造する手間をかけずに、アイデアを3Dで検証できる優れた手法です。Kickstarterなどのサイトで資金調達のためにデザインを披露したいと考えている方にとって、最適なソリューションとなります。このコンフィギュレーターは、実際のプロトタイプがなくてもビジュアルと情報を提供でき、あらゆるWebサイトに簡単に埋め込めるフォーマットです。さらに、カスタマイズ可能なプロダクトの紹介をPitchプレゼンテーションやMiro、Notionに埋め込むことも可能です。

教育ツール

コンフィギュレーターを 教育ツール として活用するケースも増えています。デジタル教室モデルは学校だけでなく、企業や組織の社内研修にも適しています。最大の特徴は、ユーザーがシーンを探索し、その3D環境内で情報を発見できる点にあります。情報量が多くても、これまで必要だった複数ページ分のテキストを簡単に代替できます。

3Dプロダクトコンフィギュレーターの事例

これらの3Dコンフィギュレーターの事例をご覧ください。一部はVectarysのサンプルプロジェクトとして作成されており、ご自身のVectaryワークスペースにクローンして、Vectary Studioで開き、どのように作られているかを学ぶことができます。

ヘアドライヤーのコンフィギュレーターモジュール式のインタラクションとアノテーションを搭載。

バックルのコンフィギュレーターホットスポットによるインタラクションとマテリアルスイッチャーを搭載。

ベビーカーの3Dコンフィギュレーターマテリアルスイッチャー、フローティングUI、インタラクション、アニメーションを搭載。

ドローンの3Dコンフィギュレーターマテリアルスイッチャー、フローティングUI、クリック時の3Dアニメーションを搭載。

ヘッドホンの3DコンフィギュレーターフローティングUIを紹介するデモ。シーン全体がオブジェクトスイッチャーとして構成されています。

ヘッドホン3Dコンフィギュレーターのデモ Vectaryのチュートリアルで紹介されているデモ。マテリアルスイッチャーやアノテーションを備えた、カスタムアニメーション付きホットスポットを確認できます。さらに、フローティングUI内のオブジェクトスイッチャーを使用して、アクセサリーを表示・非表示にする機能も備わっています。

空気清浄機のコンフィギュレーターオブジェクトスイッチャー、マテリアルスイッチャー、アノテーションを備えたフローティングUIを起動する、カスタムアニメーション付きホットスポットを紹介しています。