THREE.JS / SHOPIFY CUSTOMIZER / 2026

Shopify向け、リアルタイム3Dカスタマイザー

お客様が入力した文字と選択したフォントを、購入前に商品上で確認できる3DカスタマイザーをShopifyの商品ページへ実装しました。

H様 / カスタム商品販売

ご相談前の状況

注文後の確認メールが、製作開始を遅らせていました。

H様は、お客様が文字やフォントを選べるカスタム商品を販売しています。従来の商品ページはテキスト入力が中心で、入力した内容が商品上でどのように見えるかは、購入前に確認できませんでした。

文字数の上限を超えた注文や、製作に使えない文字が入力された場合は、注文後にメールで内容を確認して修正していただく必要があります。お客様の返信を待つ間は製作を始められず、双方に手間がかかっていました。

入力ミスを防ぐだけでなく、『完成イメージを見てから注文したい』という要望にも応えるため、入力判定とプレビューを同じ購入画面にまとめる方針としました。

運用フロー

設計と実装

制限事項を注意書きだけで伝えるのではなく、入力時に判定し、同じ画面で仕上がりを確認できるようにしています。購入フローを増やさず、既存の商品ページへ組み込みました。

文字数と使用可能な文字を入力時に判定し、問題があればその場で理由を表示します。注文後の確認に頼らない仕様にしました。

入力文字、フォント、商品色、刺繍色をThree.jsの表示へ反映します。回転・拡大しながら、配置と全体のバランスを確認できます。

画面で確認したカスタマイズ内容を注文情報へ引き継ぎ、製作担当者が管理画面から内容を確認できるようにしました。

端末性能と画面サイズに応じて描画設定を調整。3Dが利用できない環境でも、購入操作を止めない代替表示を用意しています。

導入後

入力条件に合わない内容は購入前に修正できるため、注文後の確認メールと返信待ちが減りました。製作担当者は、注文情報とプレビューで確定した内容を照合して作業を始められます。

お客様は文字や色を試しながら完成イメージを確認でき、H様からは導入後に売上の増加も見られたと伺っています。数値は非公開ですが、運用負担の軽減と購入体験の改善を同じ機能で実現できました。

同様の課題がある方へ

ANGLE WORKSでは、EC運営、Shopify連携、企業専用アプリ、SaaSなどの設計・開発を行っています。まず現在の作業を確認し、どこまでを仕組みにするべきか整理します。

業務改善アプリは、必要に応じて小さな検証版を先に作成できます。実データで操作を試していただき、本当に現場で使えるかを確認してから本開発をご判断ください。