こんにちは。
前回は、AIでダッシュボードを作るとき、構成パーツの名前を知っているだけで精度が大きく変わる という話を書きました。
今回はダッシュボードに限らず、Webデザイン、UIデザイン全般に話を広げます。
たとえば「画面の右上に開閉するメニューを置いて」とAIに指示したとします。これでも一応それっぽいものは出てきます。でも、サイズ感やアイコンの位置、開閉の動きがなんとなく微妙 ということが起きがちです。
これを「画面の右上にハンバーガーメニューを配置して」に変えるだけで出力がガラッと変わります。
デザインスタイルやレイアウトパターンと同様に、UIパーツの正式名称を知っているだけで、AIへの指示精度は劇的に上がります。
代表的な20個のUIパーツをカテゴリ別に解説していきます。
なぜUIパーツの「名前」が重要なのか
まず、名前を知らない場合の指示を見てみましょう。
「画面の下にアイコンが横に並んだナビゲーションをつけて。ホーム、検索、プロフィールの3つで、選択中は色を変えて」
一方、名前を知っている場合はこうなります。
「Bottom Navigationを配置して。ホーム、検索、プロフィールの3タブ」
後者は一言でAIに完璧に伝わります。 しかも出力の品質も段違いです。
AIは世の中で広く使われているUIパーツの名前をすでに知っています。正式名称で指示するだけで、見た目や操作挙動を正確に再現してくれます。
さらに、FABやBottom NavigationのようにGoogleのMaterial DesignやAppleのHuman Interface Guidelinesで公式に定義されているようなパーツは、推奨サイズ・余白・アニメーションの情報が揃っています。したがってそれらを含めた精度で出力されます。
つまり名前を知っていることが、最も効率的なプロンプトなわけです。
ナビゲーション系パーツ（6個）
まずは、ユーザーがページ間を移動するためのパーツです。サイトやアプリの骨格を決める重要なカテゴリです。
Header / Global Navigation（ヘッダー）
画面上部に常設されるナビゲーションです。概ねロゴ＋メニューリンクの構成が基本で、ほぼすべてのWebサイトに存在します。類似パーツにFooter（フッター）もありますね。ページ下部に存在します。
AIへの伝え方: 「Header NavigationにLogo、About、Services、Contactのリンクを配置して」
Tab / Tab Bar（タブ）
横並びのラベルをクリックして、同じエリア内のコンテンツを切り替えるUIです。ページ遷移なしで情報を切り替えられるのがポイントです。
AIへの伝え方: 「Tab BarでOverview、Analytics、Settingsの3タブを切り替えられるようにして」
Breadcrumb（パンくずリスト）
現在のページ階層を示すリンクです。「Home > Products > Detail」のように、ユーザーがどの階層にいるかを一目で把握できます。
AIへの伝え方: 「ページ上部にBreadcrumbを配置して。3階層で」
Pagination（ページネーション）
コンテンツを複数ページに分割表示するための前後リンクです。ブログ記事一覧や検索結果ページでよく使います。
AIへの伝え方: 「記事一覧の下にPaginationを配置して。現在ページのハイライト付き」
Hamburger Menu / Drawer（ハンバーガーメニュー）
三本線アイコン（≡）をタップすると、画面の左からスライドして開くメニューです。モバイルサイトでは必須のパーツです。
AIへの伝え方: 「モバイルヘッダーにHamburger Menuを設置。タップでDrawerがスライドインする形で」
Bottom Navigation（ボトムナビゲーション）
モバイル画面の下部に固定されるタブ型ナビです。Home、Search、Profileなど、主要な画面にアイコン＋ラベルでアクセスできます。
AIへの伝え方: 「Bottom Navigationを配置。Home、Search、Notifications、Profileの4タブ」
アクション・入力系パーツ（3個）
次は、ユーザーが操作や入力を行うためのパーツです。フォームやボタンまわりのUIがここに入ります。
FAB（Floating Action Button）
画面右下に浮遊する丸いボタンです。そのアプリで最も重要なアクション（投稿、作成、追加など）に使います。Material Designで定義された代表的なパーツです。
AIへの伝え方: 「画面右下にFABを配置。アイコンは＋マーク」
Dropdown / Select（ドロップダウン）
クリックすると選択肢が展開するメニューです。プルダウン、セレクトボックスとも呼ばれます。選択肢が5〜15個程度のときに適しています。
AIへの伝え方: 「Dropdownで都道府県を選択するSelectを配置して」
Date Picker（デイトピッカー）
日付選択に特化した専用UIです。クリックするとカレンダーが展開し、日付をタップして選びます。予約フォームや期間指定でよく使います。
AIへの伝え方: 「チェックイン日とチェックアウト日のDate Pickerを並べて配置して」
表示・フィードバック系パーツ（7個）
コンテンツの表示方法や、ユーザーへのフィードバックに関するパーツです。数が多いカテゴリですが、どれも頻出です。
Card（カード）
コンテンツをひとまとめにした矩形のブロックです。画像＋タイトル＋説明文の構成が典型で、ECサイトの商品一覧やブログ記事一覧でおなじみです。
AIへの伝え方: 「Cardコンポーネントを3カラムのグリッドで6枚並べて。画像、タイトル、説明文の構成で」
Carousel（カルーセル）
横スクロールで複数のコンテンツを順番に表示するUIです。下にドットインジケーター（今何枚目か）が付くのが一般的です。ヒーロー画像やおすすめ商品の表示に使います。
AIへの伝え方: 「トップページのヒーローエリアにCarouselを配置。3枚のスライドで、ドットインジケーター付き」
Badge / Dot（バッジ）
通知数を示す小さな赤い数字がBadge、未読を示す赤い丸がDotです。アイコンの右上に小さく付けるのが定番で、通知ベルやチャットアイコンとセットで使います。
↓
↓
AIへの伝え方: 「通知アイコンにBadgeを付けて。件数は3」
Accordion（アコーディオン）
クリックで開閉するコンテンツです。FAQページで頻出のパーツで、質問をクリックすると回答が展開する、あのUIです。
AIへの伝え方: 「FAQセクションにAccordionを5つ並べて。最初の1つは開いた状態で」
Modal（モーダル）
背景を暗くして、画面中央に浮かび上がるウィンドウです。ユーザーに確認や操作を求めるときに使います。閉じるまで背景の操作はできません。
AIへの伝え方: 「削除確認のModalを実装して。タイトル、メッセージ、キャンセル/削除ボタンの構成で」
Toast / Snackbar（トースト）
画面の下部に一時的に表示されるフィードバック通知です。「保存しました」「送信完了」のようなメッセージを、数秒だけ表示してから自動で消えます。
AIへの伝え方: 「保存成功時にToastを表示。3秒後に自動で消えるように」
Alert（アラート）
エラー・成功・警告・情報を示す帯状の通知メッセージです。Toastと違って画面に残り続けるのが特徴です。フォームのバリデーションエラーなどで使います。
AIへの伝え方: 「フォーム上部にerrorタイプのAlertを表示して。アイコン付きで」
進捗・その他（4個）
処理中の状態や、ステップの進行を伝えるためのパーツです。ユーザーの「今どうなっているの？」という不安を解消する役割があります。
Spinner / Loader（スピナー）
読み込み中を示す回転アニメーションです。データ取得中やページ遷移中に表示して、処理が進んでいることをユーザーに伝えます。
AIへの伝え方: 「データ読み込み中にSpinnerを中央に表示して」
Progress Bar（プログレスバー）
処理の進捗を横バーで視覚的に表示します。ファイルアップロードやプロフィール入力の完了率など、「あとどれくらい」を伝えたい場面で使います。
AIへの伝え方: 「ファイルアップロード中にProgress Barを表示して。パーセンテージも表示」
Step Indicator（ステップインジケーター）
複数ステップの手順で、今どこにいるかを示すUIです。ECサイトの購入フローで「情報入力 → 確認 → 完了」と表示されるあれです。
AIへの伝え方: 「3ステップのStep Indicatorを配置。入力、確認、完了の順で」
Scroll Animation（スクロールアニメーション）
スクロールに伴って要素がふわっと出現するアニメーション効果です。LPやポートフォリオサイトでよく使われます。厳密にはUIパーツというよりインタラクション手法ですが、AIへの指示で頻出なので含めました。
AIへの伝え方: 「各セクションにScroll Animationを付けて。fade-upで、遅延0.2秒」
まだまだある — 全63パーツ一覧
ここまで紹介した20個は代表的なものですが、UIパーツはまだまだあります。以下に全63パーツをカテゴリ別にまとめました。
すべてを暗記する必要はありません。「こういうパーツがあるんだ」と知っておくだけで、必要なときに正式名称で検索できるようになります。
ナビゲーション（11個）
| 英語名 | 日本語名 | 説明 |
|---|---|---|
| Header | ヘッダー | 画面上部の常設ナビゲーション |
| Footer | フッター | 画面下部のリンク・著作権エリア |
| Navigation Bar | ナビゲーションバー | 主要リンクを横並びにしたバー |
| Tab | タブ | 同一エリアでコンテンツを切り替え |
| Sidebar | サイドバー | 画面横に配置する補助ナビ |
| Breadcrumb | パンくずリスト | 現在のページ階層を表示 |
| Pagination | ページネーション | コンテンツの前後ページリンク |
| Hamburger / Drawer | ハンバーガーメニュー | 三本線で開閉するスライドメニュー |
| Mega Menu | メガメニュー | 大量のリンクをパネルで展開 |
| Bottom Navigation | ボトムナビゲーション | モバイル画面下部のタブ型ナビ |
| Navigation Rail | ナビゲーションレール | タブレット向けの縦型サイドナビ |
アクション・入力（16個）
| 英語名 | 日本語名 | 説明 |
|---|---|---|
| Button | ボタン | クリックで処理を実行する基本パーツ |
| Icon Button | アイコンボタン | アイコンだけで構成されたボタン |
| FAB | フローティングアクションボタン | 画面に浮遊する丸い主要アクションボタン |
| Text Field | テキスト入力欄 | テキストを入力する基本フォーム要素 |
| Search Bar | 検索バー | キーワード検索用の入力欄 |
| Checkbox | チェックボックス | 複数選択が可能な四角いチェック |
| Radio Button | ラジオボタン | 単一選択用の丸いチェック |
| Switch / Toggle | スイッチ | ON/OFFを切り替えるスライド式UI |
| Dropdown / Select | ドロップダウン | クリックで選択肢が展開するメニュー |
| Combo Box | コンボボックス | 入力と選択を兼ねるテキスト付きドロップダウン |
| Slider | スライダー | つまみを動かして値を調整するUI |
| Range Slider | レンジスライダー | 最小値と最大値を範囲指定するスライダー |
| Stepper | ステッパー | ＋/−ボタンで数値を増減する入力UI |
| Picker / Date Picker | デイトピッカー | カレンダーから日付を選択する専用UI |
| Drop Zone | ドロップゾーン | ファイルをドラッグ＆ドロップするエリア |
| Form | フォーム | 入力要素をまとめた送信用コンテナ |
表示・コンテンツ（9個）
| 英語名 | 日本語名 | 説明 |
|---|---|---|
| Card | カード | 画像＋タイトル＋説明をまとめた矩形ブロック |
| List | リスト | 項目を縦に並べた一覧表示 |
| Table | テーブル | 行と列でデータを構造化した表 |
| Chart | チャート | 棒・折れ線・円などのグラフ表示 |
| Carousel | カルーセル | 横スクロールで複数コンテンツを表示 |
| Avatar | アバター | ユーザーの顔写真やアイコンを丸く表示 |
| Badge / Dot | バッジ | 通知数や未読を示す小さなマーク |
| Tag / Chip | タグ / チップ | カテゴリやステータスを示すラベル |
| Feed | フィード | 時系列でコンテンツが流れる一覧 |
フィードバック・オーバーレイ（10個）
| 英語名 | 日本語名 | 説明 |
|---|---|---|
| Modal | モーダル | 背景を暗くして中央に浮かぶウィンドウ |
| Dialog | ダイアログ | 確認や選択を求める小さなウィンドウ |
| Alert | アラート | エラー/成功/警告を示す帯状の通知 |
| Toast / Snackbar | トースト | 一時的に表示される短いフィードバック |
| Tooltip | ツールチップ | ホバーで表示される補足説明の吹き出し |
| Popover | ポップオーバー | クリックで表示されるリッチな情報パネル |
| Bottom Sheet | ボトムシート | 画面下から上にスライドするパネル |
| Action Sheet | アクションシート | 操作の選択肢をリストで表示するシート |
| Context Menu | コンテキストメニュー | 右クリックで表示される操作メニュー |
| Scrim / Overlay | スクリム | 背景を暗くする半透明のカバー |
進捗・ステータス（11個）
| 英語名 | 日本語名 | 説明 |
|---|---|---|
| Progress Bar | プログレスバー | 処理の進捗を横バーで表示 |
| Spinner / Loader | スピナー | 読み込み中の回転アニメーション |
| Skeleton Screen | スケルトンスクリーン | 読み込み中にレイアウトの輪郭を表示 |
| Step Indicator | ステップインジケーター | 複数ステップの進捗を表示 |
| Page Indicator | ページインジケーター | 現在のページ位置をドットで表示 |
| Rating Bar | レーティングバー | 星マークで評価を表示・入力 |
| Segmented Control | セグメンテッドコントロール | 分割されたボタン群で表示を切り替え |
| Status Bar | ステータスバー | 時刻・電波・バッテリーを表示するバー |
| Placeholder | プレースホルダー | 入力欄に薄く表示されるヒントテキスト |
| Scroll Animation | スクロールアニメーション | スクロールで要素がふわっと出現する効果 |
| Smooth Scroll | スムーススクロール | なめらかにスクロールする挙動 |
オンボーディング・ガイド（6個）
| 英語名 | 日本語名 | 説明 |
|---|---|---|
| Splash Screen | スプラッシュスクリーン | アプリ起動時に一瞬表示されるブランド画面 |
| Walkthrough | ウォークスルー | 初回起動時の機能説明スライド |
| Coach Mark | コーチマーク | 特定のUIを指し示すガイド吹き出し |
| Scope Bar | スコープバー | 検索結果の絞り込みカテゴリバー |
| Accordion | アコーディオン | クリックで開閉するコンテンツ |
全パーツのプロンプトテンプレート付き完全版は、近日公開予定の有料記事にまとめます。
まとめ
というわけで、AIにUIを伝えるための「パーツの正式名称」を20個＋全63パーツの一覧をまとめました。
名前を知っているだけで、AIへの指示が劇的に変わります。 長い説明文を書く必要がなくなり、一言で正確なUIが出てくるようになります。
このシリーズでは、AIにデザインを伝えるための語彙を段階的に整理してきました。ざっくりレベル分けすると、こうなります。
- Level 1: デザインスタイル ＋ レイアウト — 全体の70%が決まる
- Level 2: カラー ＋ タイポグラフィ — 見た目が整う
- Level 3: UIパーツ — 細部が決まる ← 今回の記事
Level 1から順に身につけていくのがおすすめです。関連記事もぜひ読んでみてください。
