🛒
ネットショップ・EC
商品を売るオンラインストア。決済まで組み込む実践プロジェクト
どんなもの?
商品を並べて、カートに入れて、決済して購入できるネットショップ。ハンドメイド作品・デジタル商品・在庫品などを自分のブランドで販売できます。商品管理・カート・決済・注文管理と、EC特有の要素を実装します。
こんな人におすすめ
自分の商品・作品をオンラインで販売したい人
🎯 完成すると手に入るもの
商品を並べてカートに入れ、決済して購入できる本物のネットショップが手に入ります。ハンドメイド作品やデジタル商品を自分のブランドで販売できます。
おすすめの技術スタック
ECは「決済の確実さ」と「商品・在庫の管理」が核。決済はStripe(Stripe Agent Toolkitで操作を自動化)、商品データと注文管理はSupabase、フロントはNext.jsという構成で、安全に売上を扱えます。
費用の目安
一部有料の可能性があります
開発は無料枠で可能ですが、実際に販売するとStripeの決済手数料が発生します。売れて初めてコストがかかる仕組みなので、リスクは小さいです。
| 項目 | 費用 | 補足 |
|---|---|---|
| Cursor | 無料〜有料 | 本格開発では有料が快適 |
| Supabase(商品・注文管理) | 無料枠〜 | 規模拡大で有料へ |
| Stripe(決済) | 初期費用無料 | 売上に決済手数料(数%) |
| Vercel(公開先) | 無料枠〜 | 商用は有料(Pro) |
| GitHub | 無料 | 個人利用は無料 |
必要なアカウント
開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。
必要なAPIキー・設定
APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。
Supabase URL と APIキー 取得先: Supabaseプロジェクトの設定画面 アプリからデータベースに接続するための情報。プロジェクト作成時に自動発行されます。
Stripe APIキー 取得先: Stripeダッシュボードの開発者設定 決済を処理するための鍵。テスト用と本番用があります。
作り方: まずこのプロンプトをClaudeに送る
細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。
📋 最初に送るプロンプト
あなたはプログラミング初心者の私に、ネットショップ(EC)の作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。
【私の状況】
- プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。
- パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください
- AIエディタ「Cursor」をインストール済みです。
- 必要な無料アカウント(このページに記載のもの)は作成済みです。
【作りたいもの】
- 商品を並べて、カートに入れて、決済して購入できるネットショップ。
- 商品(名前・価格・在庫・画像)と注文はSupabaseで管理したい。
- 決済はStripeを使い、まずテストモードで動作確認してから本番にしたい。
- 在庫がなくなった商品は購入できないようにしたい。
- 注文が入ったら管理画面で確認・発送管理できるようにしたい。
- 最終的にVercelで公開したい。
【進め方のお願い】
1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。
2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。
3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。
4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。
5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。
6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。
まずは【1】の全体像から教えてください。 ※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。
つまずきやすいポイント
- 最初の環境構築でエラーが出やすいです。エラー文をそのままClaudeに貼れば、原因と対処をほぼ特定してくれます。
- Stripeは必ず「テストモード」で決済の流れを確認してから本番へ。テスト用カード番号で動作確認できます。
- Supabaseで「自分のデータだけ見える」設定(RLS)を忘れると、他人のデータが見えてしまいます。ログイン機能を作ったら必ずRLSの設定をClaudeに確認してもらいましょう。
- 在庫数の管理は間違えると「売り切れなのに注文が入る」事故に。在庫の扱いをClaudeと入念に設計しましょう。
収益化のヒント
決済(Stripe)・DB・ホスティングなど複数の実用ツール紹介が可能。EC構築ノウハウ記事とも好相性。