- iPhone のホーム画面に表示するためのアイコンを設定しましょう。
- アイコンの基礎知識を習得しましょう。
ホーム画面に表示されるアイコンは、他のアプリと識別できる重要な要素です。
ホームアイコンの基礎知識と、設定方法を学びます。
Xcode 16 からは、アプリアイコンを3 つの異なるモードに対応させることができるようになりました。
それぞれのモードに対して個別のアイコンを設定することで、ユーザーに対してより一貫したアプリの体験を提供することができます。
Xcode 16 以降では、iOS およびiPadOS のアプリアイコンには、ダークモードおよびティントモードの設定が必要です。デフォルトのアプリアイコンと同様に、ダークモードとティントモードのアイコンもアプリ審査の対象となり、アプリ審査ガイドラインに従う必要があります。
アセットカタログに1 つの1024×1024 ピクセルのアプリアイコンを設定することで、各デバイスの
アイコンがターゲットサイズに自動的にリサイズされます。
そして、3 つのモードのアプリアイコンを設定することで、ユーザーの設定に応じて自動的にアプリアイコンの表示が切り替わります。
❶ [Assets.xcassets]を選択します。
❷ [AppIcon]を選択します。
❸ [Any Appearance] のエリアに、通常モード用の画像(1024×1024 ピクセル)を配置します。
❹ [Dark] のエリアに、ダークモード用の画像(1024×1024 ピクセル)を配置します。
❺ [Tinted] のエリアに、ティントモード用の画像(1024×1024 ピクセル)を配置します
❶ [Any Appearance] のエリアに、「appicon.png」を配置します。
❷ [Dark] のエリアに、「darkModeIcon.png」を配置します。
❸ [Tinted] のエリアに、「tintedIcon.png」を配置します
Any Appearance ( 通常の表示)
Any Appearance は、デフォルトのアプリアイコンを設定します。
このアイコンは、ユーザーのデバイスがライトモードまたはダークモードのどちらを使用しているかに関係なく表示されます。
Dark(ダークモードでの表示)
Dark は、ダークモード用のアプリアイコンを設定します。
ユーザーのデバイスがダークモードに設定されている場合、このアイコンが表示されます。これにより、ライトモードとダークモードで異なるアイコンを使用することができます。
Tinted(ティントモードでの表示)
Tinted は、アプリアイコンの色が特定の色調に調整される設定です。
ユーザーが選択した壁紙やテーマに基づいて、アイコンの色が自動的に変化します。ティントモードは、iPhone やiPad の設定で、iOS のホーム画面のデザインをユーザーが自由に変更できるため、個々のカスタマイズ性を高め、よりユーザーの好みに合わせることができます。
アプリ開発者は、この3 つのアイコンを提供することで、アプリのデザインを一貫性のあるものにし、より統一感を持たせることができます。
Apple の「アプリアイコン」ガイドラインページでは、iOS やiPadOS 等のアプリアイコンをデザインする際の重要なポイントが説明されています。
Apple の「アプリアイコン」ガイドラインページhttps://developer.apple.com/jp/design/human-interface-guidelines/app-icons
このページには、アイコンのサイズや解像度の要件、各デバイスでの表示方法、デザインのコツや注意点が詳しく書かれています。アプリをリリースする前にこのガイドラインを参照すると、アプリアイコン作成時のヒントになります。
▼ サイズが違う画像を配置した場合
上記は、1024 × 1024 ピクセル以外の画像を配置した例です。
警告が表示され、クリックをすると、1024 × 1024 ピクセルの画像である必要がある旨の警告が確認できます。
また、シミュレータを起動しようとしても、エラーが出力されます。
1024 × 1024 ピクセルの画像を用意してください。
ダークモードの設定方法は、実機とシミュレータでは異なります。
シミュレータで確認する場合は、下記の手順で確認を行ってください。
▼ シミュレータのダークモードの変更方法
❶ シミュレータの設定画面を起動します。
❷ 設定画面で、[ デベロッパ] をタップします。
❸ [ ダークの外観モード] で、ライトモードとダークモードを切り替えることができます。
上記の方法でシミュレータの設定でライトモードとダークモードを切り替えられますが、「command」+「shift」+「A」を実行すると、ライトモードとダークモードを簡単に切り替えることができます。
また、シミュレータでも実機と同様にアプリの削除を行えます。
▼ シミュレータでアプリを削除する方法
シミュレータを起動してください。
❶ [ Home]アイコンをクリックします。
❷ 「MyJanken」を長押しします。
❸ メニューが表示されるので[アプリを削除]をクリックします。
❹ 「 アプリを削除]をクリックします。
❺ [削除]をクリックします。これで、シミュレータでもアプリが削除できました。
アイコンを確認しよう
アイコンの配置ができたら、シミュレータを起動して確認をしてみましょう。
シミュレータでも、実機と同等にiPhone の操作が行えます。シミュレータを起動して、ホームアイコンを確認してみましょう。
❶ [Home]アイコンをクリックすると、実機と同様にホーム画面を表示することができます。
❷ 「MyJanken」のホームアイコンが反映されていることを確認してください。
ホーム画面へは、[Simulator]メニュー→[Device]→[Home]を選択することでも切り替えることができます。
❶ ホーム画面のどこかで長押しをします。
❷ [ 編集] をタップして、[ カスタマイズ] をタップします。
❸ [ ダーク] をタップします。
❹ ホーム画面のアプリアイコンが、[Assets.xcassets] の[Dark] に設定したアイコンに切り替わります。
❺ [ 色合い調整] をタップします。
❻ スライダーを使用して、アイコンの色合いを自由に調整できます。
❼ ホーム画面のアプリアイコンが、[Assets.xcassets] の [Tinted] に設定したアイコンに切り替わります。
ホーム画面に、それぞれのモードのアプリアイコンが反映されていることを確認できたら成功です。
なお、シミュレータで確認を行う際、バージョンによっては [ ライト]、[ ダーク]、[ 自動]、および「色合い調整」のアイコンが表示されない場合があります。実機ではこれらのアイコンが正常に表示されます。
以上でアプリアイコンの設定は完了です。
CodeCandyTutor(コードキャンディチューター)とは?
初学者から既にアプリ開発者の方まで、SwiftとSwiftUIのiOSアプリ開発を無理なく楽しく学習ができるアプリです。
SwiftやSwiftUIのレッスンに加えて、公式ドキュメントの読み方も身につけながら、技術の本質的な理解と実装力を効果的に伸ばせるカリキュラムになっています。
新しい技術にも自走して対応できる、そんな「学びの地力」を育てることを目指しています。