ぼけーっと 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