AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
27件のコンポーネント
情報をまとめて表示する箱。画像・タイトル・説明・ボタン等を含む
カードは最頻出パーツ。デザインの質 = アプリ全体の質に直結する。
小さい絵文字的なシンボル。lucide-react、heroicons等
テキストだけの画面にアイコンが入ると一気に洗練される。最小コストで最大効果。
ユーザーの顔写真やイニシャルを丸く表示
アバターがあるとユーザー存在感が出る。SNS的な親しみやすさを演出。
NEW、3件、Pro などの小さいラベル表示
バッジで情報の鮮度や状態を示せると『使いやすいアプリだな』になる。
行と列でデータを一覧表示
管理画面・ダッシュボードの主役。テーブルの出来 = 管理画面の出来。
データ読み込み中の仮置き表示。灰色のブロックがアニメーションする
スケルトンがあるだけで『ちゃんとしたサービスだな』と思われる。無いとアマチュア。
月表示のカレンダーUI。予定や予約の表示・選択に使う
カレンダーUIがあると『業務アプリレベル』の印象になる。個人開発の域を超える。
横スワイプ/スライドで画像やカードを送るUI
画像が多いサービスで必須。スムーズなカルーセルは洗練の象徴。
出来事を時系列で縦に並べるUI
履歴表示がタイムラインだと『UXわかってる人だ』感が出る。リスト表示とは格が違う。
売上・ユーザー数などの大きな数字 + ラベル表示
ダッシュボードに統計カードがあると一発で『本格的』な印象。
進捗をバーで可視化するUI
数字だけより視覚的に進捗がわかる。ダッシュボードの定番パーツ。
カテゴリやステータスを小さいラベルで表示
タグで情報を分類できると一気にプロっぽくなる。色分けで効果倍増。
★★★★★ で評価を表示
レビュー系UIには必須。星があると口コミの信頼感が段違い。
データが無い時の表示。イラスト + メッセージ + アクションボタン
空状態をケアしてるアプリは少数派。これがあると『細部まで考えてる』と思われる。
クリックで拡大プレビュー・ギャラリー表示に対応した画像
画像がただ貼ってあるだけ vs プレビューできる、この差は大きい。
ラベルと値のペアを並べる（プロフィール詳細、注文明細等）
詳細画面の見やすさが一気に上がる。テーブルほど重くなくてちょうどいい。
✓付きの箇条書きで機能や特徴を列挙
料金カードの中の定番パーツ。✓と✗で比較できると購入判断が早くなる。
X、Instagram、YouTube等のSNSアイコン群
SNS連携してる感。ブランドの存在感が増す。
引用文を装飾付きで表示するUI
テスティモニアル内で使うと発言の重みが増す。
ベルアイコン等に付く未読件数の赤い丸
リアルタイム性のあるアプリ感が出る。通知がある = 動いてるサービス。
フォルダ構造のような階層データをツリー表示
ファイル管理やカテゴリ管理で使う。管理機能の充実度が伝わる。
URLなどからQRコードを自動生成して表示
オフライン連携やモバイル連携を考えてる感じが出る。
検索・ソート・フィルター・ページネーション・行選択・列カスタマイズ付きの高機能テーブル
管理画面の真骨頂。これが使いやすいアプリは『ちゃんとした業務ツールだ』と思われる。
h1〜h6の見出しテキスト
見出しのフォントサイズと余白で全体のリズムが決まる。地味に重要。
¥980 /月 のような価格とサイクルの表示
価格の見せ方で売上が変わる。フォントサイズの差が購入率に直結する。
料金プランの『人気』『おすすめ』ラベル
社会的証明 + 選択肢の絞り込み。迷ってるユーザーの背中を押す。
タグより少しリッチ。×ボタンで削除可能、選択状態を持てる
フィルターやタグ入力で使う。インタラクティブなタグは洗練されて見える。