iPhoneに搭載されているWebブラウザ「Safari」は、WindowsやMac OS X向けのWebブラウザとほぼ同等の機能を備えている。そのため、PC向けに制作されたWebページはiPhoneでもPCで閲覧する場合とほぼ同じレイアウト・挙動で表示できる。しかし、iPhoneはPCに比べて画面サイズが小さいため、iPhone版Safariに向けた専用のレイアウト・機能を用意しておくと、iPhoneから利用した場合のユーザビリティが大幅に向上する。後編では、このような「iPhone専用ページ」の作成例を紹介する。
よりiPhoneでの閲覧に適したWebサイトを作る
一般的なPC向けWebサイトでも、本記事前編で紹介したような修正を加えるだけでiPhoneからの閲覧がしやすいWebサイトになる。しかし、これはあくまでPC向けのWebページをiPhoneでも閲覧しやすくするだけのものである。いっぽう、Googleなどは、画面レイアウトや操作インターフェイスなどを変えて、さらにiPhoneで利用しやすいような専用ページを提供している。たとえば「iGoogle」では、iPhone版Safariで閲覧した場合は図1のような、iPhoneで閲覧しやすいレイアウトで表示される。
|
| 図1 iPhone向けにカスタマイズされている「iGoogle」 |
このような「iPhone専用ページ」は、WebページがCSSを使って適切にデザインされていれば、比較的簡単に作ることができる。そこで最後に、既存のWebページをCSSやJavaScriptのカスタマイズだけで「iPhone専用ページ」にする例を紹介しておこう。
なお、サイトごとに「好ましい」ユーザーインターフェイスはもちろん異なるため、以下で示しているサイトデザイン例がすべてのサイトで当てはまるとは限らない。あくまで参考として見てほしい。