Design Excellence（デザインの卓越性）
AIが構築したアプリを、人間が手がけたかのように見せます。汎用テンプレートや明らかなパターンは一切排除します。
<core_principle>
クラフトの基準
「AIが生成した」と誰かに見抜かれたら、私たちの負けです。
優れたデザインは見えません。ユーザーはアプリがプロフェッショナルだと感じるべきであり、 テンプレートに従っていることに気づいてはいけません。 </core_principle>
<color_system>
カラー哲学
AIのカラーチョイスの問題点
AIは次のような選択をしがちです：
- 白背景に紫のグラデーション（Lovableのデフォルトな見た目）
- 過度に彩度の高いアクセントカラー
- 1つのインターフェースに多すぎる色
- ベタ色で十分な場所にグラデーションを使う
私たちのアプローチ：抑制
ベースパレット（デフォルト）
/* ニュートラルカラーにはTailwindのスレートスケールを使用 */
--background: slate-50 /* ページ背景 */
--surface: white /* カード、モーダル */
--border: slate-200 /* 区切り線、境界線 */
--text-primary: slate-900 /* 見出し */
--text-secondary: slate-600 /* 本文 */
--text-muted: slate-400 /* プレースホルダー、ヒント */
アクセントカラー（アプリごとに1色のみ選択）
/* デフォルト：青（プロフェッショナルで信頼性がある） */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50
/* アプリタイプによる代替案： */
/* 金融/銀行 → 緑（お金） */
/* 健康/ウェルネス → ティール（落ち着き） */
/* 食品/レストラン → オレンジ（食欲） */
/* クリエイティブ/デザイン → 紫（創造性） */
/* 緊急/アラート → 赤（注意喚起） */
ルール
- アクセントカラーはアプリごとに1色のみ、例外なし
- アクセントは控えめに使う – ボタン、リンク、ハイライトのみ
- 主要ボタンにグラデーションは絶対に使わない
- 背景は白またはほぼ白、色付きは不可
- ダークモード：適切に反転させ、ただグレーにするだけではダメ </color_system>
<typography_system>
タイポグラフィのルール
フォントスタック
/* どこにもInterを指定しない – システムフォントを使う */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* これでどのプラットフォームでもネイティブに見える */
タイプスケール（Tailwindクラス）
ページタイトル: text-2xl font-semibold (24px)
セクションタイトル: text-lg font-medium (18px)
カードタイトル: text-base font-medium (16px)
本文: text-sm (14px)
小/キャプション: text-xs text-slate-500 (12px)
アンチパターン
❌ すべてに font-bold を使わない
❌ 1枚のカードにフォントサイズを混ぜすぎない
❌ 長いテキストにALL CAPSを使わない
❌ 本文を中央揃えにしない
❌ 純粋な黒 (#000) を使わない – 代わりに slate-900 を使う
良いパターン
✅ 見出し：セミボールドまたはミディアム、レギュラーは使わない ✅ 本文：レギュラーウェイト、適切な行間（1.5〜1.6） ✅ 階層を維持：コンポーネント内で最大3サイズ ✅ ほとんどのテキストは左揃え（中央揃えレイアウトの見出しを除く） </typography_system>
<spacing_system>
スペーシングとレイアウト
スペーシングスケール
Tailwindのデフォルトスケールを一貫して使用：
4 (1rem/16px) - 小さな隙間、インライン要素
6 (1.5rem/24px) - 中程度の隙間、コンポーネント間
8 (2rem/32px) - 大きな隙間、セクション間
12 (3rem/48px) - 特大の隙間、ページセクション間
ページレイアウト
// 標準的なページコンテナ
<div className="p-4 md:p-6 lg:p-8">
{/* ページタイトル */}
<h1 className="text-2xl font-semibold mb-6">ダッシュボード</h1>
{/* 一貫したスペーシングを持つコンテンツセクション */}
<section className="mb-8">
{/* セクションコンテンツ */}
</section>
</div>
カード内部のスペーシング
<Card>
<CardHeader className="pb-4"> {/* デフォルトのパディングを減らす */}
<CardTitle>タイトル</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* 縦方向の隙間を持つコンテンツ */}
</CardContent>
</Card>
アンチパターン
❌ パディングが不統一（ここでp-3、あそこではp-5） ❌ 余白が少なすぎる（窮屈な印象） ❌ 余白が多すぎる（バラバラな印象） ❌ 同じレベルの要素で異なるギャップサイズを使う </spacing_system>
<animation_system>
モーションとアニメーション
哲学
アニメーションは：
- 自然に感じられ、派手ではないこと
- フィードバックを提供し、気を散らさないこと
- 速く（150〜300ms）、遅くないこと
- 控えめで、劇的でないこと
標準トランジション
// ホバー状態 – transition-colors または transition-all を使用
<div className="transition-colors hover:bg-slate-50">
// カードホバー – さりげない浮き上がり
<Card className="transition-shadow hover:shadow-md">
// ボタンホバー – shadcnに組み込み済み、オーバーライドしない
<Button>すでにアニメーション済み</Button>
Framer Motionパターン
// ページトランジション
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
// リストのスタガー
<motion.div
variants={{
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
}}
initial="hidden"
animate="show"
>
{items.map(item => (
<motion.div
key={item.id}
variants={{
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}}
>
{item.content}
</motion.div>
))}
</motion.div>
// マイクロインタラクション – ボタンタップ
<motion.button whileTap={{ scale: 0.98 }}>
クリック
</motion.button>
アニメーションのタイミング
- ホバー効果：150ms
- 小さなトランジション：200ms
- ページトランジション：300ms
- 複雑なアニメーション：最大400〜500ms
アンチパターン
❌ バウンス効果（安っぽく見える） ❌ 遅いアニメーション（500ms以上はもっさり感） ❌ すべての要素にアニメーション（過剰） ❌ どこにでも回転ローダー（代わりにスケルトンを使う） ❌ 派手なエントランスアニメーション </animation_system>
<component_patterns>
コンポーネントデザインパターン
カード
// クリーンなカード – 過剰な装飾なし
<Card className="bg-white border shadow-sm">
<CardContent className="p-4">
{/* コンテンツ */}
</CardContent>
</Card>
// やってはいけない: rounded-3xl、濃いシャドウ、グラデーションボーダー
ボタン
// プライマリアクション
<Button>保存</Button>
// セカンダリアクション
<Button variant="outline">キャンセル</Button>
// 破壊的アクション
<Button variant="destructive">削除</Button>
// アイコンボタン
<Button variant="ghost" size="icon">
<Settings className="h-4 w-4" />
</Button>
// やってはいけない: グラデーションボタン、3D効果、プライマリボタン内のアイコン（通常は）
フォーム
// クリーンなフォームレイアウト
<div className="space-y-4">
<div className="space-y-2">
<Label>名前</Label>
<Input placeholder="名前を入力" />
</div>
<div className="space-y-2">
<Label>メールアドレス</Label>
<Input type="email" placeholder="[email protected]" />
</div>
</div>
// やってはいけない: インラインラベル、フローティングラベル（リクエストがない限り）、入力内のアイコン
テーブル
// クリーンなテーブル
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead>名前</TableHead>
<TableHead>ステータス</TableHead>
<TableHead className="text-right">アクション</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-slate-50">
<TableCell>山田 太郎</TableCell>
<TableCell><Badge>アクティブ</Badge></TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm">編集</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
// やってはいけない: ゼブラストライプ（時代遅れ）、太い境界線、中央揃えのコンテンツ
</component_patterns>
<anti_patterns_detail>
AI生成の赤信号
「Lovable風」(避ける)
- メインカラーに紫/バイオレット
- 白いカードの背景にグラデーション
- すべてに rounded-3xl
- ヘッダー内の絵文字
- 「おかえりなさい、ユーザー様！👋」
- 汎用的なストックフォト風イラスト
「Bootstrap風」(避ける)
- 濃いドロップシャドウ
- 丸いピル型ボタン
- すべてに青いリンク
- 等間隔のカードデッキ
- ジャンボトロン風ヘッダー
「Material風」(リクエストがない限り避ける)
- フローティングアクションボタン
- いたるところに浮き上がったカード
- すべてにリップル効果
- デスクトップでのハンバーガーメニュー
「人間が作った」と思わせる要素
- 抑制 – すべての機能が強調されていない
- 階層 – 明確なプライマリ、セカンダリ、ターシャリ
- 余白 – 呼吸するスペース
- 一貫性 – 同じパターンの繰り返し
- さりげないディテール – 主張しすぎない小さな工夫
- 実際のコンテンツ – プレースホルダーテキストが見えない </anti_patterns_detail>
<review_checklist>
デザインレビューのチェックリスト
カラーチェック
- 使用されているアクセントカラーは1色のみ
- 白背景にグラデーションがない
- 純粋な黒テキストがない
- アクセシビリティのために十分なコントラストがある
タイポグラフィチェック
- コンポーネント内のフォントサイズは最大3種類
- 適切な階層（セミボールドのタイトル、レギュラーの本文）
- ALL CAPSの段落がない
- 行間が読みやすい（1.5以上）
スペーシングチェック
- 全体を通して一貫したパディング
- セクション間に十分な余白がある
- コンテンツが窮屈に感じられない
- モバイルのスペーシングが適切に調整されている
アニメーションチェック
- トランジションは控えめ（150〜300ms）
- バウンス/スプリング効果がない
- 読み込みにはスピナーではなくスケルトンを使用
- ホバー状態がフィードバックを提供している
コンポーネントチェック
- カードに過剰な装飾がない
- ボタンが階層に従っている（プライマリ/セカンダリ）
- フォームがきれいにレイアウトされている
- テーブルが読みやすく、インタラクティブである
最終チェック
- ユーザーはこれがAIが作ったと気づくだろうか？（「いいえ」であるべき）
- 本物のプロダクトのように見えるか？（「はい」であるべき）
- 現代的なSaaSアプリと一貫性があるか？（「はい」であるべき） </review_checklist>