1. スマートフォンゲーム開発の為の
心地よい ユーザーインターフェイスデザイン
永由 小百合
（フリーランスグラフィックデザイナー/ゲームプランナー）
12年8月19日日曜日

2. そんな中、たまたま仕事でスマートフォン向けのゲーム開発に
携わることがあったのですが、実際開発してみると、
いくつかの問題点と出会いました。
・開発者がスマートフォンの特性を理解していない場合
・ゲームデザイナーとUIデザイナーの間の情報共有が
うまく出来ない場合
スマートフォンゲームの ・PCやテレビモニターのUIデザインを基準に
インターフェイスに スマートフォンゲームを作ってしまう場合
興味をもったきっかけ ・物理コントローラーでの操作から考え方を
切り替えられない場合
筆者は2008年のiPhone発売直後にiPhoneを購入し
2012年8月現在までに、700本以上のアプリ などの理由で、スマートフォンゲームのインターフェイスが
（ほとんどがゲームアプリ）をDLしプレイしてきました。 思い通りに作られない場合がある事が解ってきました。
日本語のものから海外のゲームまで、ジャンルを問わずプレイ
していますが、時々 次のページから、スマートフォンゲームを開発する際に
少しでもプレイヤーが心地よくプレイできるインターフェイス
「なんて操作しずらい設計なんだろう！」 デザインはどのようなものか？各開発者が考える際に、少しで
もヒントになる情報となればと思って記述していきます。
と思うゲームにも出会います。
べつにゲームそのものが面白くないわけではありません。
なんとなく操作が快適ではないのです。
何がそう思う原因なのかずっと考えてきました。
12年8月19日日曜日

3. スマートフォンゲームと
インターフェイスデザイン
スマートフォンゲームのUIデザインに必要なのは、グラフィックデザインやレイアウトの
整合性だけでなく、実際に操作する人間がスマートフォンをどのように扱うか？
という部分まで考えて、ゲームデザインから落とし込む必要がある。
・ゲームのUIはその裏に存在する ゲーム を、プレイヤーが介入出来る形に
変換したものである
・エンドユーザーは「ゲームデザイナーが伝えたいゲーム」を「UI」でしか
受け取る事が出来ない。
・スマートフォンゲームのプレイは、ユーザーの日常生活の中で行われる
雑多な行動の中に差し込まれる
・開発工程においては、 ゲームデザイン を、エンジニア、グラフィックデザイナー、
サウンドデザイナーなど、実際にUIを作る担当者に正確に伝え、共有する必要がある。
12年8月19日日曜日

4. ゲームデザインとプレイヤーの
間に存在するインターフェイス
ゲームデザイナーが伝えたい プレイヤーの
プレイヤーの行動
ゲーム内の状態 BGM・SE 心理状態
画面の表示内容 先に進んでも
大丈夫だろうか？
通行可能な通路が 3Dで作成された 通路を進む
空間のグラフィック
ある事を伝えたい 先に進むと何があ
「通路がある」という文章 るだろう？
通路を進むか進まないか 扉を開ける
進むボタン
選択させたい
空間全体のミニマップ やっぱり引き返したい
通路を引き返す
現在地から目的地までの
現在の位置関係を 状態を説明した文章
伝えたい
プログレスバー 地図を表示させる 今いる場所は
どこだろう？
扉を開けるか開けないか 扉の絵
選択させたい 体力値やパラメータの
扉がある事を伝える文章 値を見る
操作中のキャラクターは
活発に動いている姿や まだ行動可能な状態か？
操作中のキャラクター 傷ついたキャラクターの
弱って血だらけの姿の絵 姿のグラフィックを見る
の状態を伝えたい
体力ゲージの増減
立ち止まる ゲームを中断したい
端末そのもの
12年8月19日日曜日

5. 2.歩いている最中に
・今歩いている道は目的の乗り換え地点迄の
道のりとして「正しいのか」知りたい
3.乗り換える路線の改札通過後
現実世界のインターフェイス ・目的の駅にたどり着く為に、
「どのホームから乗ったら良いのか」知りたい
デザインから考える ・目的の駅にたどり着くまで
「どのくらいの時間がかかるのか」知りたい
例えば一度も降り立った事の無い駅で
乗り換えをする場合などを想像してみる。 4. その他
駅で乗り換えをする場合、 ・のどが乾いたので飲み物を買いたい
・お腹が空いたので食べ物を買いたい
自分が降り立った場所から
・間違えて切符を買ってしまったので払い戻しがしたい
次に乗る路線までの道案内が必要となる。 ・乗車料金が足りないので、ICカードに現金をチャージしたい
・事故などのトラブルが発生し、運行ダイヤが乱れているが、
この場合のユーザーの行動を 代替策としてどのような交通手段が使えるのか知りたい
シミュレーションすると、
などの行動が考えられる。
1.駅に降り立ったら
・今居る場所は「どこ」なのか知りたい
・次に向かう場所（次に乗る路線の改札）まで
「どこを歩いたら良いか」知りたい
・目的地まで「どのくらい時間がかかるのか」知りたい
12年8月19日日曜日

6. 現実世界の例と
ゲーム内でのユーザー行動
同じようにゲーム中のユーザーの行動も、
前ページの「現実世界の例」と同じ事態に陥る。
「解らせたいのか」
「解らせたく無いのか」
ただし、ゲームをデザインする中では、
現実世界の行動とは違い、わざと この画面ではどちらにユーザーを向かせたいのか
「解りにくくする」 考えながらUIを設計する必要がある。
というデザインを持たせる場合がある。
ツール系アプリとゲームアプリのUIでは、
・今居る場所がどこかわからないので、 このあたりの方向性が異なってくる。
わかる為の行動をユーザーにしてもらいたい場合
・次に向かう場所までどこを進んだら良いかわからないので、
迷いながら進んでもらいたい場合
・目的地までどのくらい時間がかかるか明示しないので、
不安の中実際に行動してもらいたい場合
12年8月19日日曜日

7. タッチパネルの特性の例
待ち時間とゴール
人は何もする事が無い時 スマートフォンデバイスなど、プレイヤーが
強いストレスを感じる タッチパネルを操作するゲームの場合、
画面全体を認識するのが難しい場合がある。
・何も出来ないまま、15分待たされるのと、歩いて15分
移動するのでは、前者の方が強いストレスになる。
・どうしても指や手で隠れてしまう部分が存在してしまう
・長時間（スマートフォン利用状況を考えると3分以上）
何も操作介入出来ない状態で待たされるとその時点で ・操作している指先と目線の先が近いため、
プレイを中断し、ゲームから離脱してしまう恐れがある。 画面全体よりも自身の手元に注意が向いてしまう
・物理的な凹凸が無いので、指で触れている部分が
正しいのか確かめる為に、一瞬指先に注意が向いてしまう
現在位置とゴールの提示
・ゴールまでの道のりが何も表示されないと、
人はやる気を失う。
・ゴールまでの道のりが非常に長い場合、小さなゴールを
複数提示し、クリア毎に達成感を味わえる仕組みを
入れておくと、小さなゴールの積み重ねでモチベーションを
保ち続け、最終的なゴールまでたどり着きやすい。
・UIにおいて、プレイヤーの今の状態と、今の状態から
一番近いゴールまでどのくらいの差分があるのか
提示しておくことで、安心してゴールへ向かう意思を
維持出来る。
12年8月19日日曜日

8. 画面レイアウトの設計
長文や文章量の多い表示を避ける
スマートフォンの画面では、一度に表示出来る情報量、特に
視認出来る文字の量が限られてしまう。
画面レイアウトの設計 小さな文字をぎっしり画面に表示させたく無い場合、
例えば下記の方法などがある。
一目で「今画面上のどの部分を触れるか」 ・アイコンやピクトグラムを使う
ユーザーに伝えないとならない
・そのページでは「何をさせるのか」 ・情報の流れやルールを図式化する
ゲームデザイン段階で明確にしておく
・何が出来て何が出来ないのかを割り切っておく。 ・カテゴリを色や記号などで分類し、表示させる
・余白が生じても、その画面で必要のない
機能や操作を付け足さない。 ・サムネイル一覧表示をし、スクロールや画面切り替え
頻度が少ない状態で情報が一覧出来るような工夫をする
画面の配置には一貫性を持たせる ・各サムネイルをタップする事でサブウインドウが開き、
詳細が読めるようにする
・「戻る」「決定」「キャンセル」など、どの画面にも
存在しうるボタンの配置には必ず一貫性を持たせ、
（特にネットワーク接続が必要なゲームの場合、
表示の位置が各ページで同じ位置にある事が必須となる。
画面の読み込みが頻繁に発生すると電波状況などに左右され
ゲームプレイのテンポが悪くなり、
プレイヤーにストレスを与える恐れがある。）
プレイヤーが一度に受け取る情報は、
少ないほど処理しやすい
・一つの画面上に、7つ以上の選択肢を並列に
表示しない方が良い
・人が一度に覚えられる項目の数は「4つ」
・4つ以下の項目数で、1つのカテゴリーを作ると良い
12年8月19日日曜日

9. 情報へのアクセスで迷わせない
新規に表示する情報量が多い場合
・一度は詳細を理解せずゲームを進行させたが、
ゲーム内の目的に達成出来なかった時など、再び詳細を確認
より快適なゲームプレイに向けて したい時などがある。そのような時に迷わず目的の情報へた
どり着けるような設計が必要になる。
（例えば新しく入手したアイテムやカードの情報などや、
ロード時のタイムラグによる誤操作を避ける工夫 ルールを確認したいなど。）
・今指で操作している位置が、次の画面ロード後、
別のボタンが置かれないことが望ましい。 ・一画面に表示出来る情報量が限られてしまう
（読み込み時間の最中画面を触っていて、次の画面に スマートフォン端末の場合、開発中に1つ画面を
切り替わったあと、その位置を触っていた事による 追加したような場合でも、関連する他のページからの
意図しない操作を避けるため。） 導線も考える必要がある。
・外部の決済画面などへ遷移するゲームの場合、
意図しない戻り先に遷移してしまい、ゲームプレイが妨げ
スマートフォン利用状況を取り巻く情報の量 られないようにしておく必要がある。
・スマートフォンを利用している状況は、自宅など
落ち着いた場所以外に、街中や人ごみなど外部の環境が ・情報へアクセスする為に必要な操作を、
干渉してくる場合も想定される。 明確にユーザーに伝える必要がある。
・プレイヤーと画面内の情報以外に、外部環境からの
情報が絶え間なく入ってくるプレイ状況においては ・WEBサイト設計のチェック項目などを参考にすると良い。
端末の画面に表示されている要素は必要最小限に
とどめておく事が、快適なプレイに繋がる場合もある。
12年8月19日日曜日

10. これからのインターフェイス
ナチュラルユーザーインターフェイス（NUI)へ
より自然にコンピューターと対話出来るインターフェイスとして、ジェスチャー認証や
KINECTなど、ナチュラルユーザーインターフェイス（NUI）の研究が行われている。
筆者は2012年現在、「eスポーツグラウンド」というプラットフォームの開発の手伝いをしているが
「大きなiPadの上に人間が乗っかってゲームをしている」ような状態と例えらる事も多く、
スマートフォンゲームの開発や研究が役に立っている。
12年8月19日日曜日

11. 参考文献、引用
サイトウアキヒロ・小野憲史（2007） ニンテンドーDSが売れる理由-ゲームニクスでインターフェイスが変わる 秀和システム
Dan Saffer(著）吉岡いずみ（翻訳）ソシオメディア株式会社（翻訳）（2008）インタラクションデザインの教科書 毎日コミュニケー
ションズ
ヘンリー・ペトロスキー（2008） ＜使い勝手＞のデザイン学 朝日新聞出版
Chris Bateman（著） Richard Boon（著）松原健二（監訳）岡真由美（翻訳）（2009） 「ヒットする」のゲームデザイン
-ユーザーモデルによるマーケット主導型デザイン オライリー・ジャパン
古賀直樹（2010） UIデザインの基礎知識∼プログラム設計からアプリケーションデザインまで∼ 技術評論社
Josh Clark 深津貴之（翻訳）武舎広幸（翻訳）武舎るみ（翻訳）（2011）「iPhoneアプリ設計の極意ー思わずタップしたくなるア
プリのデザインー」
オライリー・ジャパン
中川聰（2011）グラフィックデザイナーのためのユニバーサルデザイン実践テクニック51 ワークスコーポレーション
Jenifer Tidwell(著）ソシオメディア株式会社（監訳）浅野紀予（翻訳）（2007）（2011）デザイニング・インターフェイス
第1版、第2版-パターンによる実践的インタラクションデザイン オライリー・ジャパン
D.A.ノーマン 伊賀聡一郎（翻訳）岡本明（翻訳）安村道晃（翻訳）（2011）「複雑さと共に暮らす」新曜社
川上浩司（2011） 不便から生まれるデザイン 工学に活かす常識を超えた発想 科学同人
WEB+DB PRESS vol.64（2011） プログラマが知るべきUIデザインの基本知識（特集）技術評論社
Susan Weinschenk 武舎広幸（翻訳）武舎るみ（翻訳）阿倍和也（翻訳）（2012）「インターフェイスデザインの心理学」オライ
リー・ジャパン
中野広明（2012） デザイナーのためのスマートフォンインターフェイスデザイン 秀和システム
山岡俊樹（2012） 論理的思考によるデザイン∼造形工学の基本と実践∼ ビー・エヌ・エヌ新社
12年8月19日日曜日