スマホアプリ用の画像のザックリ準備法

iOSアプリとAndroidアプリ作成に必要な画像サイズ、覚えきれないしテンプレートも途中でほったらかしてしまったりで、結局毎回調べます。
まとめ記事もちょくちょくあって便利なのですが、見ていると数が多くて混乱するので自分用に最低限のまとめ。
これからアプリを作成する方も「これだけあればいいんだ〜」と安心できる、かも。

iOSとAndroidで同じ見た目のアプリ(タブレットは考えない)を作る時、画像の用意はこんな感じです。もうちょっと洗練さたいですが。

参考

まずちゃんと読んだ方がいい記事。

新規デザインの画面サイズ

デザイン作業でファイル新規作成する際のサイズの決め方ですが、いろんな端末の画面サイズを考えて悩ましいものの、ベクター系ツールで(iOS/Android両対応アプリの場合)iPhone6の画面サイズ(375px*667px)から始めます。

screen_android_ios
Sketchでmdpi(360x640px)とiphone6(375x667px)のアートボードを並べたところ。ここから画像を2倍で書き出すとxhdpiとRetina用になります。

だいたい似てるしメジャーなサイズだからオッケーオッケー
画面小さいものや大きいものはエンジニアに相談しながら微調整で対応です。

Photoshopなどのラスター系ツールで作業する際は4倍サイズ(xxxhdpi)を用意します。

作るアプリがAndroidオンリーの時はAndroidの画面比率に合わせます。

↓解像度ごとのよくあるサイズ。縦の長さは端末によって異なります。

  • hdpi・・・540x920px
  • xhdpi・・・720x1280px
  • xxhdpi・・・1080x1920px
  • xxxhdpi・・・1440x2560px

画像スライスの書き出し

先ほどの画面サイズで画面をデザインした後、次のような比率で書き出します。

  • 1倍(1x)・・・デフォルト、mdpi
  • 1.5倍(1.5x)・・・hdpi
  • 2倍(2x)・・・Retina、xhdpi
  • 3倍(3x)・・・iPhone6 plus、xxhdpi
  • 4倍(4x)・・・xxxhdpi

SVGだと1枚の画像で拡大縮小自在なので楽なんですけどね。

AndroidだとiOS用の画像と違ってファイル名に「@」が使えません。
ファイル名で見分けるのも面倒なので、サイズごとに同名のファイルになるようにし、フォルダに分けています。

スプラッシュ

  • 320x480(iPhone)Default.png
  • 640x960(iPhone Retina)Default@2x.png
  • 640x1136(iPhone5)Default-568h@2x.png
  • 750x1334(iPhone6)Default-667h@2x.png
  • 1242x2208(iPhone6 plus)Default-736h@3x.png

全シンプルなデザインや無地を使う場合には、一枚画像より画像パーツを配置して作った方が楽です。

アイコン

アイコンは用途によりサイズが沢山で、一つずつ作ってると埒があかないので便利なツールを使います。
1024x1024pxの画像を準備して一括リサイズしてしまえ。

iOSとAndroidアプリのアイコンリサイズを一発でやります。
フォルダに分けて出力してくれます

App Icon Resizer
Apple Watchにも対応してます

その他

スライスを倍率ごとに書き出して…とやっていても、謎の余白が入ったり縦横比が微妙に違ったりで、一つ一つ修正することもあります。
画像以外の部分、余白や文字サイズの指定も綺麗にできれば…と思います。むずい。

あ〜〜〜〜〜〜〜ラクした〜〜〜い

Pocket

The following two tabs change content below.
Yuko Hashimoto

Yuko Hashimoto

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。