AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
103件のコンポーネント
ページ最上部。ロゴ・ナビ・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
チェックボックスの代わりにスイッチを使うだけでモダンアプリ感が出る。
データ読み込み中の仮置き表示。灰色のブロックがアニメーションする
スケルトンがあるだけで『ちゃんとしたサービスだな』と思われる。無いとアマチュア。
月表示のカレンダー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
テスティモニアル内で使うと発言の重みが増す。
ベルアイコン等に付く未読件数の赤い丸
リアルタイム性のあるアプリ感が出る。通知がある = 動いてるサービス。
⌘K で開く検索＋コマンド実行UI
これ入ってるだけで『え、このレベルのUI一人で作ったの？』と驚かれる。最強の差別化パーツ。
右クリックで出る操作メニュー
デスクトップアプリレベルの操作感。Webでこれがあると『ネイティブアプリかよ』となる。
ドラッグでパネルの幅や高さを変更できるUI
VS Code的な操作感。開発者ツール感が出て『本格的すぎる』と思われる。
画面を左右/上下に分割し、境界をドラッグで調整できる
IDEやコードエディター風のレイアウト。技術系ツール感が強烈に出る。
Pinterest風の高さがバラバラなグリッドレイアウト
ギャラリー・ポートフォリオで映える。レイアウト力の見せどころ。
フォルダ構造のような階層データをツリー表示
ファイル管理やカテゴリ管理で使う。管理機能の充実度が伝わる。
ツリー構造から選択するセレクトUI
階層データの入力に特化したUI。業務アプリ感が強い。
階層型の連動セレクト（都道府県→市区町村→町名）
住所入力やカテゴリ分類で使う。連動する絞り込みは使い心地が良い。
左右のリスト間で項目を移動するUI
権限管理・メンバー割当の定番。管理画面の本格度が伝わる。
@を入力するとユーザー候補が出るテキスト入力
SlackやNotionで見るやつ。コラボレーション機能の象徴。
色を視覚的に選択するUI
カスタマイズ機能がある = ユーザーに自由度を与えてる。SaaS的な本気度。
時刻を選択するUI
Date Pickerと合わせて使うと予約系アプリの完成度が一気に上がる。
URLなどからQRコードを自動生成して表示
オフライン連携やモバイル連携を考えてる感じが出る。
画面の各要素を順番に説明する吹き出しガイド
オンボーディングが丁寧 = ユーザー思いのサービス。解約率にも効く。
背景に薄く文字やロゴを透かし表示
セキュリティ意識が伝わる。B2Bサービスで信頼感を出す武器。
⌘K や Ctrl+S のようなキーボードキー表示
パワーユーザー向け配慮。ショートカットがある = 効率を考えた設計。
ヘッダー内の多階層メニュー。サブメニューがリッチに展開する
情報量が多いサービスの整理力が見える。企業サイト級のナビ構造。
デスクトップアプリ風の上部メニュー（ファイル・編集・表示）
完全にデスクトップアプリ。Webで再現すると『技術力やばい』と思われる。
ボタン型の切り替えUI（日/週/月、リスト/グリッド等）
タブよりコンパクト。iOS風の操作感が出る。
ページ内の見出しに連動する目次ナビゲーション
ドキュメント系サイトの定番。長いページの可読性が段違いに上がる。
タブレット向けの細い縦ナビゲーション（アイコン + ラベル）
レスポンシブ対応の中級者。タブレット専用UIがあると『全デバイス考えてる』感。
検索・ソート・フィルター・ページネーション・行選択・列カスタマイズ付きの高機能テーブル
管理画面の真骨頂。これが使いやすいアプリは『ちゃんとした業務ツールだ』と思われる。
画像や動画の縦横比を固定するUI
画像がレイアウト崩れせずに揃うだけで洗練度が上がる。
モーダルやドロワーの×ボタン
地味だが、位置やサイズが適切だと操作感が劇的に良くなる。
© 2026 VibeDex. All rights reserved. の表記
法的に必要だし、あると『ちゃんとしてる』感が出る。無いと素人っぽい。
ナビゲーション内の個別のリンク項目
アクティブ状態の表示があるだけで『どのページにいるか』が一目瞭然。
h1〜h6の見出しテキスト
見出しのフォントサイズと余白で全体のリズムが決まる。地味に重要。
フッター内のリンクグループ列
リンクが整理されてるフッター = サイト全体の情報設計がしっかりしてる証拠。
¥980 /月 のような価格とサイクルの表示
価格の見せ方で売上が変わる。フォントサイズの差が購入率に直結する。
料金プランの『人気』『おすすめ』ラベル
社会的証明 + 選択肢の絞り込み。迷ってるユーザーの背中を押す。
モックサイトを囲むブラウザウィンドウの枠
モックアップの見せ方テクニック。ポートフォリオやプレゼンで効果大。
ドロップダウンを開く▾付きのクリック/ホバー要素
開閉のインタラクションが丁寧だと全体の品質感が上がる。
タグより少しリッチ。×ボタンで削除可能、選択状態を持てる
フィルターやタグ入力で使う。インタラクティブなタグは洗練されて見える。