ui-ux-design

UI デザインリファレンス - 検索可能なパターンデータベース

UI/UX のパターン、スタイル、カラーパレット、フォントの組み合わせ、チャートの種類、製品の推奨事項、UX ガイドライン、スタック固有のベストプラクティスを厳選してまとめたリファレンスデータベースです。実績のあるデザインパターンや実装ガイダンスを検索するためのルックアップツールとしてご利用ください。

前提条件

Python がインストールされているか確認します。

python3 --version || python --version

Python がインストールされていない場合は、ユーザーの OS に応じてインストールします。

macOS：

brew install python3

Ubuntu/Debian：

sudo apt update && sudo apt install python3

Windows：

winget install Python.Python.3.12

---

このスキルの使い方

ユーザーから UI/UX に関する作業（デザイン、構築、作成、実装、レビュー、修正、改善）を依頼された場合は、次のワークフローに従います。

ステップ 1：ユーザー要件を分析する

ユーザーの依頼から重要な情報を抽出します。

• 製品の種類：SaaS、eコマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード：ミニマル、遊び心のある、プロフェッショナル、エレガント、ダークモードなど
• 業界：ヘルスケア、フィンテック、ゲーム、教育など
• スタック：React、Vue、Next.js。指定がない場合は html-tailwind を使用します

ステップ 2：関連するドメインを検索する

search.py を複数回使って、包括的な情報を収集します。十分なコンテキストが得られるまで検索します。

python3 .claude/skills/ui-ux-design/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

推奨する検索順序：

1. 製品 - 製品の種類に応じたスタイルの推奨事項を取得します
2. スタイル - 詳細なスタイルガイド（色、効果、フレームワーク）を取得します
3. タイポグラフィ - Google Fonts のインポートを含むフォントの組み合わせを取得します
4. 色 - カラーパレット（Primary、Secondary、CTA、Background、Text、Border）を取得します
5. ランディング - ページ構成を取得します（ランディングページの場合）
6. チャート - チャートの推奨事項を取得します（ダッシュボード／分析の場合）
7. UX - ベストプラクティスとアンチパターンを取得します
8. スタック - スタック固有のガイドラインを取得します（デフォルト：html-tailwind）

ステップ 3：スタックのガイドライン（デフォルト：html-tailwind）

ユーザーがスタックを指定しない場合は、デフォルトで html-tailwind を使用します。

python3 .claude/skills/ui-ux-design/scripts/search.py "<keyword>" --stack html-tailwind

利用可能なスタック：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	製品の種類に応じた推奨事項	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI スタイル、色、効果	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	製品の種類別カラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
landing	ページ構成、CTA 戦略	ヒーロー、ヒーロー中心、証言、価格設定、ソーシャルプルーフ
chart	チャートの種類、ライブラリの推奨事項	傾向、比較、タイムライン、ファネル、円グラフ
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能なスタック

スタック	対象
html-tailwind	Tailwind ユーティリティ、レスポンシブ、a11y（デフォルト）
react	状態、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、ストア、SvelteKit
swiftui	ビュー、状態、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、状態、レイアウト、テーマ設定

---

ワークフローの例

ユーザーの依頼：「プロ向けのスキンケアサービスのランディングページを作って」

AI が行うこと：

# 1. Search product type
python3 .claude/skills/ui-ux-design/scripts/search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python3 .claude/skills/ui-ux-design/scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python3 .claude/skills/ui-ux-design/scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python3 .claude/skills/ui-ux-design/scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python3 .claude/skills/ui-ux-design/scripts/search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
python3 .claude/skills/ui-ux-design/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-design/scripts/search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python3 .claude/skills/ui-ux-design/scripts/search.py "layout responsive" --stack html-tailwind

**その後：**検索結果を統合し、デザインを実装します。

---

より良い結果を得るためのヒント

1. キーワードを具体的にする - 「healthcare SaaS dashboard」＞「app」
2. 複数回検索する - 異なるキーワードを使うと、異なる知見が得られます
3. ドメインを組み合わせる - スタイル + タイポグラフィ + 色 = 完全なデザインシステム
4. 必ず UX を確認する - よくある問題について、「animation」「z-index」「accessibility」を検索します
5. スタックフラグを使う - 実装固有のベストプラクティスを取得します
6. 繰り返し試す - 最初の検索結果が合わない場合は、別のキーワードを試します

---

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

UI をプロフェッショナルに見せるうえで、見落とされがちな問題を紹介します。

アイコンと視覚要素

ルール	推奨事項	避けること
絵文字アイコンを使わない	SVG アイコン（Heroicons、Lucide、Simple Icons）を使用する	UI アイコンとして 🎨 🚀 ⚙️ などの絵文字を使う
安定したホバー状態	ホバー時に色や不透明度を遷移させる	レイアウトがずれるスケール変換を使う
正しいブランドロゴ	Simple Icons で公式 SVG を調べる	推測したり、誤ったロゴパスを使ったりする
一貫したアイコンサイズ	固定の viewBox（24x24）と w-6 h-6 を使用する	異なるアイコンサイズを無作為に混在させる

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

ルール	推奨事項	避けること
ポインターカーソル	クリック可能またはホバー可能なすべてのカードに cursor-pointer を追加する	インタラクティブな要素にデフォルトのカーソルを残す
ホバー時のフィードバック	視覚的なフィードバック（色、影、枠線）を表示する	要素がインタラクティブであることを示さない
滑らかな遷移	transition-colors duration-200 を使用する	状態を瞬時に変更する、または遅すぎる遷移（>500ms）にする

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

ルール	推奨事項	避けること
ライトモードのガラスカード	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-w-6xl または max-w-7xl を使用する	異なるコンテナ幅を混在させる

---

提出前のチェックリスト

UI コードを提出する前に、次の項目を確認してください。

ビジュアル品質

• アイコンとして絵文字を使用していない（代わりに SVG を使用する）
• すべてのアイコンが一貫したアイコンセット（Heroicons／Lucide）のもの
• ブランドロゴが正しい（Simple Icons で確認済み）
• ホバー状態によってレイアウトがずれない
• var() のラッパーではなく、テーマカラーを直接使用する（bg-primary）

インタラクション

• クリック可能なすべての要素に cursor-pointer がある
• ホバー状態で明確な視覚的フィードバックが得られる
• 遷移が滑らかである（150～300ms）
• キーボード操作時にフォーカス状態が見える

ライト／ダークモード

• ライトモードのテキストに十分なコントラストがある（最低 4.5:1）
• ライトモードでガラス／透明要素が見える
• 両方のモードで枠線が見える
• 提出前に両方のモードをテストする

レイアウト

• フローティング要素と画面端の間隔が適切である
• 固定ナビゲーションバーの背後にコンテンツが隠れていない
• 320px、768px、1024px、1440px でレスポンシブに表示される
• モバイルで横スクロールが発生しない

アクセシビリティ

• すべての画像に alt テキストがある
• フォーム入力欄にラベルがある
• 色だけを唯一の指標としていない
• prefers-reduced-motion を尊重している