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