UI/UXデザインのプロンプト35選

画面構成・空ステート・エラー表示・オンボーディングなど、画面設計の検討に使える指示文。ChatGPT・Claude・v0・Figma AI にそのまま貼り付けて使えます。全文公開・登録不要で、 コピーボタンから1クリックで持ち出せます。

[サービス名]のオンボーディング直後、ユーザーがまだ何も登録していない状態の空ステート画面を 5 パターン提案してください。各パターンで
・メインのコピー（1〜2 行）
・CTA の文言
・視覚的メタファー
を含めてください。トーンは[フレンドリー／事務的／励まし]から選びます。

[操作名]を確定する際の確認ダイアログを設計してください。
・タイトル（10 文字以内、結果を示唆）
・本文（取り消せるか／影響範囲を 1〜2 行）
・主要 CTA の文言（動詞ベース）
・キャンセルラベル
・破壊的操作の場合の視覚的工夫
よくある「本当によろしいですか？」を避けてください。

ダークモード切替について以下を設計してください：
・3 状態（Light / Dark / System）の UI
・切替の場所（設定か常時表示か）
・切替時のアニメーション要否
・ブランドカラーの調整指針
・画像／コードブロックの扱い

[コンポーネント名]について、4 状態すべての UI と文言を一気通貫で設計してください。状態遷移図と、それぞれのアクセシビリティ配慮を併記。

[サービス名]のユーザーアバターを設計してください。
・未設定時のフォールバック（イニシャル／カラー生成ロジック）
・形（円／角丸）
・サイズスケール（16/24/32/48/64）
・グループ表示の重ね合わせ
・ボット／システムアカウントの区別

通知バッジの仕様を整理してください：
・件数の上限表示（99+ など）
・点バッジと数字バッジの使い分け
・色のセマンティクス
・既読更新のタイミング
・アクセシビリティ（aria-label）

[サービス名・概要]の新規ユーザー向けオンボーディングを、最大 3 画面で設計してください。
・各画面の目的（1 行）
・見出しと本文（30〜60 文字）
・必須入力／スキップ可否
・離脱しやすいポイントとその予防策
画面間の遷移率仮説も合わせて提示してください。

[機能名]で発生しうるエラーを 8 種類洗い出し、それぞれについて以下を埋めてください：
・エラー種別（ネットワーク／権限／入力／サーバー など）
・ユーザーへの説明（原因をぼかす）
・推奨アクション（1 つだけ）
・回復導線（再試行 / サポート / 戻る）
・ログに残すべき情報

[ユースケース／予想ロード時間]を踏まえて、ローディング表現を 4 つ提案し比較してください：
・スピナー
・スケルトン
・プログレスバー
・楽観的更新（Optimistic UI）
それぞれの向き不向き、実装コスト（小／中／大）、心理的体感速度を 5 段階で評価してください。

[フォーム種別]について、バリデーションを以下の観点で設計してください：
・即時 / blur / submit のどれで何を検証するか
・エラー文言の原則（具体・解決策・短文）
・成功時の視覚フィードバック
・パスワード等のリアルタイム強度表示
・スクリーンリーダー対応
コピーは日本語で、敬体に統一。

[プラン数・ターゲット]に対するプライシングテーブルの構成を提案してください：
・推奨プランの強調方法
・機能比較表の項目選定（多すぎない）
・年額／月額切替の挙動
・FAQ 配置
・問い合わせ／無料トライアル CTA の優先度
B2B SaaS 想定。

[認証要件: SSO/Email/SNS]に対応するログイン画面を設計してください。
・正規フロー（最短手数）
・パスワード忘れ／メール変更／2FA フロー
・ロックアウト時の表示
・既存セッションがある場合の挙動
・エラー時の安全なメッセージ（情報漏えい防止）

検索結果ページについて、以下 5 状態すべての UI と文言を設計してください：
1. 入力前（プレースホルダ・人気クエリ）
2. 入力中（サジェスト）
3. 結果あり（ソート・フィルタ）
4. 結果ゼロ（提案文言・関連クエリ）
5. エラー（再試行）

[サービス名]の設定ページが膨らんできました。以下の手順で整理してください：
・現在の設定項目の棚卸し（カテゴリ案）
・利用頻度 × 重要度マトリクス
・上位ナビ（タブ／サイドバー）の選定基準
・破壊的操作（退会など）の扱い
・検索／URL 直リンクの可否

[サービス名]の通知センターを設計してください。
・通知種別（システム／コラボ／マーケ／アラート）
・既読／未読／重要のステート
・グルーピング規則
・サイレント時間の設定
・チャネル分離（メール／プッシュ／アプリ内）
プッシュ通知のオプトインタイミングも提案。

[ページ URL / コンポーネント]について、WCAG 2.2 AA を想定したセルフチェックリストを 25 項目作成してください。
・色コントラスト
・キーボード操作
・フォーカス可視
・ARIA 属性の正しい使用
・代替テキスト
・ライブリージョン
・タッチターゲット
各項目に「合格基準」と「典型的な失敗例」。

[ページ目的]において CTA が複数候補あります（[列挙]）。以下を行ってください：
・主／副／三次の階層化
・視覚的階層（色・サイズ・位置）
・モバイルでの並び順
・スクロール途中の sticky CTA 要否
・離脱時のラスト CTA

[操作名]について、モーダル／サイドパネル／フルページのいずれが適切か判定するチェックリストを 8 項目で作成し、本ケースの推奨を提示してください。
・入力項目数
・前画面の文脈保持の必要性
・モバイルでの操作性
・URL 共有の必要性
など。

[フォーム目的・想定項目]を多段化する案を 2 つ提示してください。
・ステップ数と分割基準
・進捗表示（数字／バー／パンくず）
・「戻る」「保存して中断」の扱い
・条件分岐の表現
・離脱データの取り扱い

[B2B / B2C・ターゲット]のプロフィール画面について
・必須表示／任意表示の線引き
・セクション分け（基本／実績／設定）
・エディタブル領域の表現
・他人視点と本人視点の差分
・空欄時の見せ方
を整理してください。

[データ種別／伝えたい主張]に対して、推奨チャート 3 案を比較してください：
・主張に対する適合度
・データ点数や密度への耐性
・モバイル表示
・色覚対応
・代替表現（テーブル）の併記要否
最終推奨と理由も明示。

[項目]をインライン編集できるようにします。以下を整理：
・hover でのアフォーダンス
・edit モード突入トリガー
・確定／キャンセルの操作
・サーバー保存タイミング
・失敗時の復元
・スクリーンリーダー対応

[コンテンツ性質・想定 1 ページ件数]を踏まえ、両方式の比較を 6 観点で行い推奨を出してください：
・到達性（深い位置に戻れるか）
・パフォーマンス
・SEO
・コンバージョン
・アクセシビリティ
・運用コスト

[サービス名]のキーボードショートカットを設計してください。
・必須 10 個（ヘビーユーザー向け）
・OS 標準との衝突回避
・チートシート画面の構成
・初心者への露出方法
・⌘K 検索などのコンベンション利用方針

[新機能名]のプロダクトツアー（コーチマーク）を設計してください。
・最大ステップ数（推奨 4）
・スキップ可否
・再表示導線
・「終わったら何ができる」のゴール提示
・パーソナライズ（既存ユーザーには出さない）

[削除対象]の削除フローを設計してください。
・確認ダイアログ vs Undo Toast の選択基準
・取消可能な保持期間
・連鎖削除の表現
・誤操作からの回復
・監査ログ／復元 UI

[サービス特性／ターゲットデバイス]に基づいて、ブレイクポイントを 3〜4 点で提案してください。
・各 BP のターゲット端末
・コンテンツ崩壊点に基づく実装的根拠
・タブレット縦横の扱い
・PC 大画面での最大幅

[既存のコンポーネント名一覧]を眺めて、命名の一貫性を診断してください。
・命名規則（Atomic / 機能 / 役割）
・略語と全綴りの混在
・Variant の表現方法
・命名衝突
リファクタ提案 10 件を優先度付きで。

[フィルタ対象データ・代表的な条件]に対するフィルタ UI を設計：
・即時 vs Apply 方式の選択
・複合条件（AND/OR）の表現
・適用中フィルタの可視化（チップ）
・保存／共有可能なプリセット
・URL 同期（戻る / 共有）
・モバイルでの全画面シート
・クリアの動線（部分 vs 全部）

[操作シーン（並べ替え／カテゴリ移動／ファイル投入）]の D&D 設計：
・ドラッグ可能な領域のアフォーダンス
・ドラッグ中の視覚（プレースホルダ）
・ドロップ可能領域のハイライト
・誤操作の取消（Undo Toast）
・キーボードでの代替（Reorderable List）
・スクリーンリーダー対応
・タッチ操作との衝突

[サービス特性／ユーザー状態]に応じて、通知タイミングを設計：
・即時 / バッチ / リアルタイム集約 / ダイジェスト
・Quiet Hours の運用
・チャネル分離（プッシュ／メール／アプリ内）
・通知パーミッションを求める適切な瞬間
・通知頻度に応じた離脱リスク
・解除の動線

<context>
[サービス名・想定ユーザーロール（経営／運用／現場）・主要な意思決定]
</context>

<task>
ユーザーが最初の 5 秒で答えを得るべき『コア質問』を 3 つ仮置きし、それに対応するモジュールをヒーロー領域に配置する。スクロール下部のセカンダリ情報も整理する。
</task>

<output_format>
1. コア質問（3 つ）と、それを問う背景
2. 各モジュールの種別（KPI／グラフ／テーブル／アラート）
3. 粒度（日／週／月）と切替の必要性
4. ドリルダウン先
5. セカンダリ情報の優先順位（スクロール下部）
6. 読まれない指標の整理サイクル
</output_format>

<example>
<input>
B2B SaaS ヘルスダッシュボード。ユーザーは CS マネージャー。意思決定は『どの顧客に今週手を打つか』。
</input>
<output>
コア質問:
1. どの顧客が今週解約しそうか（解約リスクスコア 上位10）
2. どの顧客が拡張機会か（NRR 寄与度 × 利用増加）
3. 自分のチームの SLA 遅延件数

モジュール:
1. アラート＋顧客カードリスト（リスクスコア降順、ドリルダウンで顧客詳細）
2. 機会スコアテーブル（金額 × 確度、CRM 連携）
3. SLA バー（赤・黄）

粒度: 1〜3 はリアルタイム、セカンダリは週次集計
セカンダリ: NPS 推移／機能別利用率／チームリソース消費
廃止候補: 90 日アクセス 0 のレガシー指標を月次クリーンアップ
</output>
</example>

<context>
[現状ナビ構成（階層構造・項目数）／主要 KPI（クリック率・直帰率）／既存ユーザー数とリテラシー]
</context>

<task>
情報設計のリサーチ計画とともに、再設計案を 2 つ提示する。「直感で並べ替え」を避ける。
</task>

<output_format>
1. 主要タスクの導線が短くなっているか（クリック深度の前後比較）
2. 上位階層 5 ± 2 を超えていないか
3. モバイルでの切替方法（メガメニュー / drawer / タブ）
4. 既存ユーザーが迷わない移行戦略（旧 URL リダイレクト・告知）
5. カードソート／ツリーテストの計画（n / 期間）
6. 案 A / B の構成、pros/cons、移行コスト（小／中／大）
7. 計測指標と判定タイミング
</output_format>

<example>
<input>
B2B SaaS、現状 7 階層・主要タブ 9 個。設定ページに迷うユーザーが多い。MAU 5,000。
</input>
<output>
1. 設定までの平均クリック数 4 → 目標 2
2. 上位 9 → 5 ± 2 に統合
3. モバイル: drawer + 主要 5 を bottom tabs
4. 移行: 旧パスに 308 リダイレクト + 1 ヶ月のバナー告知
5. リサーチ: カードソート n=20 + ツリーテスト n=50 を 2 週間で
6. 案A「役割中心」: タスク・チーム・分析・設定・ヘルプ。pros: 直感的 / cons: 機能横断が苦手。移行: 中
6. 案B「ライフサイクル中心」: 計画・実行・分析・設定・ヘルプ。pros: 戦略訴求 / cons: 既存ユーザー混乱。移行: 大
7. 指標: タスク完了率・設定到達クリック数。2 週間モニタリング
</output>
</example>

<context>
[想定行数 / 代表ユースケース（俯瞰 / 検索 / 編集）/ ユーザーリテラシー]
</context>

<task>
1 万行超でも操作性が破綻しないテーブル UX を設計する。「とりあえず仮想スクロール」で逃げない。
</task>

<output_format>
1. 列・行固定の戦略（主要識別列を sticky に）
2. 横スクロール vs 列の取捨選択（重要度マトリクス）
3. ソート・フィルタ・検索の併用ルール（順序と URL 同期）
4. 行選択（単一 / 複数 / 範囲）と一括操作の安全設計
5. 空 / ローディング / エラーの 3 状態
6. キーボード操作（矢印 / Shift 範囲 / Cmd+A / Enter で詳細）
7. モバイルでの代替表示（カード化 / 詳細遷移）
8. 無限スクロール vs ページネーションの判断と根拠
</output_format>

<example>
<input>
営業向け CRM 顧客一覧、想定 5 万件。日次の俯瞰 + 個別編集（電話メモ）。リテラシー普通。
</input>
<output>
1. 固定: 顧客名（左）と更新日（右）を sticky
2. 列取捨: 必須 6 列、その他は列セレクタで隠蔽
3. ソート＋フィルタ＋検索: フィルタ → ソート → 検索の順、状態は URL クエリで保存・共有可
4. 一括操作: 範囲選択（Shift）で最大 200 件、操作前に必ず確認モーダル + Undo
5. 状態: 空は「フィルタを緩めますか？」を提案、エラーは再試行
6. キーボード: ↑↓で行移動、Enter で詳細、E で編集、Esc でキャンセル
7. モバイル: カード化 + 検索バー sticky、詳細は別ページ
8. ページネーション推奨。理由: ブクマ可、戻る挙動が直感的、印刷可
</output>
</example>

<context>
[既存ログイン手段（パスワード / SSO / SMS OTP 等）/ ターゲット層（リテラシーレンジ）/ 想定デバイス（iOS / Android / Web）]
</context>

<task>
パスキー（WebAuthn）を既存認証に追加する UX を設計する。「指紋を保存しますか？」のような誤解を招く説明を防ぐ。
</task>

<output_format>
1. 初回案内のタイミング（ログイン後 vs 設定 vs 強制）
2. リカバリ手段の併設（バックアップコード / メール / 既存パスワード）
3. 端末横断の説明（iCloud / Google Password Manager / 1Password 等の同期）
4. 既存パスワードとの併用ポリシー（共存 / 段階廃止）
5. WebAuthn 失敗時のフォールバック動線
6. 誤解を招かない説明文（パスキーが「鍵」「データ」ではない説明）
7. 段階的ロールアウト（オプトイン → 推奨 → 必須）
8. 計測指標（登録率 / 利用率 / リカバリ発動率）
</output_format>