2019年3月20日水曜開催「TECH×GAME COLLEGE#16」(主催 株式会社テクロス) に私が登壇した際に使用した講義資料です。 -- 以下イベント告知文より引用 -- https://techxgamecollege.connpass.com/event/121341/ 【TECH x GAME COLLEGE #16】 ゲームに学ぶUXデザイン ーこんなに違うWebとゲームのUI/UXデザインー 「UXデザイン」とは、まずユーザーに提供したい体験を定め、その手段として製品やサービスを設計するものづくりの方法論です。Webサービスやスマートフォンアプリにおいては、ささいな不快感が顧客離脱の原因となり得ることから、不快感解消を目的としてのUXデザインが盛んになりました。 しかしながら、ゲーム制作の分野ではWeb制作の分野とは違った形でUXデザインが発達しています。ゲームは楽しさという体験そのものが商品価値であり、繰り返し何度も利用者を楽しませることが大前提のシステムだからです。 今回の講演では、まずUXデザインとはなにかを改めて説明した上で、ゲームにおけるUXデザインの特異性を解説していきます。 Web業界向けのUXデザインの教科書を読んで釈然としなかったゲーム開発者の皆様の参加をお待ちしています。 -- 引用ここまで --

1. 主催：
講師：森山 明宏(UX Yokohama代表, UXデザイナー)
ゲームに学ぶUXデザイン
こんなに違うWebとゲームのUI/UXデザイン
【TECH x GAME COLLEGE 16】
森山 明宏 (ユーリカ株式会社 代表)
B1

2. 本日の内容
O2
1. そもそもUI/UXとは？
2. ゲームのUI/UXデザインの特異性
•楽しさをデザインする
•苦痛をデザインする
•状況(ゲーム内ルール)をデザインする
•状況(キャラクター)をデザインする

3. 自己紹介
O3
森山明宏（もりやま あきひろ）
ƀ akihiro.moriyama@ureka.co.jp
https://twitter.com/hiro_ux
•実はゲームをデザインしたことはない
ユーリカ株式会社代表 IT勉強会サークル｢UX Yokohama｣代表 「ゲームUI/UX勉強会」開催

4. O4
そもそもUI/UXとは？

5. O5
UX(ユーザエクスペリエンス) とは
(国際規格 ISO 9241-210:2010による定義)
注1： UXは、使用前・使用中・使用後に起こるユーザーの感情・信念・嗜好・知
覚・生理学的心理学的な反応・行動・達成感のすべてを含む
注2： UXは、ブランドイメージ、見ため、機能、システム性能、インタラクション
の動作やインタラクティブシステムの支援機能、事前の経験から生じるユー
ザーの内的および身体的状態、態度、スキルとパーソナリティ、利用状況の
結果である
注3： ユーザーの個人的目標という観点から考えた時には、ユーザビリティは典型
的にUXに付随する知覚的感情的な側面を含む。ユーザビリティの評価基準を
用いてUXの諸側面を評価することができる
製品・システム・またはサービスを利用した際、
および/またはその利用を予想した際に生じる、
人々の知覚と反応。

6. UX(ユーザエクスペリエンス) の範囲
O6
•製品やサービスの使用によって
得られる価値を予想する
•1手順ごとに知覚と反応のサイ
クルを無意識に繰り返す
（反応 ＝ 感情→思考→行動）
使用中
¥
使用前
!
使用後
いいね !
•体験全体を内省し、良い経験/
悪い経験として記憶に残す
•経験(記憶)が次の行動を誘発する
繰り返し使用後 •経験(記憶)が累積する

7. UXデザインの目的
O7
•適切な期待を提供する
(期待外れにさせない)
•使いやすさを提供する
•心地よさを提供する
•行動をコントロールする
(課金させる)
•ブランド価値を高める
使用中
¥
使用前
!
使用後
いいね !
繰り返し使用後

8. 流通販売
サポート
製品サービスの開発工程と
UXデザインの工程との関係
O8
使用中
製品 製品+付帯サービス
全体設計部位 企業
使用前
宣伝広告
商品企画
事業企画
CXデザイン（企業ブランディング）
設計
行動経済学/ナッジ
UIデザインパターン
マイクロインタラクション
モーションデザイン
ユーザー工学（UXの品質管理）
ペルソナ・シナリオ・カスタマージャーニーマップ
その他各種手法
設計
使用後
累積

9. UXデザイナーの仕事①
ペルソナを描いて顧客理解を深める
O9
対象顧客の決定
インタビュー
観察
特徴分析
アンケートで検証
ペルソナの作成
イラスト協力：｢似顔絵メーカー｣(http://www.nigaoemaker.jp/generator/)

10. UXデザイナーの仕事②
カスタマジャーニーマップで全体を俯瞰する
O10
行動
心理
状況
タッチ
ポイント

11. UXデザイナーの仕事③
理想シナリオから要求/要件を定義する
O11
理想
理想
理想行動
心理
状況
タッチ
ポイント
要求/要件

12. UXデザイナーの仕事④
UXに優れた定番のUIデザインに詳しい
O12
UX評価観察
インタビュー
ペルソナ
カスタマジャーニーマップ
理想シナリオ
要求定義
要件定義
試作

13. UXデザイナーの仕事⑤
ユーザーの協力を得て良否を評価する
O13
理想シナリオ
要求定義
要件定義
試作 UX評価観察
インタビュー
ペルソナ
カスタマジャーニーマップ

14. UI/UXとは
O14
理想シナリオ
要求定義
要件定義
UX評価試作
UI/UXとはこの辺の作業のこと
観察
インタビュー
ペルソナ
カスタマジャーニーマップ

15. 一般的なWebの製作工程
O15
コミュニケーション
企画
プランニング
サイト設計
サイト構築
品質評価
•オリエンテーション(発注要件説明)
•ヒアリング(依頼主への聞き取り)
•開発目的の明確化
•依頼主との合意
•具体的なサイトイメージの明確化
•構築方法の選択
•技術要件の明確化
•HTML,CSSのコーディング
•要求仕様を満たしていることの確認
•出荷可否判定

16. 一般的なWebの製作工程と
UXデザインの工程との対応
O16
•ユーザー調査(観察、インタビュー等)
•ペルソナ/シナリオ法による要求分析
•総括的UX評価(品質業務)
•UXに優れた定番のUIデザインの活用
•形成的UX評価(設計の一環)
反
復
プ
ロ
セ
ス
コミュニケーション
企画
プランニング
サイト設計
サイト構築
品質評価

17. O17
ゲームのUXデザインの特異性

18. ゲームのUI/UXデザインの特異性
O18
•楽しさをデザインする
•苦痛をデザインする
•状況(ゲーム内ルール)をデザインする
•状況(キャラクター)をデザインする

19. O19
楽しさをデザインする
ゲームのUI/UXデザインの特異性
動画アプリは動画が楽しい
(アプリは手段)
ゲームアプリはゲームが楽しい
(ゲームは目的)
画像引用:ゲーム｢ゼビウス｣(BANDAINAMCOEntertainmentInc.)画像引用:iOSアプリ｢niconico｣(DWANGOCo.,Ltd)

20. 楽しさをデザインする
O20ゲームのUI/UXデザインの特異性
遊びの４分類[1]
ロジェ・カイヨワ
•競争(アゴン)
•偶然(アレア)
ゲームの楽しさ
の8分類[2]
ロビン・ハニッケ他
•新規性
•非日常性
•物語性
•挑戦
•見やすさ
•わかりやすさ
•使いやすさ
グリー株式会社
による7分類[3]
•模倣(ミミクリー)
•目眩(イリンクス)
•仲間意識
•探検
•芸術的表現
•ひまつぶし
•演出・音・アニメ
•アート・世界観
•統一性
•仕様[1] ロジェ・カイヨワ(著), 清水 幾太郎 (訳), 霧生 和夫 (訳) : 遊びと人間 ; 岩波書店 (1970)
[2] Robin Hunicke, Marc LeBlanc, Robert Zubek : MDA - A Formal Approach to Game Design and Game Research ; https://www.aaai.org/Papers/ Workshops/2004/WS-04-04/WS04-04-001.pdf (2004)
[3] 長﨑二郎 : 【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには ; https://www.slideshare.net/greeart/cedec2016ui-discussion-ui (2016)

21. 楽しさをデザインする
O21ゲームのUI/UXデザインの特異性
遊びの４分類[1]
ロジェ・カイヨワ
•競争(アゴン)
•偶然(アレア)
ゲームの楽しさ
の8分類[2]
ロビン・ハニッケ他
•新規性
•非日常性
•物語性
•挑戦
•見やすさ
•わかりやすさ
•使いやすさ
グリー株式会社
による7分類[3]
•模倣(ミミクリー)
•目眩(イリンクス)
•仲間意識
•探検
•芸術的表現
•ひまつぶし
•演出・音・アニメ
•アート・世界観
•統一性
•仕様[1] ロジェ・カイヨワ(著), 清水 幾太郎 (訳), 霧生 和夫 (訳) : 遊びと人間 ; 岩波書店 (1970)
[2] Robin Hunicke, Marc LeBlanc, Robert Zubek : MDA - A Formal Approach to Game Design and Game Research ; https://www.aaai.org/Papers/ Workshops/2004/WS-04-04/WS04-04-001.pdf (2004)
[3] 長﨑二郎 : 【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには ; https://www.slideshare.net/greeart/cedec2016ui-discussion-ui (2016)
ゲームの雰囲気は
楽しさに影響する
ゲームではないが
楽しい娯楽もある
使いやすさは
楽しさに影響する

22. 楽しさをデザインする
O22ゲームのUI/UXデザインの特異性
わかりやすさ優先のシンプルなUI 雰囲気演出のためのUI
画像引用:iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)画像引用:iOSアプリ｢Twitter｣(Twitter, Inc.)

23. 楽しさをデザインする
O23ゲームのUI/UXデザインの特異性
実用的な意味のあるモーション 雰囲気演出のためのモーション
画像引用:iOSアプリ｢Twitter｣(Twitter, Inc.) 画像引用:iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)

24. 楽しさをデザインする
O24ゲームのUI/UXデザインの特異性
ゲームの外でも雰囲気を演出する
(ブランドアイデンティティを確立する)
画像引用:iOSアプリ｢どうぶつの森ポケットキャンプ｣(任天堂)画像引用:｢艦これ｣開発/運営｣公式twitterアカウント

25. O25
苦痛をデザインする
ゲームのUI/UXデザインの特異性
挑戦する楽しさのために
敵キャラや障害物を提供する
使いづらさ要因は排除が基本
｢Wenger16999SwissArmyKnifeGiant商品紹介ページ｣
(Amazon.com,Inc.)(https://www.amazon.com/) 画像引用:iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)

26. 苦痛をデザインする
O26ゲームのUI/UXデザインの特異性
課金させるためにわずかな苦痛を与える
画像引用:｢GoogleDrive｣(Google LLC) 画像引用:iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)

27. 苦痛をデザインする
O27ゲームのUI/UXデザインの特異性
ゲーム内におけるカスタマージャーニーを把握し、
課金してでも解決したい気持ちが最大になるタイミングで課金を促す
画像引用:iOSアプリ｢Pairs｣(eureka, Inc.) 画像引用:iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)

28. 難易度調整
サブゲーム
- 時間の消費
+ 資源A入手
強化
- 資源B消費
◆ 勝利への期待
ログイン
コレクション
◆ 楽しさ体験
メインゲーム
- 資源A消費
勝利
◆ 楽しさ体験
+ 資源B入手
敗北
ガチャ
- 資源B消費
幸運
◆ 楽しさ体験
+ アイテム入手
不運
時間節約のた
め課金
勝利のために
課金
コレクション
に課金
他人のコレク
ションを見せ
て羨ましがら
せる
プレイヤーに
とって有限な
現実の時間を
浪費させる
ログイン頻度
の少ないユー
ザーに重点的
にリマインド
メッセージ
O28ゲーム内カスタマージャーニーの例
(画面フロー図や作業フロー図にプレイヤー心理と施策を追記)

29. 行動
心理
状況
タッチ
ポイント
O29
状況(ゲーム内ルール)をデザインする
ゲームのUI/UXデザインの特異性
現実の状況は変更できないが
ゲーム内の状況は設計できる

30. 状況(ゲーム内ルール)をデザインする
O30ゲームのUI/UXデザインの特異性
画像引用:ゲーム｢HALO3｣(MicrosoftCorporation)画像引用:ゲーム｢CALLOFDUTYWW2｣(ActivisionPublishing,Inc.)
弾に当たると死ぬ緊張感 バリアで無敵になれる爽快感

31. 状況(ゲーム内ルール)をデザインする
O31ゲームのUI/UXデザインの特異性
画像引用:ゲーム｢ときめきメモリアル2｣(コナミ)画像引用:ゲーム｢ときめきメモリアルforeverwithyou｣(コナミ)
理由なく嫌われる緊張感 理由なくモテる爽快感

32. 状況(ゲーム内ルール)をデザインする
O32ゲームのUI/UXデザインの特異性
ゲームのUIをデザインする際は
ゲームのUXコンセプト(緊張感、爽快感、etc)を遵守する
画像引用:iOSアプリ｢崩壊3rd｣(miHoYo Inc.)

33. O33
状況(キャラクター)をデザインする
画像引用:｢Gigazine｣ https://gigazine.net/news/20180803-harder-to-turn-off-robot/
ゲームのUI/UXデザインの特異性

34. 状況(キャラクター)をデザインする
O34
画像引用：「Gigazine」 https://gigazine.net/news/20180803-harder-to-turn-off-robot/
•｢利用者の周囲にいる人物｣ もまた ｢状況｣ であり
利用者の行動に影響を与える
•ゲームのキャラクターは｢利用者の周囲にいる人物｣
になり得る
•プレイヤーのキャラクターへの共感を利用して、
プレイヤーの行動をコントロールできる
• 無意識に運営側の立場を尊重する
• 無意識に運営側に都合の良い価値観を受け入れる
ゲームのUI/UXデザインの特異性

35. O35
物語の登場人物として意思を示す
(共感をゲーム継続の動機にする)
画像引用:ゲーム｢NieR:Automata｣(SQUARE ENIX)
状況(キャラクター)をデザインする
ゲームのUI/UXデザインの特異性
ポッド042

36. 状況(キャラクター)をデザインする
O36ゲームのUI/UXデザインの特異性
キャラクターの台詞で依頼する
(共感をゲーム開始の動機にする)
画像引用:iOSアプリ｢スーパーマリオラン｣(任天堂)

37. O37
キャラクターの台詞で説明する
(操作説明の読み飛ばしを防ぐ)
画像引用:iOSアプリ｢崩壊3rd｣(miHoYo Inc.)
状況(キャラクター)をデザインする
ゲームのUI/UXデザインの特異性

38. O38
キャラクターの台詞で呼び戻す
(共感をゲーム再開の動機にする)
状況(キャラクター)をデザインする
ゲームのUI/UXデザインの特異性
しずえさん
画像引用:iOSアプリ｢どうぶつの森ポケットキャンプ｣(任天堂)

39. O39
親近感のあるキャラクターに謝罪させることによって
エラー発生時の不快感をなごませる
画像引用:ゲーム｢艦隊これくしょん -艦これ-｣(DMM.comラボ)
状況(キャラクター)をデザインする
ゲームのUI/UXデザインの特異性

40. プレイヤーの共感を得るには？
O40
•人格があると錯誤させる
•言動を理解の範囲内に抑える
•ナラティブ(プレイヤーが自分事として認識できる
押し付け感のないストーリー)を提供する

41. 人格があると錯誤させる
O41
画像引用:aibo公式サイト(ソニー)(https://aibo.sony.jp/)
プレイヤーの共感を得るには？

42. 人格があると錯誤させる
O42
画像引用:Twitter@sakanadeshita氏アカウント(https://twitter.com/sakanadeshita/status/1087505600458633216/photo/1)
プレイヤーの共感を得るには？

43. 言動を理解の範囲内に抑える
O43
画像引用:YouTube日清食品グループ公式チャンネル(https://www.youtube.com/watch?v=DOacGGRLi64)
プレイヤーの共感を得るには？

44. ナラティブを提供する
O44
画像引用:ゲーム｢ときめきメモリアルforeverwithyou｣(コナミ)
プレイヤーの共感を得るには？
(プレイヤーが自分事として認識できる押し付け感のないストーリー)

45. 裏に完成されたストーリーが存在する場合でも、プレイヤーには断片的な
ストーリーしか明かさないことで、ナラティブの提供になる
B45
ナラティブを提供する
O45プレイヤーの共感を得るには？
画像引用:iOSアプリ｢シノアリス｣(SQUARE ENIX/ポケラボ)
(プレイヤーが自分事として認識できる押し付け感のないストーリー)
画像引用:ゲーム｢ゼビウス｣(BANDAINAMCOEntertainmentInc.)

46. 「擬人化」は、擬人化対象物が人々に与えていたナラティブを
元ネタとして利用する作劇手法である
B46
ナラティブを提供する
O46プレイヤーの共感を得るには？
画像引用:TVアニメ｢ウマ娘プリティダービー｣(Cygames,ウマ娘プリティダービー製作委員会)(http://anime-umamusume.jp/)
(プレイヤーが自分事として認識できる押し付け感のないストーリー)

47. ふりかえり
O47
1. そもそもUI/UXとは？
2. ゲームのUI/UXデザインの特異性
•楽しさをデザインする
•苦痛をデザインする
•状況(ゲーム内ルール)をデザインする
•状況(キャラクター)をデザインする
UIデザイナーの方は｢ゲーム内カスタマージャーニー｣
を意識したUIデザインを心がけてください

48. 主催：
講師：森山 明宏(UX Yokohama代表, UXデザイナー)
ご静聴ありがとうございました
【TECH x GAME COLLEGE 16】
B48

49. 【TECH x GAME COLLEGE 16】
文責
森山 明宏(ユーリカ株式会社代表)
イラスト協力
p.09 ｢似顔絵メーカー｣(http://www.nigaoemaker.jp/generator/)
画像引用
p.19 iOSアプリ｢niconico｣ (DWANGO Co.,Ltd)
p.19 ゲーム｢ゼビウス｣ (BANDAI NAMCO Entertainment Inc.)
p.22 iOSアプリ｢Twitter｣ (Twitter, Inc.)
p.22 iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)
p.23 iOSアプリ｢Twitter｣ (Twitter, Inc.)
p.23 iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)
p.24 ｢艦これ｣開発/運営｣公式twitterアカウント
p.24 iOSアプリ｢どうぶつの森ポケットキャンプ｣(任天堂)
p.25 ｢Wenger 16999 Swiss Army Knife Giant 商品紹介ページ｣(Amazon.com,Inc.)(https://www.amazon.com/)
p.25 iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)
p.26 ｢Google Drive｣(Google Inc.)(https://drive.google.com/)
p.26 iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)
p.27 iOSアプリ｢Pairs｣ (eureka,Inc.)
p.27 iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)
p.30 ゲーム｢CALL OF DUTY WW2｣(Activision Publishing,Inc.)
p.30 ゲーム｢HALO3｣(Microsoft Corporation)
p.31 ゲーム｢ときめきメモリアル forever with you｣(コナミ)
p.31 ゲーム｢ときめきメモリアル2｣(コナミ)
p.32 iOSアプリ｢崩壊3rd｣(miHoYo Inc.)
p.33 ｢Gigazine｣(https://gigazine.net/news/20180803-harder-to-turn-off-robot/)
p.35 ゲーム｢NieR:Automata｣(SQUARE ENIX)
p.36 iOSアプリ｢スーパーマリオラン｣(任天堂)
p.37 iOSアプリ｢崩壊3rd｣(miHoYo Inc.)
p.38 iOSアプリ｢どうぶつの森ポケットキャンプ｣(任天堂)
p.39 ゲーム｢艦隊これくしょん -艦これ-｣(DMM.comラボ)
p.41 aibo公式サイト(ソニー)(https://aibo.sony.jp/)
p.42 Twitter @sakanadeshita氏アカウント(https://twitter.com/sakanadeshita/status/1087505600458633216/photo/1)
p.43 YouTube日清食品グループ公式チャンネル (https://www.youtube.com/watch?v=DOacGGRLi64)
p.44 ゲーム｢ときめきメモリアル forever with you｣(コナミ)
p.45 ゲーム｢ゼビウス｣ (BANDAI NAMCO Entertainment Inc.)
p.45 iOSアプリ｢シノアリス｣ (SQUARE ENIX/ポケラボ)
p.46 TVアニメ｢ウマ娘 プリティダービー｣(Cygames, ウマ娘プリティダービー製作委員会)(http://anime-umamusume.jp/)
参考文献
[1] ロジェ・カイヨワ(著), 清水 幾太郎 (訳), 霧生 和夫 (訳) : 遊びと人間 ; 岩波書店 (1970)
[2] Robin Hunicke, Marc LeBlanc, Robert Zubek : MDA - A Formal Approach to Game Design and Game Research ; https://www.aaai.org/Papers/ Workshops/2004/
WS-04-04/WS04-04-001.pdf (2004)
[3] 長﨑二郎 : 【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには ; https://www.slideshare.net/greeart/cedec2016ui-discussion-ui (2016)