ゲームデザイン概論 「第15章」
>100 Views
April 21, 25
スライド概要
Game Jammer working at Yasuda Women's University since April 2025. IGDA Japan board member, HEVGA individual member. 2025年より安田女子大学に移りました．
関連スライド
各ページのテキスト
Introduction to Game Design 第15章 Interface インタフェース 講師: 山根信二 Creative Commons Attribution 4.0 International license Creative Commons Attribution 4.0 International license .
今回の内容 • Ch.15: Players play games through an interface. プレイヤーは「インタフェース」を通じてゲームをプ レイする • 本章と次の章は情報デザイン，実験心理学 • 15章はUI，16章はUX 1
Ch.15 Interface インタフェース • この章では，ゲームデザインで知っておくべきイ ンタフェースの知識を学びます • ゲーム以外にも，コンピュータを用いてユーザに 働きかけるシステムのデザイン全般に使えます • 著者も訳者もこの分野の専門家ではないので，正 誤表を参照する必要がある 2
インタフェースは何のために存在するのか • ゲームとプレイヤーとのやりとりがあれば、その境界には必 ずインタフェースが存在する．でも何のために？ • [復習: ] ゲームの目的はプレイヤーの心の中にエクスペリエ ンス（体験）をつくりだすこと，そして • ゲームのインタフェースの目的は「体験を操作している」と いうプレイヤーの感覚をつくりだすこと (make players feel in control of their experience) • 「かっこいいね」「クールだね」という見栄えはゲームのイ ンタフェースの目的ではない 3
レンズ#59: コントロールのレンズ を て にいれた! • このレンズは単なるインタフェースのテストにとどまらない • 没頭するには意味のあるコントロールが不可欠 • あなたのゲームのインタフェースは操作している，操る感覚 をつくりだしているか？マスターするのは簡単か？難しい か？ • ユーザは力強さを感じられるか？(feeling powerful) • コントロールしている感覚はあるか？(feeling in control) 4
インタフェースって何のこと？ • ゲームコントローラー？ • ディスプレイ画面？ • ゲーム内キャラクタの操作システム？ • ゲームがプレイヤーに情報を伝える経路？ • どれもインタフェースと呼ばれている • まず情報科学の観点から整理します; 5
情報の流れを分解する(1) • ユーザとゲーム世界の間にあるものはすべて インタフェース (図15-3) • ゲーム世界の要素と物理的な入出力が直接つ ながっているシンプルな例 (図15-4 物理的入 出力) 6
情報の流れを分解する(2) • 『パックマン』は物理インタフェース（十字レバー）と ゲーム世界の平面移動が一致している • だが，『パックマン』のスコア表示はゲーム世界にないも のが見えている • さらに，3Dゲームなどではそもそもインタフェースと ゲーム世界は直接対応していない • つまり、プレイヤーは物理インタフェースではないもう一 つのインタフェースを通して操作している • これをバーチャルなインタフェースと呼ぶ (図15-5) 7
情報の流れを分解する(3) • あらゆるゲームインタフェースは「マッピング」 をデザインしている (p.342) • ただデータを流すでなく，変化させている • バーチャルなインタフェースとゲーム世界とのデー タのマッピングを行っている • （脚注の「ダイエジェティックなインタフェース」 は著者の誤解で，正しいゲームサウンド用語は 「ノンダイエジェティック」です．） • バーチャルインタフェース (図15-5) を6つの矢印 に分解する→ 8
バーチャルなインタフェースに含まれる6つ の流れ • 1. Physical Input World: 物理的入力からゲーム世界へ • 2. World Physical Output: ゲーム世界から物理的出力へ • 3. Physical Input Virtual Interface: 物理的入力からバーチャルインタフェースへ 「クリックしたら何が起こ る？」 • 4. Virtual Interface World: バーチャルインタフェースからゲーム世界へ 「ゲーム世界を操作する」 • 5. World Virtual Interface: ゲーム世界からバーチャルインタフェースへ • 6. Virtual Interface Physical Output: 9
レンズ#60: 物理インターフェースのレンズ を て にいれた! • 従来のインタフェースをそのままコピーするのは悪しき罠 • そのインタフェースでいいのかを自分自身に問い続ける • 「おもちゃのレンズ」で考えてみる • ダンスダンスレボリューション（マット），ビートマニ ア・ギターヒーロー，Wiimotoなど，新しいインタフェー スで古いゲームメカニクスやゲームプレイも生まれかわる 10
レンズ#61: バーチャルインタフェースのレ ンズを て にいれた! • バーチャルインタフェースがプレイヤー体験を強化する かを自問する • ゲーム世界を見るだけでは伝わらない，プレイヤーが受 け取るべき情報は何か？ • 直接やりとりをするよりもバーチャルインタフェース （たとえばポップアップメニューなど）を使う方が簡単 なゲーム世界の要素はあるか？ • どのバーチャルインタフェースが物理的インタフェース と組み合わせられるか？たとえばポップアップメニュー はゲームパッドコントローラーにはマッチしない 11
レンズ#62: 透過性のレンズ を て にいれた! • 「問題はあなたのインタフェースが素晴らしいか否か ではない．それを削れるか否かだ」 エドワード・タフティ教授（参考文献） • インタフェースはプレイヤーにとってシンプルで，考 えずに操作できるか？ • インタフェースは直観的か？どの程度？ • プレイヤーは没入感を得られるか？ • （略） 12
インタラクションのループ • プレイヤーとゲームとの間には「情報のループ」が生まれる • ループの中で、プレイヤーに戻ってくる情報のことを「フィー ドバック」と呼ぶ • フィードバックがあることでプレイヤーはゲームでの出来事を 理解し楽しむことができる • よいフィードバックは製品デザインにも見られる: • 例: バスケットボールのフープについているネット． ゲームプレイには何の影響もないが、視覚聴覚でプレイを楽しませる • 例: Sniffer （日本だとクイックルワイパー） 便利なだけでなく、清掃作業を楽しくするフィードバックがある 13
レンズ#63: フィードバックのレンズ を て にいれた! • プレイヤーにはさまざまなフィードバックがある: 判定，報酬，指示，励まし，挑戦． • フィードバックループが狙い通りの体験をつくっているのか を自問する: • この瞬間にプレイヤーが知る必要があること，知りたいこと は何か？ • この瞬間でのプレイヤーのゴールは何か？ゴールに向かわせ るためにどんなフィードバックが役立つか？ • （略） 14
レンズ#64: ジューシーさのレンズ を てにいれた! • 掃除は退屈 クイックルワイパーを使うと楽しい! これを「ジューシーなシステム」と命名 • 目的は二の次になってインタラクション自体が楽しくなる， ゲームデザインで見落とされがちな要素 • このインタフェースはプレイヤーにつながったフィードバッ クを返しているか？ • プレイヤーのアクションによって起こる二次アクションはあ るか？ 15
タッチインタフェースから学べること • ここでスマホやタブレットのタッチインタフェースの話題 • 本章では過去のゲームインタフェースを学ぶのではなく，将来実用化さ れるインタフェース・デバイスにも使える「普遍的な原理」を学ぶ． • ここでは，新しいインタフェースが急速に普及した現象として，タッチ インタフェースをとりあげる． • なぜタッチインタフェースはわかりやすかったのか？ • それまでのインタフェースは、物理的な道具を通してコンピュー タとやりとりしていた （キーボード、マウス、ボタン、パンチカード） • 「道具を使わない原始人に退化してるのでは？」 • 「原始的なインタフェースはわかりやすいのか？」 • ゲームデザインでもこの視点は役立つ 16
レンズ#65: 原始のレンズを てにいれ た! • 動作やインタフェースには，動物に本能的にそなわったもの がある • 果物をつかむ，脅威となる敵と戦う，見知らぬ世界で出口を 探す，姫を救う... • 原始的な動作を利用するには，以下の問いを立てる: • ゲームで動物でもプレイできるような原始的な部分はどこ か？それはなぜか？ • このゲームでもっと原始的にできるのはどこか？ 17
情報チャンネル分析 先のインタフェースモデルをもとに，情報の流れる経路（チャ ンネル）を分析する（誤訳に注意！） • Step 1: List and Prioritize Information 情報をすべて書き出し、優先順位をつける • Step 2: List Channels 情報の経路（チャンネル）を書き出す • Step 3: Map Information to Channels どの情報をどの経路に流すのかを決める • Step 4: Review Use of Dimensions 情報の経路に複数の次元を持たせる 18
レンズ#66: 情報チャンネルと次元のレンズ を て にいれた! • ゲーム情報をチャンネルや次元にマッピングするのは， ゲームインタフェースのデザインの核心 • プレイヤーがどこかへ・どこかから旅するにはどのよ うなデータが必要か • 重要なデータは？ • データにどのチャンネルが適しているか？ • チャンネルによってどれくらいの次元が必要か？画面 の数は？文字は？ 19
インタフェースの「モード」とは • ゲーム中にインタフェースの意味を変える「モードの 切り替え」 • 同じゲームコントローラー操作をしているように見えても、 プレイヤーはゲーム内で別の行動をしている時 • 6つの情報の流れは変わらないが、その対応を変えて いる • インタフェースのマッピングはゲーム中に変えること ができる • だが、プレイヤーを混乱させる危険性をともなう 20
モードのテクニック • モードを変更したことに気づかない危険性は，避けること ができる • モードのヒント1：モードの数をできるだけ減らせ Use as Few Modes as Possible • モードのヒント2：モードの重複を避けろ Avoid Overlapping Modes • モードのヒント3：できるだけ各モードの見た目を変えろ Make Different Modes Look as Different as Possible • デジタルゲームで各モードを違って見えるようにする方法: FPS, アーケードゲーム，『ファイナルファンタジー』の例 21
レンズ#67: 情報モードのレンズ を てにいれた! • 複雑なインタフェースには複数のモードが必要 • プレイヤーを混乱させないためには • 一瞬武器が大きくなる，戦闘モードで突然チーム状 態ウィンドウが出てくる... • （略） 22
優れたインタフェースのためのヒント • Interface Tip #1: Steal 盗め • Interface Tip #2: Customize カスタマイズせよ • Interface Tip #3: Design around Your Physical Interface 物理的インタフェースに合わせろ • Interface Tip #4: Theme Your Interface インタフェースにテーマを与えろ • Interface Tip #5: Sound Maps to Touch 感触に音をつけろ • Interface Tip #6: Balance Options and Simplicity with Layers 階層構造で詳細設定とシンプルさのバランスをとれ • Interface Tip #7: Use Metaphors メタファーを使え • Interface Tip #8: If It Looks Different, It Should Act Different 見た目が違うなら挙動も変えるべきだ • Interface Tip #9: Test, Test, Test! テスト、テスト、テスト！ • Interface Tip #10: Break the Rules to Help Your Player プレイヤーを助けるためならルールも破れ 23
参考文献 「インタフェースデザインはそれだけで本が何冊も書ける 分野」，参考文献も大作ぞろい • ノーマン『誰のためのデザイン？ 増補・改訂版 ―認 知科学者のデザイン原論』 • Swink. Game Feel. 邦訳なし https://en.wikipedia.org/wiki/Game_feel • エドワード・タフティ(Edward Tufte). The Visual Display of Quantitative Information. 邦訳なし 24
本章のまとめ • 本章にはUIについて多くのレンズが登場した • 物理インタフェースとバーチャルインタフェース • データのマッピング • 情報チャンネル • インタフェースのモード切り替え • UIデザインは，日用品から画面設計まで，あらゆる「ユー ザー」とあらゆる「もの」との関係に共通する原理にもとづ いている • 本章ではそれらの原理を使ってゲームコントローラーやゲーム画面 を説明しているが，本章のレンズはゲームに限定されないUIデザイ ンの原理（原書第3版ではさらにレンズ#67.5が追加された．） • 「インタフェースデザインはそれだけで本が何冊も書ける分野」な ので著者も訳者も苦戦．正誤表を確認する必要あり 25