AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
17件のコンポーネント
ヘッダー内のメニューリンクの並び
ナビの整理 = 情報設計力の表れ。ごちゃごちゃしてると全体の信頼が下がる。
画面左(または右)の縦メニュー。管理画面の定番
管理画面にサイドバーがあると『本格的なアプリだ』って即座に伝わる。
クリックで表示内容を切り替えるUI
情報量が多い画面をスッキリ整理できる。使いこなすと『UI上手いな』感が出る。
ホーム > カテゴリ > 記事 のような現在地表示
これがあると『ちゃんとしたサイト構造だな』と思われる。無いと迷子になる。
クリックで展開される選択肢のリスト
ナビの情報量が多い時に必須。整理されたドロップダウン = 設計力の証拠。
ページ送り。1, 2, 3 ... 10 の切り替え
大量データを扱えてる感。これ無しで全件表示はアマチュア。
画面の端(右・左・下)からスライドして出てくるパネル
モーダルより自然な導線。『UIのトレンドわかってるな』感が出る。
手順の進捗を表示するUI(ステップ1 → 2 → 3)
登録フローや購入フローが一気にプロっぽくなる。ユーザーの離脱率も下がる。
画面右下に出る↑ボタン。ページ最上部へスクロール
長いページには必須の親切設計。無いと不便だが、あっても気づかれにくい影の功労者。
スマホ画面下部のタブナビゲーション
モバイル対応してる感が一気に出る。ネイティブアプリ風になる。
⌘K で開く検索+コマンド実行UI
これ入ってるだけで『え、このレベルのUI一人で作ったの?』と驚かれる。最強の差別化パーツ。
ヘッダー内の多階層メニュー。サブメニューがリッチに展開する
情報量が多いサービスの整理力が見える。企業サイト級のナビ構造。
デスクトップアプリ風の上部メニュー(ファイル・編集・表示)
完全にデスクトップアプリ。Webで再現すると『技術力やばい』と思われる。
ボタン型の切り替えUI(日/週/月、リスト/グリッド等)
タブよりコンパクト。iOS風の操作感が出る。
ページ内の見出しに連動する目次ナビゲーション
ドキュメント系サイトの定番。長いページの可読性が段違いに上がる。
タブレット向けの細い縦ナビゲーション(アイコン + ラベル)
レスポンシブ対応の中級者。タブレット専用UIがあると『全デバイス考えてる』感。
ナビゲーション内の個別のリンク項目
アクティブ状態の表示があるだけで『どのページにいるか』が一目瞭然。