🛒 ECサイト 設計図

システムアーキテクチャ・データベース・ユーザーフローの全体設計

⚙️ 推奨技術スタック

モダンなECサイト構築に必要な技術選定と各レイヤーの役割

Frontend

Next.js 14 / React
SSR/ISR対応、SEO最適化
Tailwind CSS + shadcn/ui

Backend

Node.js (NestJS) / Python
REST API & GraphQL
マイクロサービス対応

Database

PostgreSQL + Redis
RDB: 構造化データ
Redis: キャッシュ/セッション

Storage

AWS S3 / CloudFront
商品画像・動画の配信
CDNによる高速化

Payment

Stripe / PayPal
クレジットカード決済
コンビニ・銀行振込対応

Infra

AWS / GCP
Docker + Kubernetes
Terraform (IaC)

🏗️ システムアーキテクチャ図

クライアントからインフラ層までの全体構成

graph TB
    subgraph Client["🖥️ クライアント層"]
        Web["Webブラウザ
(Next.js / SSR)"]
        Mobile["モバイルアプリ
(React Native)"]
    end

    subgraph CDN["🌐 CDN & 配信"]
        CloudFront["CloudFront (CDN)"]
        S3["S3 (静的ファイル・画像)"]
    end

    subgraph LB["⚖️ ロードバランシング"]
        ALB["Application Load Balancer"]
    end

    subgraph App["🔧 アプリケーション層"]
        direction TB
        WebAPI["Web API Server
(NestJS / Node.js)"]
        AuthSvc["認証サービス
(JWT / OAuth2)"]
        OrderSvc["注文サービス"]
        ProductSvc["商品サービス"]
        CartSvc["カートサービス"]
    end

    subgraph Cache["⚡ キャッシュ層"]
        Redis["Redis Cluster
(セッション・キャッシュ)"]
    end

    subgraph Data["💾 データ層"]
        PG["PostgreSQL
(主DB)"]
        Mongo["MongoDB
(ログ・レビュー)"]
        Elastic["Elasticsearch
(商品検索)"]
    end

    subgraph External["🔗 外部サービス"]
        Stripe["Stripe (決済)"]
        SendGrid["SendGrid (メール)"]
        AWSLambda["AWS Lambda
(イベント処理)"]
    end

    Web --> CloudFront
    Mobile --> CloudFront
    CloudFront --> S3
    CloudFront --> ALB
    ALB --> WebAPI
    ALB --> AuthSvc
    ALB --> OrderSvc
    ALB --> ProductSvc
    ALB --> CartSvc

    WebAPI --> Redis
    AuthSvc --> Redis
    OrderSvc --> PG
    ProductSvc --> PG
    ProductSvc --> Elastic
    CartSvc --> Redis
    CartSvc --> PG

    Stripe -.->|決済API| OrderSvc
    SendGrid -.->|通知メール| AWSLambda
    AWSLambda -.->|Webhook| OrderSvc

🗄️ データベース ER図

主要エンティティとリレーションシップ（Mermaid v10対応）

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ REVIEW : writes
    CUSTOMER ||--o{ ADDRESS : has
    
    CUSTOMER {
        uuid id PK
        string email UK
        string password_hash
        string name
        string phone
        date created_at
        string status
    }

    ORDER ||--|{ ORDER_ITEM : contains
    ORDER ||--|| PAYMENT : has
    
    ORDER {
        uuid id PK
        uuid customer_id FK
        decimal total_amount
        string status
        date ordered_at
        string shipping_address
    }

    ORDER_ITEM {
        uuid id PK
        uuid order_id FK
        uuid product_id FK
        int quantity
        decimal unit_price
    }

    PRODUCT ||--o{ ORDER_ITEM : "referenced by"
    PRODUCT ||--o{ REVIEW : receives
    PRODUCT ||--|| CATEGORY : belongs_to
    
    PRODUCT {
        uuid id PK
        string name
        text description
        decimal price
        int stock_quantity
        string sku UK
        boolean is_active
        date created_at
    }

    CATEGORY {
        uuid id PK
        string name
        uuid parent_id FK
        int sort_order
    }

    PAYMENT {
        uuid id PK
        uuid order_id FK
        string method
        decimal amount
        string status
        string stripe_payment_intent_id
        date paid_at
    }

    ADDRESS {
        uuid id PK
        uuid customer_id FK
        string name
        string postal_code
        string address_line1
        string address_line2
        string city
        string state
    }

    REVIEW {
        uuid id PK
        uuid product_id FK
        uuid customer_id FK
        int rating
        text comment
        date created_at
    }

    PRODUCT ||--o{ PRODUCT_IMAGE : has
    
    PRODUCT_IMAGE {
        uuid id PK
        uuid product_id FK
        string url
        int sort_order
        boolean is_primary
    }

📄 サイトマップ（ページ構成）

ユーザーがアクセスする主要ページの階層構造

graph TD
    Home["🏠 ホーム
index"] --> Products["📦 商品一覧
/products"]
    Home --> Categories["📂 カテゴリー一覧
/categories"]
    Home --> Deals["⭐ おすすめ
/deals"]

    Products --> ProductDetail["🛍️ 商品詳細
/products/:slug"]
    Products --> Search["🔍 検索結果
/search?q="]

    ProductDetail --> Cart["🛒 カート
/cart"]
    ProductDetail --> Reviews["💬 レビュー一覧"]

    Cart --> Checkout["💳 チェックアウト
/checkout"]
    Cart --> Login["🔐 ログイン画面"]

    Checkout --> Payment["💰 決済処理
/payment"]
    Checkout --> OrderConfirm["✅ 注文確認
/order-confirm"]

    Payment --> ThankYou["🎉 購入完了
/thank-you"]

    ThankYou --> MyOrders["📋 マイページ - 注文履歴
/my/orders"]
    ThankYou --> ProductDetail

    Login --> Signup["📝 新規登録
/signup"]
    Login --> ForgotPassword["🔑 パスワード再設定
/forgot-password"]

    MyOrders --> OrderDetail["📋 注文詳細
/my/orders/:id"]
    MyOrders --> Profile["👤 プロフィール編集
/my/profile"]
    MyOrders --> Addresses["📍 配送先管理
/my/addresses"]

    style Home fill:#4f46e5,color:#fff
    style Products fill:#3b82f6,color:#fff
    style ProductDetail fill:#10b981,color:#fff
    style Cart fill:#f59e0b,color:#fff
    style Checkout fill:#ef4444,color:#fff
    style Payment fill:#ef4444,color:#fff
    style ThankYou fill:#10b981,color:#fff

🎨 メイン画面レイアウト（SVG）

ECサイトのトップページ・商品詳細ページのUI構成イメージ

🏠 トップページ レイアウト

🛒 ShopName 商品 カテゴリー おすすめ 🔍 商品を検索... 🛒 👤 🔥 夏の特別セール 最大50% OFF！期間限定キャンペーン実施中 詳しく見る → 📦 新着商品 👟 スポーツシューズ ¥8,980 🎧 ワイヤレスイヤホン ¥5,480 ⌚ スマートウォッチ ¥12,800 📷 ミラーレスカメラ ¥89,800 ⭐ おすすめカテゴリー ファッション 家電 本 スポーツ © 2024 ShopName — All rights reserved

🛍️ 商品詳細ページ レイアウト

ホーム > カテゴリ > 商品詳細 👟 👟 👟 👟 在庫あり ★★★★★ 4.8 (128件) プレミアムスポーツシューズ 軽量・クッション性抜群。ランニングから日常使いまで。 ¥8,980 ¥12,800 カラーを選択 サイズを選択 25cm 26cm 27cm 数量 − 1 + 🛒 カートに追加 ❤️ お気に入り

🔄 購入ユーザーフロー

ゲスト/ログインユーザーの購買行動の流れ

flowchart TD
    Start(["👀 商品ページ閲覧"]) --> AddCart["🛒 カートに追加"]
    AddCart --> CartPage["📋 カート画面"]

    CartPage --> CheckoutBtn{"チェックアウト
ボタン押下？"}
    CheckoutBtn -- Yes --> LoginCheck{"ログイン済み？"}
    CheckoutBtn -- No --> ContinueShop["🛍️ 買い物を続ける"]
    ContinueShop --> Start

    LoginCheck -- Yes --> GuestCheck{"ゲスト購入？"}
    LoginCheck -- No --> LoginPage["🔐 ログイン画面"]
    LoginPage --> SignupPage["📝 新規登録"]
    SignupPage --> LoginPage

    GuestCheck -- Yes --> GuestCheckout["👤 ゲストチェックアウト"]
    GuestCheck -- No --> CheckoutForm["📝 配送情報入力"]

    GuestCheckout --> CheckoutForm

    CheckoutForm --> PaymentMethod{"決済方法選択"}
    PaymentMethod -- クレジットカード --> Stripe["💳 Stripe決済"]
    PaymentMethod -- コンビニ --> Konbini["🏪 コーポレートID発行"]
    PaymentMethod -- 銀行振込 --> BankTransfer["🏦 口座情報表示"]

    Stripe --> Confirm["✅ 注文確認画面"]
    Konbini --> Confirm
    BankTransfer --> Confirm

    Confirm --> PayBtn{"支払い実行？"}
    PayBtn -- Yes --> Success["🎉 購入完了"]
    PayBtn -- No --> CheckoutForm

    Success --> OrderEmail["📧 注文確認メール送信"]
    OrderEmail --> MyOrders["📋 マイページ - 注文履歴"]

    style Start fill:#dbeafe
    style AddCart fill:#fef3c7
    style CartPage fill:#fef3c7
    style LoginPage fill:#fee2e2
    style Success fill:#dcfce7
    style Confirm fill:#f3e8ff

⚡ バックエンド注文処理フロー

決済から在庫更新、通知までのサーバーサイド処理の流れ

sequenceDiagram
    participant U as 👤 ユーザー
    participant FE as 🖥️ フロントエンド
(Next.js)
    participant API as 🔧 APIサーバー
(NestJS)
    participant DB as 💾 PostgreSQL
    participant Redis as ⚡ Redis
    participant Stripe as 💳 Stripe
    participant Mail as 📧 SendGrid

    U->>FE: 注文情報送信
    FE->>API: POST /api/orders (JWT認証)
    API->>Redis: セッション検証
    API->>DB: トランザクション開始

    DB->>DB: 在庫チェック & 予約
    alt 在庫あり
        DB-->>API: 注文レコード作成
        API->>Stripe: createPaymentIntent
        Stripe-->>API: client_secret返却
        API-->>FE: 注文ID + client_secret

        FE->>U: 決済画面表示
        U->>FE: 決済情報入力
        FE->>Stripe: confirmPayment
        Stripe-->>FE: 決済成功
        FE->>API: POST /api/orders/:id/pay

        API->>DB: 注文ステータス更新
(paid)
        DB->>DB: 在庫確定減算
        API->>Mail: 注文確認メール送信
        Mail-->>U: 📧 メール配信
        API-->>FE: 200 OK
        FE->>U: 🎉 購入完了画面

    else 在庫不足
        DB-->>API: エラー
        API-->>FE: 409 Conflict
        FE->>U: ⚠️ 在庫切れメッセージ
    end

🔧 管理画面（Admin Dashboard）構成

運営者が使用するバックオフィス機能のレイアウト

⚙️ Admin 📊 ダッシュボード 📦 商品管理 📋 注文管理 👥 顧客管理 📈 売上分析 🏷️ プロモーション 📝 レビュー管理 ⚙️ 設定 📊 ダッシュボード 📅 今月 売上 ¥2,450,000 ▲ 12.5% 注文数 386件 ▲ 8.2% 顧客数 1,248人 ▼ 2.1% 平均単価 ¥6,347 ▲ 3.8% 📈 月間売上推移 1月 2月 3月 4月 5月 6月 📋 最近の注文 #ORD-001 田中太郎 済 #ORD-002 鈴木花子 処理中 #ORD-003 山田次郎 済 #ORD-004 佐藤三子 取消 🔥 売上TOP商品 👟 シューズ 45件 🎧 イヤホン 32件 ⌚ ウォッチ 28件 ⚠️ 在庫警告 📷 カメラ (残り3個) 🎒 バックパック (残り5個)

🔌 APIエンドポイント設計

RESTful APIの主要エンドポイント一覧

メソッド エンドポイント 説明 認証
GET/api/products商品一覧（分页・フィルター・検索）公開
GET/api/products/:slug商品詳細情報公開
POST/api/cartカートに追加必須
GET/api/cartカート内容取得必須
PUT/api/cart/items/:idカート商品更新（数量等）必須
DELETE/api/cart/items/:idカートから削除必須
POST/api/orders注文作成必須
GET/api/orders/:id注文詳細取得必須（本人のみ）
POST/api/payments/intent決済インテント作成必須
GET/api/categoriesカテゴリー一覧公開
POST/api/auth/register新規登録公開
POST/api/auth/loginログイン（JWT発行）公開
GET/api/reviews/:productId商品レビュー一覧公開
POST/api/admin/products商品登録（管理画面）管理者
PUT/api/admin/orders/:id/status注文ステータス更新管理者

🔒 セキュリティ設計

ECサイトにおける主要なセキュリティ対策

認証・認可

  • JWT (JSON Web Token) によるセッション管理
  • OAuth 2.0 対応（Google / Apple ログイン）
  • BCrypt パスワードハッシュ化
  • RBAC ロールベースアクセス制御（一般/管理者）
  • トークン有効期限: Access 15分 / Refresh 7日

データ保護

  • TLS 1.3 通信暗号化（HTTPS必須）
  • PDO / Prisma によるSQLインジェクション対策
  • XSS対策: CSPヘッダー + サニタイズ
  • CSRF対策: SameSite Cookie + CSRF Token

決済セキュリティ

  • PCI DSS Level 1準拠（Stripe利用で肩代わり）
  • カード情報直接保存しない（トークン化）
  • Webhook署名検証による改ざん防止

インフラセキュリティ

  • WAF によるWeb攻撃遮断
  • DDoS対策 CloudFront + Shield
  • VPC内でのDB配置（パブリックアクセス禁止）
  • 定期的なセキュリティ監査・脆弱性スキャン

🚀 パフォーマンス最適化戦略

施策 対象 手法 期待効果
CDN静的ファイル・画像CloudFront + S3 Originグローバル高速配信
キャッシュ商品一覧・詳細Redis (TTL: 5分〜1時間)DB負荷 80%削減
SSR/ISRページレンダリングNext.js ISR (revalidate: 60s)SEO + FCP改善
検索商品検索Elasticsearch (インデックス)全文検索・高速
画像最適化商品画像WebP形式 + 遅延読み込み転送量 60%削減