アプリアイコン作成 — 必要なサイズを一式書き出す
画像を1枚入れると、iOS・Android・Windows・macOS・Webそれぞれに必要なサイズのアイコンをまとめて書き出します。書き出しはブラウザの中だけで行われます。
アプリのアイコンは1つの画像では済みません。iOSはApp Store用の1024pxからSpotlight用の小さなものまで、Androidは密度ごとに、Windowsはタイルのサイズごとに、それぞれ用意する必要があります。
手作業で書き出すと、1サイズ抜けただけで審査に落ちたり、特定の画面でぼやけたりします。まとめて作れば漏れません。
主なサイズ
| プラットフォーム | 代表的なサイズ | 用途 |
|---|---|---|
| iOS | 1024px | App Storeの掲載 |
| iOS | 180 / 120px | iPhoneのホーム画面 |
| iOS | 167 / 152px | iPadのホーム画面 |
| Android | 512px | Google Playの掲載 |
| Android | 192 / 144 / 96px | 画面密度ごとのランチャー |
| Web | 512 / 192px | ホーム画面に追加したとき |
余白を見込んで作る
iOSのアイコンは角が丸められ、Androidでは端末ごとに円や角丸四角に切り抜かれます。図案を四隅いっぱいまで広げると、切り取られて欠けます。
Androidのアダプティブアイコンでは、中央の約66%だけが確実に見える領域です。ロゴや文字はこの内側に収めてください。外側は背景として塗りつぶすつもりで作ります。
iOSでは自分で角を丸める必要はありません。四角い画像のまま書き出せば、OSが丸めます。あらかじめ丸めた画像を出すと、二重に丸まって縁が濁ります。
小さくなっても分かる図案に
ホーム画面に並んだときの大きさは、実際には1cm角ほどです。細い線、小さな文字、複雑なグラデーションは消えます。App Store用の1024pxで作り込んでも、利用者が毎日見るのは小さいほうです。
うまくいくのは、単純な形と2〜3色です。書き出したあと、192pxや120pxの結果を実際の端末で見てください。他のアプリと並べて見分けがつくかどうかが判断の基準です。
文字を入れるなら1〜2文字までです。アプリ名はアイコンの下に表示されるので、アイコンの中に書く必要はありません。
使うときのこつ
- •元画像は1024px以上の正方形を用意してください。小さい画像を引き伸ばすとぼやけます。
- •透過が必要ない場合は、背景を塗りつぶしておくほうが安全です。iOSは透過を受け付けません。
- •Webアプリとして使う場合は、ファビコン作成のほうがHTMLに貼るコードまで作ります。
- •画像はどこにも送信されません。書き出しはすべてブラウザの中で行われます。
よくある質問
角は自分で丸めるべきですか?
丸めないでください。iOSもAndroidもOS側で丸めます。丸めた画像を出すと二重になります。
透過のあるPNGでよいですか?
Androidやウェブでは使えますが、iOSのApp Store用アイコンは透過を受け付けません。背景を塗りつぶしてください。
元画像はどのくらいの大きさが必要ですか?
1024px以上の正方形をおすすめします。これより小さいと、大きなサイズを書き出すときに粗くなります。
画像はアップロードされますか?
されません。処理はすべてブラウザの中で行われます。
