Vibe Coding
Perfect Guidefor NTT DATA Tangity

汎用的に使えるコンポーネントライブラリを作成してください。

Atomic Designの階層構造に基づいて整理した、コンポーネントライブラリの構成要素一覧です。

---

# コンポーネントライブラリ構成要素一覧

## 1. Foundation (Design Tokens)

デザインの最小単位となるスタイル定義です。これらはすべてのコンポーネントの基礎となります。

* **カラーパレット (Colors)**: プライマリー、セカンダリー、アクセント、背景色、テキスト色、セマンティック色（成功、警告、エラー）
* **タイポグラフィ (Typography)**: フォントファミリー、サイズ、ウェイト、行間（Line-height）、見出し/本文の定義
* **スペーシング・グリッド (Spacing & Grid)**: 余白のルール（4px/8pxルールなど）、レイアウトグリッド
* **アイコン (Icons)**: システムアイコンセット、SVG定義
* **シャドウ・角丸 (Elevation & Radius)**: 深さ（Z軸）の表現、角の丸みの定義
* **アニメーション・トランジション (Motion)**: イージング、持続時間、基本的な動きの定義

## 2. Atoms (原子)

機能を持つ最小単位のコンポーネントです。これ以上分割できません。

* **ボタン (Buttons)**: Primary, Secondary, Ghost, Link, Icon Button
* **入力フォーム (Inputs)**: Text Field, Text Area
* **選択コントロール**: Checkbox, Radio Button, Toggle Switch
* **画像・表示系**:
  * アバター (Avatar)
  * バッジ・タグ (Badge / Tag)
  * 区切り線 (Divider)

* **フィードバック**:
  * スピナー・ローダー (Spinners / Loaders)
  * プログレスバー (Progress Bar)
  * ツールチップ (Tooltip)

## 3. Molecules (分子)

Atomsを組み合わせて作る、意味のあるUIブロックです。

* **フォーム部品**:
  * フォームフィールド (Label + Input + Helper Text + Error Message)
  * 検索バー (Search Bar)
  * ファイルアップローダー (File Uploader - シンプルなもの)

* **ナビゲーション部品**:
  * パンくずリスト (Breadcrumbs)
  * タブ (Tabs)
  * ドロップダウンメニュー (Dropdown)
  * ページネーション (Pagination)
  * ステッパー (Stepper)

* **情報表示**:
  * カード (Cards): 画像、タイトル、アクションを含むユニット
  * アラート・通知 (Alerts / Toasts / Snackbars)
  * アコーディオン (Accordion)
  * モーダル・ダイアログ (Modal / Dialog)
  * カルーセル・スライダー (Carousel)

## 4. Organisms (有機体)

MoleculesやAtomsを組み合わせて構成される、独立した機能を持つセクションです。

* **ヘッダー・ナビゲーション (Header / Navbar)**: ロゴ、メニュー、検索、ユーザーメニューの複合
* **フッター (Footer)**: サイトマップ、著作権、SNSリンク
* **サイドバー (Sidebar / Drawer)**: ナビゲーションリンク、フィルタリング機能
* **データ表示**:
  * データテーブル (Data Tables): ソート、フィルタ、ページネーション機能付き
  * リストビュー (List Groups)

* **複合機能**:
  * カレンダー・日付選択 (Date / Range Picker)
  * リッチテキストエディタ (Rich Text Editor)
  * コメントセクション

## 5. Templates (テンプレート)

具体的なコンテンツが入っていないページレイアウトの構造（ワイヤーフレーム的な状態）です。

* **レイアウト構造**:
  * 1カラムレイアウト
  * 2カラムレイアウト（サイドバー付き）
  * ダッシュボードレイアウト
  * グリッドレイアウト

* **スケルトンスクリーン**: ローディング中のプレースホルダー配置

## 6. Pages (ページ)

Templatesに実際のコンテンツを流し込んだ完成形です。

* **認証画面**: ログイン、サインアップ、パスワードリセット
* **ダッシュボード**: 統計情報、グラフ、最近のアクティビティ
* **一覧画面**: 商品一覧、ユーザー一覧
* **詳細画面**: 記事詳細、プロフィール設定
* **エラー画面**: 404 Not Found, 500 Server Error

## 7. Documentation (ドキュメント)

ライブラリを正しく使用するためのルールとガイドです。

* **導入ガイド (Getting Started)**: インストール方法、環境設定
* **デザイン・トークン一覧**: 変数名とその値の参照
* **利用ガイドライン**: Do's and Don'ts（推奨事項と禁止事項）
* **アクセシビリティガイド**: WAI-ARIA対応、キーボード操作の仕様
* **変更履歴 (Changelog)**

あなたはプロジェクトマネージャーのアシスタントです。
以下のミーティング録音の文字起こしデータから、議事録を作成してください。

## 出力フォーマット

### 基本情報
- 日時 / 場所 / 参加者 / 議題

### 背景・課題
- クライアントが抱えている現状の問題点を箇条書きで整理

### クライアントの要望
- 発言者名つきで、要望・期待を原文のニュアンスを残しつつ整理
- 口語の曖昧な表現も、意図が伝わる形で残す（勝手に仕様化しない）

### 補足情報
- 数値データ、技術的な前提条件、スコープに関する発言を抽出

### 決定事項
- 合意に至った内容のみを番号つきで列挙

### 次回予定
- 日時とアジェンダ

### 社内メモ（議事録には載せない当社側の所感）
- 進め方の方針、事前に確認すべきこと、リスクや気づき

## ルール
- 発言していない内容を追加しない
- 曖昧な要望は曖昧なまま記録する（「あったら嬉しい」は「必須」にしない）
- 技術用語はクライアントの発言レベルに合わせる
- 決定事項と要望（未決定）を明確に区別する

## 文字起こしデータ
（ここに録音の書き起こしテキストを貼り付け）

# 初回ミーティング議事録

## 基本情報

| 項目 | 内容 |
|------|------|
| 日時 | 2026年2月14日（金）14:00〜15:00 |
| 場所 | NTTデータ 本社 12F 会議室C |
| 参加者 | 総務部 山田課長、佐藤主任 / 当社 田中、鈴木 |
| 議題 | 社内図書貸出アプリの新規開発について |

---

## 背景・課題

- 現在、社内図書（約3,000冊）の管理はExcelの台帳で運用している
- 貸出・返却の記録が属人化しており、誰が何を借りているか把握できない
- 「読みたい本があるのに貸出中かどうかわからない」という声が社員から多い
- 各フロアに本棚があるが、どのフロアにどの本があるかも不明瞭
- 新着図書の周知はメールで行っているが、見落としが多い

## クライアントの要望（山田課長発言メモ）

- 「スマホでパッと在庫を確認できるようにしたい」
- 「新しく入った本が目に入る仕組みがほしい」
- 「借りるときの手続きがめんどくさいと使ってもらえない。とにかく簡単に」
- 「貸出中なら、いつ頃返ってくるかわかると嬉しい」
- 「まずは最低限の機能でいいので、早めに触れるものを見せてほしい」
- 「デザインは堅すぎない感じで。社員が気軽に使える雰囲気にしたい」

## 佐藤主任からの補足

- 対象ユーザーはデザイナー、エンジニア、PMが中心（30〜40代）
- 社員数は約10万人だが、図書利用のアクティブユーザーは2,000〜3,000人程度の想定
- 社内認証基盤（SSO）との連携は将来的に検討、初期プロトタイプでは不要
- 予約機能やレコメンド機能は「あったら嬉しい」程度、初期スコープ外でOK
- 管理者画面（書籍の登録・編集）は別途検討、今回はユーザー向け画面が優先

## 決定事項

1. まずモバイル向けのユーザー画面のプロトタイプを作成する
2. 主要画面は「トップ（新着＋検索）」と「書籍詳細」の2画面を想定
3. 次回ミーティングまでに触れるプロトタイプを共有する
4. デザインの方向性は「親しみやすく、シンプル」

## 次回予定

- 2026年2月21日（金）14:00〜 プロトタイプレビュー

---

## 当社メモ（社内共有用）

- 初回は機能よりも「触れる体験」を重視して見せるのが良さそう
- Excel台帳のデータ構造を事前にもらっておくとスムーズ
- デザインは温かみのあるトーンで、業務ツール感を出しすぎない方向

あなたはサービスデザインのシニアコンサルタントです。
「議事録」に基づき、requirements.md を出力してください。

## タスク: requirements.md を出力
以下の6セクションで構造化してください。

### 1. ターゲットユーザー
- プライマリペルソナ1名（名前・年齢・職種・課題・ゴール）

### 2. コア機能
- Must（3〜5項目）: 今回必ず実装する機能
- Nice-to-have（2〜3項目）: 余裕があれば対応する機能
- 各機能に1行の説明と、それが解決するユーザー課題を併記

### 3. スコープ外
- 今回やらないこと（2〜3項目）
- なぜやらないかの理由を1行で

### 4. 画面一覧と遷移フロー
- 画面名のリスト
- 画面間の遷移を矢印で表現（例: トップ → 書籍詳細 → 貸出確認）

### 5. 技術・制約条件
- 対応デバイス / OS
- 認証方式（初期プロトでは不要 等）
- パフォーマンス要件
- その他の制約

### 6. 成功指標
- 定量KPI 2つ（数値で測れるもの）
- 定性KPI 1つ（ユーザーの感情・行動の変化）

## ルール
- 議事録で「あったら嬉しい」と発言された機能は Nice-to-have に分類する
- 議事録で合意に至っていない要望は、Must にしない
- 議事録に記載のない機能を勝手に追加しない
- 曖昧な表現（「使いやすい」「見やすい」）は具体的な要件に変換する
  - 例: 「使いやすい」→「3タップ以内で貸出完了」
- ペルソナは議事録のユーザー情報から構築する。架空の情報で盛りすぎない

## 議事録
- 

requirements.md: 社内図書貸出アプリ（初期プロトタイプ）
1. ターゲットユーザー
プライマリペルソナ
名前: 佐藤 健一（仮）
年齢: 35歳
職種: サービス開発部門のプロジェクトマネージャー（PM）
課題: 技術書やビジネス書を読みたいが、Excel台帳を確認するのが手間で、実際に本棚に行っても目当ての本が貸出中だったり、どこにあるか分からず時間をロスしている。
ゴール: スマホで即座に読みたい本の在庫場所と返却予定を確認し、最短の手間で貸出手続きを完了させる。
2. コア機能
Must（今回必ず実装する機能）
新着・注目図書のカルーセル表示
説明: トップ画面上部に新着図書を視覚的に表示する。
解決する課題: メールによる周知の見落としを防ぎ、新しい本との接点を作る。
蔵書検索・在庫ステータス確認
説明: 書名での検索および、貸出中かどうかのリアルタイム表示。
解決する課題: 本棚まで行く手間を省き、無駄な往復をなくす。
フロア・本棚位置の明示
説明: 書籍詳細画面に、その本が配置されているフロア番号を表示する。
解決する課題: 3,000冊の中から物理的な場所を探すストレスを解消する。
2タップでの簡易貸出手続き
説明: 詳細画面から「借りる」ボタンを押し、完了画面へ遷移する。
解決する課題: 煩雑な手続きによる利用率低下を防ぎ、利便性を高める。
返却予定日の表示
説明: 貸出中の書籍に対して、返却期限日を自動計算して表示する。
解決する課題: 次に読みたいユーザーが、いつ頃手に入るか予測できるようにする。
Nice-to-have（余裕があれば対応する機能）
予約機能
説明: 貸出中の本が返却された際に通知、または優先権を得る。
解決する課題: 人気書籍を確実に確保したいというニーズ。
レコメンド機能
説明: ユーザーの閲覧・貸出履歴に基づき、興味のありそうな本を提示する。
解決する課題: 偶発的な本との出会いを創出し、読書習慣を促進する。
3. スコープ外
社内認証基盤（SSO）連携
理由: 初期プロトタイプではスピードを重視し、機能体験の検証に集中するため。
管理者向け管理画面（書籍登録・編集）
理由: ユーザー向けの利用体験の検証を最優先とする合意があるため。
プッシュ通知機能
理由: ネイティブアプリ開発ではなく、まずはWebベースのプロトタイプで触れるものを早期に出すため。
4. 画面一覧と遷移フロー
画面リスト
トップ画面: 新着図書、検索窓、カテゴリ別リスト
書籍詳細画面: 書影、概要、所在フロア、貸出状況（返却予定日）、貸出ボタン
貸出完了画面: 貸出完了メッセージ、返却期限日のリマインド
遷移フロー
トップ（検索/選択） → 書籍詳細（貸出実行） → 貸出完了
5. 技術・制約条件
対応デバイス / OS: スマートフォン（iOS/Android）のブラウザ閲覧を優先。
認証方式: 初期プロトでは不要（モックデータまたは簡易的なID入力のみ）。
パフォーマンス要件: 検索結果の表示および画面遷移を1秒以内に行い、ストレスのない操作感を実現する。
デザイン制約: 堅苦しさを排除し、温かみのあるトーン（親しみやすくシンプル）を採用。業務ツール感を抑える。
6. 成功指標
定量KPI
在庫確認から貸出完了までの所要時間: 平均30秒以内
アクティブユーザー率: 初期導入ターゲット（3,000名）のうち、月1回以上の利用率 40% 以上
定性KPI
ユーザーアンケート: 「これまでのExcel管理・本棚確認と比較して、本を探す手間が劇的に減った」と回答するユーザーが8割を超えること。

あなたはモバイルアプリのUIデザイナーです。

「requirements.md」に基づき、design.md を作成してください。
このファイルは、AIコーディングツール（Stitch）にデザインルールを渡すためのものです。
Stitchが解釈しやすいように、具体的な値（HEXコード、px値、クラス名）で記述してください。

## 出力セクション

### 1. デザインコンセプト
- アプリ全体の世界観を1文で定義
- トーンのキーワードを3つ（例: 温かい / シンプル / 軽やか）

### 2. カラーシステム
- Primary / Secondary / Accent / Background / Surface / Text / Text-secondary / Border
- 各色のHEXコードと用途を表形式で

### 3. タイポグラフィ
- フォントファミリー
- 見出し（H1, H2, H3）/ 本文 / キャプション のサイズ・ウェイト・行間
- Tailwind CSS のクラス名も併記

### 4. 余白・グリッド
- 基本単位（4px or 8px ベース）
- 要素間・カード間・セクション間の余白ルール
- Tailwind の gap / padding クラスで併記

### 5. コンポーネント定義
以下の各コンポーネントについて、構造・スタイル・状態を定義:
- 書籍カード（表紙画像 / タイトル / 著者 / 貸出ステータスタグ）
- 検索バー
- フィルタータブ（全て / 新着 / 貸出可 / 貸出中）
- ステータスタグ（貸出可: 緑系 / 貸出中: グレー系）
- ボタン（Primary / Secondary）

### 6. 状態の見え方
- Empty State（検索結果0件）
- Error State（通信エラー）
- Loading State

### 7. トーン＆ボイス
- UIテキストの口調（です/ます調 or カジュアル）
- 禁止表現（例: 専門用語、命令口調）
- ボタンラベルの原則（動詞で始める等）

## ルール
- 曖昧な表現（「適切に」「いい感じに」）は使わず、具体的な値で書く
- requirements.md のスコープ外の機能に言及しない
- Tailwind CSS のクラス名を併記して、Stitch がそのまま使える形にする

## requirements.md

# design.md

## 1. デザインコンセプト

* **コンセプト**: 忙しい業務の合間に、読みたい本と直感的に出会い、迷わず手に取れる「社内の私設ライブラリ」
* **トーンキーワード**: 温かい (Warm) / シンプル (Simple) / 軽やか (Airy)

## 2. カラーシステム

親しみやすさを出すため、彩度を抑えた温かみのあるパレットを採用します。

| Role | HEX | Tailwind Class | Usage |
| --- | --- | --- | --- |
| **Primary** | `#E67E22` | `bg-orange-600` | 主要アクションボタン、貸出ボタン |
| **Secondary** | `#34495E` | `bg-slate-700` | 補助ボタン、フロア情報などの強調 |
| **Accent** | `#2ECC71` | `bg-emerald-500` | 「貸出可」ステータス、完了通知 |
| **Background** | `#FDFCFB` | `bg-[#FDFCFB]` | アプリ全体の背景（オフホワイト） |
| **Surface** | `#FFFFFF` | `bg-white` | カード、検索バー、モーダル |
| **Text** | `#2C3E50` | `text-slate-800` | 見出し、重要な本文 |
| **Text-sec** | `#7F8C8D` | `text-slate-500` | 著者名、キャプション、返却予定日 |
| **Border** | `#ECF0F1` | `border-slate-100` | 区切り線、カードの枠線 |

## 3. タイポグラフィ

可読性を重視し、システムフォントをベースにした構成です。

* **Font Family**: `sans-serif` (Inter, system-ui)
* **H1 (画面タイトル)**: `20px` / `Bold` / `1.4` / `text-xl font-bold text-slate-800`
* **H2 (セクション見出し)**: `18px` / `Bold` / `1.4` / `text-lg font-bold text-slate-800`
* **Body (本文/タイトル)**: `16px` / `Medium` / `1.6` / `text-base font-medium text-slate-800`
* **Caption (著者/補足)**: `12px` / `Regular` / `1.5` / `text-xs font-normal text-slate-500`

## 4. 余白・グリッド

8px単位のグリッドシステムを採用します。

* **Base Unit**: `8px`
* **Container Padding**: `16px` (`p-4`)
* **Card Gap**: `12px` (`gap-3`)
* **Section Margin**: `32px` (`mt-8`)
* **Element Spacing**: `8px` (`mb-2`)

## 5. コンポーネント定義

### 書籍カード (Book Card)

* **構造**: `div` (垂直/水平レイアウト)
* **スタイル**: 角丸 `rounded-xl`, 軽い影 `shadow-sm`, 背景 `bg-white`
* **実装**: `flex flex-col gap-2 p-3 border border-slate-100`
* **要素**:
* 表紙: `aspect-[3/4] rounded-md object-cover`
* タイトル: `line-clamp-2 font-bold`
* 著者: `text-xs text-slate-500`
* タグ: 下記ステータスタグ参照

### 検索バー (Search Bar)

* **スタイル**: 角丸 `rounded-full`, 背景 `bg-slate-100`, アイコン付き
* **実装**: `w-full px-4 py-3 bg-slate-100 rounded-full border-none focus:ring-2 focus:ring-orange-600`

### フィルタータブ (Filter Tabs)

* **スタイル**: 非選択 `text-slate-500`, 選択時 `bg-orange-600 text-white rounded-full`
* **実装 (Active)**: `px-4 py-1.5 text-sm font-bold bg-orange-600 text-white rounded-full`
* **実装 (Inactive)**: `px-4 py-1.5 text-sm text-slate-500`

### ステータスタグ (Status Tag)

* **貸出可**: `bg-emerald-50 text-emerald-600 border border-emerald-100 px-2 py-0.5 rounded text-[10px] font-bold`
* **貸出中**: `bg-slate-50 text-slate-400 border border-slate-100 px-2 py-0.5 rounded text-[10px] font-bold`

### ボタン (Buttons)

* **Primary**: `w-full py-4 bg-orange-600 text-white font-bold rounded-2xl shadow-lg active:scale-95 transition-transform`
* **Secondary**: `w-full py-4 bg-white text-orange-600 border-2 border-orange-600 font-bold rounded-2xl`

## 6. 状態の見え方

* **Empty State**: 中央揃えで「条件に合う本が見つかりませんでした」と表示。虫眼鏡のアイコン（`text-slate-200`）を大きく配置。
* **Error State**: `bg-red-50 text-red-600 p-4 rounded-lg` で「通信に失敗しました」と表示し、リロードボタンを配置。
* **Loading State**: スケルトンスクリーン（`animate-pulse`）をカードの形状に合わせて表示。

## 7. トーン＆ボイス

* **基本口調**: 「です/ます」調。親しみやすいが、ビジネスとしての信頼感も維持。
* **禁止表現**: 「〜しろ」などの命令口調、DBのテーブル名などの内部専門用語、ネガティブな強調表現。
* **ボタンラベル原則**: ユーザーの次の行動を動詞で明示する。
* 例: 「借りる」「返却を予約する」「棚の場所を確認」

人材紹介サービスのWebサイトテンプレートを生成してください。ビジネスシーンに合う信頼感を重視したデザイン。第二階層までファイルを作ってください。ゆったりとしたレイアウトでモダンなテイスト。洗練されたデザイン。人材紹介サービスのサイトとして、必要な情報は全て含んでください。写真を多用してください。無料フォトストックサイトからAPIで取得してください。配色は背景がモスグリーンでその他はお任せします。

Tailwind CSS に精通した UI エンジニアとして
添付した requirements.md と design.md に基づき、社内図書貸出アプリのトップ画面を実装。
design.md のカラー・タイポ・余白を厳守。ヘッダーにアプリ名+検索窓。フィルタータブ（全て/新着/貸出可/貸出中）。メインに書籍カード一覧（表紙画像/タイトル/著者/貸出ステータスタグ）。書籍データはダミーで5〜8冊分
Tailwind CSS + HTML でモバイル UI を出力。画面幅 390px（iPhone 基準）

# requirements.md
{ここにペーストしてください}

# design.md
{ここにペーストしてください}

Eコマース プロダクトページ

### デザインコンセプト

* **コンセプト**: 商品の魅力を素早く伝え、迷わずカートに追加できる「信頼できるショップの顔」
* **トーンキーワード**: 高級感 (Premium) / 明確 (Clear) / 信頼 (Trustworthy)

### カラーシステム

上質さと信頼感を表現するため、深みのある色合いと洗練されたニュートラルを組み合わせています。

**Primary**: `#1F2937` / `bg-gray-800` — メインボタン、重要な情報

**Secondary**: `#0EA5E9` / `bg-sky-500` — リンク、ハイライト

**Accent**: `#DC2626` / `bg-red-600` — セール価格、限定表示

**Background**: `#FAFAFA` / `bg-gray-50` — ページ背景

**Surface**: `#FFFFFF` / `bg-white` — カード、メインコンテンツ

**Text**: `#1F2937` / `text-gray-800` — 本文、見出し

**Text-secondary**: `#6B7280` / `text-gray-500` — 補足情報、小見出し

**Border**: `#E5E7EB` / `border-gray-200` — 区切り線、フォーム枠

### タイポグラフィ

高級感を保ちながら、オンラインショップとしての親しみやすさを実現しています。

**H1 (商品名)**: `28px` / `Bold` / `1.3` / `text-2xl font-bold text-gray-800`

**H2 (セクション見出し)**: `20px` / `Bold` / `1.4` / `text-xl font-bold text-gray-800`

**Body (説明文)**: `16px` / `Regular` / `1.6` / `text-base font-normal text-gray-700`

**Caption (補足情報)**: `13px` / `Regular` / `1.5` / `text-sm font-normal text-gray-500`

**Font Family**: `sans-serif` (Inter, system-ui)

### 余白・グリッド

8px単位で統一し、デスクトップ・モバイル両対応を実現しています。

**Base Unit**: `8px`

**Container Padding**: `24px` (`p-6`)

**Card Gap**: `16px` (`gap-4`)

**Section Margin**: `48px` (`mt-12`)

**Element Spacing**: `12px` (`mb-3`)

### コンポーネント定義

#### 商品画像ギャラリー (Product Gallery)

メイン画像を左側に大きく配置し、その下または右側にサムネイル4枚を並べる構成です。メイン画像にはズーム機能を実装し、ホバー時に画像が拡大表示されるようにします。

**メイン画像**: `w-full aspect-[4/5] rounded-lg object-cover bg-gray-100`

**サムネイル**: `w-16 h-20 rounded-md border-2 border-gray-200 cursor-pointer hover:border-sky-500 transition-colors`

**構造**: メイン画像（左側、大きく）+ サムネイル4枚（下または右側）

#### 商品情報セクション (Product Info)

商品のタイトルから購入オプションまで、スムーズなユーザーフローを実現するセクションです。タイトル、価格、評価、説明、オプション選択、アクションボタンの順で配置され、各要素が明確な役割を果たします。

**構造**: タイトル → 価格 → 評価 → 説明 → オプション選択 → アクションボタン

**価格表示**: `text-3xl font-bold text-gray-800` (セール時は `text-red-600`)

**評価スター**: `★★★★★ 4.8 (126件のレビュー)` / `text-sm text-gray-500`

**実装**: `flex flex-col gap-4 p-6 bg-white rounded-lg border border-gray-200`

#### オプション選択 (Options)

ユーザーが商品のバリエーション（サイズ、カラー）を簡単に選択できる仕組みです。選択状態を視覚的に明確に区別し、オプション間の移動をスムーズにします。

**サイズ選択**: ボタングループ、選択時 `bg-gray-800 text-white`, 非選択時 `bg-gray-100 text-gray-800`

**カラー選択**: サークルアイコン、選択時 `ring-2 ring-gray-800`

**実装**: `flex gap-3 flex-wrap`

#### アクションボタン (Action Buttons)

「カートに追加」と「ウィッシュリスト追加」の2つのボタンを横並びで配置し、ユーザーの購買決定を迷わず支援します。

**「カートに追加」(Primary)**: `w-full py-4 bg-gray-800 text-white font-bold rounded-lg shadow-md hover:bg-gray-900 active:scale-95 transition-all`

**「ウィッシュリストに追加」(Secondary)**: `w-full py-4 bg-gray-100 text-gray-800 border-2 border-gray-200 font-bold rounded-lg hover:bg-gray-200`

#### レビューカード (Review Card)

実際のユーザーレビューを表示し、商品への信頼感を構築するコンポーネントです。ユーザー名、評価スター、投稿日、レビュー本文を含みます。

**構造**: ユーザー名 → 評価スター → 日付 → レビュー本文

**実装**: `p-4 bg-gray-50 rounded-lg border border-gray-200 flex flex-col gap-2`

**ユーザー情報**: アバター + 名前 (`text-sm`)

**レビュー本文**: `line-clamp-3 text-gray-700`

#### 関連商品グリッド (Related Products)

ページ下部に類似商品を表示し、ユーザーの購入機会を拡大します。レスポンシブ対応で、デバイスサイズに応じて列数を変更します。

**レイアウト**: デスクトップ4列、タブレット2列、モバイル1列

**カード**: 画像 → タイトル → 価格 → 在庫状態

**実装**: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6`

### 状態の見え方

**在庫あり**: `text-emerald-600 text-sm font-bold` で「在庫あり」表示。商品の入手可能性をユーザーに安心させます。

**在庫なし**: `text-gray-400` でボタンを無効化、`text-gray-500` で「売り切れ」表示。

**限定セール**: `bg-red-100 text-red-600 px-3 py-1 rounded-full text-xs font-bold` で「セール価格」表示。視覚的に注目を集めます。

**ローディング**: カートに追加ボタンに `animate-pulse` とスピナーを表示。処理中であることを明確に伝えます。

### トーン＆ボイス

**基本口調**: 「です/ます」調。商品の価値を尊重する丁寧な表現。ユーザーに安心感を与え、購買を促します。

**禁止表現**: 過剰な敬語、営業感の強い促進文。商品の品質を自慢がましく語る表現は避けます。

**ボタンラベル原則**: 次のアクションを明確に。「カートに追加」「今すぐ買う」「サイズを選択」など、動詞を先頭に配置し、ユーザーの次の行動を促します。

SaaS 分析ダッシュボード

### デザインコンセプト

* **コンセプト**: 複雑なデータを一目で把握し、素早く判断できる「データ駆動型リーダーのコックピット」
* **トーンキーワード**: プロフェッショナル (Professional) / 効率的 (Efficient) / 洞察的 (Insightful)

### カラーシステム

データの視認性と分析効率を重視した、コントラストの効いたパレットです。ダークモードを基調としており、目の疲労を軽減しながら各データポイントを明確に浮かび上がらせます。

**Primary**: `#3B82F6` / `bg-blue-500` — メインアクション、グラフの主線

**Secondary**: `#8B5CF6` / `bg-purple-500` — 補助データ、セカンダリグラフ

**Accent**: `#10B981` / `bg-emerald-500` — 成長指標、ポジティブデータ

**Danger**: `#EF4444` / `bg-red-500` — 低下指標、アラート

**Background**: `#0F172A` / `bg-slate-900` — ダークモード背景

**Surface**: `#1E293B` / `bg-slate-800` — ダークモードカード背景

**Text**: `#F1F5F9` / `text-slate-100` — 本文（ダークモード）

**Text-secondary**: `#94A3B8` / `text-slate-400` — 補足情報、ラベル

**Border**: `#334155` / `border-slate-700` — 区切り線（ダークモード）

### タイポグラフィ

データの階層を明確にし、スキャン性を高めるタイポグラフィ構成です。数値情報は等幅フォントで表示し、正確性と読みやすさを両立させます。

**H1 (ページタイトル)**: `24px` / `Bold` / `1.3` / `text-2xl font-bold text-slate-100`

**H2 (セクション見出し)**: `16px` / `SemiBold` / `1.4` / `text-base font-semibold text-slate-100`

**Body (ラベル/説明)**: `14px` / `Regular` / `1.5` / `text-sm font-normal text-slate-400`

**Data (数値)**: `18px` / `Bold` / `1.2` / `text-lg font-bold text-slate-100` (モノスペース推奨)

**Font Family**: `monospace` (可視性) + `sans-serif` (インターフェース)

### 余白・グリッド

ダッシュボード特有の広さと情報密度のバランスを取った設計です。サイドバーナビゲーションの固定化により、ユーザーは常にコンテキストを保持しながら各セクションを探索できます。

**Base Unit**: `8px`

**Container Padding**: `20px` (`p-5`)

**Card Gap**: `16px` (`gap-4`)

**Section Margin**: `32px` (`mt-8`)

**Sidebar Width**: `240px` (デスクトップ時)

### コンポーネント定義

#### サイドバーナビゲーション (Sidebar)

左側に固定されたサイドバーは、ロゴ、メニュー項目、ユーザープロフィール（下部固定）で構成されています。ダークモード対応により、ダッシュボード全体の統一感を強化します。

**構造**: ロゴ → メニュー項目 → ユーザープロフィール（下部固定）

**背景**: `bg-slate-900` (ダークモード)

**メニュー項目 (Active)**: `bg-blue-500 text-white px-4 py-3 rounded-lg flex items-center gap-3`

**メニュー項目 (Inactive)**: `text-slate-400 px-4 py-3 rounded-lg flex items-center gap-3 hover:bg-slate-800 transition-colors`

**ユーザープロフィール**: アバター + 名前 + ログアウトボタン

#### トップバー (Top Bar)

ページタイトルを左に配置し、右側には日付範囲フィルター、通知ベル、設定アイコンを並べています。検索機能も統合し、全体的なナビゲーション効率を高めます。

**構造**: ページタイトル（左） → 日付範囲フィルター → 通知ベル → 設定アイコン（右）

**背景**: `bg-slate-800` または透明

**実装**: `flex justify-between items-center h-16 px-6 border-b border-slate-700`

#### KPI カード (KPI Card)

各カードには主要な指標（Key Performance Indicator）が表示されます。数値、前期比、矢印アイコンで、直感的にビジネスの状態を把握できるように設計されています。優先度に応じて左線のカラーを変更し、重要度を視覚的に区別します。

**構造**: ラベル → 数値 → 前期比 (上昇/下降指標)

**数値**: `text-3xl font-bold text-slate-100` (モノスペース)

**前期比**: `text-sm font-semibold` / 上昇 `text-emerald-500`, 下降 `text-red-500`, 矢印アイコン付き

**実装**: `p-6 bg-slate-800 rounded-lg border border-slate-700 flex flex-col gap-2`

**背景バリエーション**: 優先度により `border-l-4 border-l-blue-500` などで左線カラーを変更

#### チャートコンテナ (Chart Container)

複数のグラフタイプ（折れ線、円グラフ）を表示するコンテナです。Canvas 要素を使用して動的なグラフをレンダリング。主線と補助線、複数の色を使い分けることで、複数の指標を同時に比較可能にします。

**折れ線グラフ (Line Chart)**: Canvas 要素、主線 `stroke-blue-500`, 補助線 `stroke-purple-500`

**円グラフ (Pie Chart)**: 複数色での分布表示、レジェンド付き

**構造**: タイトル → グラフ領域 → カラーレジェンド

**実装**: `p-6 bg-slate-800 rounded-lg border border-slate-700 h-80`

#### データテーブル (Data Table)

顧客リストやトランザクション履歴など、大量のデータを整理して表示するテーブルです。ソート、フィルター機能をヘッダに組み込み、ユーザーが素早く必要な情報にアクセスできるようにしています。

**ヘッダ**: `bg-slate-700 text-slate-100 font-semibold py-3 px-4`

**行**: 奇数行 `bg-slate-800`, 偶数行 `bg-slate-750` / ホバー時 `bg-slate-700`

**アクション列**: ドットメニュー（`⋮`）でアクション表示

**ソート/フィルター**: ヘッダクリックでソート、フィルター条件を横に表示

**実装**: `w-full border-collapse text-sm`

#### フィルター＆検索バー (Filter & Search)

ダッシュボード上部に配置されたフィルター機能です。検索フィールドと日付範囲ピッカー、クイックフィルタボタンを組み合わせ、ユーザーが迅速にデータを絞り込めるようにします。

**検索**: `px-4 py-2 bg-slate-700 text-slate-100 rounded-lg placeholder:text-slate-500 focus:ring-2 focus:ring-blue-500`

**日付範囲**: 2つのデートピッカー、または「過去7日間」「過去30日間」などのクイックフィルタ

**実装**: `flex gap-3 items-center`

### 状態の見え方

**Loading**: `animate-pulse` でスケルトンスクリーン。各カードや行の形状に合わせて、プレースホルダを表示し、データ読み込み中であることをユーザーに伝えます。

**Error**: `bg-red-900 border-l-4 border-l-red-500 text-red-200 px-4 py-3 rounded` でエラーメッセージを大きく表示します。リトライボタンも同時に配置し、ユーザーが素早く復帰できます。

**No Data**: 中央に「データがありません」とアイコン付きで表示。背景 `bg-slate-800` で統一感を保ちます。

### トーン＆ボイス

**基本口調**: 「です/ます」調。データ駆動的で、しかし冷たくない表現。ユーザーの意思決定をサポートする姿勢を保ちます。

**禁止表現**: 不確実な表現 (「かもしれません」)、曖昧な数値 (「約」を多用)。正確性が求められるダッシュボードでは、確実な情報のみを表示します。

**ボタン＆ラベル原則**: 正確性を重視。「過去30日間の売上」「データを更新」「詳細を表示」など、アクションを明確に記述します。

モバイルフィットネスアプリ

### デザインコンセプト

* **コンセプト**: 運動へのモチベーションを高め、毎日の進捗を楽しく追跡できる「パーソナルコーチアプリ」
* **トーンキーワード**: エネルギッシュ (Energetic) / モチベーション (Motivating) / 親密 (Personal)

### カラーシステム

活動のエネルギーと達成感を表現するため、鮮やかで前向きなカラーパレットです。スポーツウェアやジムのエネルギッシュな雰囲気を反映させています。

**Primary**: `#FF6B35` / `bg-orange-500` — ワークアウト開始、主要ボタン

**Secondary**: `#004E89` / `bg-blue-900` — ナビゲーション、統計

**Accent**: `#1DD1A1` / `bg-teal-500` — 目標達成、バッジ

**Caution**: `#F39C12` / `bg-amber-500` — 注意、休息が必要

**Background**: `#F8F9FA` / `bg-gray-50` — アプリ全体背景

**Surface**: `#FFFFFF` / `bg-white` — カード、セクション背景

**Text**: `#2C3E50` / `text-slate-800` — 本文、見出し

**Text-secondary**: `#7F8C8D` / `text-slate-500` — 補足情報

**Border**: `#E8EAED` / `border-gray-200` — 区切り線

### タイポグラフィ

ユーザーの行動を促し、データを分かりやすく伝えるタイポグラフィです。モバイルデバイスでの可読性を最優先としています。

**H1 (画面タイトル)**: `28px` / `Bold` / `1.3` / `text-2xl font-bold text-slate-800`

**H2 (セクション見出し)**: `18px` / `Bold` / `1.4` / `text-lg font-bold text-slate-800`

**Body (説明文)**: `16px` / `Regular` / `1.6` / `text-base font-normal text-slate-800`

**Data (統計値)**: `24px` / `Bold` / `1.2` / `text-2xl font-bold text-orange-500`

**Caption (補足)**: `12px` / `Regular` / `1.5` / `text-xs font-normal text-slate-500`

**Font Family**: `sans-serif` (Inter, system-ui)

### 余白・グリッド

モバイルファーストの設計で、タップ操作と可読性を最優先としています。タップ領域の最小値を確保し、ユーザーのストレスフリーな操作を実現します。

**Base Unit**: `8px`

**Screen Padding**: `16px` (`p-4`)

**Card Padding**: `16px` (`p-4`)

**Card Gap**: `12px` (`gap-3`)

**Section Margin**: `24px` (`mt-6`)

**Button Height**: `56px` (タップ領域の最小値48px以上)

### コンポーネント定義

#### ホーム画面 (Home Screen)

アプリを開いた時に最初に目に入る画面です。グリーティング、本日の目標進捗、クイックアクション、今週のサマリー、推奨ワークアウトが縦方向に積み重ねられており、スクロールで各セクションを探索できます。

**構造**: グリーティング → 本日の目標進捗カード → クイックアクションボタン → 今週の活動サマリー → 推奨ワークアウト

**グリーティング**: `Hello, [Name]! 👋` / 時間帯で絵文字変更（朝は☀️、夜は🌙など）

**実装**: `flex flex-col gap-6 p-4 bg-gray-50`

#### 本日の目標進捗カード (Daily Goal Card)

ドーナツグラフで本日の進捗を視覚的に表現し、中央に大きなパーセンテージを表示します。達成感を高め、ユーザーをモチベートするデザインです。

**構造**: ドーナツグラフ（中央） + 進捗パーセンテージ + 残り目標値 + 目標内容

**ドーナツグラフ**: `cx="50" cy="50" r="40"` で SVG実装、完了部分 `stroke-orange-500`, 未完了部分 `stroke-gray-200`

**パーセンテージ**: 中央に大きく表示 `text-3xl font-bold text-orange-500`

**実装**: `p-6 bg-white rounded-2xl shadow-sm border border-gray-100`

#### クイックアクションボタン (Quick Action Buttons)

3～4個のボタンが横並びで表示され、「ワークアウトを開始」「目標を設定」などの主要なアクションにすぐアクセスできます。

**構造**: 3～4個のボタンが横並び

**ボタン**: 大きめのアイコン + テキスト + 矢印

**Primary**: `bg-orange-500 text-white rounded-xl py-3 px-4 flex items-center gap-2 active:scale-95`

**Secondary**: `bg-gray-100 text-slate-800 rounded-xl py-3 px-4 flex items-center gap-2`

#### 活動サマリーカード (Activity Summary Card)

時間帯別のカロリー消費を棒グラフで表示し、合計値を大きく強調します。週単位の傾向把握を支援します。

**構造**: 時間帯別カロリー消費グラフ + 合計値

**グラフ**: 棒グラフ、各棒 `bg-orange-500` (消費カロリー)、背景 `bg-gray-100`

**合計値**: 大きく表示 `text-2xl font-bold text-orange-500`

**実装**: `p-6 bg-white rounded-2xl shadow-sm border border-gray-100 flex flex-col gap-4`

#### ワークアウト記録画面 (Workout Recording Screen)

ワークアウト進行中、大きなタイマーがリアルタイムデータ（心拍数、カロリー、距離）と共に表示され、ユーザーが自分の努力をリアルタイムで確認できます。

**構造**: タイマー → リアルタイムデータ表示エリア → 開始/停止ボタン → 終了ボタン

**タイマー表示**: `text-5xl font-bold text-orange-500 text-center` (00:45:30 形式)

**リアルタイムデータ**: グリッド3～4列で心拍数、カロリー、距離を表示

**各データエリア**: `flex flex-col items-center p-4 bg-white rounded-xl`

**数値**: `text-2xl font-bold text-slate-800`

**ラベル**: `text-xs text-slate-500 mt-1`

**開始/停止ボタン**: 大きく目立つ、開始時 `bg-orange-500`, 停止時 `bg-red-500`

**実装**: `flex flex-col gap-6 p-4 bg-gray-50 h-screen`

#### 統計画面 (Statistics Screen)

週/月/年のタブで切り替え可能な統計情報を表示。グラフと分析テーブルで、ユーザーの長期的な進捗を可視化します。

**構造**: 週/月/年タブ → グラフ表示 → 週別/月別分析表

**タブ**: `px-4 py-2` / 選択時 `bg-orange-500 text-white rounded-full`, 非選択時 `text-slate-500`

**グラフ**: 折れ線グラフまたは面グラフ、`bg-white rounded-2xl p-6`

**分析表**: 日付 / 実績 / 目標達成率の3列テーブル

**実装**: `flex flex-col gap-6 p-4`

#### バッジ・アチーブメント表示 (Achievement Badges)

各バッジは「30日連続」「5km達成」など特定のマイルストーンを表現。未達成は薄く表示し、達成済みは金色の枠で装飾して、ユーザーの達成感を高めます。

**構造**: アイコン + タイトル + 説明 + アンロック日付

**未達成**: `opacity-50 grayscale`

**達成済み**: `opacity-100 ring-2 ring-amber-400`

**実装**: `p-4 bg-white rounded-xl border-2 border-gray-100 flex items-center gap-3 text-center`

#### 設定画面 (Settings Screen)

プロフィール編集、目標設定、通知設定、その他の設定項目が縦方向に積み重ねられています。スイッチ、ドロップダウン、テキストフィールドが統一されたデザインで配置されています。

**構造**: プロフィール編集 → 目標設定 → 通知設定 → その他設定

**セクション**: 各設定項目はスイッチ + ラベル + 説明文

**カラー**: セクション間に `divider border-t border-gray-200` で区切り

**実装**: `flex flex-col gap-4 p-4 bg-gray-50`

#### プロフィール画面 (Profile Screen)

大きなアバター画像、ユーザー名、統計情報が画面上部に配置。達成バッジ、フレンドリストが下に続きます。自分の運動履歴と社会的なつながりを一目で確認できます。

**構造**: アバター + 名前 + 統計情報 → 達成バッジ表示 → フレンド表示

**ユーザー情報**: 大きなアバター画像 + 名前 + フォロワー数

**統計**: グリッド 2～3列で総運動時間、達成バッジ数、ランキング表示

**達成バッジ**: グリッド表示、アンロック済みは色付き

**フレンド**: スクロール可能なリスト、プロフィール画像 + 名前 + フォローボタン

### 状態の見え方

**ワークアウト中**: タイマー背景を `bg-orange-100` で強調、定期的なフラッシュアニメーションで現在の活動を視覚的に伝えます。

**目標達成**: `bg-teal-100 border-2 border-teal-500 text-teal-600` で祝い表示、バッジアイコン（`🏆`）で達成感を高めます。

**休息が必要**: `bg-amber-100 text-amber-600` で警告表示。過度な運動を防ぎます。

**Loading**: `animate-pulse` でスケルトンスクリーン。カードの形状に合わせて、データ読み込み中であることを伝えます。

**Empty State**: イラスト + 「まだワークアウトがありません。今日から始めましょう！」というメッセージで、新規ユーザーを励まします。

### トーン＆ボイス

**基本口調**: 「です/ます」調 + 適度なカジュアルさ。ユーザーをモチベートする表現を心がけます。

**禁止表現**: 命令的な口調、医学的な専門用語、否定形の強調。ユーザーの努力を支援する姿勢を保ちます。

**ボタン＆ラベル原則**: アクションを明確に、ポジティブな表現。「ワークアウトを開始」「目標を達成」「友達と共有」「続ける」など、ユーザーを行動へと導く言葉を使用します。

オンボーディング ウィザードUI

### デザインコンセプト

* **コンセプト**: 新規ユーザーをスムーズに導き、最初の一歩を迷わず踏み出せる「優しいガイド」
* **トーンキーワード**: 親切 (Friendly) / 段階的 (Gradual) / 励まし (Encouraging)

### カラーシステム

ユーザーの不安を払拭し、前に進むエネルギーを与えるカラーデザインです。各ステップで一貫性を保ちながら、完了時には達成感を表現します。

**Primary**: `#5B6EFF` / `bg-indigo-500` — 進捗インジケーター、次へボタン

**Success**: `#10B981` / `bg-emerald-500` — 完了チェック、成功メッセージ

**Accent**: `#F59E0B` / `bg-amber-500` — 重要な情報、推奨項目

**Background**: `#F3F4F6` / `bg-gray-100` — ページ背景

**Surface**: `#FFFFFF` / `bg-white` — カード、フォームエリア

**Text**: `#1F2937` / `text-gray-800` — 本文、見出し

**Text-secondary**: `#6B7280` / `text-gray-500` — 補足情報

**Border**: `#E5E7EB` / `border-gray-200` — 区切り線

**Disabled**: `#D1D5DB` / `bg-gray-300` — 非選択、無効状態

### タイポグラフィ

複数ステップを進む中で、各ステップの重要性を伝え、読みやすさを保つ設計です。見出しは大きく、説明文は適切な行間を保つことで、スキャン性を高めます。

**H1 (ステップタイトル)**: `24px` / `Bold` / `1.3` / `text-2xl font-bold text-gray-800`

**H2 (セクション見出し)**: `16px` / `Bold` / `1.4` / `text-base font-bold text-gray-800`

**Body (説明文)**: `15px` / `Regular` / `1.6` / `text-base font-normal text-gray-700`

**Caption (ヒント/補足)**: `13px` / `Regular` / `1.5` / `text-sm font-normal text-gray-500`

**Label (フォームラベル)**: `14px` / `SemiBold` / `1.5` / `text-sm font-semibold text-gray-800`

**Font Family**: `sans-serif` (Inter, system-ui)

### 余白・グリッド

ステップの進行感を保ちながら、各フォーム要素の操作性を確保した設計です。最大幅を制限し、大画面での読みやすさも確保します。

**Base Unit**: `8px`

**Container Padding**: `32px` (`p-8`) デスクトップ / `20px` (`p-5`) モバイル

**Form Field Gap**: `20px` (`mb-5`)

**Button Gap**: `12px` (`gap-3`)

**Section Margin**: `24px` (`mt-6`)

**Max Width**: `600px` (フォーム幅)

### コンポーネント定義

#### ステップインジケーター (Step Indicator)

画面上部に複数のステップが視覚化され、ユーザーが現在どの段階にいるかを明確に把握できます。完了ステップはチェックマークで、進行中ステップは番号で表現されます。

**構造**: 円形ステップ × n個 + 接続線

**完了ステップ**: `w-10 h-10 bg-emerald-500 text-white rounded-full flex items-center justify-center font-bold` + チェックマーク

**進行中ステップ**: `w-10 h-10 bg-indigo-500 text-white rounded-full flex items-center justify-center font-bold` + ステップ番号

**未完了ステップ**: `w-10 h-10 bg-gray-300 text-gray-500 rounded-full flex items-center justify-center font-bold` + ステップ番号

**接続線 (完了)**: `border-t-2 border-emerald-500`

**接続線 (未完了)**: `border-t-2 border-gray-300`

**実装**: `flex items-center justify-between mb-10 mx-4`

#### ステップタイトル＆説明 (Step Title & Description)

各ステップの目的を明確に伝えるタイトルと、ユーザーをサポートする説明文で構成されています。親切で励ましの言葉を心がけています。

**タイトル**: `text-2xl font-bold text-gray-800 mb-3`

**説明**: `text-gray-600 text-base mb-8`

**実装**: `flex flex-col gap-2 mb-8`

#### フォームフィールド (Form Fields)

標準的なテキスト入力フィールドです。フォーカス時にリング状のハイライトが表示され、入力中であることを明確に伝えます。バリデーションエラーはリアルタイムで表示されます。

**ラベル**: `block text-sm font-semibold text-gray-800 mb-2`

**入力フィールド**: `w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent`

**エラー表示**: `text-red-600 text-sm mt-1` (バリデーション後)

**ヘルプテキスト**: `text-gray-500 text-xs mt-1`

**実装**: `flex flex-col gap-2`

#### オプション選択 (Option Selection)

複数のオプションから選択する場合、ラジオボタンを使用します。各オプションはホバー時にハイライトされ、選択時は背景色とチェックマークで表現されます。

**ラジオボタングループ**: 複数オプションを横または縦に並べる

**各オプション**: `p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-indigo-500 transition-colors`

**選択時**: `border-2 border-indigo-500 bg-indigo-50` + チェックマーク

**非選択時**: `border-2 border-gray-200`

**実装**: `flex flex-col gap-3`

#### プラン選択カード (Plan Selection Card)

複数のプラン選択肢を視覚的に比較できるカード型インターフェースです。推奨プランは視覚的に際立たせ、ユーザーの選択を支援します。

**構造**: プラン名 → 機能リスト → 価格 → 「選択」ボタン

**カード**: `p-6 border-2 border-gray-200 rounded-lg text-center hover:shadow-lg transition-shadow`

**推奨プラン**: `border-2 border-amber-500 ring-2 ring-amber-200` + 「おすすめ」バッジ付き

**機能リスト**: チェックマーク付きで、`text-left text-sm text-gray-600` で縦列表示

**価格**: `text-3xl font-bold text-indigo-500 my-4` (周期情報も小さく表示)

**選択ボタン**: 未選択時 `bg-gray-200 text-gray-600`, 選択時 `bg-indigo-500 text-white`

#### 支払い情報フォーム (Payment Form)

クレジットカード情報を安全に入力できるフォームです。カード番号はマスク形式で表示、有効期限と CVV は小さなフィールドで並び配置されます。

**カード番号**: マスク形式で表示、`font-mono` で数字を等幅フォントで表示

**有効期限＆CVV**: 横並びの2つの小さなフィールド

**請求先住所**: ドロップダウン + テキストフィールド

**実装**: `grid grid-cols-1 gap-4`

#### 進行状況メッセージ (Progress Messages)

リアルタイムバリデーションの結果が視覚的にユーザーにフィードバックされます。入力が正しければ緑のチェック、エラーなら赤い × マークが表示されます。

**入力中**: 緑のチェックマーク + 「入力中...」 (リアルタイム検証)

**完了**: 緑のチェックマーク + 「完了」 (バリデーション成功)

**エラー**: 赤い × マーク + エラーメッセージ

**実装**: `flex items-center gap-2 text-sm`

#### ナビゲーション (Navigation)

各ステップの下部に「前へ」「次へ」ボタンが配置されています。完了ステップでは「完了」ボタンに変わり、最初のステップでは「前へ」ボタンが無効化されます。

**前へボタン**: `w-full py-3 bg-gray-200 text-gray-800 font-bold rounded-lg hover:bg-gray-300`

**次へボタン**: `w-full py-3 bg-indigo-500 text-white font-bold rounded-lg hover:bg-indigo-600 active:scale-95`

**完了ボタン**: `w-full py-3 bg-emerald-500 text-white font-bold rounded-lg hover:bg-emerald-600`

**ボタングループ**: `flex gap-3 justify-between mt-8`

#### スキップ / 保存オプション (Skip / Save Options)

ユーザーが後で登録情報を入力したい場合や、特定のステップをスキップしたい場合に備えたオプションです。画面下部の控えめな位置に配置します。

**テキストリンク**: `text-indigo-500 text-sm hover:underline` で「スキップ」「後で入力」などを配置

**自動保存表示**: `text-gray-500 text-xs` で「入力内容は自動保存されています」と画面下部に表示

### 完了画面 (Completion Screen)

すべてのステップを完了したユーザーへ、達成感と次のアクションを伝える画面です。大きなチェックマーク、成功メッセージ、次に進むためのボタンで構成されています。

**構造**: 大きなチェックマーク + 成功メッセージ + 次のステップ案内

**チェックマーク**: 大きな緑のアイコン、背景円付き `bg-emerald-100 rounded-full w-20 h-20`

**メッセージ**: `text-2xl font-bold text-gray-800` で「セットアップ完了！」

**説明**: 次にやるべきことを簡潔に説明

**CTA ボタン**: 「ダッシュボードへ進む」等、次のアクションを明確に

**実装**: `flex flex-col items-center justify-center h-screen gap-6 text-center`

### 状態の見え方

**入力中**: `ring-2 ring-indigo-500` でフォーカス表示。ユーザーの入力状態を視覚的に強調します。

**バリデーション成功**: フィールド右に緑のチェックマーク + `border-green-500`。ユーザーの不安を払拭します。

**バリデーション失敗**: フィールド右に赤い × マーク + `border-red-500` + エラーメッセージ。具体的な対応方法を指示します。

**ボタン無効化**: `opacity-50 cursor-not-allowed` で前のステップ未完了時など、次へ進めない状態を明確にします。

**Loading**: ボタンに `animate-pulse` + スピナーアイコン表示。処理中であることを伝えます。

**自動保存**: 画面下部に淡いメッセージ `text-gray-400 text-xs`。ユーザーの安心感を高めます。

### トーン＆ボイス

**基本口調**: 「です/ます」調 + 親切でサポーティング。初心者にも分かりやすい表現。ユーザーが迷わないよう、毎ステップで丁寧な説明を心がけます。

**禁止表現**: 専門用語、命令的な口調、エラーを責める表現。すべてのユーザーを受け入れる姿勢を保ちます。

**ボタン＆ラベル原則**: アクションを明確に、ユーザーを励ます。「次へ」「続ける」「完了」「ダッシュボードへ」など、次のステップへの期待感を高めます。エラー時は「申し訳ありません。メールアドレスが既に登録されています」というように、解決方法を示唆します。

コンテンツマネジメントシステム (CMS) 管理画面

### デザインコンセプト

* **コンセプト**: 膨大なコンテンツを効率よく管理し、一元的に統制できる「編集者の作業スペース」
* **トーンキーワード**: 実用的 (Practical) / 効率的 (Efficient) / スケーラブル (Scalable)

### カラーシステム

複雑な操作を直感的にし、アクション重視のインターフェースです。作業効率を重視しながら、操作ミスを防ぐための警告色も適切に配置します。

**Primary**: `#0284C7` / `bg-sky-600` — メインアクション、選択状態

**Secondary**: `#7C3AED` / `bg-violet-600` — 補助アクション、ハイライト

**Success**: `#16A34A` / `bg-green-600` — 公開済み、成功状態

**Draft**: `#F59E0B` / `bg-amber-500` — 下書き、保留中

**Scheduled**: `#06B6D4` / `bg-cyan-500` — 予約公開

**Background**: `#FFFFFF` / `bg-white` — ページ背景

**Surface**: `#F9FAFB` / `bg-gray-50` — サイドバー、セクション背景

**Text**: `#111827` / `text-gray-900` — 本文

**Text-secondary**: `#6B7280` / `text-gray-500` — 補足情報

**Border**: `#E5E7EB` / `border-gray-200` — 区切り線

**Danger**: `#DC2626` / `bg-red-600` — 削除、警告

### タイポグラフィ

効率的な情報スキャンと詳細な操作を両立させる設計です。テーブルの情報密度を適切に保ちながら、見出しで重要な情報を強調します。

**H1 (ページタイトル)**: `28px` / `Bold` / `1.3` / `text-2xl font-bold text-gray-900`

**H2 (セクション見出し)**: `18px` / `Bold` / `1.4` / `text-lg font-bold text-gray-800`

**Body (テーブル内容)**: `14px` / `Regular` / `1.5` / `text-sm font-normal text-gray-700`

**Label (項目名)**: `12px` / `SemiBold` / `1.4` / `text-xs font-semibold text-gray-600 uppercase tracking-wide`

**Metadata (日付/著者)**: `12px` / `Regular` / `1.5` / `text-xs font-normal text-gray-500`

**Font Family**: `sans-serif` (Inter, system-ui)

### 余白・グリッド

大量の情報を扱いながら、スキャン性と操作性のバランスを取った設計です。テーブル行の高さを確保して、タップ操作の精度を高めます。

**Base Unit**: `8px`

**Sidebar Width**: `256px` (デスクトップ) / 折りたたみ可能

**Container Padding**: `24px` (`p-6`)

**Table Row Height**: `48px` (タップ可能な最小値確保)

**Card Gap**: `16px` (`gap-4`)

**Section Margin**: `32px` (`mt-8`)

### コンポーネント定義

#### サイドバーナビゲーション (Sidebar Navigation)

左側に固定されたサイドバーは、ロゴ、メニューグループに分かれたメニュー項目、下部のユーザープロフィールで構成されています。現在地を示す視覚的フィードバックにより、ユーザーが迷わずに操作できます。

**構造**: ロゴ → メニューグループ → ユーザープロフィール（固定下部）

**背景**: `bg-gray-50` (ライトモード)

**メニュー項目 (Active)**: `bg-sky-100 text-sky-600 border-l-4 border-l-sky-600 px-4 py-3 flex items-center gap-3 font-semibold`

**メニュー項目 (Inactive)**: `text-gray-600 px-4 py-3 flex items-center gap-3 hover:bg-gray-100 transition-colors`

**メニューグループタイトル**: `px-4 py-2 text-xs font-bold uppercase text-gray-500`

**実装**: `fixed h-screen w-64 bg-gray-50 border-r border-gray-200 flex flex-col`

#### トップバー (Top Bar)

ページパンくずリスト（左）で現在のナビゲーション階層を示し、右側には検索フィールドとアクションボタンを配置します。常に画面上部に固定され、どのページからでもアクセス可能です。

**構造**: ページパンくずクラムス（左） → 検索 / アクション（右）

**背景**: `bg-white border-b border-gray-200`

**実装**: `flex justify-between items-center h-16 px-6`

#### ツールバー (Toolbar)

検索フィールド、フィルタードロップダウン、「新規記事」ボタンで構成されています。ユーザーが素早くコンテンツを検索し、新規作成できるようにデザインされています。

**構造**: 検索フィールド → フィルターボタン → 「新規記事」ボタン

**検索**: `px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 placeholder:text-gray-400`

**フィルターボタン**: `px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200` + ドロップダウン

**「新規記事」ボタン**: `px-6 py-2 bg-sky-600 text-white font-semibold rounded-lg hover:bg-sky-700 active:scale-95`

**実装**: `flex gap-3 items-center justify-between mb-6`

#### バルクアクション (Bulk Actions)

複数のコンテンツを同時に操作できる機能です。チェックボックスで選択したアイテムに対して、削除、公開状態の変更などを一括で実行できます。

**チェックボックス**: 各行の先頭、親チェックボックスで全選択可能

**選択状態表示**: `bg-blue-50 border-l-4 border-l-sky-600` で選択行をハイライト

**アクションバー**: 下部固定、「削除」「公開」「下書きに戻す」等のボタン

**実装**: `sticky bottom-0 bg-white border-t border-gray-200 px-6 py-3 flex gap-3`

#### 記事リスト テーブルビュー (Article List - Table View)

主な記事管理画面です。タイトル、著者、公開日、ステータス、アクションがテーブル形式で表示されます。ソートとフィルター機能により、膨大なコンテンツから必要な記事をすぐに見つけることができます。

**ヘッダ**: `bg-gray-50 border-b border-gray-200 font-semibold text-xs uppercase text-gray-600`

**列定義**:

- チェックボックス: `w-10`
- サムネイル: `w-12 h-12 rounded-md object-cover`
- タイトル: flex-grow, `text-gray-900 font-semibold`
- 著者: `text-gray-500 text-xs`
- 公開日: `text-gray-500 text-xs`
- ステータス: ステータスバッジ参照
- アクション: ドットメニュー `⋮`

**行**: 奇数行 `bg-white`, 偶数行 `bg-gray-50` / ホバー時 `bg-blue-50`

**実装**: `w-full border-collapse text-sm`

#### ステータスバッジ (Status Badge)

記事の公開状態を一目で把握できるバッジです。色分けにより、迅速に各記事の状態を確認できます。

**公開済み**: `bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-semibold`

**下書き**: `bg-amber-100 text-amber-700 px-3 py-1 rounded-full text-xs font-semibold`

**予約公開**: `bg-cyan-100 text-cyan-700 px-3 py-1 rounded-full text-xs font-semibold`

**承認待ち**: `bg-violet-100 text-violet-700 px-3 py-1 rounded-full text-xs font-semibold`

#### 記事リスト カードビュー (Article List - Card View)

テーブルビューの代替表示です。各記事がカード形式で表示され、モバイルやタブレットでの閲覧に適しています。カードには記事のサムネイル、タイトル、メタデータ、アクションボタンが含まれます。

**カード**: `bg-white p-4 rounded-lg border border-gray-200 flex flex-col gap-3 hover:shadow-md transition-shadow`

**ヘッダ**: サムネイル + タイトル (右上にステータスバッジ)

**メタデータ**: 著者 + 公開日を小さく表示

**アクション**: カード下部に「編集」「削除」ボタン

**実装**: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4`

#### フィルターパネル (Filter Panel)

詳細なフィルタリングを可能にするサイドパネルまたはドロップダウンです。カテゴリー、ステータス、日付範囲、著者などから条件を選択し、表示するコンテンツを絞り込めます。

**構造**: ドロップダウンまたはサイドパネルで表示

**フィルター項目**: カテゴリー → ステータス → 日付範囲 → 著者

**カテゴリーフィルター**: チェックボックスリスト

**ステータスフィルター**: ラジオボタンまたはトグル

**日付範囲**: 「過去7日間」「過去30日間」「カスタム」クイックボタン

**実装**: `flex flex-col gap-6 p-6 bg-white rounded-lg border border-gray-200`

#### ページネーション (Pagination)

大量のコンテンツを複数ページに分割して表示します。ページ番号をクリックして移動でき、1ページあたりの表示件数もカスタマイズできます。

**構造**: 前ページ ← ページ番号 → 次ページ + 「1ページあたりの件数」セレクタ

**ページ番号**: 現在 `bg-sky-600 text-white`, その他 `text-gray-600 hover:bg-gray-100`

**セレクタ**: `px-3 py-2 border border-gray-300 rounded-lg`

**実装**: `flex items-center justify-between mt-6 px-6`

#### ドットメニュー (Dot Menu / Context Menu)

各記事行の右端に配置された3ドットアイコンをクリックすると、編集、複製、削除などのアクションを選択できるドロップダウンメニューが表示されます。

**アイコン**: `⋮` (3ドット)

**ホバー時の表示**: ドロップダウンメニュー、背景 `bg-white border border-gray-200 rounded-lg shadow-lg`

**メニュー項目**: `px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer`

**危険な操作**: 赤色で表示 `text-red-600 hover:bg-red-50`

**実装**: `relative inline-block`

#### レスポンシブテーブル (Responsive Table)

画面サイズに応じて表示形式が自動で切り替わります。モバイルではテーブルがカード形式に変わり、タブレットではテーブルの列が削減されるなど、各デバイスでの操作性を最適化します。

**モバイル時**: テーブル → 単一記事情報を大きなカードで表示

**タブレット時**: テーブルの列を削減（主要列のみ表示）、アクションはドットメニューへ

**実装**: `hidden md:table` / `table md:hidden` で画面サイズで切り替え

### 状態の見え方

**Loading**: `animate-pulse` でスケルトンスクリーン。テーブル行に合わせた高さで、全体に半透明オーバーレイを表示し、読み込み中であることを明確にします。

**Empty State**: 中央に「記事がありません」+ 「新規記事を作成」ボタン、背景アイコン `text-gray-200`。ユーザーが次に何をすべきか直感的に理解できるように設計されています。

**Selection**: 選択行 `bg-blue-50 border-l-4 border-l-sky-600`。複数選択時はバルクアクションバーが下部に表示されます。

**Error**: バナー表示 `bg-red-100 border-l-4 border-l-red-600 text-red-700 p-4 rounded` + リトライボタン。何が問題なのか、どう対応すればよいかをユーザーに明確に伝えます。

**Success**: トースト通知 `bg-green-100 text-green-700 rounded-lg p-4` で「記事を公開しました」と表示。操作の成功をポジティブに伝えます。

### トーン＆ボイス

**基本口調**: 「です/ます」調。プロフェッショナルで、効率性を重視。編集者の作業時間を尊重し、無駄な説明は避けます。

**禁止表現**: 曖昧な表現、内部DB用語、サポートが不要な命令形以外の命令。誰が読んでも正確に理解できる文言を心がけます。

**ボタン＆ラベル原則**: 正確性と速度性の両立。「記事を編集」「今すぐ公開」「下書きに戻す」「削除確認」など、アクションの結果を明確に表現します。

**確認ダイアログ**: 削除などの危険操作に対しては、「この操作は取り消せません」と明記します。ユーザーの誤操作を防ぎます。

# DESIGN.md

## Concept
静かで信頼できる社内ツール

## Color
Primary #0F172A
Accent #2563EB
Background #F8FAFC

## Type
Noto Sans JP
Title 24 / Section 18 / Body 14

## Components
Search Bar / Filter Tabs / Book Card / Status Tag

## States
default / focus / loading / empty / error

[Persona] モバイル業務アプリに強いUIデザイナー兼フロントエンドエンジニア
[Context] 社内向け図書貸出アプリのトップ画面を作る
[Specifications] 静かで信頼できるトーン / Noto Sans JP / 8px grid / Primary #0F172A / Accent #2563EB / 検索バー48px / タブ44px / カード64x92 / default focus loading empty error
[Goal] Tailwind CSS + HTMLで出力

この手書きメモを元に、ReactとTailwind CSSでUIを実装してください。

[Persona] 優秀なUIエンジニアとして、
[Context] 社内向けの図書貸出アプリ（Mobile版）のトップ画面を作成します。
[Steps] ヘッダーに検索窓、その下に「新着一覧」として本の表紙、タイトル、貸出状態タグを含むカードを縦並びに配置してください。
[Goal] Tailwind CSSを使用したHTMLで出力してください。

[Persona] Tailwind CSSに精通したUIエンジニアとして、
[Context] 以下のrequirements.mdとdesign.mdに基づき、社内図書貸出アプリのトップ画面を実装します。
[Spec] design.mdのカラー・タイポ・余白を厳守。ヘッダーに検索窓+フィルタータブ。メインに新着カード一覧（表紙/タイトル/著者/貸出タグ）。
[Goal] Tailwind CSS + HTMLで動作するモバイルUIを出力。

検索窓に文字を入力した際、リアルタイムで一覧がフィルタリングされるように JavaScriptを追加してください。

画像が親要素からはみ出しています。
画像に object-cover を適用し、親要素に overflow-hidden を追加してはみ出しを防いでください。

.text-gray-500 のクラスがついているテキストを、もっと濃い黒にしてください。

検索結果が 0 件のとき、Empty State を表示するロジックと UI を追加してください。

おしゃれなECサイト作って

P-C-S-Gフレームワークで要件定義し、まずはSP版のトップページを作成する。

親要素を Flex-row に設定。左側に画像を配置し、右側にテキストエリアを配置。2つの要素の間隔は Gap-4 で空けてください。