スマートフォンゲーム開発の為の”心地よい”ユーザーインターフェイスデザイン

永由　小百合（フリーランスグラフィックデザイナー/ゲームプランナー）

12年8月19日日曜日

筆者は2008年のiPhone発売直後にiPhoneを購入し2012年8月現在までに、700本以上のアプリ（ほとんどがゲームアプリ）をDLしプレイしてきました。日本語のものから海外のゲームまで、ジャンルを問わずプレイしていますが、時々

「なんて操作しずらい設計なんだろう！」

と思うゲームにも出会います。べつにゲームそのものが面白くないわけではありません。なんとなく操作が快適ではないのです。何がそう思う原因なのかずっと考えてきました。

スマートフォンゲームのインターフェイスに興味をもったきっかけ

そんな中、たまたま仕事でスマートフォン向けのゲーム開発に携わることがあったのですが、実際開発してみると、いくつかの問題点と出会いました。

・開発者がスマートフォンの特性を理解していない場合

・ゲームデザイナーとUIデザイナーの間の情報共有がうまく出来ない場合

・PCやテレビモニターのUIデザインを基準にスマートフォンゲームを作ってしまう場合

・物理コントローラーでの操作から考え方を切り替えられない場合

などの理由で、スマートフォンゲームのインターフェイスが思い通りに作られない場合がある事が解ってきました。

次のページから、スマートフォンゲームを開発する際に少しでもプレイヤーが心地よくプレイできるインターフェイスデザインはどのようなものか？各開発者が考える際に、少しでもヒントになる情報となればと思って記述していきます。

12年8月19日日曜日

スマートフォンゲームとインターフェイスデザイン

スマートフォンゲームのUIデザインに必要なのは、グラフィックデザインやレイアウトの整合性だけでなく、実際に操作する人間がスマートフォンをどのように扱うか？という部分まで考えて、ゲームデザインから落とし込む必要がある。

・ゲームのUIはその裏に存在する”ゲーム”を、プレイヤーが介入出来る形に変換したものである

・エンドユーザーは「ゲームデザイナーが伝えたいゲーム」を「UI」でしか受け取る事が出来ない。

・スマートフォンゲームのプレイは、ユーザーの日常生活の中で行われる雑多な行動の中に差し込まれる

・開発工程においては、”ゲームデザイン”を、エンジニア、グラフィックデザイナー、サウンドデザイナーなど、実際にUIを作る担当者に正確に伝え、共有する必要がある。

12年8月19日日曜日

ゲームデザイナーが伝えたいゲーム内の状態

画面の表示内容

プレイヤーの行動 プレイヤーの心理状態

扉の絵

体力ゲージの増減

扉がある事を伝える文章

通路を進む

立ち止まる

通路を引き返す

3Dで作成された空間のグラフィック

「通路がある」という文章

進むボタン

現在地から目的地までの状態を説明した文章

空間全体のミニマップ

扉を開ける

地図を表示させる

体力値やパラメータの値を見る

傷ついたキャラクターの姿のグラフィックを見る

先に進んでも大丈夫だろうか？

先に進むと何があるだろう？

やっぱり引き返したい

今いる場所はどこだろう？

ゲームを中断したい

操作中のキャラクターはまだ行動可能な状態か？

ゲームデザインとプレイヤーの間に存在するインターフェイス

活発に動いている姿や弱って血だらけの姿の絵

プログレスバー

通路を進むか進まないか選択させたい

扉を開けるか開けないか選択させたい

通行可能な通路がある事を伝えたい

操作中のキャラクターの状態を伝えたい

現在の位置関係を伝えたい

端末そのもの

BGM・SE

12年8月19日日曜日

例えば一度も降り立った事の無い駅で乗り換えをする場合などを想像してみる。駅で乗り換えをする場合、自分が降り立った場所から次に乗る路線までの道案内が必要となる。

この場合のユーザーの行動をシミュレーションすると、

1.駅に降り立ったら・今居る場所は「どこ」なのか知りたい・次に向かう場所（次に乗る路線の改札）まで「どこを歩いたら良いか」知りたい・目的地まで「どのくらい時間がかかるのか」知りたい

現実世界のインターフェイスデザインから考える

2.歩いている最中に・今歩いている道は目的の乗り換え地点迄の道のりとして「正しいのか」知りたい

3.乗り換える路線の改札通過後・目的の駅にたどり着く為に、「どのホームから乗ったら良いのか」知りたい・目的の駅にたどり着くまで「どのくらいの時間がかかるのか」知りたい

4. その他・のどが乾いたので飲み物を買いたい・お腹が空いたので食べ物を買いたい・間違えて切符を買ってしまったので払い戻しがしたい・乗車料金が足りないので、ICカードに現金をチャージしたい・事故などのトラブルが発生し、運行ダイヤが乱れているが、代替策としてどのような交通手段が使えるのか知りたい

などの行動が考えられる。

12年8月19日日曜日

同じようにゲーム中のユーザーの行動も、前ページの「現実世界の例」と同じ事態に陥る。

ただし、ゲームをデザインする中では、現実世界の行動とは違い、わざと「解りにくくする」というデザインを持たせる場合がある。

・今居る場所がどこかわからないので、わかる為の行動をユーザーにしてもらいたい場合

・次に向かう場所までどこを進んだら良いかわからないので、迷いながら進んでもらいたい場合

・目的地までどのくらい時間がかかるか明示しないので、不安の中実際に行動してもらいたい場合

現実世界の例とゲーム内でのユーザー行動

「解らせたいのか」「解らせたく無いのか」

この画面ではどちらにユーザーを向かせたいのか考えながらUIを設計する必要がある。

ツール系アプリとゲームアプリのUIでは、このあたりの方向性が異なってくる。

12年8月19日日曜日

待ち時間とゴール

人は何もする事が無い時強いストレスを感じる

・何も出来ないまま、15分待たされるのと、歩いて15分移動するのでは、前者の方が強いストレスになる。

・長時間（スマートフォン利用状況を考えると3分以上）何も操作介入出来ない状態で待たされるとその時点でプレイを中断し、ゲームから離脱してしまう恐れがある。

現在位置とゴールの提示・ゴールまでの道のりが何も表示されないと、人はやる気を失う。

・ゴールまでの道のりが非常に長い場合、小さなゴールを複数提示し、クリア毎に達成感を味わえる仕組みを入れておくと、小さなゴールの積み重ねでモチベーションを保ち続け、最終的なゴールまでたどり着きやすい。

・UIにおいて、プレイヤーの今の状態と、今の状態から一番近いゴールまでどのくらいの差分があるのか提示しておくことで、安心してゴールへ向かう意思を維持出来る。

スマートフォンデバイスなど、プレイヤーがタッチパネルを操作するゲームの場合、画面全体を認識するのが難しい場合がある。

・どうしても指や手で隠れてしまう部分が存在してしまう

・操作している指先と目線の先が近いため、画面全体よりも自身の手元に注意が向いてしまう

・物理的な凹凸が無いので、指で触れている部分が正しいのか確かめる為に、一瞬指先に注意が向いてしまう

タッチパネルの特性の例

12年8月19日日曜日

一目で「今画面上のどの部分を触れるか」ユーザーに伝えないとならない・そのページでは「何をさせるのか」ゲームデザイン段階で明確にしておく・何が出来て何が出来ないのかを割り切っておく。・余白が生じても、その画面で必要のない機能や操作を付け足さない。

画面の配置には一貫性を持たせる・「戻る」「決定」「キャンセル」など、どの画面にも存在しうるボタンの配置には必ず一貫性を持たせ、表示の位置が各ページで同じ位置にある事が必須となる。

プレイヤーが一度に受け取る情報は、少ないほど処理しやすい・一つの画面上に、7つ以上の選択肢を並列に表示しない方が良い・人が一度に覚えられる項目の数は「4つ」・4つ以下の項目数で、1つのカテゴリーを作ると良い

画面レイアウトの設計

長文や文章量の多い表示を避けるスマートフォンの画面では、一度に表示出来る情報量、特に視認出来る文字の量が限られてしまう。小さな文字をぎっしり画面に表示させたく無い場合、例えば下記の方法などがある。

・アイコンやピクトグラムを使う

・情報の流れやルールを図式化する

・カテゴリを色や記号などで分類し、表示させる

・サムネイル一覧表示をし、スクロールや画面切り替え頻度が少ない状態で情報が一覧出来るような工夫をする

・各サムネイルをタップする事でサブウインドウが開き、詳細が読めるようにする

（特にネットワーク接続が必要なゲームの場合、画面の読み込みが頻繁に発生すると電波状況などに左右されゲームプレイのテンポが悪くなり、プレイヤーにストレスを与える恐れがある。）

画面レイアウトの設計

12年8月19日日曜日

ロード時のタイムラグによる誤操作を避ける工夫・今指で操作している位置が、次の画面ロード後、別のボタンが置かれないことが望ましい。（読み込み時間の最中画面を触っていて、次の画面に切り替わったあと、その位置を触っていた事による意図しない操作を避けるため。）

スマートフォン利用状況を取り巻く情報の量・スマートフォンを利用している状況は、自宅など落ち着いた場所以外に、街中や人ごみなど外部の環境が干渉してくる場合も想定される。・プレイヤーと画面内の情報以外に、外部環境からの情報が絶え間なく入ってくるプレイ状況においては端末の画面に表示されている要素は必要最小限にとどめておく事が、快適なプレイに繋がる場合もある。

より快適なゲームプレイに向けて

新規に表示する情報量が多い場合・一度は詳細を理解せずゲームを進行させたが、ゲーム内の目的に達成出来なかった時など、再び詳細を確認したい時などがある。そのような時に迷わず目的の情報へたどり着けるような設計が必要になる。（例えば新しく入手したアイテムやカードの情報などや、ルールを確認したいなど。）

・一画面に表示出来る情報量が限られてしまうスマートフォン端末の場合、開発中に1つ画面を追加したような場合でも、関連する他のページからの導線も考える必要がある。

・外部の決済画面などへ遷移するゲームの場合、意図しない戻り先に遷移してしまい、ゲームプレイが妨げられないようにしておく必要がある。

・情報へアクセスする為に必要な操作を、明確にユーザーに伝える必要がある。

・WEBサイト設計のチェック項目などを参考にすると良い。

情報へのアクセスで迷わせない

12年8月19日日曜日

これからのインターフェイスナチュラルユーザーインターフェイス（NUI)へより自然にコンピューターと対話出来るインターフェイスとして、ジェスチャー認証やKINECTなど、ナチュラルユーザーインターフェイス（NUI）の研究が行われている。

筆者は2012年現在、「eスポーツグラウンド」というプラットフォームの開発の手伝いをしているが「大きなiPadの上に人間が乗っかってゲームをしている」ような状態と例えらる事も多く、スマートフォンゲームの開発や研究が役に立っている。

12年8月19日日曜日

参考文献、引用

サイトウアキヒロ・小野憲史（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日日曜日