iPhoneアプリのアイコンに枠や角丸を描かない理由と作り方

iPhone アプリのアイコンは、角丸の縁取りや枠を描かず、背景を正方形の端まで全面に敷いた画像で作ります。角を丸めるのは iPhone なので、画像の中にも角丸を描くと、角丸が二重になって白い余白や線が見えてしまいます。

私たちが作る iPhone アプリのアイコンには、決まりが1つあります。アイコンの画像の中に、角丸の縁取りや、ガラスのような枠を描かないことです。背景は正方形の画像の端まで全面に敷き、角を丸めるのは iPhone に任せます。

この決まりは、オーナーの経験から来ています。アイコンに枠を描いていると、App Store の審査で指摘されることが多かったからです。

歯のホワイトニングを試せるアプリ（Shade Preview）のアイコンで作った見本。右は説明のために作った、よくない例

アプリのアイコンに枠を描きたくなる理由

アイコンを作る時、四角い画像のままだと、出来上がりの姿が想像しにくいものです。そこで、デザインの段階で角丸の形や、縁の光り方まで描き込みたくなります。

仕上がりを想像したくて、つい枠まで描いてしまう

私たちが決めた作り方

アイコンは、背景を全面に敷いた正方形で作る（イメージ写真）

Shade Preview の設計書には、審査への備えの1つとして「枠なしアイコン」と書いてあります。アイコンの候補を見比べるページにも「角丸はこのページの表示用です。実際のアイコン画像は全面ベタで、角丸・枠・文字はありません」と書き添えました。候補を見比べる時だけは、仕上がりが想像しやすいように角を丸めて見せ、実際に使う画像には入れない、という分け方です。

画像は全面ベタ、角丸は iPhone に任せる

アイコンが無いと、アップロードもできない

不動産の業務アプリ（Kaitori Base）では、開発の途中まで、アイコンを入れていませんでした。TestFlight に上げようとした時、アーカイブの検証でアイコンが必要だと分かり、その時に 1024×1024 の1枚を入れています。今の Xcode では、1024×1024 の画像を1枚入れれば、いろいろな大きさのアイコンは自動で作られます。