🎯 UI リサーチも AI と協力して行おう！
UI リサーチって、正直めちゃくちゃ時間がかかります。
「このパターンを使ってるサービスどこだろう…」と検索しても、出てくるのは Pinterest のスクショばかり。動いているサービスが見つからない、登録できない、サービス終了していた…なんてことも多いですよね。
でも UI デザインの上達に本当に必要なのは、“実際のサービスを触って、体験として学ぶこと” です。
AI をうまく使えば、その「探索」部分の時間を短縮し、あなたが本当にやるべき“体験から学ぶデザイン”に集中できます。
───────────────────
📐 原則：UIリサーチは「2つの視点」で行う
まず押さえておきたいのが、UI リサーチには 2つの視点 があるということ。
| 視点 | 役割 | 調べる対象 |
|---|---|---|
| ① 類似サービス | 「普通」を知る | 同じ分野のサービス |
| ② 構造ごと | アイデアを広げる | その構造が得意な分野のサービス |
どちらか片方だけでは、深い学びになりません。
- 類似サービス → 分野の“普通”を知る
- 構造ごと → 分野を超えて“優れたUI”に触れる
両方そろって、UX/UI の判断力が育ちます。
───────────────────
🎨 なぜ画像ではなく、実際のサービスが必要なのか？
「Pinterest で UI を集めればいいのでは？」そう思うかもしれませんが、画像では UI の“役割”と“機能”がわからない のです。
- クリックしたら何が起こる？
- どのタイミングで表示される？
- 何の課題を解決している UI なのか？
UI デザイナーは絵を描く人ではなく、“体験を設計する人” です。
そのため、実際のサービスを触り、UI が「どう機能しているのか」を理解する必要があります。
───────────────────
🚫 よくある勘違い
「画像を見るだけで UI は理解できる」
これは大きな誤解です。
スクショでは UI の「見た目」しか分かりません。本当に重要なのは 役割・挙動・体験の流れ。
だからこそ、AIを使って“実際に触れるサービス”を探してもらうリサーチ が大切です。
───────────────────
🔍 UIリサーチは「2つの視点 × 3ステップ」で進める
UI リサーチは、2つの視点に加えて実行のための3ステップで構成されます。
📌 2つの“視点”（何を見るかの軸）
| 視点 | 役割 | 調べる対象 |
|---|---|---|
| ① 類似サービスの視点 | 分野の「普通」を知る | 同じ分野のサービス |
| ② 構造ごとの視点 | アイデアを広げる | その構造が得意な分野のサービス |
───────────────────
📌 3つの“ステップ”（実際の進め方）
| STEP | 内容 | 目的 | 対応する記事 |
|---|---|---|---|
| STEP0 | AIに「探すべきUI」を相談する | 何を探すべきか迷わない | ① どのUIが構造ごとに合いそうか相談 |
| STEP1 | 類似サービスリサーチ | 分野の普通・定番パターンを把握 | ② 類似サービスリサーチ |
| STEP2 | 構造ごとのリサーチ | 分野を超えてUIアイデアを広げる | ③ 構造リサーチ |
───────────────────
🧭
UIリサーチの全体像（言語化版）
- 視点は2つだけ 1. 類似サービスを見る 2. 構造ごとに見る
- しかし初心者はそもそも 「何を探せばいいのか？」が分からない → そこで STEP0 が必要
- STEP0 → STEP1 → STEP2 の順で進めると、 迷わず・深く・速くリサーチができるようになる
───────────────────
■ 前提：UIデザインのリサーチは“制作プロセス”の一部
UIデザインは次のような流れで進みます：
- やりたい体験（要件）を整理
- どんな UI が合いそうかアイデアを探す（＝STEP0）
- 類似サービスで「普通」を把握（＝STEP1）
- 構造ごとにアイデアを広げる（＝STEP2）
- プロトタイプで UI を形にする
今回のシリーズは、この中でも「UIリサーチ → UIアイデア広げ → プロトタイプ」に絞った AI 活用法を解説していきます。
───────────────────
🔧
STEP0：まず“探すべきUI”を割り出す（構造相談）
これは初心者に最も重要なステップです。
❗ なぜ必要なのか？
- UI初心者は 「何を探すべきか」 が分からない
- 検索キーワードが浮かばず、1時間迷子になる
- 経験不足で UI の引き出しが少ない
AI に相談すれば、あなたが作りたい UI に合いそうな UIパターン名 や 構造キーワード を5 分で提案してくれます。
→ これが「リサーチの出発点」を作るステップ。
（※詳しくは：① どのUIが構造ごとに合いそうか相談 へ）
───────────────────
🔧
STEP1：類似サービスを調べる（普通を知る）
同じ分野のサービスをリサーチし、その領域における “普通” を理解します。
- どんな画面構成が一般的か
- 情報の優先度はどう扱われているか
- どういう UI がユーザーに期待されているか
AI に「世界で広く使われている」「実際に触れる」サービスを探してもらい、その中身を体験しながら学びます。
（※詳しくは：② 類似サービスリサーチ へ）
───────────────────
🔧
STEP2：構造ごとに調べる（アイデアを広げる）
最後に、分野を超えて「構造そのもの」が優れた UI を探します。
- ナビゲーション
- コンテンツ構造
- アクション（操作）
この3構造を軸に、EC・金融・予約・学習サイトなど分野を越えて“構造が強いUI”を学ぶことで、あなたの UI の引き出しは一気に広がります。
（※詳しくは：③ 構造リサーチ へ）
───────────────────
🧩 この導入記事で「身につくこと」
- 2つの視点でリサーチする意味がわかる
- 3ステップで進めるUIリサーチの全体像がつかめる
- 画像ではなく“体験で学ぶ”重要性を理解できる
- AIを「答えの装置」ではなく「探索のパートナー」として扱える
───────────────────
💡 おすすめのAIモデル
推論AI（迷ったらこの3つ）
- Claude 3.5 / Claude 4.5 Sonnet
- Gemini 3
- GPT-4.1 / GPT-4.1-mini
※ 正直どれでもOK。※ “クリエイティブパートナー”思想で構築されている Claude は一度触っておくと良い。
使えると便利な環境
- Cursor（AIエディタ搭載）
- Antigravity
───────────────────
🚀 次の記事へ進む
この後は、3つのクエスト形式でリサーチを深めていきます。
- ① どのUIが構造ごとに合いそうか相談（STEP0）
- ② 類似サービスリサーチ（STEP1）
- ③ 構造リサーチ（STEP2）
それぞれ順番に読んでいくことで、“迷わない UI リサーチ” のスキルが確実に身につきます。