feb19.jp blog - life is creative!

iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて

ブックマークに追加する tags:  

iPhone アプリ

BPM 計測アプリです。既に似たようなアプリはいくつか発売されているのですが、タップできるエリアが狭かったり、グラフィックでテンションがさがるようなアプリが多くて、楽器の練習時など実際に使っていて、やや不満を感じていました。次第に我慢の限界に達し、自分でデザイン・実装してみることにしました。

色々な社会の仕組みも勉強したかったので、我慢の限界を我慢しつつコツコツ EIN も取って、 iTunes で有料アプリとして 115 円で販売開始しました。よろしければ、お買い求めください。

ちなみに最近はやりの Flash CS5 Packager for iPhone は使ってません。Xcode で Objective-C で書いています。てか CS5 ってまだ発売されていないはずなのに流行ってるなんて不思議ですね(なんてw)。

今回の iPhone アプリのインタラクションデザインにおいて考えたのは以下の 3 点。


1. タップエリアは広く

タップエリアは広く

当たり前のことですが、ミスタッチ防止というのと、安心感。
大きければ、譜面を読みながらテンポを測る場合、目線を譜面に向かわせておいてもミスなく計測出来ます。タップで集中力を奪わないようにと。

あと、画面を広く占有する大きなボタンがあるだけで「これをタップしろ」というアフォーダンスを、タップボタン君が存分に発揮してくれる気がします。iPhone アプリではいちいち説明書を読め、チュートリアルを見ろ、ということはあまりできないので、視覚でユーザーが想像しやすいようにするのは重要ですよね。


2. 画面右下 i ボタンからのモーダルビューをクローズするボタンは、 i ボタンと同じ右下に

画面右下 i ボタンからのモーダルビューをクローズするボタン i ボタンと同じ右下に

i ボタンを押すと、くるっと画面が回転し、アプリの簡単な紹介ページが開きます。
i ボタンをユーザーが押すとき、ユーザーがどのような持ち方、どの指でタッチするか考えました。

紹介ページでは、サポート Web ページを開くぐらいしか機能がないので、この間にユーザーが本体を右手と左手で持ち変えたり、またはタッチする指を変えたりというのはあまり考えられない気がします。

ユーザーが iPhone を利き手じゃない方の手で持っている、または机に置いている場合、操作を親指以外の指で操作する傾向があると思うので、ボタンを画面のどの辺りに置いても難なくタッチできると思います。
しかし、 iPhone を片手または両手で持って、その親指で操作しているときは、ボタンが画面の上部にあると、やや指から遠いため、タッチしにくい感じがします。結果、画面下部にボタンを配置する事にしました。

また、ユーザーが「気づく」という点においても、画面下からモーダルビューがせり上がってくるタイプのアニメーションが行われるのであれば、モーダルビューの上の方にクローズボタンを置いても良いと思うのですが、今回はくるっと回るアニメーション(画面の見た目がいきなり変わってしまう)なので、タッチした i ボタンに関連のある位置の方がいいと思い、右下に配置しました。

ちなみに iPad の場合は画面解像度が高いので、サポートページ情報ぐらいなのであれば画面遷移はせず、ポップアップ、バルーンなどのインタラクションで行う方が良いと思いました。


3. なんか海外を意識する?

なんか海外を意識する?

iPhone アプリの売り上げのほとんどは海外と聞いていたので、普段ちらちら見ているものを参考にしながら、想像上の「海外」な感じのデザインパーツを作成していきました。グラデーションや、ノイズな感じとテカリ感のバランスなんですかね。正直難しいですが。

BPM の数値もただ iPhone にインストールされているフォントを使うだけでは面白くないので、グラデーションとグローを加えた、0 から 9 までの png パーツを切り出して、メモリ上に UIImage の NSArray として保持しておき、該当 UIImageView の UIImage を切り替えるという方法で表現しています。

UIImage を作る瞬間ちょっと負荷が高いので、viewDidLoad なタイミングで先に作っといて配列として保持しとく方がよさそうです。

openGL ES とか使った方がもっと高速できるかな?とはいえ現時点でラグもなく、十分早いですが。


でした。

で、これで効果があるかどうかはわかりませんが、色々こうやって無駄に考えていると勉強になっていい感じです。今後考え直す事があればまたバージョンアップや他のアプリでやってみたいです。

というわけで、よろしくお願いします。

iPhone アプリ「iBeat - BPM Counter」 紹介ページ

2010年03月11日09:52

Webデザインブログ

「iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて」の関連エントリー

 iTunes Store(Japan)

コメントを投稿

トラックバック

このエントリーのトラックバックURL:
http://feb19.jp/mt/mt-tb.cgi/189

Navigation

古:AS3 の演算子 ||= について
新:AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する
トップページ

Recently Entries
Mac でファイルの関連付けを変える(Mac で AIR アプリがアップデート出来ないを解決する方法)
ファイルを右クリックして「情報を見る」を選び、表示されたウィンドウの...
Mac OS X 10.6 Snow Leopard から入ってるフォント「Menlo」がコーディング作業にいい感じ
Xcode でコード書いているとき、Eclipse でコード書くより...
AIR で JSON 形式ファイルの入出力
AIR 祭り開催中。今回はファイル入出力。AS3 で扱っている Ob...
Adobe CS5 ティザーサイトオープン
カウントダウンが始まっています。いよいよ CS5 ですね。globa...
AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する
最近また AIR が楽しい気がして触っているのですが、 Google...
iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて
BPM 計測アプリです。既に似たようなアプリはいくつか発売されている...
AS3 の演算子 ||= について
AS3 だけでつかえるものではないのですが、AS3 での動作を確認し...
iPhone SDK 「カテゴリ」について+NSString の空白文字を除去する
Objective-C では、高位のフレームワークで、低位のフレーム...
Flash CS4 で Flex SDK (mx パッケージ、クラス) を使う
Flex 用のライブラリとかを見ると mx パッケージとか使われてい...
Flash CS5 を予習 ~Text Layout Framework (TLF) 編~
Text Layout Framework (TLF) を使って、F...