逆引きUI辞典
「どう思われたい？」から、必要なコンポーネントを逆引き。
プロっぽいと思わせたい
初見で『これちゃんとしたサービスだな』と感じさせたい
🔴ヘッダー🔴ヒーロー🔴フッター🔴パンくずリスト+6
モダンなアプリだと思われたい
『最新のトレンドを押さえてるな』と感じさせたい
🔴スイッチ🟡ドロワー🟢コマンドパレット🟡シート+5
本格的な管理画面に見せたい
『業務レベルのツールだ』と認められたい
🔴サイドバー🔴テーブル🟢データテーブル🟡統計値+9
UXわかってる人だと思われたい
『使いやすさまで考えてるな』と感心させたい
🟡ツールチップ🟡ポップオーバー🟡ポップ確認🟡ステッパー+7
成果の出るLPを作りたい
見た人が『申し込もう』と思うLPにしたい
🔴ヒーロー🟡お客様の声🟡料金カード🟡行動喚起セクション+6
ネイティブアプリっぽくしたい
Webなのに『アプリみたい』と言われたい
🟡ボトムナビ🟡シート🟡フローティングボタン🔴スイッチ+6
開発者ツールっぽくしたい
エンジニアが見て『いいツールだな』と感じるUIにしたい
🟢コマンドパレット🟢リサイズ可能パネル🟢スプリッター🟢メニューバー+6
ECサイト/商品ページを作りたい
『このサイトで買いたい』と思ってもらえるECサイト
🟡カルーセル🟡画像表示🟡数値入力🟡ステッパー+7
B2Bで信頼されるサービスに見せたい
法人が『安心して導入できる』と判断するUI
🟢透かし🟡OTP入力🟡ファイルアップロード🟡説明リスト+6
チームで使うコラボアプリに見せたい
Slack/Notionっぽい共同作業ツールの雰囲気
🟢メンション🔴アバター🟡通知バッジ🟡通知+6