AIを使ってアプリを開発する際、最も重要なのは「AIに正確なイメージを伝える語彙力」です。
「画面の右下に丸いボタンを置いて、そこを押すとメニューが出るようにして」
このような曖昧な指示では、AIはあなたの理想を100%再現できません。しかし、**「画面右下にFAB（Floating Action Button）を配置し、タップでModal Bottom Sheetを表示させて」**と伝えれば、AIは迷うことなく正確なコードを出力します。
この記事では、AIアプリ開発のプロンプトで「武器」になるUIコンポーネントの種類、正式名称、そしてプロンプトへの組み込み方を徹底的に解説します。
1. 【基本】入力系コンポーネント（Inputs）
ユーザーに情報を入力してもらうための、最も頻度の高いパーツです。
1-1. テキスト入力
- Text Field（テキストフィールド）： 1行の入力。ログインや検索に。
- Text Area（テキストエリア）： 複数行の入力。コメントや本文に。
- Password Field（パスワードフィールド）： 入力文字が「●」で隠れる。
- Search Bar（検索バー）： 虫眼鏡アイコンが付いた検索専用の入力欄。
1-2. 選択・トグル
- Checkbox（チェックボックス）： 複数選択が可能。
- Radio Button（ラジオボタン）： 複数の中から「1つだけ」選択。
- Switch / Toggle（スイッチ）： ON/OFFの切り替え。設定画面など。
- Slider（スライダー）： 音量や価格帯など、数値を直感的に調整。
- Range Slider（レンジスライダー）： 「1,000円〜5,000円」のように範囲を指定。
1-3. 特殊入力
- Date Picker（デイトピッカー）： カレンダーから日付を選択。
- Time Picker（タイムピッカー）： 時計から時刻を選択。
- File Uploader（ファイルアップローダー）： 画像やPDFを選択・ドラッグ＆ドロップするエリア。
- Color Picker（カラーピッカー）： 色を選択するパレット。
2. 【重要】ボタン系コンポーネント（Buttons）
ユーザーのアクションを促す、アプリの心臓部です。
- Primary Button： 画面内で最も重要なアクション（「保存」「購入」など）。
- Secondary Button： 2番目に重要なアクション（「キャンセル」「戻る」など）。
- Outlined Button： 枠線のみのボタン。控えめな主張に。
- Ghost Button（Text Button）： 枠も背景もない、文字だけのボタン。
- FAB (Floating Action Button)： 画面上に浮いているボタン。新規投稿などに使用。
- Icon Button： アイコンのみのボタン。省スペースな配置に。
- Toggle Button Group： 「左・中央・右揃え」のように、複数の選択肢をボタンで切り替え。
3. 【構造】ナビゲーション系コンポーネント（Navigation）
アプリ内の迷子を防ぐための、骨組みとなるパーツです。
- App Bar / Top Bar： 画面上部のタイトルエリア。
- Bottom Navigation Bar： スマホアプリの画面下部にあるメインメニュー。
- Drawer（ドロワー）： 画面端からスライドして現れるメニュー。
- Side Bar： PC向け管理画面などで左側に固定されるメニュー。
- Tab Bar： 画面上部などでコンテンツを切り替えるタブ。
- Breadcrumbs（パンくずリスト）： 「ホーム > 設定 > プライバシー」のような現在地表示。
- Pagination（ページネーション）： 「1 | 2 | 3 | 次へ」といったページ切り替え。
- Stepper（ステッパー）： 「入力 > 確認 > 完了」のようなステップ進行を表示。
4. 【視覚】情報表示・データ系（Data Display）
複雑な情報を整理して見せるためのパーツです。
- Card（カード）： 画像・見出し・本文を1つのパネルにまとめたもの。
- List Tile（リストタイル）： アイコン、タイトル、サブタイトルが並ぶ1行の要素。
- Data Table（データテーブル）： 表形式で数値を表示。ソート機能を持たせることも多い。
- Grid View（グリッドビュー）： 写真などをタイル状に並べる。
- Carousel（カルーセル）： 画像などが横にスライドするバナーエリア。
- Accordion / Expansion Tile： タップすると詳細が縦に開くリスト。
- Badge（バッジ）： アイコンの右上に付く「未読件数」などの小さな数字。
- Avatar（アバター）： ユーザーの丸いプロフィール画像。
- Chip / Tag（チップ）： カテゴリやキーワードを示す小さなラベル。
- Tooltip（ツールチップ）： ホバー時に表示される補足説明。
5. 【反応】フィードバック・状態系（Feedback）
ユーザーの操作に対して、アプリが「返事」をするためのパーツです。
- Dialog / Modal： 画面中央に浮かび、ユーザーの操作を強制する確認窓。
- Bottom Sheet： 画面下からニョキッと出てくるパネル。
- Snack bar / Toast： 画面下部に数秒だけ出るメッセージ（「送信しました」など）。
- Circular Progress： ぐるぐる回る読み込み中アイコン。
- Linear Progress： 横に伸びるプログレスバー。
- Skeleton Screen： 読み込み中に表示される、コンテンツの「影」のようなダミー。
- Empty State： データが1件もない時に表示されるイラストや説明文。
6. AIプロンプトを劇的に進化させる「4つの指示ルール」
コンポーネント名を知ったら、次はそれをどうプロンプトに組み込むかです。以下の4点を意識してください。
① 「構造」から「詳細」へ
いきなり細部を指示せず、まずは大枠を伝えます。
NG: ログインボタンを赤くして。 OK: 画面中央に Card を配置し、その中に Text Field（メール用）と Primary Button（ログイン用）を配置してください。ボタンの色は #FF0000 に。
② 「状態（State）」を定義する
コンポーネントには状態があります。
「ボタンの Disabled（無効）状態 のデザインも作って」 「入力エラー時には Text Field の枠線を赤くし、下に Error Text を表示して」
③ 「インタラクション」を指定する
「この List Tile をロングプレス（長押し）したら、Context Menu を表示して」 「FAB をスクロールに合わせて隠して（Hide on scroll）」
④ 「レスポンシブ」を意識する
「PCでは Side Bar を表示し、モバイルでは Hamburger Menu から開く Drawer に切り替えて」
まとめ：UI名称は「開発の共通言語」
AIは魔法の杖ではありませんが、最高のアシスタントにはなり得ます。 今回紹介した50種類のコンポーネント名をプロンプトに混ぜるだけで、あなたの意図は100%に近くAIに伝わるようになります。
まずは、自分の作りたいアプリの各パーツに「これは Chip だな」「ここは Accordion がいいな」とラベルを貼る練習から始めてみてください。
次にやるべきこと： この記事をブックマークし、AIへのプロンプト作成時に「辞書」として横に置いておきましょう。