フリマアプリ テンプレート 要件定義書

プロダクト名：Souzoh Market

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

1. 目的とゴール

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

2. スコープ

2.1 作るもの

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）

@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 レイアウト

★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. 出品フォーム ★固有画面

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

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

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

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

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

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

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

中央：縦ステッパー

• 完了済み：実線・緑の塗りノード／現在地：緑の輪郭 ＋ 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. データモデル

// 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名）

7.2 商品（24点）

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

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

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

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

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

7.4 進行中の取引（2件）

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

// 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 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. 母艦テンプレからの再利用率

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

12. 補足：コスト感

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

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