AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
33件のコンポーネント
⌘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 /月 のような価格とサイクルの表示
価格の見せ方で売上が変わる。フォントサイズの差が購入率に直結する。
料金プランの『人気』『おすすめ』ラベル
社会的証明 + 選択肢の絞り込み。迷ってるユーザーの背中を押す。
モックサイトを囲むブラウザウィンドウの枠
モックアップの見せ方テクニック。ポートフォリオやプレゼンで効果大。
ドロップダウンを開く▾付きのクリック/ホバー要素
開閉のインタラクションが丁寧だと全体の品質感が上がる。
タグより少しリッチ。×ボタンで削除可能、選択状態を持てる
フィルターやタグ入力で使う。インタラクティブなタグは洗練されて見える。