アプリアイコンのサイズと作り方：iOS・Android・Google Play

アプリアイコンのサイズは、iOS向けの素材、Androidのランチャー用素材、Google Play掲載用画像を分けて決めます。Google Play用の512 × 512 px画像を作っただけでは、Androidのアダプティブアイコン一式にはなりません。先に納品先を整理すると、同じロゴを何度も作り直さずに済みます。

PixsoのUIデザインツールでは、基本形をベクターで作り、用途別のフレームで余白や縮小時の見え方を比較できます。アプリへの組み込みはXcodeやAndroid Studioで行う工程として分け、デザイン側で必要な素材を用意しましょう。

第1部：iOSアプリアイコンのサイズと制作方法

1024 pxの基本形と、レイヤー構成を用意する

AppleのIcon Composerを使った制作手順では、iPhone・iPad向けの素材を1024 × 1024 pxのキャンバスで準備し、SVGやPNGのレイヤーを取り込みます。アイコンの背景、主要なシンボル、別々に調整したい要素を分けておくのが出発点です。

たとえば、予定管理アプリのアイコンにカレンダーと小さな丸印を使う場合、二つを最初から一枚に統合せず、個別に調整できる状態で渡します。小さな表示で丸印が消えるなら、キャンバスを拡大するのではなく、図柄を簡略化したり、丸印の大きさを見直したりします。

素材側に最終的な角丸マスクを焼き込まず、プラットフォームでの表示を確認します。見た目の効果とアプリへの組み込みは、Icon ComposerとXcodeで仕上げる工程です。Pixsoで見えている状態だけで、すべての外観が完成したと判断しないようにしましょう。

既存のアセットカタログを引き継ぐ場合

古いプロジェクトでは、端末や表示箇所ごとの画像をアセットカタログに登録していることがあります。以下は、そのような個別サイズの考え方を説明する従来の資料です。新規制作の必須ファイル一覧ではなく、既存資産を調べる際の参考として扱います。

新方式へ移すときは、旧OSでも従来の見た目を残したいのか、生成される見た目へ切り替えてよいのかを開発担当者と決めます。デザイナーがサイズ表だけを見て旧アセットを削除すると、意図していた互換性を失うおそれがあります。既存ファイルを残したまま、採用する方式を合意してから納品しましょう。

第2部：Androidはアダプティブアイコンを中心に考える

前景・背景と安全領域を分ける

Androidのアダプティブアイコンの公式仕様では、前景と背景を別レイヤーにし、それぞれ108 × 108 dpで設計します。中央66 × 66 dpは、形状の異なるマスクでも切れない領域です。周囲にはマスクや表示効果のための余裕を残します。

予定管理アプリのカレンダーなら、日付を表す主要な形を中央に収め、外側の背景は端まで広げます。丸いマスクで図柄が欠けないことに加えて、角の丸い四角形でも余白が不自然にならないか確認します。一つのマスクにぴったり合わせるより、複数の形でも識別できる輪郭を優先しましょう。

テーマに合わせた単色表示を設計する場合は、モノクロ用の図柄も準備します。色の違いだけで意味を分けていた部分は、単色になると一つにつながって見えることがあります。輪郭と抜きの形だけで、元のアイコンだとわかるかを比較します。

密度別のpxサイズは、基準と用途をセットで扱う

従来の48 dpを基準にしたビットマップでは、次のように密度によってpx数が変わります。この表は既存のランチャー画像を確認するための例であり、108 dpのアダプティブアイコンをそのまま書き出すサイズ表ではありません。

納品時には「108で作りました」だけでは情報が足りません。設計単位がdpなのか、画像のpx数なのか、前景と背景のどちらなのかまで伝えます。単位を省略しないだけで、開発側が誤った倍率で素材を取り込むのを防ぎやすくなります。

第3部：Google Play掲載用アイコンは別に書き出す

Google Playの掲載用アイコン仕様は、512 × 512 px、32ビットPNG、sRGB、最大1,024 KBです。角丸と外側のドロップシャドウはGoogle Play側で付くため、元の画像へ焼き込みません。図柄の内部にある陰影と、アイコン外周の影は分けて考えます。

キーラインは、形の違う図柄の見た目の大きさをそろえるための目安です。細長いロゴと円形のロゴに同じ幅を設定しても、同じ存在感には見えません。外接する四角形だけでなく、図柄が占める面積と周囲の余白を見て位置を調整します。

透明な背景の見え方を、制作画面の白いキャンバスだけで判断しないことも重要です。ブランドに合う背景を決め、明るい表示と暗い表示で図柄が読めるか確認します。古い資料にある「75%へ縮小」は旧仕様からの移行についての説明であり、あらゆる提出エラーの現在の処理を示すものではありません。

第4部：Pixsoで基本形から納品素材を整理する

1. 基本の図柄と用途別フレームを作る

まず、アイコンの主要な図柄を編集できる状態で作ります。次に、iOS向け、Android前景・背景、Google Play掲載用を別フレームに整理します。名称には用途を入れ、どれが提出画像で、どれが確認用のプレビューなのかを区別してください。

予定管理アプリなら、カレンダーの輪郭を共通の基本形とし、Androidの前景は中央へ収めます。Google Play用では512 pxの正方形全体で構図を調整します。同じブランドに見えることは大切ですが、キャンバスやマスクが違うため、すべてを同じ倍率にする必要はありません。

2. 縮小表示とマスクを別々に確認する

大きな制作画面では、細い線や小さな隙間もきれいに見えます。確認用フレームで縮小し、日付の数字、カレンダーのリング、背景との境界がつぶれないか見ます。小さな装飾を増やすより、アプリを識別する主要な形を残すほうが有効な場合があります。

プレビューのマスクは確認用に分けます。書き出す前景や背景へ誤って含めないよう、レイヤー名にも用途を記しておきましょう。実機や開発環境での最終確認は、デザイン上のプレビューとは別に行います。

3. 形式と倍率を選び、書き出したファイルを開く

Pixsoのエクスポート設定で、選択したフレームや要素の形式と倍率を指定します。SVGとPNGのどちらを渡すかは、組み込み先と素材の内容に合わせます。設定しただけで完了とせず、書き出した画像の寸法、背景、余白を実際のファイルで確認してください。

納品メモには「Google Play掲載用・512 × 512 px・PNG」のように、用途・寸法・形式をまとめます。Androidなら前景・背景・モノクロの対応関係、iOSならレイヤー構成や対象の制作方式を添えます。見た目が同じファイルほど、名前と用途の説明が重要になります。

サイズ表から始める前に、使う場所を決める

アプリアイコンは、一枚を何種類にも縮小するだけでは完成しません。iOSの制作方式、Androidのマスクとレイヤー、ストア掲載用画像を分けることで、必要な修正が見えてきます。Pixsoで基本形と用途別の表示を並べ、図柄が小さくなっても伝わる状態を作りましょう。

Pixsoでアプリアイコンをデザインする