TOPシステム開発【モバイル向けサイト制作】iPhone向けWebサイトをつくろう> 第2回:全体構成はどうする?どうできる? (1/3)




【モバイル向けサイト制作】iPhone向けWebサイトをつくろう

【モバイル向けサイト制作】
iPhone向けWebサイトをつくろう

第2回:全体構成はどうする?どうできる?

著者:株式会社モディファイ 松本庄司

公開日:2008/10/10(金)

はてなブックマークの登録数

ユーザーの視線と集中
 前回は、iPhoneの面白いところは「メンタルモデルに逆らわない心地よい操作感」にあると紹介しました。今回は、特にSafariでのWebページ閲覧でその快感が如実に表れるといことから紹介していきます。

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

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

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

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

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

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

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

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

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

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

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

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



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

この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。
ご意見、ご要望にお応えします! インプレスIT INSIDE

INDEX
第2回:全体構成はどうする?どうできる?
-> ユーザーの視線と集中
  既存のサイトをiPhone向けに調整
  新たにiPhone向けサイトを作成
【モバイル向けサイト制作】iPhone向けWebサイトをつくろう
第1回 結局、iPhoneってなんなの?
第2回 全体構成はどうする?どうできる?
第3回 見た目はどうする?どうできる?
第4回 簡単!?iPhone対応サイトの構築方法
第5回 iPhone特有の技術いろいろ
関連記事
【新・言語進化論】アレで使われている言語って何?
モバイル向けサイト制作
使いやすさと見やすさ
Webデザインワークフロー
使える!Webデザインアプリ
現場で使える!Flash
これならわかる!JavaScript/Ajax
即実践!HTML+CSS
Webデザイナは知っていた
11月記事カレンダー
      1
2345678
9101112131415
16171819202122
23242526272829
30      
-お知らせ -
記事評価 Flashにおけ…
記事評価 なぜプログ…
記事評価 いまさら聞…
記事評価 なぜプログ…
記事評価 言語選択の…
記事評価 モバイル動…
過去のカレンダーを見る

Think IT 過去人気記事

注目おすすめ情報

Think IT人気ライター BEST 5






【PR情報】

転職ならen転職ならエン派遣ならenアルバイトならen履歴書ならen就職ならen求人ならen