# フリマアプリ テンプレート 要件定義書
## プロダクト名：Souzoh Market

> 「Claude Codeでフリマアプリを開発する方法と費用｜テンプレート配布【2026年】」記事のデモアプリ。
> **母艦テンプレート（Souzoh SNS）からの3本目**。前2本より固有画面が2つ多く、シリーズ中で最も重い1本です。

---

## 1. 目的とゴール

| 項目 | 内容 |
|---|---|
| コンセプト | 個人間で不用品を売買する、標準的なC2Cマーケットプレイス |
| 前2本との違い | SNS・Matchが「見て終わり」なのに対し、こちらは**購入 → 取引が進行する**。時間軸のあるUIが要る |
| 成功条件 | 読者が商品を1つ買い、取引画面のステッパーが動くところまで到達する |
| 非ゴール | 決済・配送・本人確認・手数料の実処理。すべてモックで通す |

**重さの正体**：固有画面が2つ（出品フォーム・取引画面）あり、さらに「購入前／購入後」で状態が分岐します。§9でセッションを5分割しているのはこのためです。

---

## 2. スコープ

### 2.1 作るもの

| # | 画面 | 優先度 | 母艦との関係 |
|---|---|---|---|
| K1 | 商品一覧（ホーム） | A | 母艦S1を2列グリッドに改修 |
| K2 | 商品詳細 | A | 母艦S2を改修 |
| K3 | 検索・絞り込み | A | 母艦S3を改修 |
| K4 | 出品フォーム | A | **新規**（母艦S6モーダルを全画面フォームに拡張） |
| K5 | 取引画面（ステッパー） | A | **新規** |
| K6 | マイページ | B | 母艦S5を改修 |
| K7 | 取引メッセージ | B | 母艦S7をそのまま流用 |
| K8 | 通知 | C | 母艦S4をそのまま流用（時間がなければ落とす） |

### 2.2 作らないもの

- ❌ バックエンド・DB・認証・データ永続化（母艦と同じ）
- ❌ 実決済・配送連携・住所の実バリデーション
- ❌ 手数料・売上金・振込の実処理
- ❌ 画像の実アップロード（ピッカーで選ぶモック）
- ❌ 通報・取引キャンセル・返品フロー
- ❌ ダークモード、多言語、テストコード

### 2.3 デモデータの注意（配布物なので重要）

**実在ブランド名・製品名を一切使いません。**「国産セルビッジデニムのジャケット」「北欧デザインのフロアランプ」のように、一般名詞＋特徴で表記します。テンプレートとして二次配布されるため、商標の混入は避けます。読者が自社商材に差し替える際もこのほうが編集しやすいです。

---

## 3. 技術構成

母艦と完全に同一。Vite + React 18（JSX）／Tailwind CSS v4／lucide-react／Cloudflare Pages。追加ライブラリなし。

**画像カルーセルも自前**です（`scroll-snap-type: x mandatory` ＋ ドットインジケータ。約30行）。ライブラリを足すと、後続アプリにも重さが伝播します。

---

## 4. デザイン仕様

### 4.1 方向性

SNSは密度を意図的に下げ、Matchはカード1枚に集中させました。**マーケットプレイスは逆で、密度が価値です。** 一覧で20点が視界に入ることが「掘り出し物がありそう」という感覚を作ります。ここは既存の型に素直に従います。

白地に細い罫線と2列グリッド。色数を極端に絞り、**画面上でいちばん強いのは価格の数字**という状態を作ります。緑は購入ボタンと在庫バッジにしか使いません。

**シグネチャー要素：取引ステッパー**
K5の縦一本のライン。`支払い完了 → 発送準備中 → 発送済み → 受取評価待ち → 取引完了` の5節を貫き、現在地のノードだけが緑でゆっくり脈打ちます。完了済みは実線、未到達は破線。
フリマの本質は「買った瞬間」ではなく「取引が進んでいく数日間」なので、アプリで唯一の演出をここに置きます。カードの装飾ではなく、時間の経過を表す構造に予算を使う判断です。

### 4.2 デザイントークン（`src/theme.css`）

```css
@theme {
  /* ---- Color ---- */
  --color-bg:        #FFFFFF;  /* 白基調。マーケットは商品の色が主役 */
  --color-surface:   #FFFFFF;
  --color-surface-2: #F3F4F1;  /* 画像プレースホルダ・入力欄 */
  --color-ink:       #101410;
  --color-ink-sub:   #6B706B;
  --color-line:      #E3E5E0;  /* 罫線が構造を作る。多用してよい唯一の線 */
  --color-accent:    #0A8F3C;  /* ビビッドグリーン：購入・出品・在庫 */
  --color-sale:      #E5484D;  /* 値下げ・残りわずか。ここぞでしか使わない */
  --color-sold:      #9AA09A;  /* SOLD時の脱色 */

  /* ---- Type ---- */
  --font-display: "Archivo", "Zen Kaku Gothic New", sans-serif;  /* 700/800 */
  --font-body:    "Noto Sans JP", sans-serif;                    /* 400/500 */
  --font-price:   "Archivo", sans-serif;                         /* 800 + tabular-nums */
  --font-num:     "Roboto Mono", monospace;                      /* 出品日・件数 */

  /* ---- Scale ---- */
  --text-price-lg: 30px/1.1;   /* 詳細画面の価格 */
  --text-price-sm: 17px/1.2;   /* 一覧カードの価格 */
  --text-title:    18px/1.45;
  --text-body:     14px/1.75;
  --text-meta:     11px/1.4;

  /* ---- Space ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* ---- Shape ---- */
  --radius-card:  12px;   /* 前2本(20/24px)より小さく。商品を「陳列」する硬さ */
  --radius-input: 10px;
  --radius-pill:  999px;
  --shadow-card:  none;   /* ★影を使わない。罫線と余白だけで階層を作る */
  --shadow-pop:   0 12px 40px rgba(16,20,16,.16);  /* モーダルのみ */
}
```

> **`--shadow-card: none` は意図的です。** 一覧に20枚のカードが並ぶとき、全部に影が付くと画面がざらつきます。罫線1本のほうが密度に耐えます。

**価格の表記ルール（全画面で統一）**

```
¥12,800    ← --font-price / 800 / tabular-nums / letter-spacing: -0.01em
送料込み   ← --text-meta / --color-ink-sub
```
値下げ時のみ、旧価格を `--color-ink-sub` の取り消し線で右に小さく添える。

### 4.3 レイアウト

| | 仕様 |
|---|---|
| モバイル（〜768px） | 2列グリッド、gap 8px。下部固定タブバー |
| PC（769px〜） | 中央 **960px**、4列グリッド。左に幅240pxの縦ナビ |
| 商品カード | 正方形画像 ＋ 直下に価格（太字）＋ 商品名2行まで（`line-clamp: 2`） |
| SOLDカード | 画像を `grayscale(1) opacity(.55)`、左上に `SOLD` の黒帯 |
| 詳細の画像 | 1:1、横スワイプのカルーセル ＋ 下部ドット |
| `prefers-reduced-motion` | ステッパーの脈打ちを停止 |

> ★PCの中央幅が前2本（600px / 400pxカード）と違うのは、グリッドの列数を稼ぐためです。`shell/` の最大幅を `app.config.js` から指定できるよう、**母艦側に `layout.maxWidth` を追加**してください（他2本には影響しません）。

### 4.4 画像

母艦と同一。`image.seed` からグラデーションを決定的に生成し、`public/images/{seed}.jpg` を置けば実写に差し替わります。

**このアプリだけは実写を推奨します。** 商品写真がグラデーションだと「フリマらしさ」が出ません。記事公開前に、一覧の上位8点だけでも差し替えると見栄えが変わります。

---

## 5. 画面仕様

### K1. 商品一覧（ホーム）

- ヘッダー：検索バー（常時表示）／通知アイコン
- カテゴリチップ横スクロール：`すべて / レディース / メンズ / 家電 / インテリア / 本・音楽 / ホビー / ハンドメイド / アウトドア / ベビー`
- 2列グリッド。無限スクロールで既存データをシャッフル追加（最大2回）
- カード左下に♡（タップでトグル、数字連動）
- 初回ロード：スケルトン500ms

### K2. 商品詳細

上から順に：
1. 画像カルーセル（1:1、ドット付き）。SOLD時は帯を重ねる
2. 商品名 ／ 価格（`--text-price-lg`）／ `送料込み` タグ
3. 属性テーブル：`カテゴリ` `状態` `配送方法` `発送目安` `出品地域`
4. 商品説明（改行保持）
5. 出品者行：アバター・名前・`評価 128件`・`本人確認済み`バッジ。タップでその人の出品一覧へ
6. コメント欄（3〜5件）＋ 投稿フォーム
7. **下部固定バー**：♡ ／ `値下げを依頼` ／ `購入手続きへ`（緑・幅の6割）

**値下げ依頼**：タップ → 3択（`10%` `15%` `20%` オフ）→ 送信 → 1.5秒後に出品者から自動返信。

- 10% → 承諾。価格が更新され、旧価格に取り消し線が付く ＋ トースト「値下げされました」
- 15% / 20% → やんわり辞退（「送料を負担しているので、これ以上は難しいです」）

> ここがこのアプリで一番"生きている"瞬間になります。優先度Aです。

**購入手続き**（2ステップのモーダル）

1. 配送先の確認（ダミー住所がプリセット済み。`変更`押下でトースト「デモでは変更できません」）＋ 支払い方法の3択ラジオ
2. 内容確認 → `購入を確定する` → 成功アニメーション → **K5取引画面へ自動遷移**

SOLD商品では下部バーが `売り切れました` の非活性表示に変わる。

### K3. 検索・絞り込み

- 検索バー：入力に応じて商品名・説明を部分一致で絞り込み
- 絞り込みパネル（下からせり上がる）：`カテゴリ` `価格帯（下限・上限）` `状態` `販売状況（売り切れを含む／含まない）`
- 並び替え：`新着順` / `価格が安い順` / `価格が高い順` / `いいねが多い順`
- 適用中の条件をチップで表示、×で個別解除
- 空状態：「条件に合う商品がありません」＋ `価格帯を広げる` ボタン

### K4. 出品フォーム ★固有画面

全画面フォーム。上から：

| # | 項目 | 仕様 |
|---|---|---|
| 1 | 写真 | 4枠のプレースホルダ。タップでダミー画像ピッカー（6枚から選択）。1枚目が必須 |
| 2 | 商品名 | 40字。カウンター表示 |
| 3 | 説明 | 1000字。プレースホルダに記入例を薄く表示 |
| 4 | カテゴリ | セレクト（K1と同じ9分類） |
| 5 | 状態 | 5択チップ：`新品・未使用` `未使用に近い` `目立った傷や汚れなし` `やや傷や汚れあり` `全体的に状態が悪い` |
| 6 | 配送料の負担 | 2択：`送料込み（出品者負担）` / `着払い（購入者負担）` |
| 7 | 発送目安 | 3択：`1〜2日で発送` `2〜3日で発送` `4〜7日で発送` |
| 8 | 価格 | 数値入力。**300円以上9,999,999円以下**。下に手数料内訳をリアルタイム表示 |

**手数料の内訳表示（K4の見せ場）**

```
販売価格        ¥ 3,500
販売手数料 10%  − ¥ 350
配送料の目安    − ¥ 750
────────────────────
販売利益        ¥ 2,400   ← --color-accent で強調
```

価格を入力するたびに即座に再計算。**数字が動くだけでフォームの説得力が変わります。** 実装は掛け算1行です。

- 下部固定：`出品する`（必須項目が埋まるまで非活性）
- 出品成功 → K1先頭に自分の商品が挿入 ＋ トースト ＋ マイページの「出品中」に追加

### K5. 取引画面 ★固有画面・シグネチャー

**上部**：商品サムネ・商品名・価格・取引相手

**中央：縦ステッパー**

| 節 | 表示内容 |
|---|---|
| 1 支払い完了 | 日時・支払い方法 |
| 2 発送準備中 | 「出品者が発送準備をしています」 |
| 3 発送済み | 追跡番号（ダミー）・`配送状況を見る`（トースト） |
| 4 受取評価待ち | `受け取りを完了する` ボタン（緑） |
| 5 取引完了 | 評価の記録 |

- 完了済み：実線・緑の塗りノード／現在地：緑の輪郭 ＋ 2.4秒周期でゆっくり脈打つ／未到達：破線・グレー
- **`受け取りを完了する` を押すと**：評価モーダル（`良かった` / `普通` / `悪かった` の3択 ＋ コメント任意）→ 送信 → ステッパーが5まで進み、緑のラインが下まで繋がるアニメーション（600ms）

> ★このアプリでは取引評価を入れます。Matchで星評価を外したのは実体のない信用の可視化だったからで、こちらは**完了した取引が根拠になる**ので筋が通ります。

**下部**：`取引メッセージ`（K7を開く）

**デモの進行**：既存取引2件はそれぞれ「発送準備中」「受取評価待ち」の状態で用意。新規購入した商品は1秒後に自動で2へ、さらに4秒後に3へ進みます（読者が待たずに全ノードを見られる）。

### K6. マイページ

- タブ：`出品中` / `売却済み` / `購入した商品` / `いいね`
- 上部に簡易サマリー：`出品中 4` `取引中 2` `売上金 ¥14,300`（`--font-price`）
- 各アイテムはリスト形式（一覧のグリッドとは別レイアウト）。取引中のものはタップでK5へ

### K7. 取引メッセージ

母艦S7をそのまま流用。取引画面から開く。送信1.2秒後に `autoReply` から定型返信。

---

## 6. データモデル

```js
// item
{ id:"i01", title:"国産セルビッジデニムのジャケット",
  price:8800, prevPrice:null,          // 値下げ後に旧価格が入る
  category:"メンズ",
  condition:"目立った傷や汚れなし",
  shipping:"送料込み", shipDays:"1〜2日で発送", area:"東京都",
  description:"...",                    // 改行を含む
  images:[{seed:"denim-jacket-1"},{seed:"denim-jacket-2"}],
  sellerId:"s02", likes:34, liked:false,
  status:"onsale"|"sold",
  listedAt:"2026-07-19T10:30:00+09:00",
  comments:[{ userId:"s05", body:"...", at:"..." }] }

// seller
{ id:"s02", name:"みなと古物店", ratings:128, verified:true, area:"東京都" }

// transaction
{ id:"t01", itemId:"i21", role:"buyer"|"seller",
  step:2,                               // 1〜5
  paidAt:"...", method:"クレジットカード",
  tracking:"4912-8830-1177",
  messages:[{ from:"me"|"them", body:"...", at:"14:02" }],
  autoReply:["ありがとうございます、明日発送します","発送しました！"] }

// 手数料計算（定数は1箇所にまとめ、JSXに数値を書かない）
fee      = Math.floor(price * FEE_RATE)        // FEE_RATE = 0.10
shipCost = shipping === "送料込み" ? SHIP_COST : 0   // SHIP_COST = 750
profit   = price - fee - shipCost
```

---

## 7. デモデータ

### 7.1 出品者（8名）

| id | 名前 | 評価件数 | 本人確認 | エリア |
|---|---|---|---|---|
| s00 | あなた | 12 | ✓ | 東京都 |
| s01 | 森のちいさな倉庫 | 341 | ✓ | 長野県 |
| s02 | みなと古物店 | 128 | ✓ | 東京都 |
| s03 | ひなた | 46 | — | 大阪府 |
| s04 | 陶ト暮ラス | 89 | ✓ | 岐阜県 |
| s05 | ヨシダ | 7 | — | 福岡県 |
| s06 | 本棚の整理中 | 213 | ✓ | 神奈川県 |
| s07 | camp_and_coffee | 64 | ✓ | 静岡県 |

### 7.2 商品（24点）

| id | 商品名 | カテゴリ | 価格 | 状態 | 出品者 | 送料 | ♡ | 販売状況 |
|---|---|---|---|---|---|---|---|---|
| i01 | 国産セルビッジデニムのジャケット | メンズ | 8,800 | 目立った傷や汚れなし | s02 | 込み | 34 | 販売中 |
| i02 | 北欧デザインのフロアランプ | インテリア | 12,500 | 未使用に近い | s01 | 込み | 89 | 販売中 |
| i03 | 手びねりの粉引マグカップ 2客セット | ハンドメイド | 3,500 | 新品・未使用 | s04 | 込み | 57 | 販売中 |
| i04 | ドリップ用の細口ケトル 0.9L | 家電 | 4,200 | 目立った傷や汚れなし | s07 | 込み | 22 | 販売中 |
| i05 | 無垢材のローテーブル 幅90cm | インテリア | 18,000 | やや傷や汚れあり | s01 | 着払い | 41 | 販売中 |
| i06 | ウール混のチェスターコート M | レディース | 6,900 | 目立った傷や汚れなし | s03 | 込み | 76 | 販売中 |
| i07 | 建築とデザインの写真集 3冊まとめ | 本・音楽 | 2,800 | やや傷や汚れあり | s06 | 込み | 18 | 販売中 |
| i08 | 2人用の軽量テント 総重量1.9kg | アウトドア | 21,000 | 未使用に近い | s07 | 込み | 133 | 販売中 |
| i09 | 真鍮のデスクトレー | インテリア | 2,400 | 新品・未使用 | s04 | 込み | 29 | 販売中 |
| i10 | リネン100%のワイドパンツ | レディース | 3,200 | 目立った傷や汚れなし | s03 | 込み | 44 | 販売中 |
| i11 | 卓上のミニ扇風機 USB給電 | 家電 | 1,500 | 未使用に近い | s05 | 込み | 11 | 販売中 |
| i12 | 木製のパズル 48ピース（3歳〜） | ベビー | 1,800 | 目立った傷や汚れなし | s03 | 込み | 25 | 販売中 |
| i13 | 昭和期のガラス製保存瓶 3点 | ホビー | 5,600 | やや傷や汚れあり | s02 | 込み | 68 | 販売中 |
| i14 | アナログレコード 邦楽 5枚セット | 本・音楽 | 4,400 | 目立った傷や汚れなし | s06 | 込み | 37 | 販売中 |
| i15 | 焚き火用の折りたたみグリル | アウトドア | 7,800 | やや傷や汚れあり | s07 | 着払い | 52 | 販売中 |
| i16 | 織りのラグ 140×200cm | インテリア | 14,000 | 未使用に近い | s01 | 着払い | 95 | 販売中 |
| i17 | 刺し子のふきん 3枚組 | ハンドメイド | 1,200 | 新品・未使用 | s04 | 込み | 16 | 販売中 |
| i18 | レザーのトートバッグ A4対応 | メンズ | 9,600 | 目立った傷や汚れなし | s02 | 込み | 71 | 販売中 |
| i19 | ホーローの片手鍋 16cm | 家電 | 2,900 | 未使用に近い | s05 | 込み | 20 | 販売中 |
| i20 | 児童書 まとめて12冊 | 本・音楽 | 2,200 | やや傷や汚れあり | s06 | 込み | 9 | 販売中 |
| i21 | 手編みのニットキャップ | ハンドメイド | 2,600 | 新品・未使用 | s04 | 込み | 33 | **SOLD** |
| i22 | 折りたたみの木製チェア | アウトドア | 5,200 | 目立った傷や汚れなし | s07 | 込み | 47 | **SOLD** |
| i23 | ベビーカー用のフットマフ | ベビー | 3,800 | 未使用に近い | s03 | 込み | 14 | **SOLD** |
| i24 | 古い地図帳 1970年代 | ホビー | 6,000 | やや傷や汚れあり | s02 | 込み | 58 | **SOLD** |

**商品説明の例**（i03。この温度感で全点用意）

```
ろくろではなく手びねりで成形しています。
ひとつずつ形が少し違うので、写真の2客をそのままお送りします。

容量：約240ml
高さ：約8.5cm

電子レンジ・食洗機ともに使えます。
粉引のため、使い込むと少しずつ色が変わっていきます。
```

### 7.3 コメント（i02・i08・i16 に付与）

| itemId | 投稿者 | 本文 |
|---|---|---|
| i02 | s05 | 電球は付属しますか？ |
| i02 | s01 | 付属しません。E26の口金です |
| i08 | s03 | 前室の広さはどのくらいでしょうか |
| i08 | s07 | 実測で幅120cm×奥行65cmほどです |
| i08 | s03 | ありがとうございます、検討します |
| i16 | s06 | 裏面の滑り止めは付いていますか |
| i16 | s01 | 付いていません。別途ラグパッドをおすすめします |

### 7.4 進行中の取引（2件）

| id | 商品 | 立場 | 現在の節 | 相手 | autoReply |
|---|---|---|---|---|---|
| t01 | i21 手編みのニットキャップ | 購入者 | 2 発送準備中 | s04 陶ト暮ラス | 「明日の午前に発送します」／「発送しました。追跡番号をお送りします」 |
| t02 | i22 折りたたみの木製チェア | 購入者 | 4 受取評価待ち | s07 camp_and_coffee | 「無事に届きましたでしょうか」／「ありがとうございました！」 |

### 7.5 マイページ初期値

- 出品中：`i09` `i17` ＋ 自分の出品2点（`i25` ワークシャツ 4,200円 ／ `i26` 帆布のエプロン 3,300円）
- 売却済み：1点（`i27` 木製のカッティングボード 2,800円）
- 売上金：`¥14,300`
- いいね：`i02` `i08` `i16`

---

## 8. ディレクトリ構成

```
souzoh-market/
├── public/images/          ← ★実写推奨（上位8点だけでも）
├── src/
│   ├── theme.css           ★差し替え済み（§4.2）
│   ├── app.config.js       ★差し替え（下記）
│   ├── data/
│   │   ├── items.js  sellers.js  transactions.js  me.js
│   ├── components/ui/      ← 母艦からコピー。触らない
│   │   ├── Price.jsx                ← ★追加：価格表記の統一（送料込み・取り消し線）
│   │   ├── Carousel.jsx             ← ★追加：scroll-snapの画像カルーセル
│   │   └── Stepper.jsx              ← ★追加：縦ステッパー
│   ├── components/shell/   ← 母艦からコピー（layout.maxWidth 対応を追加）
│   ├── features/
│   │   ├── browse/         ← 母艦 timeline/ を改修
│   │   ├── item-detail/    ← 母艦 post-detail/ を改修
│   │   ├── search/  my-page/  notifications/
│   │   ├── listing/        ★新規：出品フォーム
│   │   ├── checkout/       ★新規：購入モーダル
│   │   ├── transaction/    ★新規：取引画面
│   │   └── chat/           ← 母艦 dm/ をそのまま
│   ├── store.js
│   └── main.jsx
└── README.md
```

```js
// app.config.js
export default {
  appName: "Souzoh Market",
  tagline: "使わなくなったものに、次の人を",
  layout: { maxWidth: 960, gridCols: { sm: 2, lg: 4 } },
  nav: [
    { key:"browse",  label:"さがす",     icon:"Search" },
    { key:"likes",   label:"いいね",     icon:"Heart" },
    { key:"listing", label:"出品",       icon:"PlusSquare" },
    { key:"notify",  label:"お知らせ",   icon:"Bell" },
    { key:"mypage",  label:"マイページ", icon:"User" },
  ],
  labels: {
    listTitle: "みんなの出品",
    itemNoun: "商品",
    createCta: "出品する",
    primaryAction: "いいね",
  },
};
```

> ★`nav` の中央が「出品」なのは意図的です。フリマアプリで最も価値の高い行動は出品であり、タブバーの中央は最も押しやすい位置です。SNSの投稿FABと同じ思想を、このアプリではタブに埋め込みます。

---

## 9. 実装手順（Claude Codeへの投げ方）

**このアプリだけ5分割です。** 固有画面が2つあり、購入前後で状態が分岐するためです。

| Session | やること | 冒頭で読ませるもの |
|---|---|---|
| 0 | 母艦を複製 → `theme.css` `app.config.js` `data/` を差し替え、`shell/` に `layout.maxWidth` 対応を追加。**画面は触らずビルドを通す** | §4.2・§7・§8 |
| 1 | `ui/` に Price / Carousel / Stepper を追加 ＋ K1一覧 | §4.2・§4.3・§5(K1) |
| 2 | K2商品詳細（値下げ依頼まで） | §5(K2)・§6 |
| 3 | K4出品フォーム（手数料内訳を含む） | §5(K4)・§6 |
| 4 | K5取引画面 ＋ 購入モーダル ＋ K7チャット接続 | §5(K2購入手続き・K5)・§7.4 |
| 5 | K3検索 ＋ K6マイページ ＋ K8通知 ＋ 仕上げ | §5(K3,K6)・§10 |

**Session 1で `ui/` の3点を先に作り切ってください。** Price と Stepper は後続の全画面から呼ばれます。ここを後回しにすると、各画面で微妙に違う価格表記が量産され、統一の手戻りが発生します。前2本より部品が多い分、この順序がそのまま費用に効きます。

**Session 3 の指示文テンプレ**：

```
添付の要件定義書 §5(K4) と §6 の手数料計算を実装してください。
src/components/ui/ の Price コンポーネントは完成済みです。金額表示は必ずこれを使ってください。
手数料率と配送料の目安は定数として1箇所にまとめ、JSX内に数値を直接書かないでください。
色・余白・角丸は src/theme.css の変数のみを使ってください。
実装前に、作成・変更するファイルの一覧だけ先に提示してください。
```

---

## 10. 受け入れ基準

- [ ] 一覧 → 詳細 → 購入 → 取引画面 が一続きで通る
- [ ] 値下げ依頼の10%で価格が更新され、旧価格に取り消し線が付く
- [ ] 出品フォームで価格を入力すると、販売利益が即座に再計算される
- [ ] 必須項目が埋まるまで `出品する` が非活性
- [ ] 出品するとK1先頭とマイページ「出品中」の両方に反映される
- [ ] 取引ステッパーが 2 → 3 へ自動で進み、受取評価で5まで到達する
- [ ] SOLD商品はグレースケール＋帯で表示され、購入できない
- [ ] 絞り込みの条件チップが個別に解除できる
- [ ] 価格表記が全画面で同一（`Price` コンポーネント経由）
- [ ] 実在ブランド名がデータに1つも含まれていない
- [ ] 375px幅と1440px幅で崩れない
- [ ] `prefers-reduced-motion: reduce` でステッパーの脈打ちが止まる
- [ ] `npm run build` が警告なく通り、Cloudflare Pagesで表示される

---

## 11. 母艦テンプレからの再利用率

| 領域 | 扱い |
|---|---|
| `components/ui/` 8点 | そのまま ＋ **3点追加**（Price / Carousel / Stepper） |
| `components/shell/` | ほぼそのまま（`layout.maxWidth` 対応のみ追加。母艦にも還元する） |
| `store.js` | 骨格そのまま。取引の状態遷移だけ新規 |
| チャット（K7）・通知（K8） | **そのまま** |
| 一覧・詳細・検索・マイページ | 構造流用、中身差し替え |
| 出品フォーム・購入・取引（K4・K5） | **完全新規** |

前2本より重いのは事実ですが、**重いのは3画面だけ**です。残りは母艦がそのまま効きます。

---

## 12. 補足：コスト感

シリーズ中で最も掛かる1本です。掛かる場所は事前に分かっていて、①出品フォームのバリデーション条件分岐、②取引ステッパーの状態遷移、の2点。どちらも**仕様が曖昧だと往復が伸びる**タイプなので、本書では必須項目・節の名前・自動進行の秒数まで数値で確定させています。そのまま渡せば追加の質問はほぼ出ないはずです。

逆にここで作った Price / Carousel / Stepper は、**デリバリー（注文ステータス）と学習（進捗）でそのまま再利用できます**。残り2本が軽くなる投資でもあるので、この順番で作る価値があります。


---

## 付録　本番運用に向けて（ソウゾウ合同会社より）

> **この章は実装の対象ではありません。Claude Code は、この章の内容を実装しないでください。** 要件定義書を読んでいる方へのご案内です。

この要件定義書は、画面と動きを確かめるための**デモ**として書かれています。社内やお客さまに実際に使ってもらうには、次の4つが別に必要です。

| 項目 | デモでは | 本番では |
|---|---|---|
| データの保存 | データはその端末のブラウザの中にしか残りません。ほかの端末やほかの人とは共有されず、消えることもあります。 | サーバーのデータベースに保存し、バックアップと復元ができるようにします。 |
| セキュリティ | ログインがなく、誰でもすべての画面とデータを見られます。 | ログイン、権限（誰が何を見られるか）、通信とデータの暗号化、不正なアクセスへの対策を入れます。 |
| ガバナンス（運用ルール） | 決めていません。 | 誰がいつ何をしたかの記録、個人情報の扱い（プライバシーポリシー・同意）、アカウントの発行と削除、障害のときの連絡体制を決めます。 |
| 公開・デプロイ | 手元で動かすか、デモとして公開するだけです。 | 独自ドメイン、本番とテストの環境分け、更新の手順、監視と障害対応、月々の費用の管理を整えます。 |

本番運用をお考えの方は、ぜひ一度ご相談ください。最適なプランのご紹介と、進め方をお伝えします。

- 日程を選んで相談する（代表 西澤）：https://vszh6zudz50.jp.larksuite.com/scheduler/e7fecdad1a756dbe
- 公式LINE：https://lin.ee/UNwvWjp
- お問い合わせフォーム：https://service.souzoh-official.com/contact/