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

プロダクト名：Souzoh SNS

本書は「Claude CodeでSNSアプリを開発する方法と費用｜そのまま使えるテンプレート配布【2026年】」記事に添付するデモアプリの要件定義書です。 同時に、後続4本（マッチング／フリマ／デリバリー／学習）の母艦テンプレートを兼ねます。

1. 目的とゴール

2. スコープ

2.1 作るもの

2.2 作らないもの（明示的に除外）

• ❌ バックエンド・DB・認証（Supabase等は一切使わない）
• ❌ 画像アップロードの実保存
• ❌ 状態の永続化（localStorage不使用。リロードで初期状態に戻る＝デモとして正しい挙動）
• ❌ SSR / SEO対応 / OGP動的生成
• ❌ ダークモード、多言語、テストコード、CI
• ❌ 本格的なブレークポイント設計（後述の2段階のみ）

除外理由：この4行が「重くしない」の実体です。ここを守れば1アプリあたりの生成量が読めます。

3. 技術構成

Vite + React 18（JSX / TypeScriptは使わない）
Tailwind CSS v4（@theme でCSS変数を一元管理）
lucide-react（アイコン）
Framer Motion は使わない → CSS transition + Web Animations API で足りる
デプロイ：Cloudflare Pages

TypeScriptを外す理由：型エラーの往復がClaude Codeの消費で最も無駄が出る箇所です。デモアプリに型安全性のリターンはほぼありません。

Framer Motionを外す理由：バンドルサイズと、アニメ指定の試行錯誤が往復を生むため。必要な動きは10行のCSSで出ます。

4. デザイン仕様

4.1 方向性

Xの黒でもInstagramの白でもない、「余白の広い明るいUI ＋ インディゴ1色の強い差し色」。 カードは枠線を使わず、背景色の段差と大きめの角丸だけで階層を作ります。SNSにありがちな情報密度を意図的に下げ、1投稿を大きく見せる。スクショ映えを最優先した設計です。

シグネチャー要素：いいねボタン。押した瞬間にインディゴの円が弾けて数字がスライドカウントアップする。ここだけに手を掛け、他は静かに保ちます。

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

@theme {
  /* ---- Color ---- */
  --color-bg:        #F4F4F1;  /* ページ背景（ごく淡いウォームグレー） */
  --color-surface:   #FFFFFF;  /* カード面 */
  --color-surface-2: #EDEDE8;  /* 入力欄・非活性面 */
  --color-ink:       #17181C;  /* 本文 */
  --color-ink-sub:   #74757C;  /* メタ情報・タイムスタンプ */
  --color-line:      #E2E2DC;  /* 区切り線（極力使わない） */
  --color-accent:    #4A3AFF;  /* エレクトリックインディゴ：CTA・アクティブ */
  --color-accent-sub:#00BFA5;  /* ミント：通知バッジ・オンライン表示 */
  --color-danger:    #E5484D;

  /* ---- Type ---- */
  --font-display: "Outfit", "Zen Kaku Gothic New", sans-serif;  /* 700/600 */
  --font-body:    "Noto Sans JP", sans-serif;                   /* 400/500 */
  --font-num:     "DM Mono", monospace;                         /* カウント類 */

  /* ---- Scale ---- */
  --text-display: 28px/1.3;
  --text-title:   20px/1.4;
  --text-body:    15px/1.75;   /* 日本語なので行間広め */
  --text-meta:    12px/1.4;

  /* ---- Space（4の倍数で統一） ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* ---- Shape ---- */
  --radius-card:  20px;
  --radius-input: 14px;
  --radius-pill:  999px;
  --shadow-card:  0 1px 2px rgba(23,24,28,.04), 0 8px 24px rgba(23,24,28,.06);
  --shadow-pop:   0 12px 40px rgba(23,24,28,.14);
}

リスキン時はこのブロックの色とフォントだけ書き換えます。 例）フリマ＝--color-accent: #0A8F3C ＋ --color-bg: #FFFFFF、デリバリー＝--color-accent: #FF6A13 ＋ --color-bg: #101828。

4.3 レイアウト

4.4 画像の扱い（アセット0で成立させる）

投稿画像・アバターは実ファイルを用意しません。

• アバター：ユーザーIDから決定的に生成したグラデーション円 ＋ 名前の頭1文字（白抜き、--font-display）
• 投稿画像：image.seed 文字列をハッシュ化して2色を決め、45°グラデ ＋ 微細ノイズのSVGを描画。指定アスペクト比で表示
• 差し替え：public/images/{seed}.jpg を置くと自動で実写に切り替わる

<img src={`/images/${seed}.jpg`} alt=""
     onError={(e) => { e.currentTarget.style.display = 'none' }} />
{/* 下層にグラデーションのフォールバックが常時敷かれている */}

あとから実写を10枚放り込むだけで記事のスクショが一段良くなります。最初はやらなくて構いません。

5. 画面仕様

S1. タイムライン

• ヘッダー：ロゴ（左）／検索アイコン・DMアイコン（右）。スクロールで影が付く
• タブ：おすすめ / フォロー中（下線インジケータがスライド）
• 投稿カード：アバター・表示名・@ID・相対時刻／本文／画像（あれば）／タグチップ／アクション行
• アクション行：💬 返信数／🔁 リポスト数／♡ いいね数／🔖 保存
• 無限スクロール：末尾400pxで既存mockをシャッフル追加（最大3回、以降は「これで全部です」）
• 初回ロード：スケルトン600ms

S2. 投稿詳細

• 上部に元投稿を大きく（本文18px、絶対時刻表示）
• 統計行：リポスト 12 ・ いいね 84
• 返信スレッド：左に2pxのインデントライン
• 下部固定の返信入力 → 送信で即座に自分の返信が先頭に挿入（楽観更新）＋トースト「返信しました」

S3. 探す

• 検索バー：入力に応じてユーザー・タグをリアルタイム絞り込み（前方一致・部分一致）
• 人気タグ：チップ12個。投稿数を--font-numで併記
• 画像グリッド：3列・正方形クロップ。タップで S2 へ
• 空状態：「"◯◯" に一致する投稿はありません」＋人気タグへの導線

S4. 通知

• タブ：すべて / メンション
• 4種類（いいね／返信／フォロー／メンション）でアイコンと色を変える
• 未読は左端に3pxのミントバー。画面を開いて1.5秒後にフェードで既読化

S5. プロフィール

• カバー：グラデーション（高さ140px）／アバターは56px、カバーに-28pxで重ねる
• 表示名・@ID・bio・フォロー中/フォロワー数
• 自分＝プロフィールを編集（押すとトースト「デモでは編集できません」）、他人＝フォローするトグル
• タブ：投稿 / 返信 / いいね

S6. 投稿作成

• 下からせり上がるボトムシート（PCは中央モーダル）
• 本文（280字カウンター、260字超でオレンジ、280字超で赤＋送信不可）
• 画像追加ボタン → ダミー画像を3択から選ぶピッカー
• タグ入力：スペース区切りでチップ化
• 投稿 → シート下降 ＋ タイムライン先頭に挿入 ＋ トースト

S7. DM

• 一覧：アバター・名前・最新メッセージ1行・時刻・未読ドット
• 会話：自分＝右・インディゴ地に白文字、相手＝左・白地。角丸は連続時に片側を潰す
• 送信すると1.2秒後に相手からの定型返信が入る（autoReply配列から順に）。デモの体験がここで一段良くなります

6. データモデル

// user
{ id:"u01", name:"桐生 あかり", handle:"akari_kir", bio:"...",
  following:182, followers:2431, isFollowing:false }

// post
{ id:"p01", userId:"u01", body:"...", createdAt:"2026-07-21T08:12:00+09:00",
  image:{ seed:"morning-desk", ratio:"4:5" } | null,
  tags:["朝活"], likes:84, reposts:12, liked:false, saved:false }

// comment
{ id:"c01", postId:"p01", userId:"u04", body:"...", createdAt:"...", likes:3 }

// notification
{ id:"n01", type:"like"|"reply"|"follow"|"mention",
  userId:"u03", postId:"p02"|null, createdAt:"...", read:false }

// dmThread
{ id:"t01", userId:"u02", unread:2,
  messages:[ { from:"me"|"them", body:"...", at:"14:02" } ],
  autoReply:["了解です！","じゃあその時間で〜"] }

7. デモデータ

7.1 ユーザー（11名）

7.2 投稿（18件）

createdAt は 2026-07-21 06:00 〜 2026-07-22 21:00 の範囲でばらけさせる（相対時刻表示が「3分前」「2時間前」「昨日」と混ざるように）。

7.3 返信（p01・p02・p05・p12 に付与）

7.4 通知（8件・上3件が未読）

7.5 DM（4スレッド）

8. ディレクトリ構成（母艦テンプレ兼用）

souzoh-sns/
├── public/images/          ← 空。実写を入れると自動で反映
├── src/
│   ├── theme.css           ★リスキン対象①：色・フォント
│   ├── app.config.js       ★リスキン対象②：アプリ名・タブ構成・ラベル辞書
│   ├── data/               ★リスキン対象③：mockデータ
│   │   ├── users.js  posts.js  comments.js  notifications.js  dms.js
│   ├── components/ui/      ← 全アプリ共通。触らない
│   │   ├── Avatar.jsx  Button.jsx  Chip.jsx  Tabs.jsx
│   │   ├── Sheet.jsx   Toast.jsx   Skeleton.jsx  EmptyState.jsx
│   │   ├── GradientImage.jsx        ← seed→グラデ生成
│   │   └── CountUp.jsx              ← いいね数のスライドカウント
│   ├── components/shell/   ← 共通。ヘッダー／サイドナビ／タブバー／FAB
│   ├── features/
│   │   ├── timeline/  post-detail/  explore/
│   │   ├── notifications/  profile/  composer/  dm/
│   ├── store.js            ← useReducer 1本。Contextで配る
│   └── main.jsx
└── README.md

app.config.js の例（ここがリスキンの心臓部）：

export default {
  appName: "Souzoh SNS",
  tagline: "ことばと写真の、小さなタイムライン",
  nav: [
    { key:"timeline", label:"ホーム",     icon:"Home" },
    { key:"explore",  label:"探す",       icon:"Search" },
    { key:"notify",   label:"通知",       icon:"Bell" },
    { key:"dm",       label:"メッセージ", icon:"Mail" },
    { key:"profile",  label:"プロフィール", icon:"User" },
  ],
  labels: {
    listTitle: "タイムライン",
    itemNoun: "投稿",          // フリマなら "商品"、学習なら "講座"
    createCta: "投稿する",
    primaryAction: "いいね",   // フリマなら "お気に入り"
  },
  tabs: { list: ["おすすめ", "フォロー中"] },
};

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

セッションを4分割します。1セッションにつき生成は1〜2機能まで。コンテキストを膨らませないのが費用対効果に直結します。

各セッション共通の指示文テンプレ：

添付の要件定義書 §{該当節} を実装してください。
既存の src/components/ui/ と src/store.js は完成済みです。新規作成せず import して使ってください。
色・余白・角丸は src/theme.css の変数のみを使い、生の値をハードコードしないでください。
実装前に、変更・作成するファイルの一覧だけ先に提示してください。

最後の1行が効きます。着手前にファイル一覧を出させると、想定外の探索と作り直しが減ります。

10. 受け入れ基準

• 7画面すべてが遷移でき、行き止まりがない
• いいね／フォロー／保存が即座にトグルし、数字が連動する
• 投稿・返信・DM送信が、リロードするまで残る
• DM送信の1.2秒後に相手の返信が入る
• 空状態・検索0件・スケルトンが用意されている
• 375px幅と1440px幅で崩れない
• 生の色コードがJSX内に1つも無い（全てtheme.css経由）
• prefers-reduced-motion: reduce で全アニメーションが止まる
• キーボードのTab移動でフォーカスリングが見える
• npm run build が警告なく通り、Cloudflare Pagesで表示される

11. リスキン手順（2本目以降の参照用）

11.0 命名ルール（5本共通）

全アプリを Souzoh {ドメイン} で統一します。ロゴは Souzoh を --font-display の700、ドメイン名を500の薄色で続ける2トーン組み。全記事のスクショに社名が入り、テンプレ配布物としても出所が一目でわかります。

11.1 手順

1. theme.css の色6つとフォント3つを差し替え
2. app.config.js の appName / nav / labels を差し替え
3. data/ の5ファイルを新ドメインの内容に差し替え
4. そのアプリ固有の1〜2画面のみ新規実装
   • マッチング → スワイプカード
   • フリマ → 出品フォーム・取引ステータス
   • デリバリー → カート・配達トラッキング
   • 学習 → 動画プレイヤー・進捗リング
5. components/ui/ と components/shell/ は触らない

12. 補足：概算コスト感

Session 1が最も重く（土台＋コンポーネント一式）、Session 2〜4は逓減します。2本目以降は §11 の手順1〜3が中心になるため、体感で初回の3〜4割程度に収まる想定です。ただし実際の消費は往復回数に強く依存するので、**「デザインの微調整はまとめて最後に1回」**を徹底してください。ここが崩れると初回と同じだけ掛かります。