🎯 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つの“ステップ”（実際の進め方）

───────────────────

🧭

UIリサーチの全体像（言語化版）

• 視点は2つだけ　1. 類似サービスを見る　2. 構造ごとに見る
  
• しかし初心者はそもそも　「何を探せばいいのか？」が分からない　→ そこで STEP0 が必要
  
• STEP0 → STEP1 → STEP2 の順で進めると、　迷わず・深く・速くリサーチができるようになる
  

───────────────────

■ 前提：UIデザインのリサーチは“制作プロセス”の一部

UIデザインは次のような流れで進みます：

1. やりたい体験（要件）を整理
2. どんな UI が合いそうかアイデアを探す（＝STEP0）
3. 類似サービスで「普通」を把握（＝STEP1）
4. 構造ごとにアイデアを広げる（＝STEP2）
5. プロトタイプで 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つのクエスト形式でリサーチを深めていきます。

1. ① どのUIが構造ごとに合いそうか相談（STEP0）
2. ② 類似サービスリサーチ（STEP1）
3. ③ 構造リサーチ（STEP2）

それぞれ順番に読んでいくことで、“迷わない UI リサーチ” のスキルが確実に身につきます。