Flashユーザの中には、私もそうですが、デザイナーやアニメーター出身の方が多いのではないでしょうか。そうした方々からみると、アプリ開発にはプログラミングの専門的な知識が必要だろうと思われているかもしれませんが、皆さんが使っているFlash Professional CS5.5が1つあれば、iOS/Android向けのアプリ制作を容易に行うことができます。

ActionScript 3.0をある程度習得する必要はあるものの、それさえクリアすれば、これまで培ってきた技術と知識を活かして、アプリ開発へと移行できるのです。単純なスタンドアロン型ゲームなどであれば、これまでWeb向けに制作してきたSWFファイルの書き出しと何ら変わるところはありません。デザイナーがモバイルアプリ開発に参入できる、これこそがFlashならではのアドバンテージだと思います。

いざモバイルアプリを開発しようとなると、技術面のその先にあるユーザビリティを考えなければなりません。Webコンテンツでもユーザビリティは大切ですが、特にモバイルアプリになるとこれまでとは違う視点が必要となり、インターフェイスデザインの点でいくつかの問題に直面することになります。

そこで本記事ではデザイナーの視点から、スマートフォン向けゲームのインターフェイスをデザインする際の留意点について、拙作パズルゲーム「ワクチンケース」(ほぼFlashのみで制作)を例にいくつか挙げてみます。

読み進める前に、もしよければ実際にゲームを触ってみてください。無料で試せるLITE版もあります。

「ワクチンケース」

 

ボタンのデザイン

多くの人は、PCのマウスカーソル操作とタッチパネルインターフェイスは“ほぼ同じ”だと思い込んでいます。確かにプログラム上だと、タッチ操作はこれまでのMouseEventで取得できますし、オブジェクトをドラッグしたり放り投げるなどといった操作も、マウスカーソルを指に置き換えて考えればごく自然に想像できるでしょう。

ところが、実際にモバイルアプリに触れてみると、この「自分の指」が実に厄介で邪魔なものに感じられるのです。

目的のオブジェクトが指に隠れて見えなくなってしまう、または手の甲が小さな画面の大半を隠してしまうといった問題は、瞬時に画面全体を把握しなければならないゲームでは致命的な欠陥になりかねません。

当然ですが、カーソルのないタッチインターフェイス端末ではロールオーバー/ロールアウトはほぼ無効です。また、ある程度の大きさならまだしも、デザイン上どうしても指に隠れてしまうようなサイズのオブジェクトでは「MouseDownで画像状態を変化させる」といった演出は効果が薄くなってしまいます。

そのため、ボタンなどのタッチでは「ボタンから指が離れてからリアクションさせる」「そのリアクションを見せるために実際の動作開始までに時間差を設ける」など、ユーザにボタンが反応したことをしっかり認識させる演出が必要となります。ワクチンケースでは、ボタンタッチ後、ジャンプするアニメーションをさせてボタンが反応したことをユーザに認識させています。

また、ボタン自体のデザインも、「ロールオーバーでその機能をヒント表示させる」などができないので、ひと目でそれがボタンと認識できる/何の機能なのかわかるといった配慮が必要です。

画面上での配置

思考型パズルゲームの場合、頻繁に押すことになるであろうundoボタン、アクセスすることの多いメニューボタン、さほど使わないサウンドのON/OFF切り替えボタンなど、ボタンごとの性質を考えた上でそれらの配置場所にも気をつけなければなりません。

使用頻度の高いボタンはなるべく手元に置き、指や手で画面が隠れてしまわない場所に配置しておけば、アクセスもしやすくユーザビリティが高まります。逆に、ゲームの設定を変えるなどの使用頻度の低いボタンは、プレイ中の誤操作を避けるためにもやや手元から離れた場所に配置すべきです。

ワクチンケースでは、undoボタンは主にPC操作でのアンドゥキーとなるZキーの位置を模して画面左下に配置し、慣用的に使えるようにしています。サウンドのON/OFFボタンは利き手(右手を想定)からはややアクセスしにくい左上に配置し、プレイ中は不用意に触れないようにしています。

ゲームの性質上、画面のいたるところをタッチして遊ぶものは特に注意を払う必要があります。ユーザが端末をどのように持つか、指のホームポジションはどこになるかということまで考慮して、「タッチ箇所が画面の隅のみに集中して手の甲で反対側が隠れてしまわないように」など、場合によってはキャラクター配置などステージデザイン面での調整も必要となるでしょう。

プレイヤーの心理を考える

最後に「わかりやすさだけでもいけない」というお話です。ゲームなどのエンターテインメントコンテンツは、ツール系アプリとは異なり「生活に必要ではないもの」であるため、ユーザは不快/不便/わからないと思うと途端に気持ちが離れてしまいます。ゲームでは、ユーザが気持ち良くない/不快と感じる箇所は徹底的に排除しなければなりません。

その点で一カ所、ワクチンケースの反省すべき点があります。ゲームのプレイを中断してステージ選択に戻るPAUSEボタンですが、押すと白旗アイコンに「GIVE UP」と表記されています。

ボタンの意味もわかりやすく明示してあり、プレイヤーも即座に理解できるであろうということでデザインしたのですが、「GIVE UP」という言葉はどうしてもネガティブな印象を与えてしまいます。そのプレイヤーはもしかしたら「ステージ選択を間違えただけで、ただ選択画面に戻りたいだけ」なのかもしれません。すでに一度クリアしたステージかもしれないのに“お手上げ”を強いられるのでは気分が良くありません。

もちろん、ゲームの内容や状況によっては「GIVE UP」という言葉の使用が妥当な場合もありますが、そうでない場合のプレイヤーの心情をよく考慮した上で文言を選ばなければなりません。作者自身の英語力のなさもあり解決できないままとなっていますが、こういった細かな部分についても常にプレイヤーの心理状態に気を配り、デザインしていくことが大切です。

おわりに

以上のインターフェイスデザインに関する考察は、デザイナーならば頭にあって当然なことばかりのはずですが、実際のところ、こういった点はあまり考慮されていないようなモノが多いのが現状です。

モバイルアプリに限った話ではありませんが、こうしたデザイナーの力が必要とされる現場はまだまだ数多くあります。個人でもFlashひとつで簡単に参入できるモバイルアプリの世界。ユーザインターフェイスの重要性を示すためにも、いまデザイナーの力が必要とされているのです。