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

2015.10.26 公開

デザイナー

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

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

1 参考
2 新規デザインの画面サイズ
3 画像スライスの書き出し
4 スプラッシュ
5 アイコン
6 その他

参考

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

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

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

Sketchでmdpi（360x640px）とiphone6（375x667px）のアートボードを並べたところ。ここから画像を２倍で書き出すと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用の画像と違ってファイル名に「@」が使えません。
ファイル名で見分けるのも面倒なので、サイズごとに同名のファイルになるようにし、フォルダに分けています。

スプラッシュ

320×480（iPhone）Default.png
640×960（iPhone Retina）Default@2x.png
640×1136（iPhone5）Default-568h@2x.png
750×1334（iPhone6）Default-667h@2x.png
1242×2208（iPhone6 plus）Default-736h@3x.png

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

アイコン

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

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

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

その他

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

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

Hashimoto

デザイナー

虚弱と加齢の狭間でよれよれになりながら、使いやすいデザインについて日々ボンヤリと考えています。手芸、園芸、寺社仏閣や博物館が好きです。通信制大学を始めました。