ピクセル濃度に依存しないWebページの制作方法

iPhone 4のようなディスプレイピクセル密度が高いデバイスの登場で、WebデザイナやWebデベロッパの関心は、異なるピクセル濃度のデバイスにどのように対応するかといった点に集まりつつある。基本となるテクニックのいくつかはすでにいくつかのブログで紹介されている。

• iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方
• iPhone 4に対応したWebサイトを作る方法
• iPad向けWebアプリケーション開発テクニック

これまでマイコミジャーナルで紹介したテクニックは細部のテクニックが多い。そこでSenchaブログに掲載されたResolution Independent Mobile UIを紹介したい。モバイルデバイスにも対応したJavaScriptフレームワークSencha Touchで使われているテクニックの根本をまとめたもので、ピクセル濃度の異なるデバイスに対応させるための基本的な方法として参考になる。

Resolution Independent Mobile UIではまずピクセル濃度の違いを説明。iPadのピクセル濃度は132ppiで、iPhone 4は326ppi。このままだとiPhone 4の画面ではすごく小さくレンダリングされることになるが、iPhone 4では自動的に縦2倍、横2倍に広げてレンダリングするため、実質的なppiは163ppiとなる。iPadよりもiPhone 4の方が15%密度が高いことになり、iPhone 4の方がiPadよりも15%小さくレンダリングされることになるという。ppiの違いは物理的に描画されるサイズの違いとして現れる。

こうしたppiの違いをふまえつつ、デザインを設計する段階ではピクセル濃度を配慮する必要があると説明している。その理由は次の2つ。

• たとえば132ppi向けにボタンをデザインしたとすると、より高いppiのデバイスでは小さく表示されて、そもそもタップすらできない状況になる可能性がある。
• ギザギザに表示されたりぼやけて表示されるのを防ぐため、画像やUIは賢くスケールさせる必要がある。

そこでResolution Independent Mobile UIでは次の方法を複数のピクセル濃度のデバイスに対応させる方法として採用していることを紹介。

1. 単位はすべてemで指定する。
2. bodyのfont-size属性にパーセント指定を実施して全体のサイズを一気に変更する。

emはその場所の文字の高さを基本単位とした相対単位。まずすべてのサイズを相対単位emで指定するようにする。次に使うのはfont-size属性。CSS font-size属性は継承されるため、bodyのfont-size属性の値を変更するとemのすべてが変わることになり、結果としてページ全体のスケールが一気に変わることになる。指定はパーセンテージを使う。どのデバイスかの判断にはJavaScriptやCSS3メディアクエリを利用する。

JPEGやGIF、PNGなどの画像はスケーラブルにはできないため、Resolution Independent Mobile UIでは大きいサイズの画像を用意し、em指定でサイズを指定してスケールダウンする方法を紹介している。この方法であれば、元画像サイズの大きさを越えない限り、それなりに綺麗にスケールして表示されることになる。ただし、その分余分な通信帯域を食うという課題がある。

なお、サイズをすべてemで指定し、bodyのfont-size属性に指定するパーセントでデバイスごとにスケールを変更する方法は、異なるピクセル濃度のデバイスに対応させる方法として有効であるほか、ブラウザ上のズーム機能に対しても効果を発揮する。