---
title: ゲームUIデザイン×AI駆動開発
tags:  #ゲーム  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/K74WX4Z3E1.jpg?width=480
description: ゲームUIデザイン×AI駆動開発 by Yukiko
published: October 15, 26
canonical: https://image.docswell.com/s/yukiko_it/54N74N-2026-10-15-214043
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/K74WX4Z3E1.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LJ1YN4RZEG.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJWG4X1672.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4EZL26PR73.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Y76WV2M17V.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/G75MD2ZL74.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/9J2984R3ER.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/DEY46MD8JM.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VJNYZW6978.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/YE9PZXL3J3.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GE8D12XLED.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LELMQ28Q7R.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JMY18XKJW.jpg)

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