🗄️

【UI/UX】AI駆動開発に便利なUI/UXデザインとプロンプトテンプレート

2025/03/05に公開

はじめに

最近はAIエージェントや大規模言語モデルが猛スピードで進化していますが、UI/UXデザイン分野も例外ではありません。
レトロからモダン、ピクセルアートまでさまざまなスタイルに対応し、ウェブやアプリ、ゲームUIを効率よく組み上げるうえで、AIへの指示（プロンプト）の書き方が勝負を分けるようになってきました。

今回は、UI/UXデザインをAIに任せる際のポイントをまとめました。

レトロやミニマル、ピクセルアート風といったジャンルごとの傾向を整理し、さらに用途別の設計上の注意点をピックアップ。

最後に、すぐに使えるプロンプトテンプレート20点をMarkdown形式で用意しています。
ではいきましょう💫

1. 押さえておきたい3つのデザイン

1-1. レトロデザイン

昔のブラウン管やカセットテープを連想させるグラフィック、ネオンカラー、ドットフォントなどを用いて、懐かしさと新鮮さを融合する手法が再燃しています。
ただし、見た目だけを当時のままにすると、現代ユーザーの操作感とは合わない部分も。レイアウトやアクセシビリティの要件は最新基準を取り入れて、見た目とのバランスを取りましょう。

参考URL

https://unsplash.com/

1-2. ミニマル＆フラットデザイン

AppleやGoogleのガイドラインに代表される「フラット＆ミニマル」なデザイン。装飾を省きつつ、余白や配色、文字サイズで情報の優先度を示すのが特徴です。
ただしボタンやリンクが埋没しやすい欠点もあるため、ユーザビリティ調査ではフラットすぎるUIは注意が必要という結果も出ています。色のアクセントやわずかな影などを適度に使うとよいでしょう。

参考URL

https://material.io/design

1-3. RPGライクなピクセルデザイン

ゲームやファンシーなサービスのUIで人気を博しているのがピクセルアート。8-bitや16-bit風のドットでHPバーやインベントリを表現すれば、一気にレトロ感たっぷりになります。
とはいえ、現代の高解像度環境では荒く見えすぎる場合があるため、コントラストやアイコンサイズなどを調整し、操作性を落とさないようにしましょう。

参考URL

https://www.reddit.com/r/PixelArt/

2. 指示の出し方がすべてを変える

AIに「かっこいいUIを作って」と伝えるだけでは、ぼんやりした案しか返ってこないことが多いです。
そこで重要なのが、プロンプトを詳細に構造化して書くこと。以下の4つの要素を盛り込みましょう。

2-1. 役割や視点の指定

「あなたは優秀なUI/UXデザイナーです」など、役割(ロール)を指定する事で、回答の方向性がブレにくくなります。

2-2. コンテキストの説明

デバイス、ターゲットユーザー、世界観など、AIが判断材料にする具体的な状況を含めます。

2-3. 具体的な要件

色・レイアウト・機能・アクセシビリティなどを箇条書きで明示。ボタンサイズやコントラスト比まで書くと望ましいです。

2-4. 出力形式の指定

最終的に文章なのか、コード例なのか、構成図なのか。これを指示しておくとAIも迷いません。

3. 用途別のヒント

3-1. Webデザイン

レスポンシブ: PCからスマホまで快適に閲覧できる構成
アクセシビリティ: コントラスト比やフォントサイズなど、WCAG基準を意識
明確なナビゲーション: Sticky headerやパンくずリストで回遊性を上げる

3-2. モバイルアプリ

親指操作: 片手でも使いやすい配置（サムゾーン）を考える
タップターゲット: 44px以上を確保
プラットフォームガイドライン: iOSとAndroidで微妙に異なる慣習を把握

3-3. ゲームUI

世界観との整合: ファンタジーなら古風な装飾、SFならホログラム風など
HUDの情報優先度: HPバーやミニマップは常時表示、メニュー系はセカンダリへ
入力デバイス: タッチかコントローラーかで操作性が変わる

4. すぐ使えるプロンプトテンプレート20選

ここからは、AIに投げるだけで使えるプロンプトテンプレートを20件用意しました。
用途やテイストごとにまとめているので、コピペ＆カスタマイズでご活用ください！

1. Webランディングページ (レトロスタイル）

Role/Instruction:
あなたは優秀なUI/UXデザイナーです。以下の要件を踏まえて、レトロスタイルのランディングページを提案してください。

Context:
- プロダクト: 新作のレトロゲームをPRする公式サイト
- ターゲット: 80～90年代ゲームに懐かしさを感じる30～40代
- ブランドイメージ: ピクセルアートやスキャンライン、ドットフォント

Requirements:
1. レイアウト
- ファーストビューに大きなレトログラフィックを配置
- スクロールでゲーム内容を紹介するセクションが段階的に表示
2. カラー・フォント
- ネオンカラーやドットフォントで80年代感を演出
- 背景は黒系または濃紺系、文字は高コントラストで可読性を確保
3. ナビゲーション
- ヘッダーにシンプルなメニュー(ゲーム概要、キャラクター紹介、購入リンク)
- レスポンシブ対応
4. UX
- レトロ感と同時にユーザーが操作しやすい現代のUIを維持
- ボタンホバー時のアニメーション

Output:
デザイン仕様の文章化(セクション分け)。可能であればHTML/CSSの例も示す。

2. Webコーポレートサイト (モダンミニマル)

Role/Instruction:
あなたは優秀なUI/UXデザイナーです。シンプルで洗練された企業サイトのデザイン提案を行ってください。

Context:
- 企業: スタートアップ(IT系)
- コアバリュー: 革新性、透明性、信頼感
- ターゲット: 投資家や採用候補者、サービス利用検討者

Requirements:
1. レイアウト
- ヒーローイメージ(メインビジュアル)を画面上部全面に配置
- 下部にサービス概要、実績、チームメンバー紹介セクション
2. カラー・フォント
- 白背景、アクセントとしてコーポレートカラー(青系)をポイント使用
- フォントはサンセリフ系、余白をしっかりとる
3. ナビゲーション
- 固定ヘッダー(Sticky header)にメニュー(事業、実績、チーム、採用、問い合わせ)
- PC・モバイルどちらでも見やすいメニュー展開
4. UX
- シンプルなアニメーション(スクロール時のフェードイン)
- アクセシビリティ(コントラスト比、フォントサイズ)を考慮

Output:
最終的に提案されたデザイン概要をセクションごとに記述。可能ならBootstrapなどを想定したコード例も。

3. Webメディアサイト (ブログ形式)

Role/Instruction:
あなたはUI/UXデザイナー兼編集者です。ブログ型のWebメディアのデザインを提案してください。

Context:
- ジャンル: テック・スタートアップ関連の記事を発信
- 投稿頻度: 週2～3本
- 広告バナーやサブスクプランへの誘導あり

Requirements:
1. レイアウト
- トップページ: 最新記事をカードレイアウトで並べる
- サイドバーまたはヘッダー下部にカテゴリタブを表示
2. カラー・フォント
- 読みやすい白背景、文字は深いグレーで落ち着いた印象
- 見出しはやや大きめ(24px以上)、本文は16～18px程度
3. ナビゲーション
- 記事ページにはパンくずリストや関連記事リンクを配置
- サイドバーにアーカイブ、人気記事ランキング
4. UX
- レスポンシブ対応でスマホ閲覧時はカードを縦並びに変更
- 記事中に広告を挿入する場合のUXバランスにも配慮

Output:
各ページ(トップ、記事、カテゴリ、アーカイブ)のデザイン案を文章でまとめ、HTML構造の例示も希望。

4. モバイルアプリ (ヘルストラッキング)


Role/Instruction:
あなたはモバイルアプリ専門のUI/UXデザイナーです。健康管理アプリのデザインを提案してください。

Context:
- ターゲット: 20～40代の健康志向ユーザー
- 機能: 歩数計、睡眠ログ、心拍数計測など
- プラットフォーム: iOSとAndroid両対応

Requirements:
1. メイン画面
- 今日の歩数や睡眠時間を円グラフ/棒グラフで表示
- 下部タブバー(ホーム、履歴、設定)で画面切り替え
2. カラー・フォント
- 明るい背景色、健康的な印象のパステルグリーンやブルー
- 大きめの数字表示で現在の状態を一目で把握
3. インタラクション
- 押しやすいボタンサイズ(44px以上)
- グラフ部分はタップで詳細がポップアップ
4. アクセシビリティ
- テキストコントラストを確保
- 音声読み上げや画面拡大機能に配慮

Output:
ホーム画面、履歴画面、詳細ポップアップのデザイン仕様を段階的に提示。モーションやアニメーション案があれば追加。

5. モバイルアプリ (旅行プラン作成)

Role/Instruction:
あなたは旅行アプリのUI/UXデザイナーです。旅行プラン作成をサポートするスマホアプリを提案してください。

Context:
- ターゲット: 20～50代、観光好き
- コンセプト: サクッと旅程を組めて、友人と共有しやすい
- プラットフォーム: iOS/Android

Requirements:
1. ホーム画面
- 目的地検索ボックス
- 最近のトレンド旅行先をカルーセル表示
2. プラン編集画面
- 日付ごとにスケジュールブロックを追加可能
- 飲食店候補や観光スポット候補をサジェスト
3. カラー・フォント
- 旅行のワクワク感を出すため明るい色使い
- フォントは丸みのあるサンセリフで親しみやすく
4. 共有機能
- リンク生成ボタンでSNSやメッセンジャーに行程を共有
- マップ画面でルート表示

Output:
画面フロー(ホーム→プラン編集→共有)をテキストで詳細化。可能ならReact NativeのUI例を示す。

6. モバイルアプリ (レシピ管理)

Role/Instruction:
あなたは料理好きのUI/UXデザイナーです。家庭料理のレシピ共有アプリのデザインを行ってください。

Context:
- 対象: 料理初心者～中級者
- 投稿機能: ユーザーがオリジナルレシピを投稿、写真添付
- マonetization: 広告 or プレミアムプラン

Requirements:
1. ホーム画面
- おすすめレシピのカード表示(写真と時短/難易度ラベル)
- 検索バーとカテゴリボタン(和食、洋食、中華など)
2. レシピ詳細
- 材料リストと手順を段階的に表示
- お気に入り登録やコメント欄
3. カラー・フォント
- 白基調で清潔感
- サブカラーはオレンジや黄色(食欲をそそるイメージ)
4. UX
- 片手操作でスクロールしながら手順を見られる
- 調理中に誤タップしづらい大きめボタン設計

Output:
アプリ全体の画面マップと各主要画面のUI仕様。必要に応じてコンポーネント(カード、コメント欄)のコード例も提示。

7. ゲームUI (ファンタジーRPG)

Role/Instruction:
あなたはゲームUI/UXデザイナーです。ファンタジーRPGのUIデザインを提案してください。

Context:
- 世界観: 中世ヨーロッパ風ファンタジー
- ジャンル: シングルプレイRPG
- デバイス: PC/コンソール

Requirements:
1. HUD
- 左上にHP/MPバー、右上にミニマップ
- メイン装備やショートカットスロットを下部にアイコン表示
2. インベントリ画面
- スクロール式のアイテムリスト
- 装備スロット(頭、胴、脚、武器など)をキャラクターイラスト横に配置
3. 世界観表現
- 古めかしい巻物風のウィンドウ枠
- ファンタジー風アイコンセット(剣、盾、薬草など)
4. UX
- 戦闘中でも一目でHP/MPが分かるコントラスト
- コントローラー操作も視野に入れたボタン配置

Output:
HUD構成図、メニュー画面案などをテキストで説明。アニメーションや音声フィードバックのアイデアもあれば追加。

8. ゲームUI (シューティング)


Role/Instruction:
あなたはアーケードシューティングゲーム向けのUI/UXデザイナーです。高速アクションに適したUIを設計してください。

Context:
- ジャンル: 縦スクロールシューティング
- デバイス: アーケード筐体 or コンソール
- ユーザー: アクション好きのコアゲーマー

Requirements:
1. HUD
- 画面上部にスコア、残機、ボム数を表示
- 右下あたりに現在のパワーアップ段階を示すゲージ
2. カラー・フォント
- 派手なネオンカラー、SF風フォント
- 弾幕の色と競合しないようにUIは際立つ配色
3. UX
- 激しい画面でも認識しやすい配置とコントラスト
- ミス時に視覚的エフェクト(フラッシュ)でわかりやすく
4. 難易度設定
- メニュー画面でEasy/Normal/Hardを選択しやすいUI
- リザルト画面でスコアランキング

Output:
HUDレイアウト、リザルト画面、メニュー構成をテキスト化。アニメ演出やサウンドも補足あれば記載。

9. ダッシュボード (SaaS向け分析ツール)

Role/Instruction:
あなたはB2B向けSaaSのUI/UXデザイナーです。企業向け分析ダッシュボードを設計してください。

Context:
- ユーザー: データアナリスト、経営層
- 目的: 売上や顧客データの可視化とレポーティング
- デバイス: 主にPCブラウザ

Requirements:
1. メインページ
- 売上グラフ、顧客数、TOP製品などをカード形式で配置
- フィルタリングや日付範囲指定
2. カラー・フォント
- ホワイト/グレー基調、アクセントにブランドカラー(青や緑)
- フォントは読みやすいサンセリフ系
3. ナビゲーション
- 左側メニューで各分析モジュールへアクセス
- ヘッダーに検索バー、通知アイコン
4. UX
- レスポンシブ対応(タブレットでも閲覧可能)
- マウスホバー時にツールチップで詳細数値

Output:
ダッシュボード画面のレイアウト、グラフコンポーネントの仕様を箇条書き。HTML/CSSやReactなどのコード例も可能。

10. サイネージ/Kiosk (博物館案内端末)

Role/Instruction:
あなたは公共施設向けUIデザイナーです。博物館内のタッチ式案内端末のUIを設計してください。

Context:
- ユーザー: 幅広い年齢層、外国人観光客も来館
- 機能: 展示物の場所検索、館内マップ、QRコードのスキャン
- ハード: 大型タッチパネル

Requirements:
1. ホーム画面
- 大きなボタンで「展示検索」「マップ」「イベント情報」を案内
- 多言語切り替えボタン(日本語/英語/中国語など)
2. カラー・フォント
- 親しみやすい落ち着いた配色
- フォントは大きく、ボタンも指1本で十分タップできるサイズ
3. ナビゲーション
- 屋内地図表示、現在地表示機能
- 戻るボタンを常に画面左下または右下に配置
4. UX
- 耐久性と操作性を考慮、タップ反応に適度なアニメーション
- フィードバック音やバイブレーション(対応端末の場合)

Output:
各画面の配置、ボタンサイズ指示など詳細化。多言語対応の仕組みや操作フローの例を文章で記載。

11. ポートフォリオサイト (クリエイター向け)

Role/Instruction:
あなたはデザイナーやイラストレーター、フォトグラファーなどクリエイターのポートフォリオサイトをデザインしてください。

Context:
- ターゲット: 発注担当者、ギャラリーキュレーター
- 目的: 作品を魅力的に見せる
- スタイル: シンプルかつ個性が出るレイアウト

Requirements:
1. トップページ
- 大きなビジュアルスライダー(作品サンプル)
- 自己紹介とSNSリンク
2. ギャラリーページ
- サムネイルグリッド表示、ライトボックス(拡大表示)
- カテゴリ分け(イラスト、写真、3Dなど)
3. カラー・フォント
- 作品が映えるように背景は白か淡色
- 必要最低限の装飾でスタイリッシュさを演出
4. UX
- スクロールやホバー時に微妙なアニメーション
- 問い合わせフォームの設置(メールやSNSリンク)

Output:
ページ構成、ギャラリーのレイアウト方法、使用技術(CSSフレームワークなど)の提案をテキストで。

12. Eラーニングプラットフォーム (動画講座)

Role/Instruction:
あなたはオンライン学習プラットフォームのUI/UXデザイナーです。動画講座の受講画面を中心に設計してください。

Context:
- ユーザー: 社会人学習者、学生
- 機能: 動画再生、クイズ、進捗管理
- デバイス: PC/タブレット/スマホ

Requirements:
1. コース一覧
- サムネイルと講座タイトル、進捗バーを表示
- フィルタ機能(カテゴリ、難易度、講師)
2. 動画再生画面
- サイドに講義ノートやスライド、クイズボタン
- 再生速度変更、字幕ON/OFF切り替え
3. UX
- 学習進捗の可視化(完了した講義にはチェック)
- モバイル時は動画を全画面表示、他機能はメニューに収納
4. ゲーミフィケーション
- バッジ獲得やポイントシステムで学習モチベを維持

Output:
メイン画面、受講画面、マイページなどのUI構造を文章でまとめ、PC/モバイルの違いにも触れる。

13. チャットボットインターフェース (企業サイト)

Role/Instruction:
あなたはチャットボットUIデザイナーです。企業サイトの問い合わせ用チャットボットのデザインを考えてください。

Context:
- 企業: 大手通信事業者
- 目的: 24時間自動でユーザーの質問に答え、必要に応じて担当部署へ引き継ぐ
- スタイル: 信頼感のある落ち着いた雰囲気

Requirements:
1. チャットウィンドウ
- 右下にアイコンを常時表示、クリックでポップアップ
- シンプルな吹き出しデザイン
2. 会話フロー
- 定型文ボタンで問い合わせカテゴリを選択可
- 担当者に繋ぐ際のフォーム案内
3. カラー・フォント
- ブランドカラーの青やグレー、落ち着いた背景
- テキストは読みやすい濃いグレー
4. UX
- 開始時に「何をお探しですか？」などガイド
- タイピングインジケータ(返信中アニメーション)

Output:
チャットボット起動ボタン、ウィンドウのレイアウト、チャット吹き出し等をテキストで記述。追加のUIパターンがあれば提案。

14. AR/VRインターフェース (コンセプト)

Role/Instruction:
あなたは先進的なAR/VRインターフェースデザイナーです。近未来的なUIコンセプトを示してください。

Context:
- ユーザー: ARグラスやVRヘッドセット使用者
- アプリ: バーチャルショッピングとSNSの融合
- 世界観: SF映画のようなホログラムUI

Requirements:
1. HUD(ヘッドアップディスプレイ)
- 視界の中央を妨げない透明パネル
- リアル空間に重ねる要素(商品情報、コメント欄など)
2. コントロール
- 音声入力/ジェスチャー操作
- ホバリングやピンチで操作可能なボタン
3. カラー・フォント
- 半透明の青や緑、SF調の細身フォント
- 背景に合わせて自動コントラスト調整
4. UX
- 現実空間に溶け込みすぎず、必要情報を適切に配置
- 長時間装着でも疲れにくいUIレイアウト

Output:
AR/VRでのレイアウト案、ジェスチャー動作の説明、表示の階層構造を文章化して示す。

15. スマートウォッチデザイン (健康管理)

Role/Instruction:
あなたはウェアラブル機器向けUI/UXデザイナーです。スマートウォッチの健康トラッキング画面を設計してください。

Context:
- 機能: 歩数計、心拍数、アクティビティリング表示
- ユーザー: ランニングやジム通いをする若年層
- ディスプレイ: 円形または四角形(複数形状あり)

Requirements:
1. メイン画面
- 心拍数やステップ数を中心に配置
- 進捗リングやバー表示
2. 操作性
- タッチまたは竜頭(物理ボタン)操作を想定
- スワイプで詳細画面へ
3. デザイン
- 小さな画面で見やすい大きめアイコン
- 文字は高コントラストでバックライト下でも視認可能
4. 通知・アラート
- 心拍数が一定以上になると画面フラッシュやバイブ
- 達成目標に到達するとアニメーション演出

Output:
メイン画面、詳細画面、アラート演出などをまとめ、円形/四角形それぞれの例を示す。

16. 車載インフォテインメント (カーナビ)

Role/Instruction:
あなたはカーナビや車載ディスプレイのUI/UXを専門としています。運転中でも安全・快適に操作できるUIを提案してください。

Context:
- デバイス: タッチパネル付きカーナビ、音声操作も可能
- 機能: 地図表示、音楽再生、車両情報(燃費/メンテナンス)
- ターゲット: 幅広い年齢層

Requirements:
1. 地図画面
- 大きな道路表示、音声ガイドのオンオフ
- 検索ボタンやルート切り替えボタンを常時表示
2. 音楽プレーヤー
- シンプルな再生/停止、曲送りボタン(大きめ)
- カバーアート表示、アーティスト名のテキスト
3. カラー・フォント
- 車内の照明環境を考慮し、昼夜モードを切り替え
- フォントは視認性重視、12～14pt以上
4. 安全性
- 音声操作コマンドを充実
- 運転中は複雑な操作をロック/制限

Output:
地図画面、メディア画面、車両情報画面のレイアウトを説明。昼夜モードや音声操作の提案も記載。

17. ウェアラブルデバイスUI (スマートグラス)

Role/Instruction:
あなたはウェアラブルデバイス(スマートグラス)のUI/UXデザイナーです。歩行時の情報表示に最適化したUIを検討してください。

Context:
- ユーザー: 都市で歩きながらナビを受け取りたい人
- 機能: ルート表示、POI(観光地や店舗)の情報、メッセージ通知
- 操作: 音声、タッチパッド(フレーム部分)

Requirements:
1. 画面表示
- 視線の邪魔にならない右下にルート矢印表示
- POIまでの距離や方向を小さめのパネルで表示
2. カラー・フォント
- 半透明の白ベースパネル、周囲風景を隠さない
- 視認性の高い太めフォント
3. 操作性
- タップやスワイプでメニュー切替
- 音声コマンドにも対応(「近くのカフェを探して」など)
4. セーフティ
- 歩行中に視界を過度に塞がないレイアウト
- 緊急情報(危険アラート)は画面中央に強調

Output:
インターフェースの表示位置、サイズ、操作フローを解説した仕様書を期待。ユーザーテストへの配慮点も追記。

18. ソーシャルメディアアプリ (写真共有)

Role/Instruction:
あなたはSNSアプリのUI/UXデザイナーです。写真共有に特化した新規SNSのデザインを提案してください。

Context:
- ユーザー: 10～30代、写真好き
- プラットフォーム: スマホ(iOS/Android)
- モネタイズ: 広告とサブスク(高画質アップロード等)

Requirements:
1. ホームタイムライン
- フォトカード形式、ユーザー名/いいねボタン/コメント欄
- スワイプやスクロールで次々閲覧
2. 投稿画面
- 写真撮影 or ギャラリーから選択
- シンプルなフィルター機能やキャプション入力欄
3. カラー・フォント
- 画像が映えるようにシンプルな白背景
- フォントは丸みのある柔らかいもの
4. UX
- タップで写真の拡大表示、ピンチズーム
- 通知画面とプロフィール画面へのスムーズな遷移

Output:
主要画面(タイムライン、投稿画面、プロフィール、通知)のワイヤーフレーム的提案を文章で。可能ならアニメーションも含めて言及。

19. マッチングアプリ (デート用)

Role/Instruction:
あなたはマッチングアプリのUI/UXデザイナーです。デート相手探しをするユーザー向けのアプリを提案してください。

Context:
- ターゲット: 20～40代の独身男女
- プラットフォーム: モバイル中心
- 特徴: 相性診断や共通の趣味タグ

Requirements:
1. メイン画面
- プロフィールカードをスワイプ操作で「いいね」「スキップ」
- 共通の趣味タグがある場合、ハイライト表示
2. プロフィール詳細
- 写真ギャラリー、自己紹介文
- SNSリンクや趣味リスト
3. カラー・フォント
- ユーザーの緊張感を和らげる柔らかい色(ピンク系など)
- フォントは親しみやすい丸ゴシック
4. UX
- マッチング成立時のアニメーション演出
- メッセージ画面もシンプルでわかりやすいチャットUI

Output:
カードスワイプ画面、プロフィール画面、メッセージ画面の詳細を段階的に文章化。アニメーションや通知の演出も盛り込む。

20. 飲食店注文端末(セルフオーダー)

Role/Instruction:
あなたは飲食店向けセルフオーダー端末のUI/UXデザイナーです。タブレット式または据え置き式キオスクを設計してください。

Context:
- ユーザー: ファミリー、個人客
- 機能: メニュー一覧、注文、会計方法選択
- スタイル: 親しみやすく直感的

Requirements:
1. ホーム画面
- 大きめのカテゴリーアイコン(フード、ドリンク、デザートなど)
- キャンペーンやおすすめ商品をバナー表示
2. 商品選択画面
- サムネイルと価格、カートに追加ボタン
- カスタマイズ(トッピングやサイズ変更)画面へ遷移
3. カラー・フォント
- 店舗イメージに合わせた明るい配色
- テキストとボタンは大きめ、子供でも操作可能
4. UX
- 注文確定前に確認画面を挟む
- エラー時のわかりやすいメッセージ

Output:
画面フロー(ホーム→商品選択→確認→完了)を段階的に記述。レイアウト案やボタン配置を箇条書きで示す。