AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
45件のコンポーネント
データ読み込み中の仮置き表示。灰色のブロックがアニメーションする
スケルトンがあるだけで『ちゃんとしたサービスだな』と思われる。無いとアマチュア。
月表示のカレンダーUI。予定や予約の表示・選択に使う
カレンダーUIがあると『業務アプリレベル』の印象になる。個人開発の域を超える。
カレンダーから日付を選択する入力UI
テキスト入力で日付を打たせるのは論外。ピッカーがあって初めてまともなフォーム。
横スワイプ/スライドで画像やカードを送るUI
画像が多いサービスで必須。スムーズなカルーセルは洗練の象徴。
出来事を時系列で縦に並べるUI
履歴表示がタイムラインだと『UXわかってる人だ』感が出る。リスト表示とは格が違う。
売上・ユーザー数などの大きな数字 + ラベル表示
ダッシュボードに統計カードがあると一発で『本格的』な印象。
進捗をバーで可視化するUI
数字だけより視覚的に進捗がわかる。ダッシュボードの定番パーツ。
カテゴリやステータスを小さいラベルで表示
タグで情報を分類できると一気にプロっぽくなる。色分けで効果倍増。
★★★★★ で評価を表示
レビュー系UIには必須。星があると口コミの信頼感が段違い。
データが無い時の表示。イラスト + メッセージ + アクションボタン
空状態をケアしてるアプリは少数派。これがあると『細部まで考えてる』と思われる。
クリックで拡大プレビュー・ギャラリー表示に対応した画像
画像がただ貼ってあるだけ vs プレビューできる、この差は大きい。
ラベルと値のペアを並べる（プロフィール詳細、注文明細等）
詳細画面の見やすさが一気に上がる。テーブルほど重くなくてちょうどいい。
クリックで開閉するQ&A形式のUI
FAQといえばアコーディオン。これだけでFAQセクションが完成する。
画面の端（右・左・下）からスライドして出てくるパネル
モーダルより自然な導線。『UIのトレンドわかってるな』感が出る。
手順の進捗を表示するUI（ステップ1 → 2 → 3）
登録フローや購入フローが一気にプロっぽくなる。ユーザーの離脱率も下がる。
画面右下に出る↑ボタン。ページ最上部へスクロール
長いページには必須の親切設計。無いと不便だが、あっても気づかれにくい影の功労者。
画面上部または下部に常に固定表示されるバナー
告知やCTAを常に見せたい時に有効。ただし邪魔にならないデザインが腕の見せ所。
複数の選択肢から1つだけ選ぶ丸ボタン
セレクトボックスより選択肢が一目瞭然。3〜5個の選択肢ならこっちの方が直感的。
ドラッグで数値を調整するバー
数値入力をスライダーにするだけでインタラクティブなアプリ感が出る。
ファイルをドラッグ&ドロップまたはクリックで選択してアップロード
ドラッグ&ドロップ対応のアップロードは『最新のアプリだ』感を即座に与える。
テキスト入力で絞り込みながら選択できるUI
選択肢が多い時にセレクトより圧倒的に使いやすい。ユーザー思いの設計。
入力途中で候補が自動表示されるUI
Google検索みたいなサジェスト。これがあると『体験が考えられてる』と感じる。
6桁の認証コードを1文字ずつ個別のボックスに入力するUI
セキュリティ画面が本格的に見える。2FA対応アプリの証。
+−ボタン付きの数値入力フィールド
ECサイトの数量変更の定番。ブラウザデフォルトの矢印より圧倒的にUXが良い。
★をクリック/タップして評価を入力するUI
レビュー機能の定番入力。インタラクティブな星は触ってて楽しい。
画面の端に出る詳しい通知。タイトル + 説明 + アクション付き
トーストより詳細な情報を伝えられる。リアルタイム系アプリの必須パーツ。
要素の近くに出る小さな確認ダイアログ
モーダルほど邪魔じゃないけど確認はできる。さりげない安全設計。
操作完了後の成功/エラー/404を全画面で表示
完了画面が丁寧だと『最後まで考えられてるな』の印象。404の出来も意外と見られる。
ホバーで出る小さい説明テキスト
UIの説明を画面内に置かなくて済む。情報密度が高い画面で威力を発揮する。
クリックで出る情報パネル。ツールチップより大きい
ページ遷移なしで詳細を見せる。動線のスムーズさが格段に上がる。
クリックで展開/折りたたみできるブロック
情報過多を防ぐ武器。『見せすぎない設計』は上級者の証。
ホバーで出るリッチな情報カード（プロフィール概要等）
GitHubやTwitterで見るあれ。これがあると『このレベルのUI作れるの？』と驚かれる。
ユーザーレビュー・推薦文の表示セクション
社会的証明の王道。これがあるLPと無いLPでは説得力が天と地の差。
料金プランを並べて比較できるカード
SaaSのLPには必須。比較しやすい料金テーブルは購入意欲に直結する。
『今すぐ始めよう』的な、行動を促すセクション
LP下部にこれが無いとコンバージョンを取りこぼす。必ず最後に置くべき。
✓付きの箇条書きで機能や特徴を列挙
料金カードの中の定番パーツ。✓と✗で比較できると購入判断が早くなる。
画面右下に常に浮いている丸いアクションボタン
モバイルアプリ感が出る。主要アクションが常にアクセス可能な設計。
スマホ画面下部のタブナビゲーション
モバイル対応してる感が一気に出る。ネイティブアプリ風になる。
画面下からスライドして出るパネル（モバイル向け）
iOSの共有メニューと同じパターン。モバイルUXの定番。
コンテンツ間の水平/垂直の区切り線
地味だけど無いと要素がくっついて見える。レイアウトの呼吸に必要。
カスタムスクロールバー付きのスクロール可能な領域
ブラウザデフォルトの太いスクロールバーが消えるだけで洗練される。
X、Instagram、YouTube等のSNSアイコン群
SNS連携してる感。ブランドの存在感が増す。
サイトのロゴ画像またはテキストロゴ
ロゴの配置とサイズ感で全体の印象が決まる。大きすぎるとダサい。
引用文を装飾付きで表示するUI
テスティモニアル内で使うと発言の重みが増す。
ベルアイコン等に付く未読件数の赤い丸
リアルタイム性のあるアプリ感が出る。通知がある = 動いてるサービス。