ynitto ui-designer
Webアプリ・モバイルアプリ向けの包括的デザインガイド。50以上のスタイル、97カラーパレット、57フォントペアリング、99 UXガイドライン、25チャートタイプを9テクノロジースタックにわたって網羅。優先度ベースの推奨を備えた検索可能なデータベース。
適用タイミング
以下の場面でこのガイドラインを参照する:
- 新しいUIコンポーネントやページを設計するとき
- カラーパレットやタイポグラフィを選定するとき
- コードのUX問題をレビューするとき
- ランディングページやダッシュボードを構築するとき
- アクセシビリティ要件を実装するとき
ルールカテゴリ（優先度順）
| 優先度 | カテゴリ | 影響度 | ドメイン |
|---|---|---|---|
| 1 | アクセシビリティ | 最重要 | ux |
| 2 | タッチ＆インタラクション | 最重要 | ux |
| 3 | パフォーマンス | 高 | ux |
| 4 | レイアウト＆レスポンシブ | 高 | ux |
| 5 | タイポグラフィ＆カラー | 中 | typography, color |
| 6 | アニメーション | 中 | ux |
| 7 | スタイル選定 | 中 | style, product |
| 8 | チャート＆データ | 低 | chart |
クイックリファレンス
1. アクセシビリティ（最重要）
color-contrast- 通常テキストで最低4.5:1のコントラスト比focus-states- インタラクティブ要素に可視フォーカスリングalt-text- 意味のある画像に説明的なaltテキストaria-labels- アイコンのみのボタンにaria-labelkeyboard-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=1readable-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 0: スコーピング（実行前確認）
以下を確認し、該当しない場合は中断して適切なスキルを提案する:
- UI が必要なプロジェクトであること — CLI ツール、バッチ処理、ライブラリなど UI を持たないプロジェクトの場合は中断する
- デザイン要件が存在すること — 何を作るか（画面・コンポーネント・デザインシステム）が不明な場合はユーザーに確認する
- 対象フレームワークが対応範囲内であること — 対応スタック外の場合はその旨を伝える
Step 1: ユーザー要件を分析する
ユーザーのリクエストからキー情報を抽出:
- プロダクトタイプ: SaaS、EC、ポートフォリオ、ダッシュボード、ランディングページなど
- スタイルキーワード: ミニマル、ポップ、プロフェッショナル、エレガント、ダークモードなど
- 業界: ヘルスケア、フィンテック、ゲーム、教育など
- スタック: React、Vue、Next.jsなど、指定がなければ
html-tailwindをデフォルト
Step 2: デザインシステムを生成する（必須）
まず --design-system で包括的な推奨を取得:
python3 skills/ui-designer/scripts/search.py "<プロダクトタイプ> <業界> <キーワード>" --design-system [-p "プロジェクト名"]
このコマンドは:
- 5つのドメインを並列検索（product、style、color、landing、typography）
ui-reasoning.csvのルールを適用して最適なマッチを選定- 完全なデザインシステムを返却: パターン、スタイル、カラー、タイポグラフィ、エフェクト
- アンチパターンも含む
例:
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— マスターからの逸脱ルール
階層的参照の仕組み:
- 特定ページ（例: 「Checkout」）構築時、まず
design-system/pages/checkout.mdを確認 - ページファイルが存在すればマスターファイルをオーバーライド
- 存在しなければ
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ベストプラクティス | 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 |
プロダクトタイプ別推奨 | SaaS, e-commerce, portfolio, healthcare, beauty, service |
style |
UIスタイル、カラー、エフェクト | glassmorphism, minimalism, dark mode, brutalism |
typography |
フォントペアリング、Google Fonts | elegant, playful, professional, modern |
color |
プロダクトタイプ別カラーパレット | saas, ecommerce, healthcare, beauty, fintech, service |
landing |
ページ構成、CTA戦略 | hero, hero-centric, testimonial, pricing, social-proof |
chart |
チャートタイプ、ライブラリ推奨 | trend, comparison, timeline, funnel, pie |
ux |
ベストプラクティス、アンチパターン | animation, accessibility, z-index, loading |
react |
React/Next.jsパフォーマンス | waterfall, bundle, suspense, memo, rerender, cache |
web |
Webインターフェースガイドライン | aria, focus, keyboard, semantic, virtualize |
prompt |
AIプロンプト、CSSキーワード | （スタイル名） |
利用可能なスタック
| スタック | フォーカス |
|---|---|
html-tailwind |
Tailwindユーティリティ、レスポンシブ、a11y（デフォルト） |
react |
State、hooks、パフォーマンス、パターン |
nextjs |
SSR、ルーティング、画像、APIルート |
vue |
Composition API、Pinia、Vue Router |
svelte |
Runes、stores、SvelteKit |
swiftui |
Views、State、Navigation、Animation |
react-native |
Components、Navigation、Lists |
flutter |
Widgets、State、Layout、Theming |
shadcn |
shadcn/uiコンポーネント、テーマ、フォーム、パターン |
jetpack-compose |
Composables、Modifiers、State Hoisting、Recomposition |
ワークフロー例
ユーザーリクエスト: 「美容サロンのランディングページを作って」
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
検索のコツ
- キーワードは具体的に — 「app」より「healthcare SaaS dashboard」
- 複数回検索 — 異なるキーワードで異なるインサイトが得られる
- ドメインを組み合わせる — Style + Typography + Color = 完全なデザインシステム
- 常にUXを確認 — 「animation」「z-index」「accessibility」で頻出問題をチェック
- stackフラグを使う — スタック固有のベストプラクティスを取得
- 反復する — 最初の検索がマッチしなければ別のキーワードを試す
プロフェッショナルUIのための共通ルール
UIがアマチュアに見える原因となる、見落としがちな問題:
アイコン＆ビジュアル要素
| ルール | やるべき | やってはいけない |
|---|---|---|
| 絵文字アイコン禁止 | SVGアイコンを使用（Heroicons、Lucide、Simple Icons） | UIアイコンとして絵文字を使用 |
| 安定したホバー状態 | hover時にcolor/opacityトランジション | レイアウトがずれるscaleトランスフォーム |
| 正確なブランドロゴ | Simple Iconsから公式SVGを調査 | ロゴパスを推測したり不正確なものを使用 |
| 一貫したアイコンサイズ | viewBox(24x24)固定でw-6 h-6を使用 | アイコンサイズをランダムに混在 |
インタラクション＆カーソル
| ルール | やるべき | やってはいけない |
|---|---|---|
| カーソルポインター | クリック/ホバー可能なカードに cursor-pointer 追加 |
インタラクティブ要素でデフォルトカーソルのまま |
| ホバーフィードバック | ビジュアルフィードバック（色、影、ボーダー）を提供 | 要素がインタラクティブだと分からない状態 |
| スムーズなトランジション | transition-colors duration-200 を使用 |
即時切り替えや500ms超の遅すぎるトランジション |
ライト/ダークモードのコントラスト
| ルール | やるべき | やってはいけない |
|---|---|---|
| ライトモードのglassカード | bg-white/80 以上の不透明度を使用 |
bg-white/10（透明すぎる）を使用 |
| ライトモードのテキストコントラスト | テキストに #0F172A（slate-900）を使用 |
本文に #94A3B8（slate-400）を使用 |
| ミュートテキスト（ライト） | 最低 #475569（slate-600）を使用 |
gray-400以下を使用 |
| ボーダーの可視性 | ライトモードで border-gray-200 を使用 |
border-white/10（見えない）を使用 |
レイアウト＆スペーシング
| ルール | やるべき | やってはいけない |
|---|---|---|
| フローティングナビバー | top-4 left-4 right-4 のスペーシング追加 |
top-0 left-0 right-0 にナビバーを固定 |
| コンテンツパディング | 固定ナビバーの高さを考慮 | 固定要素の後ろにコンテンツが隠れる |
| 一貫したmax-width | 同じ 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を尊重