スマートフォン用に毎回作る画像

スマートフォン用サービスを作る時に必要な画像を用意する際、よくサイズを忘れがちな為、社内用にドキュメントを最近まとめてました。内容が一般的なのでダイアリーにも書いておきます。Androidはひとくくりにするには、不明確な点も多いし、今後アップデートも多そうですが、参考までという事で。ちなみにファイルはPNG。

アプリケーションアイコン

iPhone	Android
- 3GSw57xh57 4w114xh114	w72xh72 ※2.0。割と細かいので以下参考 Icon Design Guidelines, Android 2.0

ヘッダー画像

iPhone	Android
- 3GSw320xh44 4w640xh88	x1w480xh45 x2w960xh90

タブにのせるアイコン

iPhone	Android
- 3GSw40xh33 4w80xh66 ※selectedはauto effectの為画像は不要	x1w32xh32 x2w64xh64 ※背景はのぞく ※selected画像も別に用意

スプラッシュスクリーン

iPhone	Android
- 3GSw320xh480 4w640xh960	x1w480xh854 x2w960xh1708 ※上下は端末によってきれる

Store/Market用画像

iPhone	Android
w512xh512 ※iTunes Store ※このサイズだけ作っておけば、iPhone用の他のアイコンは吸収できる w320xh480	w512xh512 ※解像度の高い端末利用かマーケット。今は不明確 w480xh854 or800 ※Android Market用スクリーンショット ※サンプルは古い比率です

ホーム画面用アイコン

iPhone	Android
- 4w129xh129 ※アップルのサイトにあわせた（http://www.apple.com/apple-touch-icon.png） ※表面のてかりなくす場合の指定：link rel="apple-touch-icon-precomposed" ※144 x 144のがよい？

ウェブビューで画像を使う場合

あくまで1つの方法として。

HTML

retina display対策の為、2倍で作ってwidth,heightを指定して半分に

  <img src="64_48.png" width="32" height="24" />

CSS

retina display対策の為、2種類の画像を使いわけ

/* retina display以外の指定 */
body {
  background: url(32_24.png) no-repeat;
}

/* retina displayの指定 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background:#fff url(64_48.png) no-repeat;
    /* サイズの指定を忘れずに */
    -webkit-background-size: 32px 24px;
  }