tikeda's blog

Flower, Plant, Travel, Design, My life stories

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

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

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

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

ヘッダー画像

iPhoneAndroid
  • - 3GSw320xh44
  • 4w640xh88
  • x1w480xh45
  • x2w960xh90

タブにのせるアイコン

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

スプラッシュスクリーン

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

Store/Market用画像

iPhoneAndroid
  • w512xh512
iTunes Store
※このサイズだけ作っておけば、iPhone用の他のアイコンは吸収できる
  • w320xh480
  • w512xh512
※解像度の高い端末利用かマーケット。今は不明確


  • w480xh854 or800
Android Market用スクリーンショット
※サンプルは古い比率です

ホーム画面用アイコン

iPhoneAndroid
  • - 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;
  }