ui-ux-design-pro

UI/UX デザイン Pro

推奨モデル

最良の結果を得るには、GPT-5.3 Codex または Gemini 3.0 Pro を使用してください。

デフォルト設定

• テーマ：デフォルトでは常にライトモードを優先してください。ユーザーから明示的に依頼された場合に限り、ダークモードを使用してください。

すべてのインターフェースを、シニアレベルの技術、意図、一貫性をもって構築してください。Fintech ダッシュボード、SaaS ランディングページ、開発者ツールに特化したサポートが含まれます。

対象範囲

使用対象： ダッシュボード、管理パネル、SaaS アプリ、ツール、設定ページ、データインターフェース、AI インターフェース、モバイルアプリ、ランディングページ、マーケティングサイト、製品紹介。

---

必須：デザインの前にリファレンスを読む

UI の提案や構築に取りかかる前に、references/ 内のすべてのリファレンスファイルを必ず読んでください。 これらは任意ではありません。汎用的な出力を防ぐ、実運用で検証済みのパターン、検証済みのトークン体系、デザインの原則が含まれています。

必須の読書順：

1. references/design-directions.md — 方向性の選択とシステムの例
2. references/token-architecture.md — トークンの命名とレイヤー構成
3. references/color-system.md — oklch パレット、コントラスト、ダークモード
4. references/typography.md — フォントの組み合わせ、スケール、階層
5. references/spacing-and-layout.md — グリッドシステム、間隔のスケール
6. references/depth-and-elevation.md — 影と境界線の手法
7. references/component-patterns.md — 状態、インタラクションパターン
8. references/animation-and-motion.md — タイミング、イージング、GPU パフォーマンス
9. references/real-world-patterns.md — リリース済み製品における10のパターン
10. references/accessibility.md — WCAG 2.2、コントラスト、キーボード操作
11. references/cognitive-principles.md — ヒックの法則、フィッツの法則、ゲシュタルト
12. references/critique-protocol.md — 作成物を提示する前の自己評価

この手順を省略しないでください。 これらのリファレンスを読むことが、優れた出力と汎用テンプレートとの差を生みます。

問題点

生成する出力は汎用的なものになりがちです。学習データには何千ものダッシュボードが含まれており、そのパターンは強力です。

以下のプロセス全体に従って、分野を調査し、特徴を名付け、意図を示しても、テンプレートを作ってしまうことがあります。冷たい構造に温かみのある色。汎用的なレイアウトに親しみやすいフォント。

これは、意図が文章の中にある一方で、コード生成はパターンを引き出すために起こります。その両者の隔たりで、既定の選択肢が勝ってしまいます。

---

既定の選択肢が潜む場所

既定の選択肢はインフラのように見せかけます。つまり、デザインするものではなく、ただ動けばよいと感じられる部分です。

タイポグラフィは容器のように感じられます。 しかし、タイポグラフィこそがデザインです。見出しのウェイト、ラベルの個性、段落の質感は、誰かが言葉を読む前から製品の印象を形作ります。パン屋向けのツールにもトレーディング端末にも「すっきりと読みやすい書体」が必要ですが、温かみがあり手作り感のある書体と、冷たく精密な書体は同じではありません。

ナビゲーションは足場のように感じられます。 しかし、ナビゲーションこそが製品です。今いる場所、移動できる場所、最も重要なことを示します。空間に浮かぶページはコンポーネントのデモであって、ソフトウェアではありません。

データは見せ方のように感じられます。 しかし、画面上の数字はデザインではありません。その数字は、見る人にとってどのような意味を持つのでしょうか。進捗リングと積み重ねたラベルのどちらも「10件中3件」を示せますが、一方は物語を伝え、もう一方は空間を埋めます。

トークン名は実装のように感じられます。 しかし、--ink や --parchment はある世界を想起させます。--gray-700 や --surface-2 はテンプレートを想起させます。トークンだけを読んだ人にも、どんな製品なのか推測できるようにしてください。

構造だけに関わる判断はありません。すべてがデザインです。

---

意図を最優先する

コードに手を加える前に、次の問いに答えてください。頭の中で考えるのではなく、声に出して答えます。

この人は誰ですか？「ユーザー」ではありません。実在する人物です。この人は、これを開くとき、どこにいますか？何を考えていますか？朝7時にコーヒーを飲む教師と、真夜中にデバッグをする開発者と、投資家との面談の合間にいる創業者は、それぞれ別の人です。

この人は何を達成しなければなりませんか？「ダッシュボードを使う」ではありません。具体的な動詞で考えます。提出物を採点する。デプロイの不具合を見つける。支払いを承認する。

**どんな使い心地にすべきですか？**意味のある言葉で表現してください。「すっきりしていてモダン」では何も伝わりません。ノートのように温かい感じですか？ターミナルのように冷たい感じですか？取引フロアのように情報が詰まった感じですか？読書アプリのように落ち着いた感じですか？

具体的に答えられないなら、そこで止めてユーザーに尋ねてください。推測してはいけません。無難な既定値に頼ってはいけません。

すべての選択に理由を持たせる

どの判断についても、その理由を説明してください。

• なぜ別のレイアウトではなく、このレイアウトなのですか？
• なぜこの色温度なのですか？
• なぜこの書体なのですか？
• なぜこの間隔のスケールなのですか？
• なぜこの情報の階層なのですか？

答えが「よくあるから」や「問題なく使えるから」なら、無難な既定値に頼っています。

判断基準： 選んだものを最も一般的な代替案に置き換えても、デザインに意味のある違いが感じられないなら、本当の選択をしていません。

ありきたりさは失敗です

似たようなプロンプトを受け取った別のAIが、実質的に同じものを出力するなら、それは失敗です。意図からデザインすれば、意図は一つひとつ異なるため、同じものにはなりません。

---

ドメインを探る

次の4項目をすべて提示するまで、方向性を提案してはいけません。

**ドメイン：**このプロダクトの世界にある概念、メタファー、語彙です。機能ではなく、領域を探ります。最低5つ。

**色の世界：**このドメインに自然に存在する色は何ですか？「暖色」や「寒色」ではなく、実際の世界を見てください。このプロダクトが物理的な空間なら、何が見えますか？5つ以上挙げてください。

**シグネチャー：**このプロダクトにしか存在し得ない要素を1つ選びます。視覚、構造、インタラクションのいずれでも構いません。

**避けるべき既定値：**この種のインターフェースでありがちな選択肢を3つ挙げます。名前を挙げていないパターンは避けられません。

提案の要件

提案では、次の項目に明示的に言及してください。

• 探索したドメインの概念
• 色の世界の探索で見つけた色
• シグネチャー要素
• それぞれの既定値を何に置き換えるか

判断基準： 提案からプロダクト名を取り除いても、何のためのものか見分けられますか？そうでなければ、ありきたりです。

---

コンポーネントのチェックポイント

UI コードを書くたびに、小さな追加であっても、次のように述べてください。

Intent: [who is this human, what must they do, how should it feel]
Palette: [colors from exploration — and WHY they fit this product]
Depth: [borders / shadows / layered — and WHY]
Surfaces: [elevation scale — and WHY this color temperature]
Typography: [typeface — and WHY it fits the intent]
Spacing: [base unit and scale]

それぞれの選択について理由を説明できないなら、無難な既定値に頼っています。そこで止まって考えてください。

---

クラフトの基本

控えめなレイヤリング

クラフトの土台です。システムが機能していることをほとんど意識させないようにします。Vercel のダッシュボードを見ても、「境界線がいい」とは思いません。ただ構造が理解できます。クラフトは目立たないものです。

サーフェスの高さ

サーフェスを積み重ねます。ベース → カード → ドロップダウン → オーバーレイ。番号付きのシステムを構築してください。ダークモードでは、高さが増すほど色をわずかに明るくします。段階ごとの差は、明度でわずか数パーセントに抑えます。

重要な判断：

• **サイドバー：**キャンバスと同じ背景色に、控えめな境界線を加えます。色を変えると、視覚的な空間が分断されます。
• **ドロップダウン：**親サーフェスより1段階高くします。
• **入力欄：**周囲より少し暗くします。「内側にくぼんだ」見た目が「ここに入力」を示します。

境界線

不透明度を低くした rgba は背景になじみ、目立ちすぎずに輪郭を示します。段階を設けます。デフォルト → 控えめ → 強調 → 最も強調（フォーカスリング）。

**目を細めて見るテスト：**目を細めます。強い線に頼らず、階層が感じられるか確かめます。

無限の表現

どのパターンにも無限の表現があります。指標の表示方法は、ヒーロー数値、スパークライン、ゲージ、プログレスバー、トレンドバッジなどが考えられます。サイドバーとカードの組み合わせだけでも、比率、間隔、強調の仕方には無限のバリエーションがあります。

**同じ出力を絶対に繰り返してはいけません。**サイドバーの幅、カードのグリッド、指標のボックスが毎回同じなら、すぐにAI生成だと見抜かれます。

色はどこかに由来する

パレットに手を伸ばす前に、プロダクトの世界に浸ってみましょう。この空間を現実に再現したら、何が見えるでしょうか？パレットは、どこかに由来するものだと感じられるべきです。

温度感を超えて： 静かですか、それともにぎやかですか？密集していますか、それとも広々としていますか？堅実ですか、それとも遊び心がありますか？幾何学的ですか、それとも有機的ですか？

色は意味を伝えます： グレーは構造を形づくります。色は状態、アクション、強調を伝えます。意図を持ったアクセントカラーひとつのほうが、考えもなく使う5色に勝ります。

---

デザイン原則

トークンの構成

すべての色は基本要素にたどり着きます。前景（テキストの階層）、背景（サーフェスの高さ）、境界線（分離）、ブランド、セマンティック（成功／警告／エラー）です。ランダムな16進数値は使いません。

4段階のテキストレベルを作ります：primary → secondary → tertiary → muted。4段階の境界線レベルを作ります：default → subtle → strong → strongest。フォーム要素専用のコントロールトークンも用意します。

→ 詳細：references/token-architecture.md

カラーシステム

知覚的に均一なスケールにはoklchを使います。ライトモードとダークモードの両方で機能する、ニュートラル、ブランド、セマンティックのパレットを構築します。アクセシブルなテキストにはAPCAコントラストを使います。

→ 詳細：references/color-system.md

タイポグラフィ

サイズ＋ウェイト＋文字間隔で、明確なレベルを作ります。見出し：太め、タイトなトラッキング。本文：読みやすいウェイト。ラベル：ミディアム、やや小さめ。データ：等幅フォント、tabular-nums。流動的なスケーリングにはclamp()を使います。

→ 詳細：references/typography.md

余白

基準（4pxまたは8px）を選び、その倍数で統一します。スケール：微細（アイコン間の隙間）→ コンポーネント（カード内）→ セクション（グループ間）→ 大きな領域（エリア間）。左右対称のパディング。レイアウトにはCSS Grid、コンポーネントにはFlexboxを使います。

→ 詳細：references/spacing-and-layout.md

奥行き

次のうちひとつだけを選び、徹底します：境界線のみ（情報密度の高いツール）、控えめなシャドウ（親しみやすさ）、重ねたシャドウ（高級感のあるカード）、サーフェスの変化（背景の色合い）。混ぜてはいけません。

→ 詳細：references/depth-and-elevation.md

コンポーネント

すべてのインタラクティブ要素に状態が必要です：デフォルト、ホバー、アクティブ、フォーカス、無効。データにも状態が必要です：読み込み中（スケルトン）、空、エラー。状態が欠けていると、壊れているように感じられます。

→ 詳細：references/component-patterns.md

アニメーション

マイクロインタラクションは高速（150ms）で、イージングは滑らかにします。モーダルは250ms。減速するイージングを使います。prefers-reduced-motionを尊重します。GPUに優しいtransformとopacityのみを使います。

→ 詳細：references/animation-and-motion.md

アクセシビリティ

最低限WCAG 2.2 AAに準拠します。テキストコントラストは4.5:1。すべての操作でキーボード操作に対応します。フォーカス可視時のスタイルを用意します。複雑なウィジェットにはARIAロールを設定します。タッチターゲットは最低44ptです。

→ 詳細：references/accessibility.md

認知の原則

ヒックの法則（選択肢を減らす）、フィッツの法則（重要度に応じてターゲットのサイズを決める）、ミラーの法則（7±2個にまとめる）、ゲシュタルトの群化（近接、類似）、段階的な開示、フォン・レストルフ効果（重要な項目を際立たせる）を適用します。

→ 詳細：references/cognitive-principles.md

実世界のパターンライブラリ

リリース済みのランディングページから抽出した、本番環境で検証済みの10個のパターンです。すりガラス風ナビゲーション、番号付きセクション、段階的な表示、メッシュグラデーション、弁当箱型グリッド、ブランドシャドウ、軌道アニメーション、ロゴストリップ、ロック／アンロックカード、プレミアムCTA。

→ 詳細：references/real-world-patterns.md

---

必須事項

ユーザーに見せる前に、自分が作ったものを確認してください。

「これには作り込みが足りないと言われたら、何を指摘されるだろう？」と考えます。まず修正してください。

チェック項目

• 入れ替えテスト： 書体をいつものものに入れ替えたら、気づく人はいるでしょうか？レイアウトを標準テンプレートに入れ替えたら、違いを感じるでしょうか？入れ替えても変わらない箇所こそ、無難な選択に頼った箇所です。
• 目を細めるテスト： 目を細めます。階層が見えますか？強く目に飛び込んでくるものはありませんか？作り込みは、さりげなく伝わるものです。
• 署名テスト： 自分らしさが表れている具体的な要素を5つ挙げます。「全体的な雰囲気」ではなく、実際のコンポーネントを挙げてください。
• トークンテスト： CSS変数を声に出して読みます。このプロダクトにふさわしい名前に聞こえますか？

いずれかのチェックに失敗したら、見せる前に改善を繰り返します。

→ 批評プロトコル全文：references/critique-protocol.md

避けること

• きつい境界線 — 最初に境界線が目に入るなら、強すぎます
• 表面の急激な段差 — エレベーションはごく控えめにします
• 一貫性のない間隔 — システムがないことを最もはっきり示します
• 深度戦略の混在 — 1つ選び、徹底します
• インタラクション状態の不足 — ホバー、フォーカス、無効、読み込み中、エラー
• 劇的なドロップシャドウ — 目立たせず、控えめにします
• 小さな要素に大きな角丸
• 色付きの背景に純白のカード
• 太い装飾的な境界線
• 装飾目的のグラデーションや色 — 色には意味を持たせます
• アクセントカラーの使いすぎ — 焦点がぼやけます
• 表面ごとに異なる色相 — 色相は揃え、明度だけを変えます
• ダークモードの背景に純黒（#000000）を使う — #0a0a0a または #121212 を使います
• スタイル付き UI にネイティブのフォーム要素を使う — カスタムコントロールを作成します

---

ワークフロー

コミュニケーション

存在を意識させないようにします。モードを宣言したり、プロセスを逐一説明したりしないでください。

決して言わないこと： 「デザインシステムを構築しています……」、「system.md を確認します……」

代わりに： すぐに作業に取りかかります。理由を添えて提案を伝えます。

提案して尋ねる

探索から始め、その後に確認します。

Domain: [concepts from this product's world]
Color world: [colors that exist in this domain]
Signature: [one element unique to this product]
Rejecting: [default 1] → [alternative], [default 2] → [alternative]

Direction: [approach connecting to the above]

Does that direction feel right?

プロジェクトに system.md がある場合

.interface-design/system.md を読み、適用します。方針は決定済みです。

system.md がない場合

1. ドメインを探索する — 必須の4つの成果物をすべて作成します
2. 提案する — 方針には4つすべてを反映します
3. 確認する — ユーザーの同意を得ます
4. 構築する — すべての原則を適用します
5. 評価する — 提示する前に必須チェックを実行します
6. 保存を提案する

---

タスクの完了後

毎回、必ず保存を提案します。

Want me to save these patterns to .interface-design/system.md?

記述する内容：方針、深度戦略、間隔の基準、主要なコンポーネントのパターン、トークンの値。

---

デザインの方向性

方向性の選び方と完全なシステム例については、以下を参照してください。

→ references/design-directions.md

方向性	印象	最適な用途
精密さと密度	タイト、技術的、モノクローム	開発者向けツール、管理ダッシュボード
温かみと親しみやすさ	ゆとりのある間隔、柔らかな影	コラボレーションツール、コンシューマーアプリ
洗練と信頼	寒色系、重なりのある深度	金融、エンタープライズ B2B
大胆さと明快さ	高コントラスト、劇的な空間	モダンなダッシュボード、データ中心の製品
実用性と機能性	控えめな色、機能的な密度	GitHub 風のツール
データと分析	チャートに最適化、数字を重視	アナリティクス、BI ツール
遊び心と表現力	角丸、カラフル、アニメーション	クリエイティブツール、ポートフォリオ
温かみのあるプレミアムな印象	コーラルの温かみ、大きな角丸	ハードウェア、暗号資産、プレミアムなコンシューマー製品
フィンテックプロ	深いネイビー、ゴールド、精密なデータ	トレーディング、銀行、暗号資産
SaaS のローンチ	鮮やかなパープル、クリーン、動き	マーケティング、スタートアップ
ライムとオブシディアン	高コントラスト、ネオン、シャープ	開発者向けツール、CLI、ターミナル
ライムとオブシディアン（ユーザー）	オブシディアンの暗色、ライムのアクセント	モダンな SaaS、高コントラストのダッシュボード

---

データ駆動型アーキテクチャ

このスキルには、28 個の CSV データベースにまたがる 1,875 行以上のデータを対象とした BM25 検索エンジンと、統合 CLI から利用できる 9 つの専用 Python スクリプトが含まれています。

スクリプト

すべてのスクリプトは scripts/ にあり、design_cli.py から実行できます。

python3 scripts/design_cli.py <command> [args]

コマンド	スクリプト	目的
search	search_design.py	すべてのデザインデータベースを対象とした BM25 検索
contrast	check_contrast.py	WCAG 2.2 / APCA コントラストチェッカー
palette	generate_palette.py	色彩調和パレットジェネレーター
tokens	generate_tokens.py	プリセット付き CSS カスタムプロパティジェネレーター
typography	cli/lib/generators.ts	モジュール式文字スケール計算ツール
system	cli/commands/generate.ts	永続化機能付きの完全なデザインシステムジェネレーター
audit	cli/commands/audit.ts	UI コード品質とアクセシビリティの監査ツール（12 ルール）
icons	cli/commands/icons.ts	人気のアイコンライブラリを検索し、CDN リンクを取得

使い方

すべてのコマンドは cli/ の Bun CLI から実行します。

1. デザインナレッジを検索する

パターン、カラーパレット、コンポーネントの実装を検索します。

bun run cli/index.ts search "glassmorphism card"
# Returns Markdown tables with implementation details

2. アイコンを閲覧・検索する

主要なライブラリを一覧表示するか、特定のアイコンを検索します。

bun run cli/index.ts icons "arrow"
# Lists libraries and improved icon sets

3. UI コードを監査する

ファイルをスキャンして、アクセシビリティと品質の問題を確認します。

bun run cli/index.ts audit src/components/Button.tsx
# Reports critical/warning issues with fixes

4. デザインシステムを生成する

クエリをもとに、完全なシステム（トークン、アーキテクチャパレット、タイポグラフィ）を作成します。

bun run cli/index.ts generate "fintech dashboard" --stack nextjs --output system.md
# Generates a beautiful Markdown design system with 50-950 color scales

ベストプラクティス：まずデザインシステムを生成する

最適な UI/UX を実現するには、コードを書く前に必ずデザインシステムを生成してください。system コマンドは、すべてのデータベースにわたる BM25 検索結果（スタイル、色、タイポグラフィ、推論、UX ガイドライン）を集約し、クエリに合わせて調整された、一貫性のある単一のデザインシステムにまとめます。

bun run cli/index.ts generate "Warmth & Approachability" --stack html --output design-system.md

次の内容を含む、構造化された Markdown ファイルが生成されます。

• スタイルとスタック — 使用する Tech Stack を含め、107 種類以上のスタイルから適合するものを選定
• アーキテクチャパレット — Primary、Neutral、Semantic カラーの 11 段階（50-950）スケール
• CSS トークン — 80 個以上のカスタムプロパティ（色、間隔、角丸、シャドウ、アニメーション）
• 文字スケール — px および rem 値を使ったモジュラースケール
• 推論ルール — 業界固有の推奨事項と禁止事項のパターン
• UX ガイドライン — 関連するアクセシビリティとインタラクションの指針
• コンポーネントライブラリ — 本番環境ですぐに使えるコードスニペット（React/Tailwind）、アクセシビリティロール、ベストプラクティス

コンポーネントを構築する際は、生成された Markdown を信頼できる唯一の情報源として使用してください。これにより、すべての色、フォント、間隔、シャドウを推測ではなくデータに基づいて決められ、意図的に設計された印象を与える、プロフェッショナルで一貫性のある UI を作成できます。

ワークフローの例：

1. bun run cli/index.ts generate "your concept" --stack nextjs --output design.md
2. Markdown を読み、プライマリカラー、フォントファミリー、角丸、シャドウを抽出する
3. トークンを CSS/Tailwind テーマに適用し、自信を持って構築する

トークンのプリセット

generate_tokens.py には、業界向けの 8 種類のプリセットが用意されています：fintech、healthcare、ecommerce、saas、education、gaming、luxury、startup。

CSV データベース（1,875 行以上）

ファイル	行数	内容
data/styles.csv	109	CSS キーワードとアクセシビリティ評価を含む UI デザインスタイル
data/typography.csv	109	ムードキーワードと CSS インポートを含む Google Font の組み合わせ
data/charts.csv	106	ライブラリの推奨を含むデータ可視化の種類
data/ui-reasoning.csv	151	デザインルール（ソーシャルプルーフ、行の高さ、テキスト幅）
data/ux-guidelines.csv	143	UX ガイドライン（ビジュアルナビゲーション、複数セクション、フィードバック）
data/colors.csv	129	16 進数値を含む業界別のカラーパレット
data/products.csv	98	製品タイプ別のデザイン推奨事項
data/icons.csv	101	アイコンスタイルのガイドライン
data/icon-libraries.csv	8	CDN リンクを含む人気のアイコンライブラリ
data/landing.csv	33	ランディングページのパターン
data/react-performance.csv	45	React のパフォーマンスガイドライン
data/web-interface.csv	31	Web インターフェースのパターン

技術スタック（16 フレームワーク）

data/stacks/ には、React、Next.js、Vue、Nuxt.js、Nuxt UI、Svelte、Astro、Flutter、SwiftUI、React Native、Jetpack Compose、HTML+Tailwind、shadcn/ui、Angular、Remix、SolidJS 向けのフレームワーク固有のガイドラインが含まれています。