iPod touch デザインの黄金律は80ピクセル
ぼけーっと iPhone Application List などを眺めておりましたら、一体 iPhone や iPod touch のアイコンサイズって何ピクセルなのだ?という疑問が湧いて来ました。
とりあえず iPhoney だったらWebブラウザだけにピクセルのサイズは正確そう。そこへフォトショップにて iPhoneのペーパークラフト のPDFファイルを重ね合わせてみたところ…
58×58ピクセルから60×60ピクセル程度だということが分かりました。
前出の iPhone Application List で見つけた、正確そうなサイズのサイトでも、だいたいその程度の大きさ。
いにしえよりアイコン標準サイズは32×32ピクセルなので、iPhone ではその倍程度のサイズになっているということですね。
ところが iPhone のタッチスクリーン解像度というのは、一般的にMacで用いられる72ppiではなくて160ppiなんですよ。ここ重要。
ピクセルの密度が倍以上あるので、iPhone 上で見るぶんには大きさを感じさせないサイズです。しかも、それが計算し尽くされていて、ちょうどタップするときに指を触れやすい面積。
<参考>
というのを検証された方が他にもいらっしゃいまして、アイコンのPSDファイル iPhone style icon psd kit というのを配布してる作者さんも、自力でそのサイズを導き出してるっぽいですね。同じく58×58ピクセルと仰せなので、ドロップシャドウ入りならやはり60×60ピクセルといったところでしょう。
</参考>
そしてさらに注目したいのが、誤って隣のアイコンに触れない程度の、適度な間隔。
この間隔というのがまた計算されていて、お隣さん同士は20ピクセル離れてます。各アイコンにつき左右10ピクセルずつのマージンをとって並べているんです。
つまり、ひとつのアイコンに対して、80ピクセルがの幅が用意されているのです。(アイコン60ピクセル、マージン左右10ピクセルずつ)
これの何が良いかというと、iPhone の特徴である縦表示でも横表示でも対応できるという点。
実際には iPhone のメニュー画面自体は横表示できませんが、これがSafariとなると平気で横表示されて、いい加減なWebサイトなんかだと少々狂ってしまうわけです。
iPhone のスクリーンサイズは480×320ピクセル。縦横の差は160ピクセル。これらの最大公約数である「80ピクセル」で配置してやれば、縦でも横でも破綻なくレイアウトできる算段です。
例えば、60×60ピクセルのアイコンを内包した80×80ピクセルのブロックを、floatで12個並べた際、縦と横の表示ではそれぞれ以下の画像のようになります。
縦表示(320px)
横表示(480px)
「80ピクセル」でなくとも公約数であれば、40ピクセルでも20ピクセルでもfloatが崩れることなく綺麗に収まりますけども、タップしやすいアイコンサイズという点ではやはり「80ピクセル」には敵いません。
よって、
アイコン幅60ピクセル + 左右マージン10ピクセルずつ = 80ピクセル
というのが、iPhone や iPod touch 向けのデザインを行う際の黄金律になるかと思います。ご参考まで。
※ 標題は iPod touch となっておりますが、おそらく十中八九は iPhone と同じだろうという前提でやっております。
購入は以下から(笑)
Apple iPod touch 16GB
Apple iPod touch 8GB
投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2007年9月15日 16:39