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

1. ゲーム情報設計の「霧」との戦い
グリー株式会社 駒場裕哉

2. 駒場裕哉
● グリー株式会社 （デザイナー→プランナー）
● 企画 / UI設計 / 外注管理 …
● 趣味はボードゲームとTシャツ作り／収集

3. 何を作っているか

4. 「武器よさらば」
● ”なぎ払え！本格豪快アクション”
● 東京ゲームショウ2016で詳細発表！
● 今日は開発初期（2015春頃）の話

5. 課題

6. ボリュームが多い

7. ボリュームが多い
● アクション＋人気ジャンルA＋人気ジャンルB
○ 3つのゲームジャンルの複合体
● 例えるなら…鬼ごっこをしながらスゴロクとサッカーをする感じ

8. 画面遷移も多い

9. 画面遷移も多い
● 本来、それ1つでゲームとして成り立つものが3つもある
● それらをブリッジするための横断系・共通系機能もある

10. 「霧」がかかっていた

11. 「霧」がかかっていた
● 1つ1つの要素は知ってるが、合体した様子は想像つかない
● 機能が多すぎて、全体像をつかめない
● 企画書と仕様書はあるが具体的な操作やゲームイメージがわかない

12. どうやって具体的なイメージを共有するか？
どうやって霧を晴らしていくか？

13. (；´Д｀)＜とりあえず画面遷移作ってみるか

14. (；´Д｀)＜とりあえず画面遷移作ってみるか

15. 霧に挑む前に
● いきなり画面遷移から作ろうとすると、まず自分が霧にとらわれる
○ 「あれ…？結局この遷移ってどこから来て、どこへ …？」
● 画面遷移を作る前のインタラクションの整理・構造化が超重要

16. UI制作フローの整備

18. 情報設計部分を抜き出すと……
1. 機能インタラクションの整理・構造化
2. 複数人によるプロトタイピング
3. prottによるモック作成

19. 出来上がるドキュメントの全体像

20. 1. 機能インタラクションの整理・構造化
2. 複数人によるプロトタイピング
3. prottによるモック作成

21. そもそも、インタラクションとは？
● ユーザーの操作。提供する機能と言い換えてもOK。
○ 「〜〜する」と表現できるもの

22. 必要なインタラクションの洗い出し

23. 例えば「街づくりSLG」を作るとしたら……

24. 「街づくりSLG」のインタラクション
洗い出した状態
● 時間経過で税収を得る
● 木を切り倒す
● 発電所設置
● 住居を建設する
● 生産設備を稼働し生産物を得る
● 道路敷設
● 生産施設を建設する
● 電線敷設
● 生産物を売却し通貨を得る
● 整地する

25. 「街づくりSLG」のインタラクション
整理＆構造化
● 投資する
○ 開墾する
■ 木を切り倒す
■ 整地する
○ 建設する
■ 住居を建設する
■ 生産施設を建設する
○ インフラ整備をする
■ 道路敷設
■ 発電所設置
■ 電線敷設
● 資源を獲得する
○ 時間経過で税収を得る
○ 生産設備を稼働し生産物を得る
○ 生産物を売却し通貨を得る

26. Wikiでページを作り階層化していく

27. 上位インタラクションのページを作る
そのインタラクション固有の仕様と
包含するインタラクションについて記述

28. 次に、下位インタラクションのページを作る
さらに包含するインタラクションについて記述

29. リンク・階層化

30. ツリー化していく

31. ツリー化されたインタラクション・機能仕様書が完成
（これは画面遷移では無い事に注意）
これで情報の整理が完了

32. 画面遷移を考えていきます

33. 1. 機能インタラクションの整理・構造化【done】
2. 複数人によるプロトタイピング
3. prottによるモック作成

34. 工程2：複数人によるプロトタイピング
● 参加者：プランナー・テクニカルアーティスト・エンジニア
● インタラクション仕様を見ながら、付箋で遷移のプロトタイピングを行う

35. 複数人だと意見がまとまりにくいのでは？

36. 以下の2つを目的としている
● 「まぁそうなるよね」という確認
● 「なんじゃそりゃ！」の検出

37. 「なんじゃそりゃ！」

38. 「なんじゃそりゃ！」
● プロが3人集まってパッと思いつかない
● 共通見解がない

39. それは、チャレンジングな内容

40. チャレンジング＝UI領域ではリスク
● 「誰も見たこと無い斬新なゲーム」には価値があるが
● 「誰も見たこと無い斬新なUI」には離脱リスクがある

41. ちょっと脱線

42. スマホゲーでの、UIチェックのポイント

43. UIチェックのポイント
● その時1回の体験では問題無くても、繰り返す事で問題となるものがある
● スマホゲーのユーザーさんは何ヶ月もプレイし続ける
● この操作を何度も繰り返すとしたらどうか？と考える事が重要

44. よいUIチェックのために
● 普段からゲームをよく遊び、知見を溜めておくと気づきやすい
● ヘビーユーザーのためのUIを作るには自分がヘビーユーザーになるしかない

45. 良い品質のUIを作るために ゲームを楽しみましょう！

46. といった事を考えつつ
プロトタイピングを完了させる

47. ＼ようやく出番か！／

48. 1. 機能インタラクションの整理・構造化【done】
2. 複数人によるプロトタイピング【done】
3. prottによるモック作成

49. どこのモックを作るか
ここじゃない

50. 下位のインタラクションから
ここじゃない
ここ！

51. なぜ小さい所から作るのか
● 上位のインタラクションを作ってしまうと、モックが大きくなりすぎる
● おおまかな遷移は後でWikiで見れるようにする
● 小さいモックを沢山つくってWikiで管理すればよい

52. 実際のモック（ぼかしてあります）

54. 大体この程度の規模

55. 大きいのでこれくらい

56. ちょっと脱線 2

57. 悩み

58. ゲームにはアニメーションによる演出がある

59. アニメによる演出を入れたい
● リザルト画面や、何かの進捗場面など
● 紙芝居でもある程度再現可能だが、手触り感が違ってくる
○ 「操作できない時間」というのが結構重要

60. どうするか

61. gifアニメを作ってしまおう
● prottはgifアニメに対応してるのでこういう時便利

62. photoshopはスマートオブジェクトにアニメを梱包できる

64. *ファイルサイズには注意
prottは１スクリーン20MBまで

65. 1. 機能インタラクションの整理・構造化【done】
2. 複数人によるプロトタイピング【done】
3. prottによるモック作成 ←ここの話でした
話を戻します

66. モックが出来上がっていく

67. モックをWikiにまとめる

68. 工程1でこのような機能仕様書を作りました

69. 機能仕様書と同じ要領で画面遷移群のページをツリー化
下位ページにprottを埋め込んでいく

70. モックを埋め込んだWikiページ

71. 実際の画面遷移群

72. 1. 機能インタラクションの整理・構造化【done】
2. 複数人によるプロトタイピング【done】
3. prottによるモック作成 【done】
以上で全工程が終了

73. 出来上がったドキュメント
● ツリー化された機能仕様書
● 画面遷移群のツリー（with prott）

74. ● 1つ1つの要素の操作やイメージがモックによって具体化されている
● それらが組み合わさった状態を俯瞰できる
● どこから来てどこへ行くのがが分かる

75. ＝ 霧が晴れた状態！

76. まとめ

77. ボリュームの多い企画の場合
モックが超強力な武器なのは間違いないが、闇雲に作り出さない

78. 画面遷移に取り掛かる前に
インタラクションの整理・構造化が重要

79. 小さいモックを作って
Wikiなどでまとめると俯瞰しやすい

80. ありがとうございました。