【Xcode/iOS18】アプリアイコンの各モードカラーに対応する方法！
この記事からわかること
- iOS18か追加されたアイコンカスタマイズ機能の対応
- 各モード「Light」、「Dark」、「Tinted」の違いと画像の用意
- Swift/Xcodeでアプリアイコンを切り替える方法
index
[open]
＼ アプリをリリースしました ／
環境
- Xcode：16.0
- iOS：18.0
- Swift：5.9
- macOS：Sonoma 14.6.1
公式リファレンス：iOS と iPadOS に暗い色と淡い色のアイコンのバリエーションを追加する
iOS18で追加されたアプリアイコンカスタマイズ機能
iOS18からアプリのアイコンをユーザー好みに切り替えることができる機能が追加されました。アプリアイコンには「Light」、「Dark」、「Tinted」の3つのモードが用意され、「Tinted」に関しては自分の好きな色味をアプリアイコンに適応させることが可能です。
アプリアイコンの変更方法
- ホーム画面の長押し
- 編集＞カスタマイズ
- 好きなモードに切り替える
「Tinted」を選択すると右画像のように好きな色味をカラーパレットから指定してアプリアイコンに反映させることができるようになります。
「自動」モードを選択するとデバイス自体のライトモード/ダークモードに応じてアプリアイコンのモードがLight/Darkに切り替わるようです。そのため基本的にデバイスのライトモード/ダークモードとアプリアイコンのモードは「自動」を選択しない限り連携しないようです。
Xcodeでの対応方法
iOS18から追加されたアプリアイコンカスタマイズ機能はアプリ開発者側の対応が必須になります。やること自体は簡単でアセットに各モードに応じてアイコンが設定できるようになっているので各モードの画像を用意してアセットに追加するだけです。
どちらかというと画像の方を用意する手間の方が多いです。
Lightモード用アイコン
Lightモード用のアイコンは普通に今まで使用していたアイコンを用意します。
Darkモード用アイコン
Darkモード用のアイコンは背面を透過させたアプリアイコンを用意します。あとはシステムが自動的にDark用のグラデーション背景を合成して適応してくれます。
Tintedモード用アイコン
Darkモード用のアイコンはグレースケールのアプリアイコンを用意します。グレーの濃さの応じて適応されるアプリの色味も若干異なってくるので適切な値を指定してください。特に決まりはないですが上記は#9b9393で少しグレーが濃すぎたため色味があまり綺麗に反映されませんでした。
Figmaのプロダクトテンプレートが活用できる
Apple公式が提供しているFigmaのプロダクトテンプレートを活用すると簡単にデモレビューを確認することができるのでおすすめです。上記リンクのページからダウンロード可能です。
画像部分を入れ替えるとTintedのデモカラーバリエーションを確認できるようになっています。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
