ゲームUIデザイン×AI駆動開発

ゲームUIデザイン × AI駆動開発 原則を押さえ、AIとともに高速にプロトタイピングする うさうさ研修工房

AGENDA この資料の進め方 Why What How なぜAI駆動開発でゲーム UIを作るの か ゲームUIデザインの原則 AIと反復するプロンプト実践フロー うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 2

WHY なぜAI駆動開発でゲーム UIを作るのか ゲームUIは反復（イテレーション）が命。ワイヤーフレーム →ビジュアル→実装を何度も往復する必要がある AIに下書きを生成させれば、 1人日かかっていたラフ案出しが数分で試せる ただし、原則を知らずに AIに丸投げすると、 Cyberpunk 2077の初期UIのような「情報過多で複雑すぎる UI」になりかねない うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 3

WHAT ― UIの種類 Diegetic UI と Non-diegetic UI Non-diegetic UI Diegetic UI 画面に重ねて表示される、従来型のHUD。体力バー・弾薬数など を画面端に配置する ゲーム世界の中に情報を組み込む。キャラクターモデルに体力 表示を統合するなど 例：多くのFPS・RPGの標準HUD 例：Dead Spaceの背中の体力ゲージ うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 4

WHAT ― HUD設計原則① 情報ミニマリズム：「何もない」から始める 画面に何も表示しない状態から始め、常時表示する理由を説明できる要素だけを追加する 体力バーが表示時間の95%は「関係ない」情報になっているなら、被弾時などの文脈依存表示に変える うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 5

WHAT ― HUD設計原則② 視覚的階層と一貫性 視覚的階層 操作の一貫性 優先順位付け サイズ・色・位置・アニメーションで、最も 重要な要素に注意を誘導する 「決定」がメニューによって Aボタンだったり Bボタンだったりすると、プレイヤーは必ず ミスする 要素を整理し、情報を明確かつ客観的に 優先順位づける うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 6

WHAT ― HUD設計原則③ フィードバックの速さが「壊れている」印象を左右する 200ms 読み込みに200ms以上かかる場合、ローディング表示を出す 500ms 何のフィードバックもない状態が500ms続くと、プレイヤーは「壊れている」と感じる 44×44px モバイル・Steam Deckでは、タップ対象は最低44×44pxを確保する うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 7

WHAT ― プラットフォーム差 ジャンル・プラットフォームで HUDは変わる FPS 最小限・画面端固定のレイアウトで瞬時の視認性を確保 RPG 情報量が多く、階層化されたメニューで整理する モバイル 小さい画面と親指の可動域を前提にレイアウトする バトルロイヤル ゾーンタイマー・仲間の体力・インベントリを同時に伝える うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 8

HOW ― 実践フロー AIと反復する 4ステップ 1 2 要件定義 （ジャンル・原則） うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 3 AIへ プロンプト 4 原則で レビュー 指摘を伝え 再生成 9

HOW ― プロンプト例 原則を埋め込んだプロンプトの書き方 あなたはゲーム UIデザイナーです。 【ゲーム情報】ジャンル：サバイバルホラー／プラットフォーム： PC・コンソール 【守るべき原則】 ・情報ミニマリズム：常時表示は最小限にし、文脈依存で表示を切り替える ・Diegetic UI を検討：体力表示をキャラクター /装備に統合できないか提案する ・視覚的階層：最重要情報（体力・脅威）を最優先で目立たせる 【依頼】プレイ中 HUDのワイヤーフレーム案を 3パターン提案してください。 うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 10

HOW ― レビュー観点 AIの生成案を原則で照合するチェックリスト □ 常時表示している要素は、本当に常時必要か（情報ミニマリズム） □ ゲーム世界に統合できる情報を、あえて画面外に重ねていないか（ Diegetic UI） □ 最重要情報が、サイズ・色・位置で一目でわかるか（視覚的階層） □ 同じ操作は、どのメニューでも同じボタンに割り当たっているか（一貫性） □ タップ・クリック対象は44×44px以上あるか（アクセシビリティ） □ 色覚多様性に配慮した配色になっているか（アクセシビリティ） うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 11

まとめ Why AIによる高速な反復は武器になるが、原則を知らずに使うと情報過多な UIになる What Diegetic/Non-diegetic・情報ミニマリズム・視覚階層・一貫性・フィードバック速度・アクセシビリティ How 要件定義→原則を埋め込んだプロンプト →原則でレビュー →再生成、のサイクルを回す うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 12

REFERENCE 参考文献・出典 Game UI/UX Design: Best Practices and Examples — Wayline Game UI Design Guide: Principles, Examples & Best Practices — Pixune UX and UI in Game Design: HUD, Inventory, and Menus — Medium Game HUD Essentials: Designs for 2024 — Page Flows Game UX Design: A Complete Guide — UXPin Game UI/UX Design Principles: HUD, Menus, and Feedback Systems — StraySpark うさうさ研修工房 ／ ゲームUIデザイン×AI駆動開発 13