iPhoneサイトは徹底した構造化を

iPhoneのWebブラウザ最大の特徴の一つは、「拡大縮小」機能でしょう。タッチしながら直感的かつスムーズに拡大縮小できるiPhoneのユーザーインターフェースは、タッチパネルというもののイメージを根本から変えてしまいました。
最初は小さく全体が表示されるパソコン用Webサイトも、画面上で指を「押し広げる」だけで自在に拡大して見やすい範囲、大きさに設定できる。便利ですよね。

ただ、iPhoneのWebブラウザで一部を拡大表示するには「指でタップする」という方法もあります。タップすると、その周辺が見やすいサイズに拡大される・・・のですが、これが意外に難しい。というか、適切に作成されたサイトでないと、なかなか思うようには行かないでしょう。

この適切に作成されたサイトというのは、「段落ごとに構造化」するよう作成されたサイトです。たとえば、複数の製品を紹介するサイトなら、製品ごとにDIVタグで囲い、スタイルシートでそのDIVタグの構造を明確に分離できるよう表示する。画像と説明文も一つの構造(DIVやテーブル)の中に整理して一まとまりの段落として表示する。
そうした適切な構造化がなされたサイト作成を心がけていれば、iPhoneのWebブラウザでも、適切な拡大縮小(製品部分をタップすれば、タップした製品部分を中心に見やすいサイズに拡大される)を実現できる可能性が高くなるはずです。

パソコン用サイトを作っていると、つい「だらだら」内容を並べてしまいがちですが、「一覧できる範囲」の狭い端末では「区切り」を意識して明確な構造があるサイトの方が閲覧しやすいはずです。そして、その区切り、構造に応じてすぐに「注目」できるのが、iPhoneのタップによる拡大機能といえるでしょう。

サイト作成において、「注目して欲しい要素の単位」は何なのか、文章の段落なのか、画像と補足なのか、WebアプリケーションのGUI部品なのか……。そういったことを意識しながら、わかりやすい構造にまとめてみてください。

iPhoneサイト制作メモ