スタンディングデスク・コンフィギュレーターは、プロトタイプの開発フェーズ（FigjamやMiroへの埋め込み）や、デジタルマーケティングコンテンツ（ウェブサイトへの埋め込み）として活用できます。APIを介してシステムと連携させれば、価格見積もり計算機としても機能し、購入カートへの追加プロセスとシームレスに統合可能です。
このコンフィギュレーターは、製品機能を解説するための3つのインタラクティブコンポーネントを備えた、スタンディングデスクのデジタルツインを再現しています。これらのインタラクションにより、以下の操作を可能にします。
最終的なバリエーションは、ARでプレビューして実際の空間に配置した様子を確認することもできます。
デスクのモデリングには、CADソフトウェアのPlasticityでNURBSを使用しました。その後、.stepファイルとしてエクスポートし、Vectary Studioにインポートしています。取り込んだCADジオメトリは、ポリゴン数を削減するように調整した上で、メッシュジオメトリへベイクしました。天板（テーブルトップ）はSubstance PainterでUV展開を行い、テクスチャ作成まで同ツール内で完結させています。
このシーンのすべてのインタラクションは、以下の 3つのホットスポットによって制御および実行されます。.
1. マテリアルスイッチャー
ホットスポットをクリックすることで、Floating UIの表示を切り替えます。このインタラクションによってFUIが開き、該当するマテリアルの名前とカラー見本（カラースウォッチ）が表示されます。今回はFUIを3枚の画像だけで構成したため、テキストはFUI上で直接作成するのではなく、あらかじめ1枚の画像としてインポートしました。これは、Floating UI単体でのレイアウト調整を省略し、作成プロセスをスピードアップさせたい場合にとても役立つテクニックです。これらの画像のいずれかをクリックすると、別のインタラクションである『Materials』がトリガーされます。ここでは、対象となるオブジェクトをいくつでも選択でき、どのアクティブマテリアルを適用するかを指定できます。このコンフィギュレーターには2つの異なるサイズの天板があるため、両方の天板に対してマテリアルを変更する必要があります。
2. 移動
天板の移動は、Z軸に沿った上下の『Transformation（変形）』をトリガーするホットスポットによって制御されています。
プロのヒント：位置変更（Transformation）の影響を受けさせたいすべてのオブジェクトを、1つのグループにまとめます。特定のオブジェクトの動きにホットスポットを追従させたい場合は、ホットスポットもそのグループ内に含めるようにしてください。
3. サイズ
最後のホットスポットは天板のサイズを制御するもので、大・小のサイズ切り替えと同時に、ホットスポット自体の切り替えも行います。これは、両方のホットスポットがバリアントに含まれており、そのままでは無限ループが発生してしまうためです。大きい方のホットスポットをクリックすると、大きい天板と小さいホットスポットへの切り替えがトリガーされます。小さいホットスポットをクリックした場合は、その逆の挙動になります。
プロのヒント：サイズ変更時に影が不自然にならないよう、それぞれの天板サイズに対して個別にライトマップをベイクしています。
ライティング設定には、3つのライト （2つのレクタングルライトと1つのディレクショナルライト） に加え、HDRi環境を使用しています。天板の表面に美しい反射を作り出すために上面を照らしつつ、他の角度から見たときに輪郭（エッジ）のコントラストが際立つようにすることが狙いです。ディレクショナルライトはシーン全体に均一に光を拡散させ、ピボットポイントを使って光の向きを自在にコントロールできます。レクタングルライトは、テーブル上のピンポイントなエリアを照らすために使用しました。
プロのヒント：ベイク処理が完了した後に各ライトの影の生成（Shadow Cast）をオフにすると、描画パフォーマンスが向上します。
マテリアルに関しては、無限背景と柔らかい影を背景に、主役となるウッド素材を引き立たせるニュートラルなスタジオ風シーンを目指しました。脚部には白を基調としたシンプルな非金属マテリアルを採用し、天板にはUV展開された1枚のテクスチャを適用しています。追加のマテリアルバリエーションは、 このベースマテリアルを複製して、色相（Hue）、コントラスト、明るさの設定を調整することで作成しました。この手法を使うことで、ファイルを共有する際のファイルサイズとロード時間を大幅に削減できます。
シーンの外観とライティングが仕上がったら、 ベイク処理を開始しましょう。ベイクを行うことで、微細な影やアンビエントオクルージョンが追加され、シーンのリアリティが格段に高まります。
プロのヒント：高解像度でベイクしてからダウンスケールするのがおすすめです。たとえば、2K解像度でベイクした後に、最終解像度を1Kに設定します。デノイズ（Denoising）の有効化も忘れないようにしてください。また、ベイクを実行する前にライトマッププレビューモードでシーンを確認し、脚などの可動パーツによって意図しない不自然な影が生まれていないか注意深くチェックしましょう。
最終的なバリエーションは、実際の設置場所に配置して確認するために、AR（拡張現実）でプレビューすることもできます。モデルは1:1スケールでARに表示されるため、正しい寸法で作業することが重要です。AR設定では、ファイルのプレビュー中にスケーリングの有効・無効を切り替えることができます。現在、ARでシーンに動きをつける唯一の方法は、アニメーションを使用することです。アニメーションモードの最初のアニメーションがループ再生され、ARで表示されます。この例では、デスクが上下に移動する動きをループさせています。
このプレミアム家具メーカーは、Vectaryプラットフォームを使用して、ウェブサイト用の没入型コンフィギュレーターを構築しました。しかも、すべてを制作したのは、Vectaryの使用経験が一切なかったプロダクトデザイナーの、たった1人です。
