ui-research

UI リサーチ

新しい UI をデザインする前に実際の製品を調査し、リリース済みの製品が課題をどう解決しているかを踏まえた成果にします。

このスキルにより、UI 制作が汎用的な AI の出力ではなく、実例に基づくインスピレーション、最新のパターン、人間中心のデザインを取り入れられます。

重要な参照資料： UI インスピレーションの情報源を参照してください。

---

このスキルを使う場面

次の作業を行う前に使用してください。

• 新しい UI コンポーネントの作成
• ランディングページのデザイン
• ダッシュボードや管理 UI の構築
• モバイルアプリの画面開発
• あらゆるビジュアル／フロントエンド作業

---

リサーチのワークフロー

フェーズ 1：定義

検索を始める前に、次の問いに答えてください。

1. What am I building? (component, page, flow)
2. What platform? (web, iOS, Android, desktop)
3. What industry? (SaaS, e-commerce, fintech, etc.)
4. What feeling? (professional, playful, minimal, bold)
5. What constraints? (existing brand, tech stack, timeline)

フェーズ 2：リサーチ

検索戦略：

# For each UI task, search at least 3 sources:

# 1. Real products (MOST IMPORTANT)
Search: Mobbin, UI Sources, Refero
Why: See how real companies solved this problem

# 2. Curated galleries
Search: Land-book, Awwwards, Godly
Why: High-quality, vetted designs

# 3. Component patterns
Search: shadcn/ui, Collect UI, Dribbble
Why: Specific UI element inspiration

タスク別の検索クエリ：

作成するもの	検索語
ダッシュボード	"analytics dashboard", "admin panel", "SaaS dashboard"
ランディングページ	"[industry] landing page", "hero section", "pricing page"
モバイルアプリ	"[app type] iOS", "mobile [feature]", "[competitor] app"
E コマース	"product page", "checkout flow", "cart design"
認証フロー	"login screen", "onboarding", "signup form"
設定	"settings page", "profile settings", "preferences"

フェーズ 3：収集

参考になる事例を 5～10 件保存してください。それぞれについて、次の点を書き留めます。

URL/Source: [where you found it]
What works: [specific elements you like]
Patterns: [repeating solutions across examples]
Unique: [what makes this stand out]
Adapt: [how to apply to our project]

フェーズ 4：分析

パターンの認識：

Common patterns across examples:
- Layout: [grid, spacing, hierarchy]
- Colors: [palette trends, contrast]
- Typography: [fonts, scale, weights]
- Components: [buttons, cards, forms]
- Interactions: [hover, transitions, feedback]

品質チェックリスト：

• 実際にリリースされた製品を 3 件以上見つけた（コンセプトではない）
• 繰り返し見られるパターンを特定した
• 独自の差別化要素を記録した
• アクセシビリティを考慮した
• モバイル対応を確認した

フェーズ 5：デザインブリーフ

実装前に、次の点を文書にまとめます。

## UI Research Brief

### Inspiration Sources

- [Link 1]: [What to adopt]
- [Link 2]: [What to adopt]
- [Link 3]: [What to adopt]

### Key Patterns to Follow

- Layout: [specific approach]
- Color: [palette direction]
- Typography: [font choices]
- Components: [style decisions]

### Differentiation

- [What makes ours unique]
- [Brand personality elements]

### Technical Approach

- Component library: [shadcn/ui, etc.]
- Animation approach: [Framer Motion, CSS]
- Responsive strategy: [mobile-first, etc.]

---

情報源の選び方

プロジェクトの種類別

プロジェクト	主な情報源	副次的な情報源
SaaS アプリ	Mobbin, UI Sources	Land-book, shadcn/ui
ランディングページ	Land-book, Godly	Awwwards, One Page Love
モバイルアプリ	Mobbin, Screenlane	Pttrns, Apple HIG
E コマース	Baymard, Awwwards	Mobbin, UI Sources
ダッシュボード	Dribbble, UI Sources	Ant Design, Tremor
ポートフォリオ	Awwwards, One Page Love	Godly, 個人サイト

プラットフォーム別

プラットフォーム	必要なリサーチ
iOS	Apple HIG, Mobbin（iOS フィルター）
Android	Material 3, Mobbin（Android フィルター）
Web	Awwwards, Land-book, shadcn/ui
デスクトップ	Fluent 2, プラットフォーム固有のアプリ
クロスプラットフォーム	上記すべてを調査し、共通点を見つける

---

「AI らしさ」を避ける

避けるべき注意点

GENERIC AI PATTERNS (Don't do these):
- Blue/purple gradient backgrounds
- Perfectly symmetrical everything
- Generic blob/wave decorations
- Undraw-style illustrations
- "Hero with laptop mockup" layouts
- Default color schemes unchanged
- Cookie-cutter card grids
- Overused glassmorphism
- Cream/off-white page background by default
- Italic accent words inside headlines
- Numbered "01 / 02 / 03" section labels
- Monospace eyebrow labels
- Pill-shaped buttons everywhere

人間味を加える要素

WHAT MAKES DESIGN FEEL HUMAN:
- Custom color palette with personality
- Intentional asymmetry
- Unique typography combinations
- Real photography or custom illustration
- Micro-interactions with character
- Subtle organic shapes
- Brand-specific details
- Thoughtful empty states
- Personality in copywriting

品質の指標

項目	汎用的な AI	人の手で磨き上げられたデザイン
色	デフォルトの青	独自のブランドカラーパレット
レイアウト	完璧なグリッド	意図的な変化
画像	ストック写真	カスタム／厳選された画像
コピー	Lorem ipsum	個性豊かな本物のテキスト
アニメーション	標準的なフェード	意図的でブランドを反映した動き
細部	なし	ホバー状態、マイクロインタラクション

---

リサーチツール

ブラウザー拡張機能

• Muzli - デザインのインスピレーションフィード
• Panda - ニュースとインスピレーションのダッシュボード
• Stylify Me - サイトの色やフォントを抽出

スクリーンショットツール

• Full Page Screen Capture - ページ全体をキャプチャ
• Awesome Screenshot - 注釈を付けて保存

情報整理

• Figma - ムードボードの作成
• Notion - 調査内容の記録
• Eagle - ビジュアルブックマーク管理
• Pinterest - 手早く収集

---

調査結果のテンプレート

# UI Research: [Component/Page Name]

## Context

- **Building:** [what]
- **Platform:** [where]
- **Constraints:** [limitations]

## Inspiration (5-10 sources)

### 1. [Company/Site Name]

- **URL:** [link]
- **Screenshot:** [attached]
- **What works:** [specific elements]
- **Adopt:** [what to use]

### 2. [Company/Site Name]

...

## Pattern Analysis

### Layout

- [Common layout patterns observed]

### Color

- [Palette trends]

### Typography

- [Font and scale patterns]

### Components

- [UI element patterns]

## Design Direction

### Must Have

- [Non-negotiable elements]

### Nice to Have

- [Enhancement opportunities]

### Avoid

- [Anti-patterns to skip]

## Technical Stack

- **Components:** [library choice]
- **Styling:** [approach]
- **Animation:** [library/method]

---

他のスキルとの連携

調査後は、以下に進みます。

次のステップ	使用するスキル
ビジュアルの実装	frontend-enhancer
デザインシステムの設定	generic-design-system
UX フローの設計	generic-ux-designer
アニメーションの作成	ui-animation
ブランドとの整合	brand-identity

---

クイックスタートチェックリスト

UI 作業を始める前に、必ず確認してください。

• 作成するものを定義した
• 3 件以上のインスピレーション源を検索した
• 関連する事例を 5 件以上収集した
• 繰り返し見られるパターンを特定した
• 独自の差別化要素を記録した
• 簡潔なデザインの方向性を作成した
• 「AI らしい見た目」の危険信号がないか確認した
• 人間味を加える要素を計画した

---

関連項目

• UI インスピレーション源 - URL 付きの全ソース一覧
• デザインパターン - ビジュアルデザイントークン
• frontend-enhancer - 調査後の実装に使用
• generic-design-system - デザインシステムの作業に使用
• graphic-design - ビジュアルデザインの原則