全体構成はどうする?どうできる?

2008年10月10日(金)
松本 庄司

ユーザーの視線と集中

 前回(http://www.thinkit.co.jp/article/146/1/)は、iPhoneの面白いところは「メンタルモデルに逆らわない心地よい操作感」にあると紹介しました。今回は、特にSafariでのWebページ閲覧でその快感が如実に表れるといことから紹介していきます。

 iPhoneで通常のPC向けWebページを見るとき、おおむね次のような操作をします。

1.全体が横幅に合わせて縮小表示され、見たい部分の見当をつける
2.見たい部分をダブルタップする(ブロックが画面幅に拡大される)
3.フリックで下にスクロールしながら読み進む
4.文字が小さく感じたら、本体を横に向けると拡大されるので、ゆっくり読む

 実はここで行っている作業は、実際にPCの広い画面上のブラウザでWebページを読むときに、人間が自然と行っている「視界と注視点と集中の移動」プロセスを忠実にたどっています。

 例えば、ブログの記事を読んでいるとき、ヘッダーがどのようになっているか、サイドにどんなブログパーツがあるのかということを気にしている方は多くはないでしょう。ページを見た瞬間に「どこに注意すべきなのか」を判断し、そこに意識を集中します。派手な広告バナーや主張の強すぎる背景や装飾が嫌われる(ユーザビリティを損なう)のはこのためです。

 iPhoneのユーザーはこの快適なUIに慣れているので、上記の動作でスムーズに読めないと不快に感じてしまいます。

 広告への集客をビジネスとしている場合は、不快に思われない程度に、しかしまったく無視もされないように、主張する広告でなければならないのが難しいところです。派手なバナーで無理やり目を引く手法がメジャーだったころに、地味なテキストでもマッチング内容で勝負したGoogleが一歩先をいったのも、見た目ではない「閲覧者の意識の向かう先」に注目したからでしょう。

一発で見える・できるが気持ちいい

 iPhoneでのWebページ閲覧の操作感は、無意識に行っているプロセスを最小の手間で行えるようにしたユーザーインターフェースによってもたらされています。

 では、ネイティブアプリケーションの場合はどうなっているのかも見ておきましょう。iPhoneではWebでもネイティブアプリケーションとかなり近い作りをすることができ、うまく作られたWebアプリケーションはネイティブに負けずとも劣らない快適さですから、サービスを提供するページならばアプリケーションのような使い勝手という選択肢もあります。

 iPhoneのネイティブアプリケーションの特徴は「いきなりやりたいことができる」です。特にApple謹製のアプリケーションでは、機能の豊富さをあきらめてでもわかりやすさと快適さを追求しています。そのほかのAppStoreで配布されているアプリケーションもそれに倣っているため、携帯端末でやりたいこと、できることに絞った構成になっています。PC版のサービスの本質部分だけを取り出して、ネイティブアプリケーション化したようなものも多く見受けられます。

 実は、上記のWebページでの操作性は、携帯端末向けに調整されていないPC向けのページやサービスを、いかにストレスなく閲覧させるかといういわば苦肉の策です。iPhone向けに調整されたアプリケーションは、それらの手間を最初からなくしています。

 ユーザーにとってはWeb、ネイティブアプリケーションにかかわらず、受けられるサービスや見られる情報そのものに差異はないので、いかに快適な印象を与えて、繰り返し訪れてもらえるかを考えれば、快適さを捨ててしまうのはもったいない話です。

 とはいえ「今後どのようなっていくかわからない端末向けにそんな大層な労力は…」という管理者も多いことでしょうし、できるだけ少ない手間でiPhoneに対応する考え方を紹介していきます。

株式会社モディファイ
CTO。ProjectVine、もじら組などオープンソース系コミュニティーでの活動後、大手SIerにてJavaによるアプリケーションフレームワークの構築を手がける。ベンチャーインキュベータを経て、現在は株式会社モディファイにてJavascript/CSSと格闘する毎日。http://www.modiphi.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています