Xcode14~時代のAppアイコン

AppIconの自動生成

Xcode14に以下の機能が追加されました。^{1 2}

アセットカタログ
アセットカタログで1024x1024ピクセルのAppアイコンを１つ提供すると、ターゲットに合わせて自動的にサイズ調整されます。

今まで		これから
All Sizes	→	Single Size

これでAppアイコンを１つだけ作成すればOK！。
たくさんのサイズのAppアイコンを作ったり設定する手間が省けて、めでたしめでたし。
スタッフ間のコミュニケーションコストも減らせて、めでたしめでたし。

ちょっと待ったー

画像の縮小処理は、対象画像と縮小アルゴリズムの組み合わせをよく考えないと、「線が消える」「モアレが発生する」などの見た目の不具合が発生します。あのPhotoShopでさえリサイズ・アルゴリズムの選択肢がたくさんあるのはそのためです。「もう全部あいつ一人でいいんじゃないかな」万能アルゴリズムは存在しないのです。

現象	縮小前	縮小後
線が消える
モアレが発生する

実験

Xcode14ではどうなるのでしょうか？ ^{3 4}

実験方法

1．以下のAppアイコンを用いる。

実験アイコン	(一部拡大)

2．以下のようにAssets / AppIconの設定を行う。

3．Xcode14でアプリをビルドした後、iPhone14 Pro Simulator (＠3x)で実行する。

仮説

Xcodeがビルド時に1024x1024Appアイコンから各サイズのAppアイコンを生成してAssetsフォルダ下に保存するのではないか。

結果

リサイズされたAppアイコンはAssetsフォルダ下に無かった。

Appアイコンの保存場所

以下のフォルダ下に２つのAppアイコンが見つかりました。

~/Library/Developer/Xcode/DerivedData/<アプリ名>-<ランダムな文字列>/Build/Products/Debug-iphonesimulator/<アプリ名>.app/

[e-mail]
AppIcon76x76@2x~ipad.png

Archiveでも生成されるAppアイコンは同じでした。

生成されたAppアイコンの画質

ファイル名	プレビュー	(一部拡大)	画像サイズ
[e-mail]			120x120
AppIcon76x76@2x~ipad.png		−	152x152

• ドット単位の細部は潰れてしまっています。
• 細い線の存在が消えてしまわずに特徴が残っています。
• エッジが丸まっているのでシャッキリ感が薄くなっています。(モアレ防止と捉えることもできる)
• PhotoShopと比較すると「バイキュービック法 滑らかなグラデーション (6)」に近いです。

考察

60pt＠2x(iPhone用)、72pt＠2x(iPad用)のAppアイコンのみビルド時に生成されてメインバンドルに保存されます。
他のサイズのAppアイコンは必要なときにのみ生成されるのかもしれません。

個人的には＠3x解像度のAppアイコンも生成した方が、同じ＠3x解像度の端末(iPhone 14シリーズなど)でキレイに表示できるんじゃないかなぁと思いました。

結論

私たちはどうすれば良いのか？というと、以下の判断になると思います。

Single Sizeを選択した方が良い人

• 少しでも手間を減らしたい
• Appアイコンの画質には拘らない
  • 多少ボケていても大丈夫
  • 細部が潰れていても大丈夫
• １秒でも早くリリースする方が価値が高いと思う

All Sizesを選択した方が良い人 (従来のやり方)

• サイズごとに見やすく調整されたAppアイコンを使っている
  • 例
    • 大きいAppアイコン：サービス名がアイコンに入っている
    • 小さいAppアイコン：文字が潰れてしまうのでサービス名が入っていない
• 既にIconGenerator等のツールを導入している
• ロゴ、文字、キャラクターが潰れたり、滲んだり、読めないのは困る
• デザインの良さもお客様に提供する価値の１つだと思う

Requirements

Xcode 14.0 or later

1. Xcodeの新機能 ↩

2. Asset Catalogs - New Features ↩

3. setAlternateIconNameは根性が無かったので未調査です。 ↩

4. SVG、WebPがAppアイコンに設定できないかやってみましたが、できませんでした。
   (2024/03/06追記)ドキュメントに"PNG使え"って書いてありました。
   App icon attributes ↩