AIへの指示に使えるUI用語集 — 動く実例つき
UI用語を正確に使うと、AIへの指示が一発で通る
「モーダルで確認を出して」「カードをグリッドで並べて」——UI用語を正確に使うと、AIへの指示が一発で通る。ボタン・フォーム・レイアウト・アニメーションなど頻出の部品を、動く実例とAIへの指示例つきでまとめた。
1. 入力・操作
Section titled “1. 入力・操作”ユーザーが入力したり、選んだり、クリックしたりするための部品。
ボタン（Button）
Section titled “ボタン（Button）”クリックで処理を実行する部品。
指示例：「保存ボタンを目立つ色で配置して」
入力フォーム（Input / Form）
Section titled “入力フォーム（Input / Form）”文字やメールアドレスなどを入力する欄。
指示例：「メールとパスワードの入力フォームを作って」
スライダー（Slider）
Section titled “スライダー（Slider）”数値を直感的に動かして調整する部品。
指示例：「音量をスライダーで調整できるようにして」
トグル（Toggle / Switch）
Section titled “トグル（Toggle / Switch）”ON / OFF を切り替えるスイッチ。
指示例：「通知をトグルでオンオフできるようにして」
チェックボックス（Checkbox）
Section titled “チェックボックス（Checkbox）”複数選択できるチェック項目。
指示例：「興味のある項目をチェックボックスで複数選べるようにして」
ラジオボタン（Radio Button）
Section titled “ラジオボタン（Radio Button）”複数の候補から1つだけ選ぶ部品。
指示例：「支払い方法をラジオボタンで選ばせて」
ドロップダウン（Dropdown / Select）
Section titled “ドロップダウン（Dropdown / Select）”一覧から1つを選ぶ部品。
指示例：「都道府県をドロップダウンで選択させて」
2. 表示・通知
Section titled “2. 表示・通知”状態や結果をユーザーに伝えるための部品。
トースト（Toast）
Section titled “トースト（Toast）”一瞬だけ表示されて自動で消える通知。
指示例：「保存完了をトーストで表示して」
ツールチップ（Tooltip）
Section titled “ツールチップ（Tooltip）”ホバー時に小さな説明を表示。
指示例：「アイコンにツールチップで説明をつけて」
ローディング（Loading / Spinner）
Section titled “ローディング（Loading / Spinner）”読み込み中であることを示す表示。
指示例：「データ取得中はローディングを表示して」
プログレスバー（Progress Bar）
Section titled “プログレスバー（Progress Bar）”進み具合を見せるバー。
指示例：「アップロード状況をプログレスバーで見せて」
バッジ（Badge）
Section titled “バッジ（Badge）”未読数や状態を小さく表示するラベル。
指示例：「通知数をバッジで表示して」
3. レイアウト・構造
Section titled “3. レイアウト・構造”画面の骨組みや、情報のまとまりを作る考え方。
セクション（Section）
Section titled “セクション（Section）”ページを意味ごとに区切る大きな単位。
指示例：「ページ全体を3つのセクションに分けて構成して」
このページの「入力・操作」「表示・通知」などの大きな区切りがセクション。
カード / ボックス / パネル
Section titled “カード / ボックス / パネル”情報をひとかたまりにした見せ方。
指示例：「記事一覧をカード形式で並べて」
グリッド（Grid）
Section titled “グリッド（Grid）”カードなどを整列して並べるレイアウト。
指示例：「機能紹介カードをグリッドで3列に並べて」
サイドバー（Sidebar）
Section titled “サイドバー（Sidebar）”横に置くメニューや補助情報エリア。
指示例：「左側にサイドバーを置いて、メニューを並べて」
このページの記事一覧（PCでは左側）がサイドバー。
ナビゲーションバー（Navbar）
Section titled “ナビゲーションバー（Navbar）”ページ上部にある移動メニュー。
指示例：「上にナビゲーションバーを固定して」
このページ最上部の帯がナビゲーションバー。
ヘッダー（Header）
Section titled “ヘッダー（Header）”ページの最初に置く上部エリア。
指示例：「ロゴとサイト名が入ったヘッダーを作って」
フッター（Footer）
Section titled “フッター（Footer）”ページ最下部に置く情報エリア。
指示例：「フッターにコピーライトとリンクを入れて」
4. 画面切り替え・補助UI
Section titled “4. 画面切り替え・補助UI”補助的に出てくるUIや、画面切替の部品。
モーダル（Modal）
Section titled “モーダル（Modal）”ページ内に重ねて表示するウィンドウ。サイトのデザインの一部として自由に作れる。
指示例：「削除確認をモーダルで出して」
ブラウザダイアログ（Browser Dialog）
Section titled “ブラウザダイアログ（Browser Dialog）”ページの外側（ブラウザ側）に出る確認ウィンドウ。デザインはできないが、1行で書ける手軽さがある。「ポップアップ」は曖昧で、手軽に確認を出したいならブラウザダイアログ、デザインを作り込むならモーダルと使い分けを。
指示例：「削除前にブラウザダイアログで確認を出して」
タブ（Tabs）
Section titled “タブ（Tabs）”内容を切り替えて表示する部品。
指示例：「設定画面をタブで切り替えられるようにして」
アコーディオン（Accordion）
Section titled “アコーディオン（Accordion）”クリックで開閉する折りたたみUI。
指示例：「FAQをアコーディオン形式で折りたたんで表示して」
ページネーション（Pagination）
Section titled “ページネーション（Pagination）”長い一覧をページごとに区切る部品。
指示例：「一覧にページネーションを付けて、1ページ10件にして」
5. 見た目（スタイル）
Section titled “5. 見た目（スタイル）”UIの印象を左右する見た目の要素。
角丸（Border Radius）
Section titled “角丸（Border Radius）”角を丸くして柔らかい印象にする。
指示例：「カードの角丸を強めにして柔らかい印象にして」
影（Shadow）
Section titled “影（Shadow）”少し浮いて見える立体感を作る。
指示例：「カードに薄い影をつけて浮いて見えるようにして」
枠線（Border）
Section titled “枠線（Border）”要素の輪郭を見せる線。
指示例：「入力欄に薄い枠線をつけて」
余白（Padding / Margin）
Section titled “余白（Padding / Margin）”見やすさを作る空間。
指示例：「全体の余白を広めにして読みやすくして」
背景色（Background）
Section titled “背景色（Background）”エリアの印象や区切りを作る色。
指示例：「セクションごとに背景色を少し変えて区切りを出して」
グラデーション（Gradient）
Section titled “グラデーション（Gradient）”色がなめらかに変化する背景。
指示例：「グラデーションを使ってボタンを目立たせて」
透明度（Opacity）
Section titled “透明度（Opacity）”要素を少し透けさせる。
指示例：「モーダル背景を半透明にして後ろを少し見せて」
6. 状態・動き
Section titled “6. 状態・動き”ユーザー操作に反応した見た目の変化や、表示の動き。
ホバー（Hover）
Section titled “ホバー（Hover）”マウスを乗せた時の変化。
指示例：「ボタンをホバーしたとき少しグレーにして」
フォーカス（Focus）
Section titled “フォーカス（Focus）”入力中の要素を強調する状態。
指示例：「フォーカス時に入力欄の枠色を変えてわかりやすくして」
フェードイン（Fade In）
Section titled “フェードイン（Fade In）”ふわっと表示するアニメーション。
指示例：「モーダルをフェードインで表示して」
アニメーション（Animation）
Section titled “アニメーション（Animation）”色・位置・大きさなどを時間をかけて変化させるエフェクト。
指示例：「カードが表示されるときに軽いアニメーションをつけて」
2026-04-20 (last updated: 2026-05-25) 
タツヲ (yto)