iPod touch と Webページの表示領域

これまで光沢系の保護フィルムをiPod touchに貼っていた王子ですが、指紋や映り込みが気になり、アンチグレアフィルムというやつにしてみました。簡単に言ってしまえば、「光沢のない液晶画面」にするフィルムなんですが、これがまた意外にイイ！

スクリーン直、または光沢系のフィルムだと、どうも指にひっつく感がありましたが、アンチグレアは見事なまでにスベスベ。iPod touchの操作性が全然違います。機会があったら、皆さんも試してみてくださいね。

そろそろ、iPod touchの使い方だけでなく、サイト構築のあたりのお話もしましょうか。iPod touchユーザの方なら、ごく一般的なサイトであれば、十分に閲覧できることが既にお分かりかと思います。

でも、画面ピッタリに表示されないってことはありませんか？それは、iPod touch向けに最適化されていない可能性があるから。
iPod touchの画面サイズといえば、320×480になっていますが、よくよく考えると画面上部にステータスバーとURLフィールドが表示されています。このサイズを考慮しないと、ピッタリのサイズにはならないんですね。

ステータスバーの高さは20ピクセル、URLフィールドの高さは60ピクセル。このほかにも「変換予測フィールド」や「キーボード」、「ボタンバー」のサイズもしっかりと定義されています。

iPod touchのhight方向の画面サイズ480ピクセルから、ステータスバーの20ピクセルとURLフィールドの60ピクセル、ボタンバーの44ピクセルを引いた領域、つまり 480-20-60-44 = 356、縦356ピクセル、横320ピクセルがWeb表示領域となるわけです。
もし、入力フィールドがあるWebページなら、キーボード領域の216ピクセルをさらに引いて、縦140ピクセル、横320ピクセルとなるわけです。

これを無視してWebページを作った場合・・・区切りよく表示されませんから、ユーザは入力してはスクロールを繰り返さねばなりません。これではせっかくの快適なインタフェースが台無しです。

携帯端末向けのサイトデザインをする際は、しっかりと認識しておかなければならないポイントですね。操作性の悪いサイトは、ユーザのリピート率に直結することをお忘れなく。