Nitram+Nunca

化石になりかけておったこのサイトです。なのにマニアックな記事ですみません。iPhone用 (Web) 開発者の紳士淑女に関係したエントリーだ。

iPhone について国内でもいろいろ記事が書かれていたり、テレビ等で報道されたりしているが、ほとんどが「機能多彩なスマートフォン」とか「エフェクトに遊び心がある」「OS X と同等の体験が得られる」「タッチパネルの反応は上々」など、印象に終始しているみたいだ。僕はデザイナーであるからして、ちょっと違う切り口でいこう。

実際触ってみて面白いのは、そのユーザインタラクションだ。iPhoneは、PCと同じようにWebページを見ることができるし、メールも受信できる。けれども、その操作に「指を使う」という点が決定的に違う。PCと異なる世界が広がっている。もし iPhone で閲覧できる Webページ（将来的にはもしかしたらアプリケーション）を開発する者なら、それを一番に考えなくてはならない。指のインタラクションを考えろ。それがこの記事のテーマだ。

iPhoneにおける指は、PCにおけるマウスとカーソルにあたる（入力のためのインタフェース）。まずは、この指 vs. マウス＋カーソルの違いだ。Appleの技術者も iPhone のユーザインタフェースを考えるときに、この違いから出発したのではないかと思う。

まず１つめ。PCにおけるクリックという概念が iPhone には存在しない。指は、カーソルのようにある点を示したまま移動することができないからだ。よってドラッグ＆ドロップも存在しない。触れた＝押された、という判断しかない。

キーストロークが無い代わりに音が鳴る。大事ですな。

次に、指はカーソルのように位置を特定することもできない。指は触れた面に一定の広さを持ってしまうからだ。よく記事で「指ではWebページのリンクをクリックしずらいなと思った」という感想を見かけたが、指が広さを持っているからだ。カーソルに比べれば正確なポインティングを望めないのは当たり前の話だ。

さて、ここでiPhone用開発者が注意すべき点が２つ導きだされる。ひとつは「CSSの疑似クラス hover が使えない」こと。もうひとつは「指の広さを考慮したアクションを考えなければならない」こと。だ。hover はカーソルがその上に来たときに有効になるクラスだ（このページでもリンクにカーソルを重ねると文字が変わるよね）。つまりカーソルに頼らず、どこを触ればリアクションがあるのかが、一見して分かるビジュアルにしなければならない、ということだ。後者「指の広さ」は iPhone 用プロダクトを作成するときの最も重要な点だと思う。指で操作するディスプレイと言えば、電車の乗車券を買ったりするときに目にするアレがある（自販機）。あれも、そのために大きなボタンを設けているが、 iPhone のようにディスプレイのスペースが限られている中で、多くの情報を入れようというときには、どうすれば良いだろう。ボタンとして視認できる部分と、反応する部分をずらすというテクニックも必要になってくるはず（リンクをボタン形式で用意しておいて、実際のリンク部分はそれより広く設ける、など）。

実は、今まで述べたこの２つの違いについては、Appleの開発者用ページに書いてある。

• Optimizing Web Applications and Content for iPhone
  

なので、この点についてはドキュメントを読んで、あらかた予想はしていた（けれど実感はなかった）。もうひとつ、次回述べることは実機を触ってから気づいたことだ。ここまでの話では、指のインタラクションは「カーソル＋マウスに劣っているなぁ」という印象しかないけれど、そんなことはない（当たり前だけど）。というか、そんなこと無いインタラクションを提供したAppleが素晴らしいのだが、その内容は次にまわします。化石化しないように…。

（つづく）

Posted in » ユーザインタフェース