Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ゲーム情報設計における「霧」との戦い

2,810 views

Published on

コンテンツボリュームが多いゲーム開発においての情報設計とモックの使いどころについて解説。
モック作成前のインタラクションの整理・構造化と俯瞰できるドキュメント化が重要でした。

Published in: Design
  • Be the first to comment

ゲーム情報設計における「霧」との戦い

  1. 1. ゲーム情報設計の「霧」との戦い グリー株式会社 駒場裕哉
  2. 2. 駒場裕哉 ● グリー株式会社 (デザイナー→プランナー) ● 企画 / UI設計 / 外注管理 … ● 趣味はボードゲームとTシャツ作り/収集
  3. 3. 何を作っているか
  4. 4. 「武器よさらば」 ● ”なぎ払え!本格豪快アクション” ● 東京ゲームショウ2016で詳細発表! ● 今日は開発初期(2015春頃)の話
  5. 5. 課題
  6. 6. ボリュームが多い
  7. 7. ボリュームが多い ● アクション+人気ジャンルA+人気ジャンルB ○ 3つのゲームジャンルの複合体 ● 例えるなら…鬼ごっこをしながらスゴロクとサッカーをする感じ
  8. 8. 画面遷移も多い
  9. 9. 画面遷移も多い ● 本来、それ1つでゲームとして成り立つものが3つもある ● それらをブリッジするための横断系・共通系機能もある
  10. 10. 「霧」がかかっていた
  11. 11. 「霧」がかかっていた ● 1つ1つの要素は知ってるが、合体した様子は想像つかない ● 機能が多すぎて、全体像をつかめない ● 企画書と仕様書はあるが具体的な操作やゲームイメージがわかない
  12. 12. どうやって具体的なイメージを共有するか? どうやって霧を晴らしていくか?
  13. 13. (;´Д`)<とりあえず画面遷移作ってみるか
  14. 14. (;´Д`)<とりあえず画面遷移作ってみるか
  15. 15. 霧に挑む前に ● いきなり画面遷移から作ろうとすると、まず自分が霧にとらわれる ○ 「あれ…?結局この遷移ってどこから来て、どこへ …?」 ● 画面遷移を作る前のインタラクションの整理・構造化が超重要
  16. 16. UI制作フローの整備
  17. 17. 情報設計部分を抜き出すと…… 1. 機能インタラクションの整理・構造化 2. 複数人によるプロトタイピング 3. prottによるモック作成
  18. 18. 出来上がるドキュメントの全体像
  19. 19. 1. 機能インタラクションの整理・構造化 2. 複数人によるプロトタイピング 3. prottによるモック作成
  20. 20. そもそも、インタラクションとは? ● ユーザーの操作。提供する機能と言い換えてもOK。 ○ 「〜〜する」と表現できるもの
  21. 21. 必要なインタラクションの洗い出し
  22. 22. 例えば「街づくりSLG」を作るとしたら……
  23. 23. 「街づくりSLG」のインタラクション 洗い出した状態 ● 時間経過で税収を得る ● 木を切り倒す ● 発電所設置 ● 住居を建設する ● 生産設備を稼働し生産物を得る ● 道路敷設 ● 生産施設を建設する ● 電線敷設 ● 生産物を売却し通貨を得る ● 整地する
  24. 24. 「街づくりSLG」のインタラクション 整理&構造化 ● 投資する ○ 開墾する ■ 木を切り倒す ■ 整地する ○ 建設する ■ 住居を建設する ■ 生産施設を建設する ○ インフラ整備をする ■ 道路敷設 ■ 発電所設置 ■ 電線敷設 ● 資源を獲得する ○ 時間経過で税収を得る ○ 生産設備を稼働し生産物を得る ○ 生産物を売却し通貨を得る
  25. 25. Wikiでページを作り階層化していく
  26. 26. 上位インタラクションのページを作る そのインタラクション固有の仕様と 包含するインタラクションについて記述
  27. 27. 次に、下位インタラクションのページを作る さらに包含するインタラクションについて記述
  28. 28. リンク・階層化
  29. 29. ツリー化していく
  30. 30. ツリー化されたインタラクション・機能仕様書が完成 (これは画面遷移では無い事に注意) これで情報の整理が完了
  31. 31. 画面遷移を考えていきます
  32. 32. 1. 機能インタラクションの整理・構造化【done】 2. 複数人によるプロトタイピング 3. prottによるモック作成
  33. 33. 工程2:複数人によるプロトタイピング ● 参加者:プランナー・テクニカルアーティスト・エンジニア ● インタラクション仕様を見ながら、付箋で遷移のプロトタイピングを行う
  34. 34. 複数人だと意見がまとまりにくいのでは?
  35. 35. 以下の2つを目的としている ● 「まぁそうなるよね」という確認 ● 「なんじゃそりゃ!」の検出
  36. 36. 「なんじゃそりゃ!」
  37. 37. 「なんじゃそりゃ!」 ● プロが3人集まってパッと思いつかない ● 共通見解がない
  38. 38. それは、チャレンジングな内容
  39. 39. チャレンジング=UI領域ではリスク ● 「誰も見たこと無い斬新なゲーム」には価値があるが ● 「誰も見たこと無い斬新なUI」には離脱リスクがある
  40. 40. ちょっと脱線
  41. 41. スマホゲーでの、UIチェックのポイント
  42. 42. UIチェックのポイント ● その時1回の体験では問題無くても、繰り返す事で問題となるものがある ● スマホゲーのユーザーさんは何ヶ月もプレイし続ける ● この操作を何度も繰り返すとしたらどうか?と考える事が重要
  43. 43. よいUIチェックのために ● 普段からゲームをよく遊び、知見を溜めておくと気づきやすい ● ヘビーユーザーのためのUIを作るには自分がヘビーユーザーになるしかない
  44. 44. 良い品質のUIを作るために ゲームを楽しみましょう!
  45. 45. といった事を考えつつ プロトタイピングを完了させる
  46. 46. \ようやく出番か!/
  47. 47. 1. 機能インタラクションの整理・構造化【done】 2. 複数人によるプロトタイピング【done】 3. prottによるモック作成
  48. 48. どこのモックを作るか ここじゃない
  49. 49. 下位のインタラクションから ここじゃない ここ!
  50. 50. なぜ小さい所から作るのか ● 上位のインタラクションを作ってしまうと、モックが大きくなりすぎる ● おおまかな遷移は後でWikiで見れるようにする ● 小さいモックを沢山つくってWikiで管理すればよい
  51. 51. 実際のモック(ぼかしてあります)
  52. 52. 大体この程度の規模
  53. 53. 大きいのでこれくらい
  54. 54. ちょっと脱線 2
  55. 55. 悩み
  56. 56. ゲームにはアニメーションによる演出がある
  57. 57. アニメによる演出を入れたい ● リザルト画面や、何かの進捗場面など ● 紙芝居でもある程度再現可能だが、手触り感が違ってくる ○ 「操作できない時間」というのが結構重要
  58. 58. どうするか
  59. 59. gifアニメを作ってしまおう ● prottはgifアニメに対応してるのでこういう時便利
  60. 60. photoshopはスマートオブジェクトにアニメを梱包できる
  61. 61. *ファイルサイズには注意 prottは1スクリーン20MBまで
  62. 62. 1. 機能インタラクションの整理・構造化【done】 2. 複数人によるプロトタイピング【done】 3. prottによるモック作成 ←ここの話でした 話を戻します
  63. 63. モックが出来上がっていく
  64. 64. モックをWikiにまとめる
  65. 65. 工程1でこのような機能仕様書を作りました
  66. 66. 機能仕様書と同じ要領で画面遷移群のページをツリー化 下位ページにprottを埋め込んでいく
  67. 67. モックを埋め込んだWikiページ
  68. 68. 実際の画面遷移群
  69. 69. 1. 機能インタラクションの整理・構造化【done】 2. 複数人によるプロトタイピング【done】 3. prottによるモック作成 【done】 以上で全工程が終了
  70. 70. 出来上がったドキュメント ● ツリー化された機能仕様書 ● 画面遷移群のツリー(with prott)
  71. 71. ● 1つ1つの要素の操作やイメージがモックによって具体化されている ● それらが組み合わさった状態を俯瞰できる ● どこから来てどこへ行くのがが分かる
  72. 72. = 霧が晴れた状態!
  73. 73. まとめ
  74. 74. ボリュームの多い企画の場合 モックが超強力な武器なのは間違いないが、闇雲に作り出さない
  75. 75. 画面遷移に取り掛かる前に インタラクションの整理・構造化が重要
  76. 76. 小さいモックを作って Wikiなどでまとめると俯瞰しやすい
  77. 77. ありがとうございました。

×