マッチングアプリ テンプレート 要件定義書

プロダクト名：Souzoh Match

「Claude Codeでマッチングアプリを開発する方法と費用｜そのまま使えるテンプレート配布【2026年】」記事のデモアプリ。 母艦テンプレート（Souzoh SNS）からの2本目。共通基盤を流用し、固有画面のみ新規実装します。

1. 目的とゴール

想定シーン：デザイナーが「フロント実装を手伝ってほしい」、エンジニアが「UIを見てほしい」。この2人が噛み合う。求人でも恋愛でもない、対等な交換のマッチングです。

2. スコープ

2.1 作るもの

2.2 作らないもの

• ❌ バックエンド・DB・認証・データ永続化（母艦と同じ）
• ❌ 本物の推薦アルゴリズム（タグの重なり数で算出。むしろ仕組みが見えるほうがデモとして良い）
• ❌ 通報・ブロック・本人確認・課金
• ❌ ダークモード切替、多言語、テストコード
• ❌ スワイプの物理演算（慣性・回転は CSS transform で十分）

3. 技術構成

母艦と完全に同一。Vite + React 18（JSX）／Tailwind CSS v4／lucide-react／Cloudflare Pages。

1つだけ追加：スワイプのドラッグ判定に Pointer Events を素で使います（ライブラリ不要、約60行）。

4. デザイン仕様

4.1 方向性

母艦SNSが「明るい背景に浮かぶカード」だったのに対し、こちらは深いプラム地の"ステージ"に白いカードが1枚だけ立つ構成。視線をカード1枚に集中させます。

配色は当初案のコーラル×ピンクから変更しました。あの組み合わせは恋愛マッチングの記号そのもので、今回の非恋愛コンセプトと真っ向からぶつかるためです。代わりにアンバー＋エメラルドを採用し、「取引・交換」の温度感に寄せています。

シグネチャー要素：重なりリング カード右上の円弧。自分の「力を借りたいこと」と相手の「できること」が何個重なっているかを弧の長さで表示し、タップすると一致したタグだけが発光します。マッチ率を数字で出すより、なぜ勧められたのかが一目でわかる。ここだけに演出を集中させ、他は静かに保ちます。

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

@theme {
  /* ---- Color ---- */
  --color-bg:        #201C2E;  /* ディーププラム：カードが立つ舞台 */
  --color-surface:   #FFFFFF;  /* カード面 */
  --color-surface-2: #2E2842;  /* 背景上のパネル・入力欄 */
  --color-ink:       #17161F;  /* カード内テキスト */
  --color-ink-sub:   #6E6B7E;
  --color-ink-inv:   #F3F1F8;  /* 暗背景上のテキスト */
  --color-line:      #E6E4EC;
  --color-accent:    #FFB020;  /* アンバー：気になる・CTA */
  --color-accent-sub:#2ED3A0;  /* エメラルド：マッチ成立・一致タグ */
  --color-skip:      #8B85A3;  /* 見送る（赤にしない。拒絶の記号を避ける） */

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Zen Kaku Gothic New", sans-serif; /* 700 */
  --font-body:    "Noto Sans JP", sans-serif;                               /* 400/500 */
  --font-num:     "Space Grotesk", monospace;                               /* 一致数・稼働時間 */

  /* ---- Scale ---- */
  --text-display: 30px/1.25;
  --text-title:   19px/1.45;
  --text-body:    15px/1.75;
  --text-meta:    12px/1.4;

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

  /* ---- Shape ---- */
  --radius-card:  24px;   /* 母艦の20pxより大きく：カードが主役なので */
  --radius-input: 14px;
  --radius-pill:  999px;
  --shadow-card:  0 24px 60px rgba(0,0,0,.35);   /* 暗背景なので影は強め */
  --shadow-pop:   0 12px 40px rgba(0,0,0,.45);
}

--color-skip を赤にしないのは意図的です。恋愛アプリの「×」は拒絶ですが、ここでは「今回は縁がなかった」だけ。ニュートラルグレーで温度を下げます。

4.3 レイアウト

4.4 画像

母艦と同一。アバターはIDから決定的に生成したグラデーション円＋頭1文字。public/images/{id}.jpg を置けば実写に差し替わります。

5. 画面仕様

M1. 探す（スワイプカードスタック）★固有画面

カードの中身（上から）

1. アバター（72px）＋ 氏名 ＋ 肩書き ＋ エリア
2. 重なりリング（右上・48px）：一致数を弧で表示。中央に--font-numで数字
3. 一言（1〜2行）
4. できること チップ群 — 一致したものは --color-accent-sub の地に白文字
5. 力を借りたいこと チップ群 — 同上
6. 稼働：週2〜3時間 / 平日夜 など

操作

ドラッグ中のフィードバック：移動量80pxを超えたら、進行方向にラベル（気になる / 見送る）がフェードイン。カードは移動量に応じて最大12度傾く。

マッチ成立演出：u01 / u05 / u09 を右スワイプすると必ず発火。暗転オーバーレイ＋2つのアバターが中央で寄り、マッチしました ＋ 一致タグを表示。メッセージを送る / 続けて探す の2択。

カードが尽きたら：空状態「今日はここまでです」＋条件を変えて探す（M3へ）。

M2. プロフィール詳細

• カード内容の全量表示。スクロール
• これまでの共創：3件を箇条書き（例：「ECサイト構築 × 商品撮影」）
• 一致タグを画面上部にサマリー表示
• 下部固定：見送る / 興味を送る

★評価スコアやレビューは入れません。実体のない星は信頼を作らず、デモの誠実さを落とします。

M3. 一覧・絞り込み

• 上部フィルタバー：分野（開発／デザイン／映像／士業／その他）・エリア（オンライン可を含む）・稼働時間帯
• 2列カードグリッド（PCは3列）。カードは縮小版
• 並び替え：一致数が多い順 / 新着順
• 空状態：「条件に合う人が見つかりません」＋フィルタを1つ外す提案ボタン

M4. マッチ／届いた興味

• タブ：マッチ / 届いた興味
• マッチ：横スクロールのアバター列（新着）＋ 下に会話一覧
• 届いた興味：相手のカード＋添えられた一言。ありがとう、話したい / 今回は見送る の2択。承諾するとマッチ成立演出を再利用
• 未対応は左端に3pxのアンバーバー

M5. マイプロフィール

• 自分の できること / 力を借りたいこと をチップで編集（追加・削除は動く）
• 編集すると M1 の重なりリングの数字がリアルタイムで変わる ← 仕組みが伝わる仕掛け。ここは必ず動かしてください
• 稼働時間帯のセレクト

M6. 興味を送るモーダル

• ボトムシート（PCは中央モーダル）
• 相手カードの縮小版を上部に固定
• 一言（120字カウンター）。プレースホルダは「一緒にやりたいことを一言で」
• 定型文チップ3つ（話を聞いてみたいです / お互いに補い合えそうです / 具体的な相談があります）→ タップで本文に挿入
• 送信 → シート下降 ＋ トースト「興味を送りました」

M7. チャット

母艦S7をそのまま流用。自分＝右・アンバー地に濃紺文字、相手＝左・白地。送信1.2秒後に autoReply から定型返信。

6. データモデル

// person
{ id:"u01", name:"及川 涼", role:"プロダクトデザイナー",
  area:"東京・中央区", online:true,
  intro:"...",
  canDo:["UIデザイン","Figma","プロトタイピング"],
  wantTo:["フロントエンド実装","個人開発の壁打ち"],
  field:"デザイン",
  availability:"週2〜3時間 / 平日夜",
  works:["ECサイトのUI × 商品撮影","予約システムのUI設計"] }

// me（u00）
{ ...person, canDo:["ノーコード開発","業務自動化","Claude Code"],
  wantTo:["UIデザイン","LPコピー","商品撮影"] }

// 一致数の算出（これだけ。ブラックボックスにしない）
overlap = me.wantTo ∩ person.canDo  →  リングに表示
mutual  = person.wantTo ∩ me.canDo  →  「相互に補える」バッジ

// match
{ personId:"u01", matchedAt:"...", unread:2,
  messages:[{ from:"me"|"them", body:"...", at:"14:02" }],
  autoReply:["ありがとうございます！","来週あたりどうですか？"] }

// incomingInterest
{ personId:"u07", message:"...", receivedAt:"...", status:"pending" }

7. デモデータ

7.1 人物（14名）

できること と 力を借りたいこと が噛み合うペアを意図的に仕込んでいます（及川↔早瀬、桜庭↔富永、宮下↔千葉）。カードをめくるうちに「あ、この2人つながるな」と読者が気づく設計です。

一言（intro）

7.2 スワイプデッキ初期順

u09 → u01 → u10 → u05 → u13 → u03 → u08 → u11 → u07 → u04 → u12 → u14

1枚目の u09（早瀬） は自分の wantTo:UIデザイン と重ならず一致数1、2枚目の u01（及川） が一致数2。最初の2枚で「リングの数字が変わる」ことを体感させる意図的な並びです。

7.3 既存マッチ（4件）

7.4 届いた興味（3件・未対応）

8. ディレクトリ構成

母艦と同一。新規は features/swipe/ のみです。

souzoh-match/
├── public/images/
├── src/
│   ├── theme.css           ★差し替え済み（§4.2）
│   ├── app.config.js       ★差し替え（下記）
│   ├── data/
│   │   ├── people.js  matches.js  interests.js  me.js
│   ├── components/ui/      ← 母艦からそのままコピー。触らない
│   │   └── OverlapRing.jsx          ← ★このアプリで追加
│   ├── components/shell/   ← 母艦からそのままコピー
│   ├── features/
│   │   ├── swipe/          ★新規：CardStack.jsx / SwipeCard.jsx / MatchOverlay.jsx
│   │   ├── person-detail/  browse/  matches/  my-profile/
│   │   ├── interest/       ← 母艦 composer/ を改名
│   │   └── chat/           ← 母艦 dm/ をそのまま
│   ├── store.js
│   └── main.jsx
└── README.md

// app.config.js
export default {
  appName: "Souzoh Match",
  tagline: "「できる」と「借りたい」で、人はつながる",
  nav: [
    { key:"swipe",   label:"探す",         icon:"Layers" },
    { key:"browse",  label:"一覧",         icon:"LayoutGrid" },
    { key:"matches", label:"マッチ",       icon:"Handshake" },
    { key:"chat",    label:"メッセージ",   icon:"Mail" },
    { key:"me",      label:"プロフィール", icon:"User" },
  ],
  labels: {
    listTitle: "あなたと補い合える人",
    itemNoun: "人",
    createCta: "興味を送る",
    primaryAction: "気になる",
  },
};

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

母艦があるので3セッションで足ります。

Session 0 を必ず独立させてください。 ここでビルドが通ることを確認してから画面に入ると、後段のエラーが「新規実装のせい」だと確定でき、原因切り分けの往復が消えます。母艦方式で一番効くのがこの一手です。

Session 1 の指示文テンプレ：

添付の要件定義書 §4.1・§4.3・§5(M1) を実装してください。
src/components/ui/ と src/store.js は完成済みです。新規作成せず import して使ってください。
スワイプは Pointer Events のみで実装し、ライブラリを追加しないでください。
色・余白・角丸は src/theme.css の変数のみを使ってください。
実装前に、作成・変更するファイルの一覧だけ先に提示してください。

10. 受け入れ基準

• ドラッグ・ボタン・キーボードの3経路でスワイプできる
• ドラッグ量に応じてカードが傾き、方向ラベルが出る
• 重なりリングの数字が、M5でタグを編集すると即座に変わる
• u01 / u05 / u09 の右スワイプでマッチ演出が出る
• ↩で直前の1枚だけ戻せる（2連続は不可）
• デッキが尽きると空状態が出て、M3への導線がある
• 届いた興味を承諾するとマッチに移り、チャットが開ける
• 375px幅と1440px幅で崩れない
• 生の色コードがJSX内に1つも無い
• prefers-reduced-motion: reduce で弾け演出が止まる
• npm run build が警告なく通り、Cloudflare Pagesで表示される

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

実質的な新規実装は1画面＋1コンポーネントです。§9のSession 0を守れば、ここまで圧縮できます。

12. 補足：コスト感

母艦がある分、SNS初回より軽くなります。ただしスワイプのドラッグ挙動だけは調整の往復が発生しやすい箇所です。「もう少し軽く」「戻りが速すぎる」といった感覚的な指示は費用がかさむので、閾値を数値で指定してください（判定80px / 傾き最大12度 / 復帰アニメ180ms / 退場220ms）。§4.3と§5(M1)にすでに数値で書いてあるので、そのまま渡せば1〜2回で決まります。