ui-designer

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

適用タイミング

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

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

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

ux

ux

ux

ux

typography

color

ux

style

product

chart

クイックリファレンス

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 <最大結果数>]

詳細検索が必要な場面:

style

--domain style "glassmorphism dark"

chart

--domain chart "real-time dashboard"

ux

--domain ux "animation accessibility"

typography

--domain typography "elegant luxury"

landing

--domain landing "hero social-proof"

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

検索リファレンス

利用可能なドメイン

product

style

typography

color

landing

chart

ux

react

web

prompt

利用可能なスタック

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

# 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がアマチュアに見える原因となる、見落としがちな問題:

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

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

cursor-pointer

transition-colors duration-200

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

bg-white/80

bg-white/10

#0F172A

#94A3B8

#475569

border-gray-200

border-white/10

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

top-4 left-4 right-4

top-0 left-0 right-0

max-w-6xl

max-w-7xl

納品前チェックリスト

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

  を尊重