# アプリ / SaaS UI 制作プロンプト

## デザイン参考テンプレート

<!--
1. https://chartd.net/samples からお好みのテンプレートを選ぶ
2. テンプレートページの Download ボタンから ZIP をダウンロード
3. ZIP を解凍する
4. 解凍したフォルダとこの .md ファイルを両方 Claude Design へアップロードして送信
-->

アップロードした ZIP のデザイン・レイアウトをそのまま踏襲してください。
以下の構築要件は **機能・コンテンツの指定のみ** です。色・フォント・余白・コンポーネントの見た目はテンプレートに従い、要件を理由にデザインを変えないでください。

---

## 出力先ディレクトリ

すべてのファイルは `app-ui/` ディレクトリ内に作成してください。

```
app-ui/
├── index.html
├── dashboard.html
├── list.html
├── detail.html
├── settings.html
├── login.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── （画像ファイル）
```

---

## プロジェクト情報

**アプリ名**
<!-- 例：Planner Hub -->

**目的・解決する課題**
<!-- 例：散在するタスクをチームで一元管理し抜け漏れを防ぐ -->

**ユーザー種別・権限**
<!-- 例：Admin（全権）/ Member（自分のタスクのみ） -->

**作成する画面**
<!-- 例：ダッシュボード、タスク一覧、詳細、チーム管理、設定、ログイン -->

**主要データモデル**
<!-- 例：Task（タイトル・担当者・期限・ステータス）/ Project / User -->

**主要アクション**
<!-- 例：タスク CRUD、ステータス変更、コメント投稿、CSV エクスポート -->

**テーマ**
<!-- 例：ダーク / ライト / システム設定に従う -->

**アクセントカラー**
<!-- 例：インディゴ / エメラルド / ローズ -->

**フレームワーク**
<!-- 例：React + Tailwind CSS / Vue / HTML -->

---

## 構築要件

### アプリシェル（共通レイアウト）
- サイドバー：ロゴ＋ナビリンク（アイコン＋ラベル）＋折りたたみ対応
- ヘッダー：パンくず / ページタイトル、グローバル検索バー、通知ベル（バッジ付き）、ユーザーアバター＋ドロップダウン
- メインコンテンツエリア：適切なパディング・最大幅

### ダッシュボード画面
- KPI カード × 4（数値＋前期比トレンド矢印＋カラーアイコン）
- グラフエリア（折れ線 or 棒グラフ、モック SVG 可）
- 最近のアクティビティフィード（タイムライン形式）
- クイックアクションボタングループ

### リスト・テーブル画面
- 検索バー＋フィルタードロップダウン（ステータス・担当者・期日）
- ソート可能なカラムヘッダー
- 行ごとのアクションメニュー（編集・複製・削除）
- ページネーション or 無限スクロール
- 空状態（empty state）イラスト＋CTA

### 詳細・編集画面
- 2カラムレイアウト（左：詳細情報、右：メタ情報パネル）
- インライン編集（クリックで入力欄に切り替え）
- コメント / アクティビティログタブ
- 添付ファイルドロップゾーン
- ステータスバッジ（色分け）＋ステータス変更セレクト

### 設定画面
- タブ構造（プロフィール・通知・セキュリティ・請求 / プラン・チームメンバー）
- フォームグループ＋保存ボタン（変更があった場合のみ有効化）
- 危険ゾーン（アカウント削除）セクション

### 認証画面
- ログイン / サインアップ切り替え
- ソーシャルログインボタン（Google / GitHub）
- バリデーション付きフォーム
- パスワードリセットフロー

### コンポーネント
- モーダルダイアログ（確認・フォーム用）
- スライドオーバー / ドロワー（詳細プレビュー用）
- トースト通知（成功・エラー・警告・情報）
- ローディングスケルトン（カード・テーブル行）
- ツールチップ
- コンファームダイアログ（削除操作など）

### 共通要件
- レスポンシブ（タブレット：サイドバー折りたたみ、モバイル：ボトムナビ）
- キーボードナビゲーション・フォーカスリング
- カラーコントラスト WCAG AA 準拠
- ダークモード対応（CSS variables / Tailwind dark: クラス）
- マイクロアニメーション（ホバー・トランジション・ローディング）
- 画像・CSS・JS の読み込み URL にはキャッシュバスター（例：`image.png?v=1`）を付与する