レディースバッグ専門ECサイトの3Dカスタマイズ受注システム

背景・課題

既製品の販売に加えてオーダーメイドバッグの需要が高まっていましたが、写真と説明文だけでは組み合わせ後の完成形をイメージしづらく、購入前の不安がお客様の離脱につながっていました。本体・持ち手・金具など選べるパーツの組み合わせが多岐にわたる中、直感的に選択できて完成イメージも正確に掴める仕組みが求められていました。

解決策・実装内容

• Three.js（WebGL）による3Dビューアーを実装し、本体・持ち手・金具などパーツごとの3Dモデルをその場で合成して表示
• パーツを選ぶたびに色・光沢（メタリック感）・テクスチャをリアルタイムで反映し、マウス操作で自由に回転・拡大して仕上がりを確認可能
• パーツごとの在庫を判定し、在庫切れとなる組み合わせは選択・注文できないよう自動制御
• 選択内容に応じて税込価格を自動計算し、購入ボタンの活性化までリアルタイムに反映
• 管理画面から3Dモデルの形状・カラー・素材や商品ごとのパーツ組み合わせルールを追加・編集できる仕組みを構築し、新シリーズや期間限定モデルの投入を柔軟に
• カート・注文管理、クレジットカード決済（PAY.JP）・Amazon Pay、会員向けポイント・クーポン管理を備えたECプラットフォーム一式を構築

導入効果

写真だけでは伝わりにくかったカスタマイズ商品の完成イメージを、購入前にその場で立体的に確認できるようになりました。管理画面から3Dパーツやカラー・素材の組み合わせルールを追加・編集できるため、新シリーズや期間限定パーツの投入も開発者を介さずスピーディに行えています。