link3358 link3359 link3360 link3361 link3362 link3363 link3364 link3365 link3366 link3367 link3368 link3369 link3370 link3371 link3372 link3373 link3374 link3375 link3376 link3377 link3378 link3379 link3380 link3381 link3382 link3383 link3384 link3385 link3386 link3387 link3388 link3389 link3390 link3391 link3392 link3393 link3394 link3395 link3396 link3397 link3398 link3399 link3400 link3401 link3402 link3403 link3404 link3405 link3406 link3407 link3408 link3409 link3410 link3411 link3412 link3413 link3414 link3415 link3416 link3417 link3418 link3419 link3420 link3421 link3422 link3423 link3424 link3425 link3426 link3427 link3428 link3429 link3430 link3431 link3432 link3433 link3434 link3435 link3436 link3437 link3438 link3439 link3440 link3441 link3442 link3443 link3444 link3445 link3446 link3447 link3448 link3449 link3450 link3451 link3452 link3453 link3454 link3455 link3456 link3457 link3458 link3459 link3460 link3461 link3462 link3463 link3464 link3465 link3466 link3467 link3468 link3469 link3470 link3471 link3472 link3473 link3474 link3475 link3476 link3477 link3478 link3479 link3480 link3481 link3482 link3483 link3484 link3485 link3486 link3487 link3488 link3489 link3490 link3491 link3492 link3493 link3494 link3495 link3496 link3497 link3498 link3499 link3500 link3501 link3502 link3503
トップページ > iPhone・iPad・iPod, エレクトロニクス > iPod touch デザインの黄金律は80ピクセル

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 交換レンズ編

最近のエントリー