BPM 計測アプリです。既に似たようなアプリはいくつか発売されているのですが、タップできるエリアが狭かったり、グラフィックでテンションがさがるようなアプリが多くて、楽器の練習時など実際に使っていて、やや不満を感じていました。次第に我慢の限界に達し、自分でデザイン・実装してみることにしました。
色々な社会の仕組みも勉強したかったので、我慢の限界を我慢しつつコツコツ EIN も取って、 iTunes で有料アプリとして 115 円で販売開始しました。よろしければ、お買い求めください。
ちなみに最近はやりの Flash CS5 Packager for iPhone は使ってません。Xcode で Objective-C で書いています。てか CS5 ってまだ発売されていないはずなのに流行ってるなんて不思議ですね(なんてw)。
今回の iPhone アプリのインタラクションデザインにおいて考えたのは以下の 3 点。
1. タップエリアは広く

当たり前のことですが、ミスタッチ防止というのと、安心感。
大きければ、譜面を読みながらテンポを測る場合、目線を譜面に向かわせておいてもミスなく計測出来ます。タップで集中力を奪わないようにと。
あと、画面を広く占有する大きなボタンがあるだけで「これをタップしろ」というアフォーダンスを、タップボタン君が存分に発揮してくれる気がします。iPhone アプリではいちいち説明書を読め、チュートリアルを見ろ、ということはあまりできないので、視覚でユーザーが想像しやすいようにするのは重要ですよね。
2. 画面右下 i ボタンからのモーダルビューをクローズするボタンは、 i ボタンと同じ右下に


i ボタンを押すと、くるっと画面が回転し、アプリの簡単な紹介ページが開きます。
i ボタンをユーザーが押すとき、ユーザーがどのような持ち方、どの指でタッチするか考えました。
紹介ページでは、サポート Web ページを開くぐらいしか機能がないので、この間にユーザーが本体を右手と左手で持ち変えたり、またはタッチする指を変えたりというのはあまり考えられない気がします。
ユーザーが iPhone を利き手じゃない方の手で持っている、または机に置いている場合、操作を親指以外の指で操作する傾向があると思うので、ボタンを画面のどの辺りに置いても難なくタッチできると思います。
しかし、 iPhone を片手または両手で持って、その親指で操作しているときは、ボタンが画面の上部にあると、やや指から遠いため、タッチしにくい感じがします。結果、画面下部にボタンを配置する事にしました。
また、ユーザーが「気づく」という点においても、画面下からモーダルビューがせり上がってくるタイプのアニメーションが行われるのであれば、モーダルビューの上の方にクローズボタンを置いても良いと思うのですが、今回はくるっと回るアニメーション(画面の見た目がいきなり変わってしまう)なので、タッチした i ボタンに関連のある位置の方がいいと思い、右下に配置しました。
ちなみに iPad の場合は画面解像度が高いので、サポートページ情報ぐらいなのであれば画面遷移はせず、ポップアップ、バルーンなどのインタラクションで行う方が良いと思いました。
3. なんか海外を意識する?

iPhone アプリの売り上げのほとんどは海外と聞いていたので、普段ちらちら見ているものを参考にしながら、想像上の「海外」な感じのデザインパーツを作成していきました。グラデーションや、ノイズな感じとテカリ感のバランスなんですかね。正直難しいですが。
BPM の数値もただ iPhone にインストールされているフォントを使うだけでは面白くないので、グラデーションとグローを加えた、0 から 9 までの png パーツを切り出して、メモリ上に UIImage の NSArray として保持しておき、該当 UIImageView の UIImage を切り替えるという方法で表現しています。
UIImage を作る瞬間ちょっと負荷が高いので、viewDidLoad なタイミングで先に作っといて配列として保持しとく方がよさそうです。
openGL ES とか使った方がもっと高速できるかな?とはいえ現時点でラグもなく、十分早いですが。
でした。
で、これで効果があるかどうかはわかりませんが、色々こうやって無駄に考えていると勉強になっていい感じです。今後考え直す事があればまたバージョンアップや他のアプリでやってみたいです。
というわけで、よろしくお願いします。


