mcpField
D
design-ui-ux-game

design-ui-ux-game

github.com/fcsouzaデザイン・UI2497 回インストール1 週間前に更新
リポジトリ

design-ui-ux-game について

design-ui-ux-gameは、ゲームデザイナー向けのジャンル横断型UI/UX設計スキルです。HUD、メニュー、フィードバック、オンボーディング、アクセシビリティを扱い、即時反応や段階的な情報提示、操作を通じた学習を重視します。

主な機能

  1. 01HUDとメニューシステムの設計
  2. 02即時の視覚・音声フィードバックの計画
  3. 03インタラクティブなオンボーディング
  4. 04アクセシビリティとレスポンシブ設計の適用
  5. 05ツールチップや進捗バーなどのパターン活用

活用シーン

  1. 01ゲームHUDや設定メニューの設計
  2. 02新規プレイヤー向け導入の計画
  3. 03ゲーム状態の見せ方の改善
  4. 04画面のアクセシビリティと一貫性の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/fcsouza/agent-skills --skill design-ui-ux-game

インストール後、Claude Code で/design-ui-ux-gameを入力して読み込まれたか確認します。

同梱ファイルboilerplate/hud-components.tstemplates/accessibility-checklist.md

詳細

UI/UX ゲームデザイン

目的

あらゆるゲームジャンルに対応する、HUD のパターン、メニューシステム、フィードバックループ、オンボーディング、アクセシビリティについて説明します。ジャンルを問いません。放置系クリッカー、MMO、パズルゲームのいずれを開発する場合にも、同じ原則が当てはまります。

使用するタイミング

トリガー：ゲーム UI、ゲーム UX、HUD、メニューシステム、ゲームのフィードバック、オンボーディング、チュートリアル、アクセシビリティ、ゲームインターフェース、通知システム、設定メニュー、インベントリ UI、ツールチップ、プログレスバー、ゲームメニュー

前提条件

  • game-design-fundamentals — フィードバックループとプレイヤーのモチベーションに関するコンテキスト

基本原則

Fumito Ueda：「ミニマリズムは感情への訴求力を高めます。体験に役立たないものはすべて取り除きましょう。」 Jenova Chen：「インターフェースは意識されない存在であるべきです。プレイヤーは読むのではなく、感じるべきです。」 Shigeru Miyamoto：「優れた UI は、説明ではなく操作を通して教えます。」

  1. 少ないほど豊か — プレイヤーがその時点で必要とするものだけを表示し、複雑なシステムには段階的開示を取り入れます（Ueda）
  2. フィードバックは即時に — プレイヤーのあらゆる操作に、視覚と音声で即座に反応します（Chen）
  3. 実際に操作しながら学ぶ — チュートリアルはテキストの壁ではなく、インタラクティブなものにします。最高のチュートリアルは、チュートリアルがないことです（Miyamoto）
  4. 一貫性が直感を育む — どこでも同じパターンを使います。同じボタンは同じ操作、同じ色は同じ意味を表します
  5. アクセシビリティは必須 — 色覚特性に応じたモード、拡大可能なテキスト、再割り当て可能な操作、スクリーンリーダーへの対応を用意します
  6. モバイルファーストでレスポンシブに — まず最小の画面向けに設計し、そこから拡張します。タッチ領域は最小でも 44px にします
  7. 状態を常に表示する — プレイヤーに「何が起きているのか」と思わせてはいけません。体力、進行状況、通貨、ステータスを表示します

主な UI パターン

パターン使用例実装
HUD オーバーレイ常に表示するゲーム状態固定位置に配置し、占有領域を最小限にする
ラジアルメニュー素早いアクション選択長押し／右クリックで起動
タブナビゲーション複数システムの管理バッジインジケーター付きのタブ
モーダルダイアログ確認や重要な情報ゲームを一時停止し、操作を求める
トースト通知重要度の低い更新自動で閉じ、複数を積み重ねて表示
ツールチップ状況に応じた詳細情報ホバー／長押しで表示し、適切な位置に配置
プログレスバー進捗の表示マイルストーン付きの線形または円形表示
インベントリグリッドアイテム管理ドラッグ＆ドロップ、並べ替え、絞り込み、検索

オンボーディングの流れ

1. First interaction → teach core mechanic (no text, just do it)
2. First reward → show feedback system (number go up, sound, visual)
3. First choice → teach decision-making (two options, clear difference)
4. First failure → teach recovery (low stakes, quick retry)
5. First system unlock → teach progressive disclosure (new tab appears)

関連項目

  • game-design-fundamentals — フィードバックループと報酬スケジュール
  • level-design — チュートリアルレベルへの統合
  • elevenlabs-sound-music — 音声フィードバックの統合

落とし穴とアンチパターン

  • 「UI のごちゃ混ぜ」 — 一度に画面に表示される要素が多すぎて、プレイヤーが集中できない
  • 「テキストチュートリアル」 — プレイヤーが何かを始める前に、説明が何ページも続く
  • 「情報が隠れている」 — 重要なゲーム状態が表示されず、プレイヤーが戸惑う
  • 「操作の不一致」 — 同じボタンが画面によって異なる操作をする
  • 「フィードバックがない」 — プレイヤーがクリックしても、200ms 以上、視覚的な反応がない
  • 「アクセシビリティを後回しにする」 — リリース後に色覚特性に応じたモードを追加する。本来は設計段階から組み込むべきです

デザイナーの哲学

Fumito Ueda（ICO、Shadow of the Colossus）：最高の UI は意識されない存在です。ICO には HUD がありません。プレイヤーが Yorda の手を握ること、それ自体がインターフェースです。UI 要素を追加するたびに、それを完全に取り除く選択肢と比べても存在する価値があるかを判断してください。

Jenova Chen（Journey、Flower）：UI は情報過多を招くのではなく、感情的なつながりを生み出すべきです。Journey では、「マルチプレイヤー UI」全体が、もう一人のプレイヤーの存在そのものです。体力バーも名前もチャットもなく、最小限のインターフェースを通じた体験の共有だけがあります。

Shigeru Miyamoto（Mario、Zelda）：最高のチュートリアルは、プレイヤーが気づかないものです。Super Mario Bros のワールド 1-1 は、テキストを一行も使わずに、走る、ジャンプする、敵、パワーアップ、隠し要素を教えます。

参考資料

  • 「The Invisible Interface」— Fumito Ueda、GDC 2006
  • 「Designing Journey」— Jenova Chen、GDC 2013
  • 「Game Feel」— Steve Swink
  • 「Don't Make Me Think」— Steve Krug（ゲームの UI にも当てはまります）
  • ゲーム向けに応用した WCAG 2.1 アクセシビリティガイドライン

コメント

Markdown 対応