トップページ > iPhone・iPad・iPod, エレクトロニクス > iPod touch デザインの黄金律は80ピクセル

http://usapaydayloans.info/illinois/arlington-heights/

iPod touch デザインの黄金律は80ピクセル

iPod touch および iPhone 向けのタップしやすいボタンアイコンとマージンのサイズについて

ぼけーっと iPhone Application List などを眺めておりましたら、一体 iPhoneiPod touch のアイコンサイズって何ピクセルなのだ?という疑問が湧いて来ました。
Apple iPod touch 16GBApple iPod touch 8GB

とりあえず 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ピクセルずつのマージンをとって並べているんです。
iPod Touchアイコン

つまり、ひとつのアイコンに対して、80ピクセルがの幅が用意されているのです。(アイコン60ピクセル、マージン左右10ピクセルずつ)

これの何が良いかというと、iPhone の特徴である縦表示でも横表示でも対応できるという点。

実際には iPhone のメニュー画面自体は横表示できませんが、これがSafariとなると平気で横表示されて、いい加減なWebサイトなんかだと少々狂ってしまうわけです。

iPhone のスクリーンサイズは480×320ピクセル。縦横の差は160ピクセル。これらの最大公約数である「80ピクセル」で配置してやれば、縦でも横でも破綻なくレイアウトできる算段です。

例えば、60×60ピクセルのアイコンを内包した80×80ピクセルのブロックを、floatで12個並べた際、縦と横の表示ではそれぞれ以下の画像のようになります。

縦表示(320px)
iPod Touch アイコン縦表示

横表示(480px)
iPod Touch アイコン横表示

「80ピクセル」でなくとも公約数であれば、40ピクセルでも20ピクセルでもfloatが崩れることなく綺麗に収まりますけども、タップしやすいアイコンサイズという点ではやはり「80ピクセル」には敵いません。

よって、

アイコン幅60ピクセル + 左右マージン10ピクセルずつ = 80ピクセル

というのが、iPhone や iPod touch 向けのデザインを行う際の黄金律になるかと思います。ご参考まで。

※ 標題は iPod touch となっておりますが、おそらく十中八九は iPhone と同じだろうという前提でやっております。

購入は以下から(笑)
Apple iPod touch 16GBApple iPod touch 16GB

Apple iPod touch 8GBApple iPod touch 8GB



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2007年9月15日 16:39

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介/ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 また、YouTubeのチャンネル登録はこちらからできます。

ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー