VOXEL Studio が約8ヶ月間にわたり制作を担当した、〇〇 Footwear Inc. の3Dスニーカーカスタマイザーが、4月20日（土）にローンチいたしました。Spline + React Three Fiber で構築した、業界初の本格3Dカスタマイズ体験です。
「あなたの一足を、あなたの手で」をコンセプトに、ユーザーがブラウザ上でリアルタイムに、スニーカーのカラーリング・素材・パーツを自由に組み合わせられるカスタマイザー。完成したデザインはそのままECで購入可能、AR Quick Lookで実空間に配置して確認することもできます。
プロジェクトの背景
クライアントの〇〇 Footwear Inc. は、累計3,000万足以上のスニーカーを世界で販売してきたブランド。2026年の新ブランドプラットフォームとして、「ブランドの世界観をユーザーが体験的に共有できる場」を目指し、当社にカスタマイザー制作をご依頼いただきました。
技術スタック
// 3D / Rendering
- 3Dモデリング：Blender（GLTFエクスポート）
- シーン管理：Spline（モバイル軽量版）+ React Three Fiber（高品質版）
- マテリアル：物理ベースレンダリング（PBR）
- テクスチャ：1024x1024 Roughness/Normal/Albedo
// Front-end
- Next.js 15（App Router）
- Drei（R3Fヘルパー）
- Zustand（状態管理）
- Framer Motion（UI遷移）
- Tailwind CSS（スタイリング）
// AR / Mobile
- USDZ自動生成（バックエンドジョブ）
- AR Quick Look（iOS）
- Scene Viewer（Android）
ブランドの世界観を、平面で語るのではなく、ユーザー自身が「触って・回して・配色して」体験する。これが現代のEC体験の新しい標準になっていくと信じています。
— Founder & CD 〇〇 〇〇
パフォーマンス目標と達成
- LCP（Largest Contentful Paint）：1.8秒以内 → 達成（1.4秒）
- 3Dモデルロード：3秒以内 → 達成（2.1秒）
- Lighthouse Score：90以上 → 達成（93）
- モバイル60fps維持：iPhone 12以上で達成
- 低スペック端末対応：Spline軽量版で30fps保証
リリース後の成果（最初の72時間）
- 累計訪問者：約42万人
- カスタマイズ完了率：38%（業界平均15%）
- EC直接購入率：12%（前年同期比+185%）
- AR利用率：26%（iOSユーザー）
- SNSシェア数：1.2万件
VOXELの担当範囲
初期コンセプト設計から、3Dモデル作成、UIインタラクション、ECシステム連携、本番デプロイ、運用保守まで、すべての工程を当社で内製しました。クライアントとの定例ミーティングは週1回、最終的に約120個のデザインデシジョンを共同で決定。
カスタマイザーは こちら からどなたでもご体験いただけます。同様のソリューションをご検討の企業様は、お問い合わせフォーム よりお気軽にご相談ください。