アプリアイコンのサイズと透過ルール｜iOS・Android

ロゴは1つ、アプリストアは2つ。そしてAppleが受け付けるファイルは、Googleが求めるファイルとは別物です。それが表面化するのは決まって最悪のタイミング——ビルドは完成しているのに、アルファチャンネルが原因でアップロードが通らない、というときです。

Appleが求めるのは、背景が不透明な正方形の1024x1024アイコンです。Playが求めるのは512x512の32ビットPNGで、技術的にはアルファに対応していますが、Google自身のデザイン仕様では使うべきではないとされています。そしてどちらのストアも、仕上げ済みに見えるファイルは求めていません——角の処理もエフェクトも、アップロード後にストア側が加えるからです。ここでは、それぞれが何を要求しているのか、そして1つのロゴから両方のファイルを作る方法を見ていきます。

Apple：1024ピクセルの正方形、透けるものは一切なし

AppleのHuman Interface Guidelinesは、iOS・iPadOS・macOSのアプリアイコンのレイアウトサイズを1024x1024 pxの正方形、カラースペースはsRGB、Gray Gamma 2.2、またはDisplay P3と定めています。Appleが現在推奨する方法はIcon Composerで、前面のレイヤーを読み込み、背景はツール内で指定します。ただし統合済みの画像も引き続き使えます。レイヤーは制御の幅が広がるというだけで、必須ではありません。

初めて申請する人がつまずくのは背景です。読み込む背景レイヤーについてのAppleの指示は率直で、余白なく全面に敷き、不透明にすること。背景が透過した1024pxのPNGは、App Storeアイコンとしては無効です。アップロードすると、App Store Connectは「ITMS-90717: the App Store icon can't be transparent or contain an alpha channel」を返します。唯一の例外はダーク外観のバリアントで、こちらはシステム側の背景が透けるように、背景を透過させて用意するようAppleは求めています。それ以外の場所では、マークの背後に置く色を決めて焼き込んでおきましょう。

他のAppleプラットフォームではレイアウトサイズが変わります。watchOSは1088x1088、visionOSは1024x1024でどちらも円形にマスクされ、tvOSは横長の800x480です。作り方も変わり、tvOSとvisionOSのアイコンはIcon Composerではなく、Xcodeでレイヤー化された画像スタックとして組み立てます。

Google Play：512ピクセル、アルファは可、それでも透過は失敗のもと

Playのストア掲載用アイコンは、アルファ付きの32ビットPNG、512x512 px、sRGB、最大1024KBです。この一文だけを読むと、すでに手元にある透過の切り抜きで問題なさそうに見えます。

ところが、Googleのアイコンデザイン仕様がその道を塞ぎます。透過した素材は、Google PlayのUIの背景色がそのまま表示されるのです。マークはPlayが描画する面の上に浮くことになり、暗いロゴはダークモードで消えてしまいます。Googleの助言は、ブランドに合った背景色を選ぶこと。

Playの決まりはあと2つ。ランキングや価格、Playのカテゴリを示唆するバッジやテキストを入れないこと。そして、ストア掲載用アイコンは端末のランチャーアイコンとは別物であること。そのアダプティブアイコンは108x108 dpのレイヤーを使い、OEMのマスクで絶対に切り取られないと保証されているのは内側の66x66 dpだけです。

1つのロゴから両方のファイルを作る

どちらのファイルも出発点は同じ、つまり自分のマークが、それまで乗っていた何かからきれいに分離されている状態です。ロゴが仕入先から届いたJPEGや、印刷物を撮った写真としてしか存在しないなら、まず切り抜いて、本物のアルファチャンネルで形だけを取り出しましょう。remover.bgならマークを背景から持ち上げ、エディターで単色やブランドカラーの上に配置できます——Appleが求める統合の工程そのものです。

うまくいく手順は次のとおりです。

1. 背景を削除して、ロゴだけの状態にします。エッジの確認は白ではなく暗い色の上で行ってください——細い線やセリフのアラは、白いプレビューでは隠れてしまいます。
2. 背景をブランドカラーに設定してPNGで書き出します。プレスキットやファビコン用に、透過版も残しておきましょう。
3. 使い慣れたデザインツールでそのPNGを正方形のカンバスに置き、Apple用に1024x1024、Play用に512x512で書き出します。サイズ調整はそちらの役目であって、背景削除ツールの仕事ではありません。

スキャンや撮影で取り込んだロゴについてはロゴの背景を削除して透過PNGにする方法が細かいケースを扱っていますし、透過PNGのガイドでは、そのマスターファイルを残しておく価値を説明しています。

角丸と影はストアに描かせる

Playはこの点を明確に定めています。アイコンサイズの30%の半径で角丸をストア側が付け、アップロード後に独自の影を加えるので、どちらも入れないこと。Appleも正方形をシステムの角丸長方形にマスクし、独自のハイライトや屈折、半透明効果を適用したうえで、あらかじめマスクしたレイヤーはそれらの効果を損ない、エッジがギザギザに見える原因になると警告しています。

つまり、角丸を先に付けない、影を付けない、ベベルもグローもなし。この制約はアイコンに固有のものです——商品写真なら、自然な影を付ける方法で作る接地影こそが、貼り付けたように見えるのを防いでくれます。

どちらのストアもマスクをかけるので、マークの重要な部分は中央に寄せておきます。Appleのガイドラインは、マスクで切れてしまわないよう主要な要素を中央に配置することとしています。Playのキーライングリッドは、多くの人が思っているのとは働きが違います。あれは境界線ではなく、位置合わせのためのガイドです。Googleの指示は、可能なかぎり素材全体をアートワークで埋めること、そしてロゴまわりの形状がブランドにとって不可欠な場合にだけキーラインに頼ること。用心して余白を広く取ると、アイコンは並んでいる他のどの掲載よりも明らかに小さく見えてしまいます。

30%の半径が実際に削るのは四隅なので、隅まで押し込んだワードマークは端が欠けます。円形にマスクされるwatchOSとvisionOSでは、端から端まで伸びたワードマークは最初と最後の文字がそのまま消えます。

アップロードの前に

• Apple：1024x1024のPNG、正方形、完全に不透明、角は尖ったまま。
• Play：512x512の32ビットPNG、最大1024KB、透過ではなくブランドカラーの背景、角は尖ったまま。
• 両ストアでアートワークと色をそろえる：ユーザーに認識してもらうのは1つのアプリであって、2つではありません。
• どちらもサムネイルサイズで確認する。1024で読み取れるディテールも、40ピクセルでは消えます。

アイコンは一度直してしまえば、これ以降のリリースではずっとそのまま使えます。