ホーム画面をダークモードに切り替えたとき、自分のアプリのアイコンだけが妙に主張して浮いて見える。iPhone の壁紙をモノクロにしたとき、システムアプリは薄い色味で馴染んでいるのに自分のアプリだけ原色で残ってしまう。私が運営している壁紙系アプリで実際にこの違和感に気づいたのは、ユーザーから「ダークモードでアイコンが眩しい」というメールをもらったときでした。
iOS 18 のダーク／ティント表示と Android 13 以降のテーマアイコンに対応すると、こうした「自分のアプリだけ浮いてしまう」状態が解消されます。Rork で生成したアプリでもこの対応は十分実用範囲で、必要なのはアイコン画像を数枚追加することと、app.json を 10 行ほど書き換えることだけです。
ここでは私が複数のアプリで実際に対応した手順をそのまま辿る形で書いています。素材の作り方から Expo 設定、差し替え後のキャッシュ問題、ストア審査での見え方まで一通りカバーします。
「対応する／しない」で何が変わるか
iOS 18 と Android 13 以降では、ホーム画面のアイコンが次の 3 種類に増えました。
- ライト: 従来通りのフルカラーアイコン
- ダーク: 暗い背景でも見やすいよう、明度・彩度を抑えたバリエーション
- ティント（iOS）／テーマ（Android）: ユーザーが選んだ単色に染まるモノクロ版
ユーザーが「外観」設定でダーク／ティントを選んでいるとき、未対応のアプリは「ライト用アイコンに自動的にダークオーバーレイをかぶせた見た目」で表示されます。これは多くのアプリで悪くない結果になりますが、明るい背景を前提にデザインしたロゴほど不自然になりやすく、特に白地に細いグラフィックを配置したアイコンはオーバーレイで埋もれます。
私のアプリでは、対応前と対応後で App Store のスクリーンショットセクションに「ダークモード対応」を載せたところ、レビューで「アイコンの見た目が綺麗」「他のアプリと馴染む」というコメントを複数いただきました。直接的な売上効果は測りづらいものの、初回の印象を整えるという意味では費用対効果がかなり高い対応だと感じています。
素材の準備 — 3 枚のアイコンに必要な仕様
iOS 18 と Android 13 以降の双方に対応する場合、最終的に用意するのは次の 3 枚です。
- iOS Light: 1024×1024 PNG、フルカラー、不透明背景
- iOS Dark: 1024×1024 PNG、フルカラー、不透明背景。ライトを単純反転するのではなく、暗い壁紙でも視認できるように再調整したもの
- iOS Tinted ／ Android Monochrome: 1024×1024 PNG、モノクロ（グレースケール＋アルファチャンネル）、背景は透過
ティント／モノクロ版の作り方が一番つまずきやすいので、ここだけ補足します。Apple のガイドラインは「白地のシルエットを濃淡で表現する」と明示しており、色を持たせず、明るさだけで形を作るのがコツです。実際に私が使っているのは次の手順です。
- ライトアイコンの主要グラフィックだけをグレースケール化する
- 全体を白〜中間グレーに置き換え（黒は使わない）
- 不要な背景は完全に透過させる
- Apple のプレビューツールでティント色を試して、視認性を確認する
ロゴが繊細なグラデーションを使っている場合、ティント変換でディテールが潰れがちです。私のアプリではこのタイミングで「ティント版だけ少しだけ太字にする」という調整を入れました。アイコンデザインの基準を整理した記事として AI で App Store／Google Play 審査に通るアイコンを作る も合わせて読むとイメージしやすいと思います。
Rork プロジェクトの app.json を更新する
Rork が生成するプロジェクトは Expo 管理（managed workflow）が前提になっているため、ネイティブの Asset Catalog を直接いじる必要はなく、app.json（または app.config.js）で完結します。Expo SDK 52 以降であれば、次のような設定で 3 枚のアイコンを認識させられます。
{
"expo": {
"name": "MyRorkApp",
"icon": "./assets/icons/icon-light.png",
"ios": {
"icon": {
"light": "./assets/icons/icon-light.png",
"dark": "./assets/icons/icon-dark.png",
"tinted": "./assets/icons/icon-tinted.png"
},
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/icons/icon-light.png",
"monochromeImage": "./assets/icons/icon-monochrome.png",
"backgroundColor": "#FFFFFF"
}
}
}
}ポイントは 2 つあります。1 つは iOS の icon フィールドを文字列ではなくオブジェクト形式で書くこと。古い書き方（icon: ./assets/icon.png）のままだとライト版しか取り込まれません。もう 1 つは Android の monochromeImage を必ず別ファイルにすること。foregroundImage を流用するとテーマアイコン表示時に色が反転して読めなくなるパターンに何度かハマりました。
設定後、npx expo prebuild --clean でネイティブプロジェクトを再生成し、EAS Build か Rork のビルドメニューから新しいバイナリを作ります。OTA だけでは反映されないので、必ずストアバイナリを更新する点に注意してください。
OTA まわりの基礎知識は Rork × EAS Update で OTA アップデートを配信する にまとめてあるので、配信戦略を整理したい方はそちらも参照してください。
動作確認とよくあるつまずき
実機での確認手順は次の通りです。
- iOS 18 端末: 設定 → ホーム画面とアプリライブラリ → ライト／ダーク／ティント を切り替え、各モードでアイコンの見え方を確認する
- Android 13 以降の端末: 長押しでアイコンを選択 → 「テーマアイコン」をオン → 壁紙の色を変えて視認性を確認する
- シミュレータ: iOS Simulator は 17.4 以降のみダーク／ティント対応。古いシミュレータでは確認できない
差し替え後にアイコンが古いまま表示される場合の典型は、iOS デバイスに残った旧バイナリのキャッシュです。アプリを削除して再インストールするだけでは更新されないこともあり、私は最終的に「端末を再起動」で解決することが多いです。同種の問題は Rork のアプリアイコンが反映されないキャッシュ問題の修正手順 でも詳しく扱っています。
App Store Connect 側では、ビルドアップロード時に「Light」「Dark」「Tinted」の各バリエーションが自動的に検出されます。プレビュー画面で 3 枚並んで表示されていれば成功で、検出されない場合はほぼ確実に 画像サイズが 1024×1024 になっていない か、iOS Tinted のアルファチャンネルが残っていないかのどちらかです。
ダークモード対応全般のテクニックは Rork Max のダークモード／カラーテーマ実装ガイド でアプリ UI 側の話を扱っているので、アイコンと UI を同時に整えたい方はセットで参照すると効率的です。
アセット生成を少しだけ自動化する
3 つ目のアプリで同じ作業を繰り返したあたりで、sharp を使った簡単な Node.js スクリプトに切り出しました。ライト版を入力にして、トーンカーブとわずかな背景調整でダーク版を出力し、グレースケール化と背景透過でティント版を出力する、というだけの内容です。完全に自動化できるわけではなく、最終的な目視チェックは必ず必要ですが、「Photoshop を開いて 3 回書き出す」状態から「スクリプト 1 本を回して、ティント版だけ微調整する」状態に変わって、1 アプリあたりの所要時間が 20 分から 5 分くらいに縮みました。
公開アプリが年に 2〜3 本以上のペースなら、このタイプの自動化は早めに整えておく価値があります。同じスクリプトで assets/icons/ 以下の正しいパスに直接書き出してしまえば、ファイル名の typo でビルドが崩れる事故も減らせます。Rork で運用する場合、マスター画像を Rork が参照する場所と同じ位置に置いておけば、ブランドマークの変更時に Rork 側を触らずに 3 種類を更新できるのがありがたいところです。
さらに踏み込んで学びたい方へ
Expo 管理ワークフローでネイティブ機能を扱う際の考え方が体系的にまとまっており、Rork が裏側で何をしているのかを理解する助けになりました。
次の一歩
themed icon の対応は、コードを書くわけではないので「面倒だが効果は出る作業」の代表格です。すでに公開しているアプリがあるなら、まずはダークアイコン 1 枚だけでも作って次回のリリースに混ぜてみるのが個人的にはおすすめです。ライト版に画像処理を 10 分加えるだけで作れる場合が多く、ユーザーの初見の印象が一段引き締まります。
Rork で新規に作るアプリでも、初回ビルド前に 3 枚揃えておけば、あとから差し替えてキャッシュに振り回される手間を避けられます。アイコンはアプリの第一印象を 1 秒で決める要素なので、最初に少し時間を投資する価値は十分にあります。