Web-Apps 開発ツール 読了目安 約4分

アプリアイコン一括生成ツール｜1枚の画像からiOS・Android・Web用サイズをZIPで作成

アプリを作るたびに、アイコンを何種類ものサイズに書き出すのは地味に手間のかかる作業です。1枚の元画像から必要なサイズをまとめて作り、フォルダ分けしたZIPで受け取れるツールを作りました。画像は送信せず、ブラウザの中で処理します。

アプリアイコン一括生成

画像を選ぶと「アイコンを作成」を押せるようになります。

    画像はこのページの中だけで処理され、サーバーには送信されません。

    出力されるファイル

    対象ZIP内の場所サイズ
    iOSios/AppIcon.appiconset/1024×1024（Contents.json付き）
    iOS 旧来サイズ（任意）ios/legacy/20〜180px の各サイズ
    Androidandroid/mipmap-mdpi 〜 mipmap-xxxhdpi48・72・96・144・192px
    Google Playandroid/play-store-512.png512×512
    Webweb/16・32・48・180・192・512px

    最近のXcodeでは、1024×1024の画像を1枚登録すれば、各サイズを自動で作ってくれる「単一サイズ」の設定が使えます。このツールが出力する AppIcon.appiconset はこの形式なので、フォルダごとXcodeのアセットに置き換えるだけで使えます。古いXcodeや、サイズごとに見た目を調整したい場合のために、旧来の各サイズも出力できるようにしています。

    使い方

    1. アイコンの元画像を選びます。1024×1024ピクセル以上の正方形のPNGがもっとも綺麗に仕上がります。
    2. 正方形でない画像の場合は、中央を切り抜くか、余白を付けて全体を収めるかを選びます。
    3. 必要な対象（iOS・Android・Web）にチェックを入れ、「アイコンを作成」を押します。
    4. 一覧で仕上がりを確認し、「ZIPをダウンロード」で保存します。

    Flutterプロジェクトでの差し替え方

    Flutterのプロジェクトでは、次の場所のファイルを置き換えます。作業前に元のフォルダをコピーしておくと、元に戻したいときに安心です。

    # iOS
ios/Runner/Assets.xcassets/AppIcon.appiconset/
  → ZIP内の ios/AppIcon.appiconset/ の中身で置き換え

# Android
android/app/src/main/res/mipmap-mdpi/ic_launcher.png
android/app/src/main/res/mipmap-hdpi/ic_launcher.png
  …（xhdpi・xxhdpi・xxxhdpi も同様）
  → ZIP内の android/mipmap-*/ic_launcher.png で上書き

    置き換えたあとは、flutter clean を実行してからビルドし直してください。古いアイコンがキャッシュされて表示が変わらないことがあります。実機では、一度アプリを削除してから入れ直すと確実です。

    Android 8.0以降では、前景と背景を分けた「アダプティブアイコン」が使われる場合があります。このツールは従来形式のアイコンを作るもので、アダプティブアイコンの前景・背景レイヤーは作成しません。本格的に対応する場合は、flutter_launcher_icons などのパッケージの利用も検討してください。

    きれいなアイコンを作るコツ

    • 透過を使わない（iOS）：App Storeに提出するアイコンは透過が認められていません。このツールでは、iOS用のアイコンの透過部分を指定した背景色で塗りつぶして出力します。
    • 角を丸めない：iOSもAndroidも、角丸や形の切り抜きはOS側が行います。元画像は四角いまま用意します。
    • 小さく表示されることを想定する：ホーム画面や設定画面では、アイコンはとても小さく表示されます。細かい文字や細い線は潰れてしまうので、形がはっきりしたデザインにします。
    • 重要な要素は中央に：Androidでは端末によって丸や角丸の四角に切り抜かれます。大事な部分は中央の約6割の範囲に収めると安心です。

    縮小の品質について

    1024pxの画像をいきなり16pxに縮小すると、線がギザギザになったり、色がにじんだりしやすくなります。このツールでは、半分ずつ段階的に縮小してから最終サイズに合わせることで、小さなサイズでもできるだけ滑らかに仕上がるようにしています。

    それでも16pxや32pxのfaviconは情報量が少ないため、元のデザインが複雑だと判別しにくくなります。faviconだけは、ロゴの一部だけを使った簡略版を別に用意するのも1つの方法です。

    Web-Appsの一覧を見る