この記事は、
【開発合宿】Okinawa.swift×Swift・Kotlin愛好会コラボ合宿 in 沖縄
で開発・発表した内容になります。
前提
この記事では、iOS 25で導入されたLiquid Glass スタイルのアプリアイコンを対象としています。
実装には、Appleが提供する Icon Composer を使用します。
背景
Appleのデザインアワードに受賞・ノミネートされたアプリの中に、LightモードとDarkモードでアイコンが変化するものが多くあります。この演出に魅力を感じ、同じような実装に挑戦してみることにしました。
例えば、flighty というアプリがあります。
このアプリは、iPhoneやiPad向けのフライト追跡アプリで、フライト情報を一元管理し、リアルタイムで状況を把握できます。
このアプリは、LightモードとDarkモードで、アイコンが変化します。
Lightモードは、通常の飛行機のアイコンですが、
Darkモードだと、夜間飛行のランプが光ります。
| Light | Dark |
|---|---|
 |
 |
この情報は、以下のRedditから発見しました：
また、Duolingoでもアイコンが変わります。
定期的にアイコンが変わるアプリですが、
Lightモードだと、Duo(緑の鳥)のアイコン、
Darkモードだと、光(懐中電灯？)が下から照らされているアイコンになっています。
| Light | Dark |
|---|---|
 |
 |
これらを実装するには、どうすれば良いのだろうか、と思ったので今回、Liquid Glassでの実装方法を解説します。
実装方法
Figmaでのコンポーネント作成
Figmaなどでコンポーネントを作成して、アプリのアイコンを作成します。
コンポーネントごとに分ける理由は、Figmaからコンポーネント単位で出力し、IconComposerで重ね合わせて実装するためです。この方法により、各パーツを個別に管理しながら、最終的に組み合わせることができます。
IconComposer に導入
出力したコンポーネントを Icon Compoer にいれて、アプリアイコンの形にしていきます。
このとき、Liquid Glass 感を出すように、いろいろと調節すると良いです。
詳細は、WWDC25 の Say hello to the new look of app icons を参照ください。
Light と Dark でアイコンを分ける
LightモードとDarkモードでアイコンを使い分けるため、Icon Composerで２つのグループを作成します。
手順
- 画面左下の＋ボタンをクリックし、グループを追加
- LightとDarkそれぞれ用のグループを作成
透明度の設定
各グループの透明度(Opacity)を設定することで、モードに応じた表示を切り替えます。
Darkモードのみ表示したいグループ:
- Default: Opacity 0%
- Dark: Opacity 100%
Lightモードのみ表示したいグループ:
- Default: Opacity 100%
- Dark: Opacity 0%
この設定により、モードが切り替わると自動的にアイコンの見た目が変化します。
| Default | Dark | |
|---|---|---|
| Light |  |
 |
| Dark |  |
 |
プロジェクトに導入
ここからはLiquid Glass のアプリアイコン設定と同じです。作成したアイコンを保存し、プロジェクトファイルにドラッグ&ドロップします。その後、プロジェクトの「General」→「App Icons and Launch Screen」で、アイコンのファイル名を設定すれば完了です。
結果
実際に、自分のプロジェクトで実装すると以下のようになります。
| Light | Dark |
|---|---|
 |
 |
実装時の重要な注意点
Light/Darkモードでアイコンを変える際は、変更を最小限にとどめることが重要です。
なぜ慎重になる必要があるのか
アイコンを大きく変えすぎると、以下の問題が発生する可能性があります:
- ユーザーが別のアプリだと誤認する
- ホーム画面でアプリを見失う
- ブランドの一貫性が損なわれる
推奨される変更例
✅ 良い例:
- アイコンの一部の色を調整する
- 光の要素を追加/削除する(flightyの例のように)
❌ 避けるべき例:
- アイコンのシルエットやデザインそのものを変える
- 全く異なるモチーフに変える
flightyやDuolingoの例を見ても、基本的なアイコンの形は保ちつつ、光や色の変化で演出していることがわかります。
まとめ
iOS 25のLiquid GlassアイコンでLight/Darkモード対応を実装する方法を紹介しました。
ポイント
- Icon Composerのグループ機能と透明度設定を活用
- アイコンの変更は最小限に(色や光の追加程度)
- ユーザー体験を損なわないデザインを心がける
この実装により、ユーザーの環境に合わせた細やかな配慮ができ、アプリの印象を向上させることができます。
今回の開発合宿での経験が、皆さんのアプリ開発の参考になれば幸いです!