Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

AppStoreアイコンは透過させてはいけない

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

AppStoreアイコンは透過ができない

目次

環境

「イメージにアルファチャンネルや透過を含めることはできません」

App Store アイコンを作成する際は、ヒューマンインターフェースガイドラインに従ってください。

そのヒューマンインターフェースガイドラインは英語。

Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.

拙訳。背景はシンプルにして、透過は避けてください。アイコンは不透明で、背景を切り取らないこと。シンプルな背景を与えて、近くにある他のアイコンを圧倒しないように。アイコン全部に内容を詰め込む必要はありません。

それからもう一つ。

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

拙訳。アイコンの角は四角にしておいてください。システムが自動的に角をとって丸くします。

まとめ

というわけで、ヒューマンインターフェースガイドラインちゃんと読んで作らないと余計な手間が増えますね。

サイズなどもこれを参考に手直ししました。

参考記事