webdesigngarden.com 等を参考にしたアパレル販売ECサイトの新規構築。本書はデザイン提案・実装に入る前の合意事項をまとめたもので、ヒアリング内容をもとに作成している。太字の「要確認」箇所は未決定・要相談。
アパレル商品(衣料・雑貨)を扱う自社ECサイト。カタログとしてだけでなく、カート投入から決済・注文管理までをサイト内で完結させるフル機能のオンラインストアとする。
webdesigngarden.com は国内Webサイトの事例を「サイト種別」「業種」「印象・レイアウト」「配色」「フォント」などの軸で検索できる、日本語のデザインリファレンスギャラリー。今回はここに掲載されるような国内アパレルEC・LPの実例を横断的に参照し、デザイン提案フェーズで複数の方向性(印象)を試作する。
「公開」は誰でも閲覧可能、「会員」はログイン後のみ、「管理」は運営者専用の画面。
| 区分 | 画面 | 概要 | 優先度 |
|---|---|---|---|
| 公開 | トップページ | ブランド世界観、注目商品・キャンペーン、カテゴリ導線 | 必須 |
| 公開 | 商品一覧(カテゴリ別) | トップス/ボトムス/アウター/アクセサリー等でフィルタ・並び替え | 必須 |
| 公開 | 検索結果 | キーワード検索・絞り込み | 必須 |
| 公開 | 商品詳細 | 画像ギャラリー、サイズ/カラー選択、カート投入、お気に入り登録、レビュー閲覧・投稿 | 必須 |
| 公開 | カート | 選択商品の確認・数量変更・削除(ゲストでも利用可) | 必須 |
| 公開 | チェックアウト | 配送先入力、送料計算、クーポンコード入力、決済方法選択(ゲスト購入可) | 必須 |
| 公開 | 注文完了 | 注文番号表示、確認メール送付 | 必須 |
| 公開 | 会員登録 / ログイン | メール・パスワード方式 | 必須 |
| 会員 | マイページ(トップ) | 注文・登録情報への導線 | 必須 |
| 会員 | 注文履歴 / 詳細 | 過去注文・配送状況の確認 | 必須 |
| 会員 | 会員情報 / 住所管理 | 登録情報・お届け先の編集 | 必須 |
| 会員 | お気に入り | 商品の保存・一覧 | 必須 |
| 公開 | 会社概要 | 運営者情報 | 必須 |
| 公開 | お問い合わせ | フォーム | 必須 |
| 公開 | 特定商取引法に基づく表記 | 法定表示(通信販売に必須。個人運営でも氏名・メールは常時表示必須、住所・電話は開示請求受付制での省略可) | 法令 |
| 公開 | プライバシーポリシー | 個人情報の取り扱い | 法令 |
| 公開 | 利用規約 | サイト利用規約 | 必須 |
| 管理 | ダッシュボード | 売上・注文サマリ | 必須 |
| 管理 | 商品管理 | 商品・在庫・画像のCRUD | 必須 |
| 管理 | 注文管理 | ステータス更新・出荷処理・入金待ち自動キャンセル状況の確認 | 必須 |
| 管理 | クーポン管理 | クーポンコードの発行・条件設定 | 必須 |
| 管理 | レビュー管理 | 投稿レビューの確認・非表示化 | 必須 |
| 方式 | 手数料 | 入金確認 | 実装難易度 |
|---|---|---|---|
| クレジットカード Stripe Checkout | 売上の約3.6%/件 固定費・月額なし | 自動(Webhookで即時) | 中 |
| 銀行振込 先払い・手動確認 | 決済代行手数料ゼロ 振込手数料は注文者負担が一般的 | 手動(担当者が消込) | 易 |
| 銀行振込 バーチャル口座・自動照合 | 決済代行手数料+口座発行費用が別途 | 自動(Webhook) | 難 |
初期スコープはカード(Stripe Checkout)+銀行振込(先払い・手動確認)の2本立てとする。銀行振込は決済APIを使わず、注文確定時に振込先を表示して注文ステータスを「入金待ち」にし、管理画面から手動で「入金確認済み」に切り替える運用。振込の自動照合(バーチャル口座)は運用が回り始めてから追加検討する。
印象は未確定のため、次のデザイン提案フェーズでトップページ+商品一覧を3パターン試作し、比較のうえ1案を選定してから全画面に展開する。詳細はデザイン提案資料を参照。
「フル機能のカート・決済・注文管理を自前実装」「GitHubで管理してCloudflareでデプロイ」という方針に基づく推奨構成。Cloudflareのサーバーレス実行環境(Workers)上で動く技術で統一している。
| 領域 | 選定 | 備考 |
|---|---|---|
| フレームワーク | Next.js(App Router) | OpenNext経由でCloudflareへデプロイ。軽量重視ならSvelteKitも代替候補 |
| ホスティング | Cloudflare Workers | GitHub連携でpush時に自動ビルド・デプロイ |
| データベース | Cloudflare D1(SQLite) | マイグレーションはWranglerで管理 |
| 画像保存 | Cloudflare R2 | 商品画像・ダミー画像を保存 |
| 決済 | Stripe(Checkout)+銀行振込(手動確認) | カードはホスト型決済でPCI DSS対応範囲を最小化。振込は決済APIなしで運用 |
| 認証 | 自前セッション認証 | D1にセッションテーブル、httpOnly Cookie、パスワードはハッシュ化して保存。ゲスト購入時はセッションのみでカート・注文を紐付け |
| 定期実行 | Cloudflare Cron Triggers | 入金待ち注文の7日超過自動キャンセルなど日次バッチに使用 |
| CI/CD | Cloudflare の Git 連携 | mainブランチへのpushで本番反映、PRごとにプレビュー環境 |
| ドメイン | 現状は Cloudflare 既定ドメイン(*.workers.dev) | 独自ドメインは取得後に追加設定(P7で対応) |
| リポジトリ | 単一リポジトリ | /app(画面・API)、/db(マイグレーション)、/docs(本仕様書等) |
詳細な列設計は実装フェーズで確定させる前提の概要レベル。
| テーブル | 主なカラム | 役割 |
|---|---|---|
| User | id, email, password_hash, name | 会員情報 |
| Address | id, user_id, postal_code, prefecture, city, line1 | 配送先住所(複数登録可) |
| Category | id, name, slug, parent_id | 商品カテゴリ(階層可) |
| Product | id, category_id, name, slug, description, base_price | 商品(親) |
| ProductVariant | id, product_id, size, color, sku, stock_quantity | サイズ×カラーの在庫単位 |
| ProductImage | id, product_id, url, sort_order | 商品画像 |
| Cart / CartItem | id, user_id, variant_id, quantity | カート(ゲスト対応) |
| Order / OrderItem | id, order_number, status, total, shipping_fee, payment_method, payment_intent_id, payment_due_at, carrier, tracking_number | 注文(statusに「入金待ち」を含む。payment_due_atで7日後の自動キャンセル判定。carrier/tracking_numberは出荷時に入力し発送通知メールへ記載) |
| Wishlist | id, user_id, product_id | お気に入り |
| Review | id, product_id, user_id, order_id, rating, comment, is_hidden | 購入者レビュー(管理画面で非表示化可) |
| Coupon | id, code, discount_type, discount_value, expires_at | クーポン(発行は管理画面) |
商品写真・商品説明文・会社情報は未準備とのことなので、まずダミーデータでサイト構造を完成させ、実素材が揃い次第差し替える二段階の進め方とする。
本仕様書の内容を確認・合意(完了)
配色・トーン3案+レイアウト5案を試作し比較のうえ1案を選定(資料はこちら)
GitHubリポジトリ作成、Cloudflare(Workers/D1/R2)連携、CI/CD設定
ダミーデータでトップ・一覧・詳細・会社概要等の静的画面を実装
カート、チェックアウト、Stripe決済、注文確定処理を実装
会員登録/ログイン、注文履歴、商品・注文管理画面を実装
レスポンシブ確認、パフォーマンス・アクセシビリティ調整
実コンテンツへの差し替え、独自ドメイン設定、法定表記の最終確認
| 項目 | 決定内容 |
|---|---|
| ブランド | 本番未定のためモック名「FADEN」・仮ロゴ(ワードマーク)・仮カラーで進行 |
| ゲスト購入 | 許可する(会員登録は任意) |
| 銀行振込の手数料 | 注文者負担 |
| 入金待ち注文の扱い | 7日を過ぎたら自動キャンセル |
| 送料 | 全国一律500円、沖縄・離島は+300円(合計800円) |
| お気に入り/レビュー/クーポン | すべて初期スコープに含める |
| 独自ドメイン | 現時点ではなし。今後取得予定 → 取得後にP7で設定 |
| 運営主体 | 個人。特定商取引法表記はモック情報で仮作成し、本番運用時に実データへ差し替え |
| 配送業者・追跡番号 | 初期スコープに含める。出荷時に管理画面で入力し、発送通知メールに記載 |
要確認事項はすべて解消。現在デザイン提案フェーズ(P1)。