iPhoneゲーム「かなぶん」のデザインについて

つくる社のまえだ（@monoooki）です。今回はiPhoneゲームかなぶんのデザインリニューアルについてご紹介します。
担当した作業はアプリのUIデザインでしたが、基本的にいつもやっているWebデザインと同じ要領で進めることができました。コーディングやチェック環境が減った分、気楽に出来たと思います。

旧バージョンの問題点について

• ゲーム画面に出てくる女の子（かなこちゃん）が、男児ユーザーに不評
• 海外展開をしたいので、性別、国、年齢を問わないニュートラルな雰囲気にしたい
• その他、ゲーム画面のあちこちを整えて欲しい

石原さんのお子さんは男兄弟なのですが、ゲーム画面に女の子が出てくるのをあまり好まなかったようです。自分もそうでしたが、小学生くらいの年齢だと女の子の絵の入ったものは気恥ずかしくて、あまり持つことはありませんでした。現状は大きいお友達成分がやや含まれています。

想定しているユーザーはひらがなを覚え始める小学生～大人まで。性別は不問、日本人だけでなく日本語を覚えようとしている海外の方にも遊んでもらいたいので、デザインは誰が見ても不快にならないものを希望されていました。

また、ランキング画面などはUIWebViewを使用し表示部分をCSSで制御していますが、ほぼデフォルトのままだったので見た目を揃えて欲しい、とのご希望も受けました。

上記を踏まえ各パーツごとに掘り下げていきます。

ロゴについて

旧版もかわいかったのですが、黒一色＋巻物とちょっと渋めだったため、楽しそうな雰囲気の色に変更しました（そのままの方が海外ウケしたかもですが…）。書体はアプリのアイコンにも使われていた「か」をベースに、丸くかわいい感じで新たに作成しました。

ロゴのイメージを作るために、Amazonで子供用商品のパッケージ画像を集め、眺めたりしていました。その中で「イナズマイレブンかっこいいなぁ」と思いながらおもむろにダッシュ四駆郎と並べてみては、時代の流れを感じていました。スピードホイール＋カラースポンジタイヤがかすんで見えます。あとマユゲがすごい。

とうちゃん…

ゲーム画面あれこれ

ゲーム画面

こちらも色々手を入れました。旧版では残り時間と点数が画面中央付近にありましたが、自分はファミコン世代なのでスーパーマリオにならい画面上部に移動しました。

ここで、旧版に慣れていた石原さんに「ゲーム中に点数を見ているので、以前の方が良いかも」と指摘を受けました。試しに旧版の点数部分を隠してテストしてみた所、自分はストレスを感じず、実はそれほど見ていないことがわかりました。
後日石原さんにも同様にテストしてもらったところ同じ感想だったので、このデザインになりました。

※ちなみにメラゾーマは一般名詞じゃないので通りません。

文字ボタンの大きさ

デザインの依頼が来たとき、一番必要だと思ったのがボタンの大きさでした。旧版でも使用感は悪くなかったのですが、もっと大きい方が押すときの不安が減ると考えていました。

ボタンを大きくしたことでメッセージ部分が狭くなりましたが、表示する文字を辞書から調べたところ、大抵のものは収まることがわかりました。収まらない単語は

きかん：季刊、貴簡、気管、基幹、き管、軌間、期間、き幹、キカン、き寒、キ関、汽缶、奇観、龜鑑、飢寒、気かん、饑寒、旗艦、キ間、き観、き缶、き官、き間、き簡、機関、貴翰、きかん、き関、汽かん、機かん、帰環、き環、既刊、器官、キ管

のような無意味な単語の羅列になっていたため、詳細は結果画面に任せ、ゲーム画面では省略することにしました。ゲーム中のユーザーは「入力した単語が点数になるかどうか」しか興味がなく、意味まで求めていないから、というのも理由の一つです。

名前登録のセレクトメニュー

iPhoneのセレクトメニュー(スピニングホイールUI)は存在感がありすぎるため、選択する要素は自作したボタンで表示させるようにしました。直近5件までしか保存できませんが、大人数で遊ぶゲームではないため大丈夫かな？と思っています。
※経験上2～3人でまわして遊ぶことが多いです。

かなこちゃん

旧版のかなこちゃんはよく見ると目が怖いので、現代風に書き直してみました。

しかし、これは問題の本質的な解決になっていなかったため、あたりさわりのない虫になりました。

羽根も開きます

その他のお話

タップ数を減らしました

旧版では、メニュー画面からゲーム画面に来たときに「はじめる」を押させていました。ここでユーザーがボタンに気づかず待ってしまう事があったため、ゲーム画面に入るとすぐに開始するように変更しました。これによってゲーム終了後もすぐ再開できるようになり、テンポがよくなりました。

タップ数を減らす事は、ユーザビリティの3クリックルールに似ていると感じました。思考や気分が止まるような操作は、できるだけ少ない方がいいと思います。

3クリックルール とは | ユーザビリティ用語集 | ミツエーリンクス
http://www.mitsue.co.jp/case/design/u_013.html

画面遷移について

（クリックで拡大します）

こちらもウェブサイトと同様、直感的に理解できるようにしました。
サイトマップをつくり、画面内を左右に移動することで階層を表現しています。

フォントの話

新かなぶんでは見た目が大幅に変わったので、動的に描画しているテキストのフォントも変える必要がありました。日本語部分はヒラギノ角ゴしか使えないのですが、英数字は自由に選べるため、iPhoneフォントの一覧画像 – 小酒井輝の断片2というサイトにあった書体一覧を参照してゲームの雰囲気に合ったものを選びました。

今回は楽しそうな感じということで、AmericanTypewriter-Boldを使用しています。使用箇所は残り時間や得点を表す数字、クレジット画面のフッターなどです。

また、ゲームに出てくる文字盤ではエンボス加工風にするために、テキストを2個重ねてあります。

（クリックで拡大します）

こんな感じでプログラマのKantaさん（@kclab）に開発をお願いしました。

開発時の流れについて

モック作成

こちらもウェブサイト制作と同じような流れでした。

まずはこちらのPhotoshopで各画面のデザインを作成し、PNGで書き出します。通常のウェブ制作時であれば、このPNGをHTMLに乗せてクリッカブルマップでリンクを設置し、実際のサイトのような「動くモック」を作成します。今回はアプリだったため、代わりにFlashでモックを作成しました。

これを使ってプログラマさんにデザインを見てもらい、同時に画面遷移のイメージを持ってもらいました。デザインのOKが出たら各画面の部品をスライスし、部品の簡単な配置図も同梱してDropbox経由で渡しました。

修正指示など

細かい修正指示などは、石原さん（@jishiha）が設置してくれたRedmineを使用しました。ファイル共有にはDropboxを使用していたので、Kantaさんがアドホック版を作成→Dropboxから更新通知が来る→手元のiPhoneにインストール→問題があればその都度Redmineでチケットを作成する、という流れで進めました。
思い返してみると、プロジェクトが始まってから数ヶ月のうちKantaさんと会ったのは3回くらいだったような気がします。Kanta君、どこいってもうたんや･･･（自宅です）。

修正をお願いする際に、できる限りスクリーンショットをつけておくと話が早く進みました。画像内にコメントも入れておくと尚良しです。マインドマップで有名なトニー・ブザンの「1つの絵は千の言葉に勝る」を実践していました。一手間かかりますがオススメです。

最後に

今回のかなぶんは開発メンバー内で「2.0」と呼んでいるのですが、次期バージョンの「2.1」では辞書のデータを差し替え、もっと一般的な単語で遊べるようになる予定です（現行バージョンでは語彙が少なく、日常の単語が通らないことがあります）。機能的な部分のテストはだいぶ終わっており、早い段階で公開できそうです。

デザインについては微調整を続けていきますが、遊んでみて気づいた点などありましたら @monoooki までご連絡ください。

かなぶんは完全版と無料版の二種類があります。無料版は「文字盤が一日一回しか変わらない、広告が出る」という制限がありますが、結構長いこと遊べます。下記からインストールできますので、ぜひ遊んでみてください。

• かなぶん（完全版：350円）（9月8日まで 115円 セール中） http://bit.ly/kanabun_jp
• かなぶん（無料版）http://bit.ly/kanabun_free