JINMUSOFTWARE

iPhoneアプリの起動画面を作成する方法【SwiftUI開発】

起動画面とは「launch screen(ローンチ画面)」のことです。他のプラットフォームでは「Splash screen(スプラッシュ画面)」とも言うようです。

目的

iPhoneアプリの起動画面を作成します。

初期設定ではアプリを起動した瞬間に白い背景が表示されます。

この白い背景に色を付けて、中央に何か画像を表示してみます。

起動画面を作る方法は?

Apple Developer 公式ドキュメントでは、起動画面の作成方法が2つ紹介されていました。

  1. Info.plist を使用する方法
  2. storyboard を使用する方法

Specifying your app’s launch screen – Apple Developer Document

※公式ドキュメントの「Info.plist」を使用する手順が間違っているので訂正して紹介します。

開発環境

  • Xcode 26.6
  • Swift 6.3.3

下準備:カラーセットと画像を準備する

起動画面に使用するアセットを用意します。

カラーセットを作成する

手順:

  • Assets.xcassetsを開く
  • アセットエリアで右クリックするか「+」ボタンを押して、「Color set」を選択する。
  • 新規作成されたカラーセットに名前を付けて、色を調整する。

カラーセットの例

  • カラーセットの名前を「Color1」
  • Appearancesを「None」(お好みです)
  • カラーを「#FF9300」(Tangerine)

画像を準備する

ロゴとして表示する画像を準備します。
画像サイズは256pxとしました。大きすぎる画像はそのままはみ出します。

手順:

  • 起動画面用の画像をアセットエリアにD&Dする。
  • わかりやすい名前をつける。

Info.plistを編集して起動画面を作成する方法

プロジェクト設定の「Info」タブの「Launch Screen」キーに、起動画面の背景色と画像を設定します。

起動画面の背景色と画像を設定する

  • 「Project Navigator」でプロジェクトを選択する。
  • 「TARGETS」で対象のAppを選択する。(大抵はPROJECTと同じ名前)
  • 「Info」タブを選択する。
  • 「Custom iOS Target Properties」にある「Launch Screen」キーを選択する
  • 「Launch Screen」Key欄にある「⊕」を押して、「Background color」と「Image Name」を追加する
  • 「Background color」のValueに、先ほど設定したカラーセットの名前を入力する
  • 「Image Name」のValueにも先ほどアセットに登録した画像の名前を入力する

動作確認

Infoの設定が完了したら、Buildして、Simulatorで確認します。

変更が反映されないこともあるのでその場合はSimulatorを再起動します。

補足

補足1:

  • 「Info.plist」に影響する修正を行うと「ProjectNavigator」に「Info.plist」が出現します。内容は編集差分です。

補足2:

  • 「Launch Screen」に元々ある「UILaunchScreen」は使用できませんでした。ここは公式ドキュメントと違うところです。
  • 出現した「Info.plist」をテキストエディタで開くと、「Launch Screen」の内部表現が「UILaunchScreen」であることに気づきます。公式ドキュメント通りの手順を踏むと「UILaunchScreen」を二重に定義してしまうことになってしまうのかな。

Storyboard作成して起動画面を作成する方法

プロジェクト設定の「General」の「App Icons and Launch Screen」に、LaunchScreen(storyboard)用のファイルを割り当てると起動画面を設定できます。

まずはLaunch Screen(storyboard)ファイルを追加してデザインしてください。私はstoryboardを全然知らないので「Hello」ラベルを中央に配置しただけにしました。

Launch Screenファイルの追加手順

  • 「ProjectNavigator」で右クリック、もしくは「+」ボタンを押して、「New File from Template…」を選択します。
  • iOS > User Interface の「Launch Screen」を選択し、NEXTボタンを押して追加します。
  • ファイル名を決めます。
  • storyboardを起動画面に適した良きデザインします。
Launch Screenをデザインしているところ

次にデザインしたLaunchScreenファイルをLaunchScreenに設定します。

  • 「ProjectNavigator」でプロジェクトを選択します。
  • プロジェクト設定の「General」タブを選択します。
  • 注意)「App Icons and Launch Screen」の「Launch Screen File」に、先ほど作成したstoryboardのファイル名を手入力します。コピペでもOK。
    • ファイル名をプルダウンから選択してはいけません。
    • プルダウンから選択するとそれが反映されないバグがあるようです。
storyboard名を手入力しているところ
  • 念の為に、「Info」タブを開き、「Custom iOS Target Properties」に「Launch screen interface file base name」キーが作成されていて、そのValueの値がstroyboard名であることを確認してください。
Launch screen interface file name

動作確認

起動画面の表示は一瞬です。

Launch Screen

以上です。うまくいきましたね!

参考ページ

参考記事