📝 はじめに：なぜ「UIパターンのキーワード」をAIに相談するのか？
UIデザイン初心者がつまずく大きな理由のひとつは、「リサーチすべきキーワードが浮かばない」 という問題です。
画面の構造は決まった。でも、どんな UI パターンがあるのか名前が浮かばない。
- カード？
- リスト？
- それ以外に何があるの？
- 何て検索すれば出てくるの？
考えているだけで 1 時間スクロールして終わることも珍しくありません。
ここで AI が力を発揮します。
構造の背景（ユースケース・役割・大切なこと）を整理して AI に伝えるだけで、比較テーブル・フィルター付きカード・スペック対比表 など、“次にリサーチすべきキーワード” を 5 分で手に入れることができます。
キーワードがないとリサーチが始められない。この方法は、UI パターンの引き出しを増やしながら、リサーチの時間を 1/10 に短縮するための必須スキルです。
😓 よくあるつまずき：「検索キーワードがわからない」
- どの UI パターンを調べればいいのかわからない
- とりあえず「カード UI」などで検索するが、欲しい情報が出てこない
- 気づけば時間だけが過ぎていく
- 引き出しが少ないまま、なんとなくデザインしてしまう
つまり“スタート地点に立てない”状態。
この方法を使えば、AI が「リサーチすべき UI パターン名」を整理してくれるため、迷わずリサーチを始められます。
───────────────────
🔍 AIに相談してキーワードを得るという考え方
要件や構造の背景から、「調べるべき UI パターンの候補」をAIに提示してもらう という発想です。
そのキーワードを使って自分で検索する／AI に深掘りしてもらうことで、知識を吸収しながらリサーチを進めることができます。
AI はこの“キーワードの棚卸し”が圧倒的に得意。初心者こそ、積極的にこの部分を委ねましょう。
───────────────────
🚫 よくある勘違い
「AI に聞けば、最適解の UI パターンを教えてくれる」
これは半分正解で、半分間違いです。
AI の役割は答えを出すことではなく、“リサーチの起点”を作ること。
重要なのは：
- AI が出したパターン名をそのまま採用しない
- そのキーワードで実際のサービスをリサーチする
- 自分で判断しながら UI の理解を深める
というプロセスです。
───────────────────
📐 原則：AI に UI パターンのキーワードを相談する（3ステップ）
STEP1 構造の背景を整理
STEP2 AI にパターン名を提案してもらう
STEP3 そのキーワードでリサーチする
ポイント：背景（ユースケース／役割／大切なこと）を具体的に伝えること。
───────────────────
📝 実施方法（詳細）
STEP1：構造の背景を整理する
作る UI の構造について、3 つの視点でまとめる：
- ユースケース
- 役割
- 大切なこと
これはそのまま AI に渡すプロンプトになります。
───────────────────
STEP2：AI にパターン名を提案してもらう
STEP1 で整理した背景を AI に伝える。
良い例：
「EC サイトで商品を比較検討する画面を作っています。
ユーザーは複数の商品を見比べたいと思っていて、
価格・評価・在庫状況をパッと比較できることが重要です。
このような構造に合う UI パターンやコンポーネントの名前を教えてください」
悪い例：
「商品一覧のUIを教えてください」
→ 背景がないと一般論しか返ってこない。
───────────────────
STEP3：構造ごとに提案された UI を確認する
- 知らないキーワードは画像検索 or AI に定義を確認
- 実際に使われている UI を見て整合性を取る
- AI のアイデアは「候補」であって「答え」ではない
───────────────────
STEP4：リサーチする UI を整理する
- 調べるサービスの候補をリスト化
- どの UI を重点的に見るか決める
- リサーチ計画を作り、次のステップへ進む
───────────────────
💡 Before / After
Before（AI を使う前）
- 構造は決まっているが、調べる UI パターンが思いつかない
- 検索ワードがわからない
- カード/リストしか候補が出てこない
- なんとなく UI を作ってしまう
After（AI を使った後）
- 背景整理 → AI から具体的なパターン名が返ってくる
- キーワードが手に入るため、次のリサーチに迷わない
- 比較テーブル／スペック対比表／フィルター付きリストなど候補が広がる
- 5 分で UI パターンの引き出しが一気に増える
───────────────────
🎯 今日からできる小さな一歩
「どんな UI パターンがあるんだろう？」と悩んだら、まず 5分だけ背景を整理 してみてください。
- ユースケース
- 役割
- 大切なこと
これだけで、AI が返すパターン名の精度が劇的に上がります。
引き出しが増える → 発想が広がる → UI 判断力が鍛えられる。学びながらデザインを進められるようになります。
───────────────────
🌟 このアプローチの本質
AI は「答えを出すツール」ではなく、“リサーチの起点を作るパートナー”。
構造の背景を伝えることで、あなたがまだ知らない UI パターン名・コンポーネント名が手に入ります。
そして、そのキーワードで実際のサービスをリサーチすることで、
- UI パターンの実例
- 使用される文脈
- その構造が機能する理由
が理解できるようになり、UI の基礎体力が着実に育っていきます。