オンラインストアの作り方：商品、カート、決済、在庫管理

オンラインストアを作るには、商品カタログ、カート、Stripeなどの決済サービスを使った決済画面、注文の記録と在庫の減算の仕組み、そして注文を処理する管理画面が必要です。AIアプリビルダーは、わかりやすい説明からこれらすべてをまとめて作れます。最も注意を払うべきなのはストアフロントそのものではなく、お金に関わる部分です。つまり、いつ注文が「支払い済み」になるのか、在庫をどう確保するのか、そして税、配送、返金をどう扱うのかです。

独自ストアかShopifyか：まず決めましょう

何かを作り始める前に、正直に検討してください。

Shopifyなどのホスト型ECプラットフォーム（Shopify、Squarespace Commerce、WooCommerceなど）が向いている場合：

• 送料の料金体系、配送ラベル、返品を伴う実物の商品を販売する
• 多くの地域にまたがる税の計算が必要である
• 技術に詳しくないチームが毎日商品を追加し、注文を処理する
• レビュー、メールマーケティング、ポイントなどのアドオンをアプリストアで選びたい
• 複数のチャネルで販売し、在庫数を一つにまとめる必要がある

Shopifyのプランは月額制で、年払いにすると割引になります。カード決済には別途決済手数料がかかります。料金は地域によって異なるため、お住まいの国の料金ページで確認してください。

独自ストアが適しているのは次のような場合です：

• 製品が特殊である（受注生産の設定ツール、予約と商品の併用、デジタルダウンロードとライセンス、顧客ごとのB2B価格表など）
• ストアが、より大きなアプリ（コース配信サイト、会員サイト、マーケットプレイスなど）の一部である
• 商品数は少なく、デザインと決済の流れを完全にコントロールしたい
• コードを自分で所有し、プラットフォームへの依存を避けたい

多くの小規模販売者にとっては、プラットフォームを使うのが最善です。必要な機能が一般的なものであれば、それで問題ありません。近道を選びましょう。

オンラインストアに必要なもの

データ

各注文明細には、購入時の価格を必ず保存してください。来月価格を変更しても、過去の注文では顧客が実際に支払った金額が表示されなければなりません。

ページ

• ストアフロント： トップページ、カテゴリやコレクションのページ、商品ページ、カート、決済へのリダイレクト、注文完了ページ。
• 管理画面： 商品と在庫、ステータス付きの注文（支払い済み、梱包済み、発送済み、返金済み）、顧客、簡単な売上数値。
• 法的情報とポリシー： 配送、返品、プライバシー、利用規約。購入者は購入前にこれらを確認しますし、多くの地域では法律で一部の掲載が義務付けられています。

権限

購入者がアカウントなしで購入できるようにしてください。ゲスト購入なら手順が一つ減りますし、アカウント機能は後から追加できます。注文の閲覧と商品の編集は管理者だけに許可します。管理画面は、本物のログイン機能とサーバー側の権限チェックで保護してください。

決済の流れ

独自ストアで最も安全なパターンは、ホスト型の決済ページを使うことです。Stripeの場合は次のようになります。

1. 購入者が「購入する」を押します。サーバーがデータベースから価格と在庫を再確認し（ブラウザから送られた値は信用しません）、Stripe Checkoutのセッションを作成します。
2. 購入者はStripeのページで支払います。カード情報があなたのサーバーに届くことはありません。
3. Stripeがアプリのwebhookエンドポイントに支払い成功を通知します。このときに初めて、注文を支払い済みにし、在庫を減らします。
4. 購入者は確認ページに移動し、あなたは確認メールを送信します。

避けるべき間違いが2つあります。決済ページから戻ってきたリダイレクトを基に「支払い済み」の注文を作ること（ブラウザのタブは閉じられますし、リダイレクトは偽装できます）と、合計金額をブラウザ側で計算することです。AIに明示的に指示しないと、どちらも間違えやすいポイントです。

Stripeの標準料金は、成功したカード決済ごとの割合に固定額を加えたものです。初期費用や月額料金はかかりません（2026年9月時点）。実際の料率は国とカードによって異なります。まずはStripeのテストモードで、テスト用のカード番号を使ってすべてを構築してください。アプリに決済を追加する方法のガイドでは、APIキー、テストモード、webhookを扱っています。

税、配送、在庫の判断

これらはAIが代わりに決めることのできないビジネス上の判断です。

• 税。 売上税や付加価値税を課す必要があるか、またその税率は、ご自身と顧客がどこにいるかによって決まります。Stripeにはこのための製品（Stripe Tax）がありますし、状況が単純であれば固定税率を設定することもできます。判断に迷う場合は会計士に相談してください。
• 配送。 まずは数種類の定額料金（国内、海外、一定額以上で送料無料）から始めましょう。リアルタイムの配送業者料金や送り状の印刷は、Shopifyのようなプラットフォームを使うと大幅に手間が省ける部分です。
• 在庫。 在庫を、決済開始時に確保するのか、支払いが成功した時点でのみ減らすのかを決めます。小規模ストアでは、支払い時に在庫を減らし、決済の直前に再確認する方法がシンプルです。ただしこの方法では、最後の1点を売り越してしまうことが時々起こり得るため、その際の対応も決めておきましょう。ストア以外の在庫管理については、在庫管理アプリの作り方を参照してください。

うまくいく最初のプロンプト

Loam & Clayというセラミックスタジオのオンラインストアを作ってください。マグカップ、ボウル、花瓶を販売しています。ストアフロント：注目商品を載せたトップページ、カテゴリで絞り込めるショップページ、画像ギャラリー、色のバリエーションと在庫状況を表示する商品ページ、スライドイン式のカート。商品、バリエーション、注文、注文明細はデータベースに保存し、現実的な商品を10点シードしてください。管理画面（ログイン必須）では、商品の追加と編集、画像のアップロード、在庫の変更、注文ステータス（支払い済み／梱包済み／発送済み）の確認ができるようにしてください。決済ボタンは今はプレースホルダーで構いません。次の段階でStripe Checkoutを追加します。温かみがあってシンプルなデザインで、スマホ優先にしてください。レビューの捏造や「世界中送料無料」などの表現は入れないでください。

決済をプレースホルダーから始めるのは意図的です。まずカタログと管理画面を正しく作り、その後で決済を別の手順として、きちんとテストできる形で接続しましょう。

構築の手順

1. カタログと商品ページを、実際の商品名、価格、写真で作ります。
2. ページを再読み込みしても残るカートを作ります。
3. 管理画面：商品、バリエーション、在庫、画像アップロード。ログインで保護します。
4. テストモードのStripe Checkoutを追加し、サーバーで価格と在庫を再確認させます。
5. 注文を支払い済みにし、在庫を減らすwebhookを作ります。テスト用カードで最初から最後まで動作を確認します。
6. 顧客とご自身への注文メールを設定します。
7. ポリシーとSEO：配送と返品のページ、商品のタイトルと説明、共有用の画像を整えます。AIで作ったウェブサイトのSEOも参照してください。
8. 公開：本番のStripeキーに切り替え、ご自身で少額の注文を実際に行い、返金してみます。

よくある間違い

• ブラウザから送られた価格を信用すること。 必ずサーバー側で再計算してください。
• 決済成功ページで注文を支払い済みにすること（webhookで行うべきです）。
• 在庫数を上書きすること。在庫の動きを記録しないと、在庫が変わった理由の履歴が失われます。
• 配送と返品のページがないままで公開すること。
• 非常に大きな商品画像。 圧縮し、コードの中ではなくファイルストレージから配信してください。
• 最初の販売の前に、ウィッシュリスト、レビュー、ポイント機能を作ること。

運営コスト

次の費用を見込んでおきましょう。ホスティングとデータベース、販売ごとの決済手数料、ドメイン、注文確認メールのためのメールサービス、場合によっては税計算サービス。独自ストアならプラットフォームの月額料金やアプリ料金はかかりませんが、保守の責任はご自身にあります。決済で問題が起きたときに修正するのもご自身です。

ご自身以外の複数の販売者が出品し、それぞれに支払いを行うなら、それはマーケットプレイスであり、支払いのルールが異なります。マーケットプレイスの作り方を参照してください。

Mythexで作る

Mythexでは、ストアを説明するとエージェントがライブプレビュー上でカタログ、カート、管理画面を組み上げます。商品と注文はPostgresデータベースに、商品画像はファイルストレージに保存されます。ドキュメントのストアのユースケースでも、ここで説明した順序、つまりまずカタログを作り、決済は後から行うという進め方が推奨されています。

決済にはご自身のStripeアカウントを使います。Stripeのキーをプロジェクトのシークレットとして追加し、エージェントにCheckoutの追加を依頼してから、プレビューでStripeのテスト用カードを使ってテストします（Stripeのレシピ）。webhookには公開URLが必要なので、Stripeに接続先を設定する前にアプリを公開してください（webhookのレシピ）。税、配送、在庫の同期はMythexの標準機能ではありません。Shopifyとのネイティブ連携もありません。完成した製品としてこれらが必要な場合は、Shopifyの方が適しています。出発点としては、ストアのテンプレート（例：ECストア）をご覧ください。

よくある質問