iOSアプリとAndroidアプリ作成に必要な画像サイズ、覚えきれないしテンプレートも途中でほったらかしてしまったりで、結局毎回調べます。
まとめ記事もちょくちょくあって便利なのですが、見ていると数が多くて混乱するので自分用に最低限のまとめ。
これからアプリを作成する方も「これだけあればいいんだ〜」と安心できる、かも。
iOSとAndroidで同じ見た目のアプリ（タブレットは考えない）を作る時、画像の用意はこんな感じです。もうちょっと洗練させたいですが。
まずちゃんと読んだ方がいい記事。
デザイン作業でファイル新規作成する際のサイズの決め方ですが、いろんな端末の画面サイズを考えて悩ましいものの、ベクター系ツールで（iOS/Android両対応アプリの場合）iPhone6の画面サイズ（375px*667px）から始めます。
Sketchでmdpi（360x640px）とiphone6（375x667px）のアートボードを並べたところ。ここから画像を２倍で書き出すとxhdpiとRetina用になります。
だいたい似てるしメジャーなサイズだからオッケーオッケー
画面小さいものや大きいものはエンジニアに相談しながら微調整で対応です。
Photoshopなどのラスター系ツールで作業する際は4倍サイズ（xxxhdpi）を用意します。
作るアプリがAndroidオンリーの時はAndroidの画面比率に合わせます。
↓解像度ごとのよくあるサイズ。縦の長さは端末によって異なります。
先ほどの画面サイズで画面をデザインした後、次のような比率で書き出します。
SVGだと1枚の画像で拡大縮小自在なので楽なんですけどね。
AndroidだとiOS用の画像と違ってファイル名に「@」が使えません。
ファイル名で見分けるのも面倒なので、サイズごとに同名のファイルになるようにし、フォルダに分けています。
全シンプルなデザインや無地を使う場合には、一枚画像より画像パーツを配置して作った方が楽です。
アイコンは用途によりサイズが沢山で、一つずつ作ってると埒があかないので便利なツールを使います。
1024x1024pxの画像を準備して一括リサイズしてしまえ。
iOSとAndroidアプリのアイコンリサイズを一発でやります。
フォルダに分けて出力してくれます
App Icon Resizer
Apple Watchにも対応してます
スライスを倍率ごとに書き出して…とやっていても、謎の余白が入ったり縦横比が微妙に違ったりで、一つ一つ修正することもあります。
画像以外の部分、余白や文字サイズの指定も綺麗にできれば…と思います。むずい。
あ〜〜〜〜〜〜〜ラクした〜〜〜い
