デザイナーバッグのコンフィギュレーターは、社内業務と販売プロセスの両方に活用できる多機能なデジタルツールです。デザイナー、製造チーム、営業チームが、必要な素材や留め具に合わせてバッグをカスタマイズし、視覚化できます。社内向けには、デザインや製造プロセスをシンプルにし、チーム内でのコラボレーション、プロトタイプの作成、迅速な意思決定を促進します。また社外向けには、強力なセールスツールとして機能し、購入者が購入前に理想のバッグをカスタマイズして視覚的に確認できます。スムーズでインタラクティブな体験を提供することで、業務の効率化、製造期間の短縮、そして顧客エンゲージメントや満足度の向上を実現します。
このデザイナーバッグコンフィギュレーターの目的は、商品のディスプレイを引き立てるような視覚的表現で、商品のバリエーションや詳細な情報を紹介することです。そのため、フローティングUIのクリエイティブなグラフィック表現とその機能性に重点を置いています。
フローティングUIに必要な機能：
デザイナーバッグは3D Studio MaxでモデリングしてVectary Studioにインポートし、そこでパーツ分割、テクスチャ作成、ベイク処理を行いました。静物の背景は、Studioで一からモデリングしました。
影の投影があるため、このプロジェクトではライティングが極めて重要です。1つのメインの レクタングルライト がデザイナーバッグを照らし、もう1つの ディレクショナルライト が、特定の角度から背景に植物の影を落とします。このセットアップは動的です。
静物の背景環境を構成する要素にはパステルカラーのパレットが採用されており、主役となるオブジェクトを引き立てています。すべてのオブジェクトは、 リアルさを向上させるためにベイク処理されています。デザイナーバッグには4つの異なるカラーバリエーションが用意されており、それぞれ同じマテリアルの色を変更して複製したものであるため、ファイルサイズを小さく抑えることができます。Studioのマテリアルライブラリの各カテゴリには、さまざまなレザーテクスチャが用意されています。
ヒント：背景のサイズを小さく抑え、フェード効果と組み合わせて使用することで、ベイク処理するテクスチャの解像度を下げることができます。
小さなフローティングUIが、他の3つのフローティングUIの表示を切り替えるトリガーになります。これらは共通の設定になっており、配置を右、高さを『fill（全体）』に設定することで、ECサイトに似たレイアウトを実現しています。説明用のFUIは、別々のコンテナに整列されたテキスト要素のみで構成されています。マテリアルスイッチャーのトリガーとして機能する画像付きのFUIは、2x2のグリッドでコンテナに分割されています。AR機能付きのFUIには、ARを起動するためのテキスト付きQRコードが含まれています。
デフォルトでは、メニュー、ウォーターマーク（透かし）、ロゴが含まれるFUIのみが表示され、それ以外は非表示になっています。メニュー内の各ボタンをクリックすることで、選択したFUIの表示・非表示を切り替えることができます。
使用されている機能は以下の通りです：
