AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
10件のコンポーネント
クリックで開閉するQ&A形式のUI
FAQといえばアコーディオン。これだけでFAQセクションが完成する。
ホバーで出る小さい説明テキスト
UIの説明を画面内に置かなくて済む。情報密度が高い画面で威力を発揮する。
クリックで出る情報パネル。ツールチップより大きい
ページ遷移なしで詳細を見せる。動線のスムーズさが格段に上がる。
クリックで展開/折りたたみできるブロック
情報過多を防ぐ武器。『見せすぎない設計』は上級者の証。
ホバーで出るリッチな情報カード(プロフィール概要等)
GitHubやTwitterで見るあれ。これがあると『このレベルのUI作れるの?』と驚かれる。
画面右下に常に浮いている丸いアクションボタン
モバイルアプリ感が出る。主要アクションが常にアクセス可能な設計。
画面下からスライドして出るパネル(モバイル向け)
iOSの共有メニューと同じパターン。モバイルUXの定番。
右クリックで出る操作メニュー
デスクトップアプリレベルの操作感。Webでこれがあると『ネイティブアプリかよ』となる。
モーダルやドロワーの×ボタン
地味だが、位置やサイズが適切だと操作感が劇的に良くなる。
ドロップダウンを開く▾付きのクリック/ホバー要素
開閉のインタラクションが丁寧だと全体の品質感が上がる。