jpskill.com
📦 その他 コミュニティ

ecommerce

ECサイト開発 - 商品管理、カート、決済、注文フロー、在庫管理の設計・実装支援

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ecommerce.zip https://jpskill.com/download/18260.zip && unzip -o ecommerce.zip && rm ecommerce.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/18260.zip -OutFile "$d\ecommerce.zip"; Expand-Archive "$d\ecommerce.zip" -DestinationPath $d -Force; ri "$d\ecommerce.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ecommerce.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ecommerce フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1
📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

ECサイト開発

使用タイミング

  • ECサイト新規構築時
  • 商品・注文・決済機能の設計時
  • 既存ECサイトのレビュー・改善時

ドメイン設計

コアエンティティ

エンティティ 責務
Product 商品マスタ（タイトル・説明・画像）
Variant バリエーション（SKU・価格・在庫）
Cart 買い物かご
Order 注文（ステータス・配送・支払）
Customer 顧客情報
Payment 決済情報

状態遷移

注文: [作成] → [支払待ち] → [支払済] → [発送準備] → [発送済] → [完了]
在庫: [在庫あり] ←→ [残りわずか] → [在庫切れ] → [入荷待ち]

要件チェックリスト

商品管理

  • [ ] 商品CRUD
  • [ ] バリエーション（サイズ・色）
  • [ ] 在庫管理（リアルタイム）
  • [ ] カテゴリ・タグ
  • [ ] 検索・フィルタ

カート・購入

  • [ ] カート操作
  • [ ] クーポン・割引
  • [ ] 送料計算
  • [ ] 配送日時指定
  • [ ] ギフト設定

決済

  • [ ] クレジットカード
  • [ ] コンビニ払い
  • [ ] 後払い / 電子マネー
  • [ ] 定期購入

顧客管理

  • [ ] 会員登録・ログイン
  • [ ] 住所帳
  • [ ] 注文履歴
  • [ ] ポイント

法令対応

  • [ ] 特定商取引法に基づく表記
  • [ ] プライバシーポリシー
  • [ ] 利用規約

技術設計

在庫確保パターン

// 楽観的ロック
async function reserveStock(variantId: string, qty: number) {
  const result = await db.variant.updateMany({
    where: {
      id: variantId,
      inventory: { gte: qty },
      version: currentVersion,
    },
    data: {
      inventory: { decrement: qty },
      version: { increment: 1 },
    },
  });

  if (result.count === 0) {
    throw new StockNotAvailableError();
  }
}

決済フロー

1. カート確定 → 在庫仮押さえ
2. 決済開始 → 決済サービス呼び出し
3. 成功 → 注文確定・在庫確定
4. 失敗 → 在庫解放
5. タイムアウト（15分） → 在庫解放

API設計

GET    /products          # 商品一覧
GET    /products/:id      # 商品詳細
POST   /cart/items        # カート追加
DELETE /cart/items/:id    # カート削除
POST   /orders            # 注文作成
GET    /orders/:id        # 注文詳細

セキュリティ

  • [ ] HTTPS強制
  • [ ] PCI DSS準拠（カード情報非保持）
  • [ ] CSRF / XSS対策
  • [ ] 認証（2FA推奨）
  • [ ] 監査ログ

パフォーマンス目標

指標 目標
ページ読み込み < 3秒
検索応答 < 500ms
決済処理 < 5秒

プラットフォーム別

Shopify

  • context7: /websites/shopify_dev
  • Storefront API / Admin GraphQL
  • Hydrogen（ヘッドレス）

STORES

自社開発

  • Stripe / GMO / PAY.JP
  • Algolia / Elasticsearch

出力形式

設計時

📋 ドメインモデル
📦 エンティティ一覧
🔄 状態遷移図
✅ 要件チェックリスト

レビュー時

🔴 Critical: 問題点 - 修正案
🟡 Warning: 改善推奨 - 提案
📊 Summary: カバー率 X%

外部知識ベース

context7で最新ドキュメント確認:

  • /websites/shopify_dev - Shopify開発
  • /shopify/hydrogen - ヘッドレスEC
  • /woocommerce/woocommerce - WooCommerce
  • /medusajs/medusa - Medusa（OSS）