3Dバーガーからカスタムグッズへ：AIでストアを作る

バンズが持ち上がる。ピクルスが見えてくる。チーズをもう一枚足すと、目の前でバーガーが変わり、レシートにも反映される。別の場所では、買い物客がイラストをパーカーにドラッグし、少し上に移動させてから商品を回して仕上がりを確認する。見た目は単純な操作だが、その裏では販売者がどこにアートを置けるか、どれくらいの大きさにできるかをあらかじめ決めている。これらは非常に異なる購買体験だが、共通する有益な考えがある：売るものに合わせて店を形作り、選び方までデザインできるということだ。その出発点をどちらもModern Shop コレクション（GitHub）に置きました：3Dのファーストフード店を示すサンプルと、カスタムグッズ向けのプロダクトデザイナーです。ソースはMITライセンスで公開されているので、自由に調べて順応させ、拡張できます。アイデア、あなたのブランド、そしてCodexやClaude CodeのようなAIコーディングツールを持ってきてください。すでに面白い出発点が用意されています。

Jelly Bites：お客さんに昼食を組み立てさせる

Jelly Bites ライブデモから始めてください。バーガーを選び、ドラッグで回転させ、具材を変えてみてください。食べ物は柔らかく揺れ、レイヤーをハイライトすると中身が見えるように積み上げが開きます。遊び心がありますが、このインタラクションには実用的な目的があります。お客さんが自分の選択を実際に視覚で確認できること。ピクルス、ソース、チーズ、トッピングが、想像で選ぶオプションの羅列ではなく、注文の見えるパーツになるのです。ピザビルダーは同じ考えを別方向に伸ばします：サイズ、クラスト、ソース、トッピングを選ぶとピザが形成され、ライブレシートでその選択の結果が見えます。デモは配達や店頭受け取り、プロモーションコード、チェックアウト、注文追跡画面も試せます。ここで重要な小さな点があります。人が途中で考えを変えたとき、ビルド中のアイテムは顧客が「追加」を選ぶまではドラフトです。カートのアイテムを再度3Dビルダーに戻して編集できる。これは飲食店が独自の体験として活用できるインタラクションです。3Dファーストフード店舗のソースはVue、TypeScript、Three.jsで作られています。これらの名前を知らなくてもデモは試せますが、開発者やコーディングエージェントにとっては、ブラウザベースの馴染みあるプロジェクトとして調査・拡張の出発点になります。食べ物の形状はコードで生成されているので、見た目や挙動を変える具体的な出発点が手に入ります。たとえば都内のハンバーガー屋（例：渋谷のてりやきバーガー店）は自分のレシピや包装に合わせてメニューを調整できます。ピザブランドなら看板の組み合わせを先頭に置けます。色、言語、コピー、具材オプション、注文フローをビジネスに合わせて変えることが可能です。サンプルでは英語とペルシャ語のレイアウトが既に用意されています。実際の注文に使う前に理解しておくべき制約が一つあります：現在のデモはサンプルのカタログデータ、ブラウザ内保存の注文、そして模擬のチェックアウトと追跡を使っています。Selldoneとの接続はまだ実装されていません。視覚体験は探索できますが、最終的なカタログや価格の確認（サーバー側）、支払い、フルフィルメントには実際のコマース統合が必要です。3D体験はWebGL2対応ブラウザが必要なので、顧客が使うスマホやブラウザでの適用をテストしてください。

Mockup Studio：販売者用と購買者用で別々の体験

カスタムTシャツ店は別の課題を抱えます。顧客は自由に試したいのに対し、プリンターは実際の印刷領域に合うデザインが必要です。Mockup Studioは両方の側面にアプローチします。ライブのプロダクトデザイナーデモを開くと、はっきり区分けされた二つのモードが見えます：ストア管理者向けのテンプレートビルダーと、購入者向けのエディターです。

販売者はルールを一度設定する

テンプレートビルダーでは、販売者が商品を選び、商品ビューを追加し、印刷可能領域を定義します。これらの寸法はミリメートル単位で保存され、解像度やトリム端の余白（ブリード）設定も持ちます。販売者は次に、購入者が何を変更できるかを決めます：アートワークの移動、サイズ変更、回転など。胸プリントには専用の境界を、袖には別の領域を設定できます。テンプレートはホストアプリケーションに渡す前に購入者視点でテスト可能です。この分離により、アイデアは単なるTシャツ以上に有用になります。サンプルギャラリーにはTシャツ、パーカー、セーター、キャップ、マグカップ、クッション、ハングタグが含まれています。準備済みの3Dアセットもサポートモデル形式で利用できます。異なる商品の形状に対応するなら、モデルと印刷領域のマッピングを用意する必要があります。スタジオは設定された3Dモデルから初期の商品写真を作ることもできます。これにより商品体験を開発する間に、編集用のビューを販売者が別の方法で用意できます。

購入者は思いきり遊べる

購入者用エディターはより集中しています。画像をアップロードし、位置を決め、サイズを調整して商品上でプレビュー。販売者のルールは維持されながら、顧客は自由に試せます。写真ベースの2Dビューと、回転可能なオプションの3Dビューがあります。アートワークの変更はモデル上に反映されます。対応するソフト商品では、布を引き上げて戻るのを観察するようなプルツールも備わり、仕上がりのプレビュー効果を出します（これは印刷用アートワークを伸ばすわけではありません）。プロジェクトには明確な区別があります：一方は購入者に商品の見た目を示すもの。もう一方は物理寸法と解像度に基づく透明PNGで、印刷面として使われます。印刷品質インジケーターは、元画像のピクセルが選んだサイズにどう関係するかを説明する助けになります。実際の生産ワークフローでは、プリンターが寸法、色、ファイル要件を承認する必要があります。現在のエクスポートはブラウザレンダリングのRGB PNGで、プリンター向けのCMYKやカラープロファイル変換は含まれていません。生成される商品形状は、販売する可能性のあるすべての衣服の寸法通りの精密な複製ではなくイラスト寄りです。デモはテンプレートとデザインをローカルに保存します。ビジネスに保存し、注文に正確なデザインを添付し、支払いを受けて生産へ送るのは完成したストアのための統合ステップです。テキスト／フォントツール、商品バリアント、3D表面への直感的なアートのドラッグはプロジェクトのロードマップ上にあります。

出発点がAIとの会話を変える

「ストアを作って」という依頼はAIアシスタントに多くを推測させます。「このプロダクトエディターを使い、私たちのブランドに合わせてプリント工房向けの顧客フローを作って」という指示は、具体的な土台を与えます。だからこそソースを共有しています。インタラクションを見て試し、変更したい部分を指し示せます。スクリーンショットが議論のきっかけになり、デモが作業参考になります。コードは開発者やAIコーディングエージェントが始めるための場所を提供します。ChatGPTでビジネスのアイデアを練ってください：誰が買うのか？どのオプションが重要か？顧客はどこでためらうか？どの情報がキッチンやプリントチームに届くべきか？その要件をCodexやClaude Code、あるいはプロジェクトを検査・編集できる別のAI開発環境に持ち込みます。AIツールはコンポーネントの適応、デザインの修正、サービス接続、テスト作成、不慣れなコードの説明を助けます。良い結果は明瞭なブリーフと実際の体験を確認する作業に依存します。アシスタントにはひとつずつ有用なマイルストーンを与え、何が動くかを見せてもらいましょう。

Selldone MCPの役割

店の表側は顧客が触れる部分です。その裏側には商品、在庫、支払い、配送、そして処理しなければならない注文があります。Selldone MCPは、許可されたSelldoneショップへの構造化されたアクセスをAIアシスタントに提供します。構築の途中でこれを使えば、エージェントが別のデモデータを推測する代わりに、実際のショップのカタログ、コンテンツ、サポートされる設定に基づいて作業できます。アクセスは選んだショップと権限内に留まります。その後で展開されるフロントエンドは、Selldone APIやサービス統合を実装する必要があります。MCPはアシスタントが開発や承認されたショップ作業を行うのを助けますが、デモのチェックアウトボタンを自動的に実際の支払いフローに変えるわけではありません。Jelly Bitesの場合は、メニューと注文フローを実際のコマースサービスに接続することが必要です。Mockup Studioなら、販売者のテンプレートと顧客が選んだデザインを確実に保存し、それを正しい商品と注文に紐付けて保持することが重要です。顧客向けの体験は独自性を保ちながら、Selldoneがコマース基盤を提供します。その基盤の上に作る方法は様々です。フルのストアフロントはSelldone Layoutワークフローでカスタマイズできますし、より専門的なカスタムアプリは別のフロントエンドを使うことも可能です。どれだけ既存のストアを残すか、顧客の旅路をどれだけ特異にするかで最適な選択は変わります。詳しくはSelldone Genesis overviewを参照してください。

AIにより良い最初のブリーフを与える

コーディング環境で次のような依頼から始められます。角括弧の部分を自分のビジネスの詳細に置き換えてください。

Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [my business]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [my brand, products, and requirements], keeping it usable on mobile.

方向性を選んだら次のマイルストーンを依頼します：

Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.

これらのプロンプトは構築会話の始まりにすぎません。良いエージェントはプロジェクトを検査し、欠けている部分を特定し、あなたと一緒にそれらを進めます。最初の飲食店向けマイルストーンでは、たとえば一つの注文を完全に動かすことを依頼できます：一品をカスタマイズして正しい価格を表示し、サポートされたテスト支払いで支払いを行い、ビジネス側で注文を受け取れることを確認する。プリントショップなら、アップロードからプレビュー、注文に添付される正確な保存アートワークまでの経路をたどってください。既存のインタラクションコードとコマースプラットフォームがあれば、スクラッチで作る量は減り、カスタムストアフロントはより経済的なプロジェクトになります。最終的な費用はデザイン、統合、アセット、ホスティング、テストの範囲に依存します。MITライセンスはサンプルソースを再利用可能にしますが、これらのサービスを無料で含むわけではありません。

自分で作るか、私たちのチームに任せるか

Modern Shopのサンプルは今後も洗練を続け、コレクションを発展させていきます。今あるバージョンから始めて体験全体を適応することも、特定の問題を解決するパーツだけを借用することもできます。専門家にブランドに合わせて仕上げてもらいたい場合は、Selldoneの公式セットアップ＆デザインチームからカスタムストアフロントの見積りを依頼できます。気に入ったデモ、商品、顧客に味わってほしい体験を持ってきてください。我々はプロジェクト開始前にデザインと実装の範囲を一緒に定めます。あなたのストアは、画面上で分解するバーガーから始まるかもしれません。あるいはマグカップの小さなイラストから始まるかもしれません。デモを開き、何かを変えて、どのアイデアが自分のビジネスに合うか確かめてください。Modern Shop を GitHub で見る · 3Dフードビルダーを試す · Mockup Studio を試す