UI Designer

ui-designer

Webアプリ・モバイルアプリ向けの包括的デザインガイド。50以上のスタイル、97カラーパレット、57フォントペアリング、99 UXガイドライン、25チャートタイプを9テクノロジースタックにわたって網羅。優先度ベースの推奨を備えた検索可能なデータベース。

適用タイミング

以下の場面でこのガイドラインを参照する:

• 新しいUIコンポーネントやページを設計するとき
• カラーパレットやタイポグラフィを選定するとき
• コードのUX問題をレビューするとき
• ランディングページやダッシュボードを構築するとき
• アクセシビリティ要件を実装するとき

ルールカテゴリ（優先度順）

クイックリファレンス

1. アクセシビリティ（最重要）

• color-contrast - 通常テキストで最低4.5:1のコントラスト比
• focus-states - インタラクティブ要素に可視フォーカスリング
• alt-text - 意味のある画像に説明的なaltテキスト
• aria-labels - アイコンのみのボタンにaria-label
• keyboard-nav - タブ順序がビジュアル順序と一致
• form-labels - for属性付きlabelを使用

2. タッチ＆インタラクション（最重要）

• touch-target-size - 最小44x44pxのタッチターゲット
• hover-vs-tap - メインの操作にはclick/tapを使用
• loading-buttons - 非同期操作中はボタンを無効化
• error-feedback - 問題箇所の近くに明確なエラーメッセージ
• cursor-pointer - クリック可能な要素にcursor-pointerを追加

3. パフォーマンス（高）

• image-optimization - WebP、srcset、遅延読み込みを使用
• reduced-motion - prefers-reduced-motionを確認
• content-jumping - 非同期コンテンツ用のスペースを確保

4. レイアウト＆レスポンシブ（高）

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - モバイルで最小16pxの本文テキスト
• horizontal-scroll - コンテンツがビューポート幅に収まること
• z-index-management - z-indexスケールを定義（10, 20, 30, 50）

5. タイポグラフィ＆カラー（中）

• line-height - 本文テキストに1.5〜1.75を使用
• line-length - 1行あたり65〜75文字に制限
• font-pairing - 見出しと本文のフォントの個性を合わせる

6. アニメーション（中）

• duration-timing - マイクロインタラクションに150〜300msを使用
• transform-performance - width/heightではなくtransform/opacityを使用
• loading-states - スケルトンスクリーンまたはスピナー

7. スタイル選定（中）

• style-match - プロダクトタイプに合ったスタイルを選ぶ
• consistency - 全ページで同じスタイルを使用
• no-emoji-icons - 絵文字ではなくSVGアイコンを使用

8. チャート＆データ（低）

• chart-type - データタイプに合ったチャートを選ぶ
• color-guidance - アクセシブルなカラーパレットを使用
• data-table - アクセシビリティのためにテーブル代替を提供

使い方

以下のCLIツールを使って特定のドメインを検索する。

前提条件

Pythonがインストールされているか確認:

python3 --version || python --version

インストールされていない場合、OSに応じてインストール:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

このスキルの使い方

ユーザーがUI/UX関連の作業（design、build、create、implement、review、fix、improve）を依頼した場合、以下のワークフローに従う:

Step 1: ユーザー要件を分析する

ユーザーのリクエストからキー情報を抽出:

• プロダクトタイプ: SaaS、EC、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルキーワード: ミニマル、ポップ、プロフェッショナル、エレガント、ダークモードなど
• 業界: ヘルスケア、フィンテック、ゲーム、教育など
• スタック: React、Vue、Next.jsなど、指定がなければ html-tailwind をデフォルト

Step 2: デザインシステムを生成する（必須）

まず --design-system で包括的な推奨を取得:

python3 skills/ui-designer/scripts/search.py "<プロダクトタイプ> <業界> <キーワード>" --design-system [-p "プロジェクト名"]

このコマンドは:

1. 5つのドメインを並列検索（product、style、color、landing、typography）
2. ui-reasoning.csv のルールを適用して最適なマッチを選定
3. 完全なデザインシステムを返却: パターン、スタイル、カラー、タイポグラフィ、エフェクト
4. アンチパターンも含む

例:

python3 skills/ui-designer/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: デザインシステムの永続化（マスター＋オーバーライドパターン）

デザインシステムをセッション横断で階層的に参照するために --persist を追加:

python3 skills/ui-designer/scripts/search.py "<クエリ>" --design-system --persist -p "プロジェクト名"

作成されるファイル:

• design-system/MASTER.md — グローバルなデザインルールの真のソース
• design-system/pages/ — ページ固有のオーバーライド用フォルダ

ページ固有のオーバーライド付き:

python3 skills/ui-designer/scripts/search.py "<クエリ>" --design-system --persist -p "プロジェクト名" --page "dashboard"

追加で作成:

• design-system/pages/dashboard.md — マスターからの逸脱ルール

階層的参照の仕組み:

1. 特定ページ（例: 「Checkout」）構築時、まず design-system/pages/checkout.md を確認
2. ページファイルが存在すればマスターファイルをオーバーライド
3. 存在しなければ design-system/MASTER.md のみを使用

コンテキスト対応の参照プロンプト:

[ページ名] ページを構築中です。design-system/MASTER.md を読んでください。
また design-system/pages/[page-name].md が存在するか確認してください。
ページファイルが存在すれば、そのルールを優先してください。
存在しなければ、マスタールールのみを使用してください。
では、コードを生成してください...

Step 3: 詳細検索で補完する（必要に応じて）

デザインシステム取得後、ドメイン検索で詳細を補完:

python3 skills/ui-designer/scripts/search.py "<キーワード>" --domain <ドメイン> [-n <最大結果数>]

詳細検索が必要な場面:

Step 4: スタック別ガイドライン（デフォルト: html-tailwind）

スタック固有のベストプラクティスを取得。ユーザーが指定しない場合は html-tailwind をデフォルトに:

python3 skills/ui-designer/scripts/search.py "<キーワード>" --stack html-tailwind

利用可能なスタック: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

検索リファレンス

利用可能なドメイン

利用可能なスタック

ワークフロー例

ユーザーリクエスト: 「美容サロンのランディングページを作って」

Step 1: 要件分析

• プロダクトタイプ: 美容/スパサービス
• スタイルキーワード: エレガント、プロフェッショナル、ソフト
• 業界: 美容/ウェルネス
• スタック: html-tailwind（デフォルト）

Step 2: デザインシステム生成（必須）

python3 skills/ui-designer/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

出力: パターン、スタイル、カラー、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。

Step 3: 詳細検索で補完（必要に応じて）

# アニメーションとアクセシビリティのUXガイドラインを取得
python3 skills/ui-designer/scripts/search.py "animation accessibility" --domain ux

# 必要に応じて代替タイポグラフィを取得
python3 skills/ui-designer/scripts/search.py "elegant luxury serif" --domain typography

Step 4: スタック別ガイドライン

python3 skills/ui-designer/scripts/search.py "layout responsive form" --stack html-tailwind

その後: デザインシステム + 詳細検索結果を統合してデザインを実装する。

出力フォーマット

--design-system フラグは2つの出力形式をサポート:

# ASCIIボックス（デフォルト）- ターミナル表示に最適
python3 skills/ui-designer/scripts/search.py "fintech crypto" --design-system

# Markdown - ドキュメント化に最適
python3 skills/ui-designer/scripts/search.py "fintech crypto" --design-system -f markdown

検索のコツ

1. キーワードは具体的に — 「app」より「healthcare SaaS dashboard」
2. 複数回検索 — 異なるキーワードで異なるインサイトが得られる
3. ドメインを組み合わせる — Style + Typography + Color = 完全なデザインシステム
4. 常にUXを確認 — 「animation」「z-index」「accessibility」で頻出問題をチェック
5. stackフラグを使う — スタック固有のベストプラクティスを取得
6. 反復する — 最初の検索がマッチしなければ別のキーワードを試す

プロフェッショナルUIのための共通ルール

UIがアマチュアに見える原因となる、見落としがちな問題:

アイコン＆ビジュアル要素

インタラクション＆カーソル

ライト/ダークモードのコントラスト

レイアウト＆スペーシング

納品前チェックリスト

UIコードを納品する前に以下を確認:

ビジュアル品質

• アイコンに絵文字を使用していない（SVGを使用）
• 全アイコンが統一されたアイコンセット（Heroicons/Lucide）から
• ブランドロゴが正確（Simple Iconsで検証済み）
• ホバー状態でレイアウトシフトが発生しない
• テーマカラーを直接使用（bg-primary）、var()ラッパーではない

インタラクション

• クリック可能な全要素に cursor-pointer
• ホバー状態で明確なビジュアルフィードバック
• トランジションがスムーズ（150〜300ms）
• キーボードナビゲーション用のフォーカス状態が可視

ライト/ダークモード

• ライトモードのテキストが十分なコントラスト（最低4.5:1）
• Glass/透明要素がライトモードで可視
• ボーダーが両モードで可視
• 両モードでテスト済み

レイアウト

• フローティング要素がエッジから適切なスペーシング
• 固定ナビバーの後ろにコンテンツが隠れていない
• 375px、768px、1024px、1440pxでレスポンシブ
• モバイルで水平スクロールなし

アクセシビリティ

• 全画像にaltテキスト
• フォーム入力にラベル
• 色だけで情報を伝えていない
• prefers-reduced-motion を尊重