AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
25件のコンポーネント
ページ最上部。ロゴ・ナビ・CTAを置く場所
ヘッダーが無いサイトは存在しない。これは空気みたいなもの。
ファーストビュー。サイトを開いて最初に目に入る大きなエリア
ヒーローの完成度 = サイト全体の第一印象。ここで8割決まる。
ページ最下部。リンク集・会社情報・SNSリンクを置く場所
フッターがしっかりしてると『ちゃんとした会社だな』って安心感が出る。
背景色やpaddingで区切られたコンテンツブロック
セクションの区切りがない1枚ペラLPはアマチュア感が出る。
ヘッダー内のメニューリンクの並び
ナビの整理 = 情報設計力の表れ。ごちゃごちゃしてると全体の信頼が下がる。
画面左（または右）の縦メニュー。管理画面の定番
管理画面にサイドバーがあると『本格的なアプリだ』って即座に伝わる。
クリックで表示内容を切り替えるUI
情報量が多い画面をスッキリ整理できる。使いこなすと『UI上手いな』感が出る。
ホーム > カテゴリ > 記事 のような現在地表示
これがあると『ちゃんとしたサイト構造だな』と思われる。無いと迷子になる。
クリックで展開される選択肢のリスト
ナビの情報量が多い時に必須。整理されたドロップダウン = 設計力の証拠。
ページ送り。1, 2, 3 ... 10 の切り替え
大量データを扱えてる感。これ無しで全件表示はアマチュア。
クリックでアクションを起こすUI。Primary / Secondary / Ghost等のバリエーション
ボタンのバリエーション使い分け（Primary/Ghost/Outline）ができてると『デザイン理解してるな』になる。
情報をまとめて表示する箱。画像・タイトル・説明・ボタン等を含む
カードは最頻出パーツ。デザインの質 = アプリ全体の質に直結する。
画面中央にオーバーレイで表示されるポップアップ
モーダルが無くて全部ページ遷移するアプリは古い。これは現代アプリの基本動作。
小さい絵文字的なシンボル。lucide-react、heroicons等
テキストだけの画面にアイコンが入ると一気に洗練される。最小コストで最大効果。
ユーザーの顔写真やイニシャルを丸く表示
アバターがあるとユーザー存在感が出る。SNS的な親しみやすさを演出。
NEW、3件、Pro などの小さいラベル表示
バッジで情報の鮮度や状態を示せると『使いやすいアプリだな』になる。
行と列でデータを一覧表示
管理画面・ダッシュボードの主役。テーブルの出来 = 管理画面の出来。
画面端に一時的に表示される通知メッセージ
操作フィードバックの基本。これが無いと『保存できたの？』って不安になる。
読み込み中のぐるぐるアニメーション
ロード中の表示が無いと固まったように見える。最低限の礼儀。
情報・成功・警告・エラーを色分けで伝えるバナー
状態を色で伝えられるアプリは『ちゃんと設計されてる』と思われる。
テキストを1行入力する欄
入力欄のデザイン（角丸、フォーカス色、エラー表示）でフォーム全体の印象が決まる。
複数行のテキスト入力欄
テキストエリアが自動リサイズするだけで『お、考えられてるな』ってなる。
プルダウンで選択肢から1つ選ぶ
基本中の基本。ただしブラウザデフォルトのままだとダサい。スタイリング必須。
ON/OFFを複数選択できるチェック欄
フォームの基本要素。カスタムスタイルにするだけで一段上に見える。
ON/OFFをトグルで切り替えるUI
チェックボックスの代わりにスイッチを使うだけでモダンアプリ感が出る。