最近スマートフォンをメインにデザインをしているshiihoです。
今までWEBのキャンペーンサイトやFlashサイトを担当していて
Androidのデザインは初めての体験でしたので、その試行錯誤をまとめたいと思います。

今回デザインを担当したのは英単語をつくるパズルゲームWORDDICT!
画面に次々と出現するアルファベットから英単語を見つけていくゲームです。
悪役のバグバグの侵略を阻止しながら高得点を目指していきます。

Android Marketはこちら
紹介サイトはこちら
それでは早速、試行錯誤の一部をまとめてみましょう。

WORDDICT!を遊ぶには
Android OS 2.2 以上
Adoobe AIR が搭載されている必要があります。

デザインの流れ

パネルの方向性

このアプリで一番デザインのやり取りが多かったのがゲームのプレイ画面
企画が英単語パズルゲームを作るという所からスタートしたので、まずはどういうパズルが良いかとパターン出し
親指がのるということを考えると面積が広いパターン4がいいよねということで初期はこちらで決定。
この時は指をなぞるとパタパタパネルが回るという演出を想定。

UIの検証

ゲームのルールと照らし合わせながら必要な要素を置いていったもの
まだ要素を置くという目的しかなかったので色味も特になし。
この段階では4人対戦ができて文字のマス目もいっぱいありスクロールできる想定。

テイストの調整

チーム内ではポップなものにしたいという意見が一致したので、そのカラーパターン。
最終的に調整をして右のモノになる。
この時ではモックが完成していてチーム内でプレイをしながらUIを検証。
ただ、プレイ画面しかできていないので全体の世界観は謎の領域。

世界観の構築

このあたりで他の画面やストーリーの構成ができてくるが
プレイ画面にストーリーがないということでそれぞれの要素にストーリー性をからませることに。
もっと分かりやすい世界観を作るためにできたのが右。

演出での失敗

初めての失敗はユーザビリティを重視しすぎて演出が淡白になってしまったこと。
(操作の邪魔にならないようになるべくエフェクトを小さくするなど)
その結果、テストプレイしていて爽快感を感じなく、ただつらいだけの作業ゲーになってしまった。
改善策として下記のように調整。

レベルアップを画面に覆いかぶさるくらいド派手に

一定時間経過するとペナルティでマス目が入れ替わるシャッフル演出を盛る。などなど・・・

デザインでつまづいたこと

戻るボタンはつけるかどうか

Android端末はデバイス側に戻るボタンがついて、そのボタンでアプリの制御が可能。
初期はつけない想定でいたが、まだAndroid端末が国内で浸透していないことも考え戻るボタンはアプリ内に設置。
また、他の某有名鳥を飛ばすパチンコゲームもアプリ内にボタンがあったのも決め手に
(こちらはiPhoneをそのまま移植した可能性もありますが・・・)

決定ボタンは右かどうか

これについては悩みました。右にした理由としては

「オレ左利きだけどゲームのコントローラーのボタン右側だしそっちになれちゃったな」
「そういえばエンターキーとか電卓のイコールボタンも右側についてるね」
「決定ボタンと言われるものは、ほとんど右にあるからそっちの方が違和感ないかも、Flickrの決定ボタンが左で違和感あったな」

という意見をもとに、一番多いであろうと予測して右に配置しました。

ただ、プレイしてみると左に決定ボタンがある方が右手だけの操作時に親指が自然と動く。
しかし左手で片手操作する人もいるかもしれない・・・
実は真ん中に合った方がいいんじゃね？(載せる情報量が収まらないのでこちらは断念)
社内でアンケートをとってみてもどっち付かずな結果に・・・
などなど、様々な意見が交差して無限ループ状態に
最終的には左右どちらにも置けるよう設定を追加した方が良いかも、という結果に落ち着く。

WORDDICT！で学んだこと

ゲームはアプリケーションとは別物

普段WEBのデザインをしていると、ユーザービリティなどをガチガチに想定しますが、
WEB寄りの考えだとゲームのデザインでは通用しないということが分かりました。
ユーザーにどのように成功体験をさせるか、など演出も含めてゲームのデザインだと感じました。

プレイしてみないと分からない

静的なWEBサイトと違いゲームはプレイしてみないと見た目以上のものは想像できません。
プレイしてみて淡白だな、面白くないな、分かりにくいなという部分を含め
何度もデザインをアップデートしていきました。
WEBの仕事で8割の部分を置き換えてみるとモックアップだったのではないかと思うほどに・・・

スマートフォンの画面は指で隠れる

WEBサイトや既存の携帯とは違いタッチでバイスは指で隠れてしまう部分が出てきます。
親指で画面をタッチする方もいれば人差し指でタッチする方もいます。
これにより画面が隠れる面積が変わってくるのでそちらも想定したデザインにしなければいけませんでした。

ユーザーが見ている情報の優先度によりデザインを変える

実際にテストプレイしてみると、アルファベットのマス目しかほとんど見てないことが分かりました。
これにより優先度が低い情報を指で隠れる画面の下に配置したり、
演出も一瞬で分かるような大げさなものに 調整をしました。

おまけ

実はAir製のゲーム

AIR for Androidで制作されています。軽量化をするのに苦労しましたがFlashの演出能力の高さを引き継げるという利点がありました。
こちらについてはFlashチームブログのlevel0にて解説をされています。

隠されたイースターエッグ

イースターエッグというほどでもないですが、ちょっとした隠し要素がこのゲームには含まれています。
ヒントは限界までスクロールすると・・・

Android端末を持っている方、是非遊んでみてくださいね。