MENU

【初心者向け】iOSアプリの起動画面の作成方法を詳しく解説

iOSアプリを開発する際、ほぼすべてのアプリに必ず用意されているのが「起動画面(Launch Screen)」です。アプリをタップしてから初期画面が表示されるまでのわずかな時間に見せられる、静的でシンプルな画面のことを指します。

多くの初心者が「起動画面はアニメーションで動かせるの?」と疑問を持ちますが、Appleの仕様では起動画面は静的である必要があり、詳細なローディング演出は動かせません。この記事では、この起動画面をXcodeでどのように作成し、設定するのかを、SwiftUI・UIKitどちらでも使えるように分かりやすく解説します。

目次

【結論】iOSの起動画面は「Storyboardを1つ作って設定する」だけ

まず結論をまとめると、iOSの起動画面は次のステップで完成します。

  • LaunchScreen.storyboard を作成する
  • ロゴなどの静的な画像を配置する
  • Auto Layoutで中央配置などの制約を追加する
  • Xcodeの設定で「起動画面として使用するStoryboard」を指定する

たったこれだけでOKです。SwiftUIを使っていても同じ流れになります。

iOSの起動画面の基本ルール

起動画面は「静的」である必要がある

  • アニメーション不可
  • コードも実行されない
  • ローディングアイコンも動かない(誤解を生むためNG)

起動画面はあくまで「アプリが立ち上がるまでのつなぎ」であり、複雑な処理を行う場ではありません。

最初に表示される画面の“簡素版”が理想

Appleは、起動画面を「アプリのUIの単純化したプレビュー」にすることを推奨しています。背景色とロゴ程度のシンプル構成がもっとも一般的で、ユーザーにも違和感を与えにくいデザインです。

広告っぽい文言・過度な装飾は避ける

  • キャッチコピー
  • 行動を促すCTA(例:今すぐ登録)
  • 長文テキスト

こうした要素はAppleのHuman Interface Guidelinesに反しやすく、リジェクトのリスクにもつながります。起動画面は「静かでシンプル」が基本です。

【手順1】LaunchScreen.storyboard を作成する

まずは起動画面専用のStoryboardファイルを作ります。

  1. Xcodeメニューから File > New > File… を選択
  2. テンプレート選択画面で User Interface > Storyboard を選ぶ
  3. ファイル名を LaunchScreen.storyboard にして作成

作成されるのは、1つの View Controller が配置されたStoryboardです。この中にロゴ画像や背景色などを設定していきます。

【手順2】ロゴ画像をAssetsに追加する

起動画面で利用する画像は、Assets.xcassets に追加します。ここではアプリのロゴを例にします。

  1. Assets.xcassets を右クリックして New Image Set を選択
  2. ロゴ画像(PDF推奨)をドラッグ&ドロップして登録
  3. 画像名(例:AppLogo)を覚えておく

PDF形式のベクター画像を使うと、Retina倍率を意識せずに高解像度で表示できるためおすすめです。

【手順3】Storyboardにロゴを配置する

続いて、先ほど用意したロゴを起動画面の中央に配置していきます。

  1. LaunchScreen.storyboard を開く
  2. View Controller 上に Image View を追加
  3. Image の項目に、先ほど登録した AppLogo を指定
  4. Auto Layout の制約を追加して中央に配置する

Auto Layoutでは、次の2つの制約を付けるだけでも十分です。

  • 水平中央揃え(Center Horizontally in Container)
  • 垂直中央揃え(Center Vertically in Container)

これでほとんどのデバイスでロゴが画面中央に表示されます。

背景色の設定も忘れずに

起動画面の背景色は、アプリのメイン画面に合わせておくと切り替わりが自然です。例えば、次のような色がよく使われます。

  • 白(System Background)
  • ブランドカラー(コーポレートカラーなど)

メイン画面と起動画面の色が大きく違うと、切り替わり時に「チカチカする」印象になってしまうので注意しましょう。

【手順4】Xcodeで起動画面として設定する(最重要)

Storyboardを作っただけでは、まだ起動画面として認識されません。Xcodeのターゲット設定で、起動画面に使用するStoryboardを指定する必要があります。

  1. プロジェクトナビゲータでアプリのプロジェクトを選択
  2. Targets からアプリのターゲットを選択
  3. General タブを開く
  4. App Icons and Launch Images セクションを探す
  5. Launch Screen File の欄に LaunchScreen と入力

このとき、通常は拡張子 .storyboard を付ける必要はありません。正しく設定できていれば、アプリ起動時に自動的に LaunchScreen.storyboard が表示されるようになります。

SwiftUIアプリの場合はどうなる?

SwiftUIアプリでも、起動画面の作り方は基本的に同じです。@main で定義されたエントリポイントのコードは、起動画面とは独立して動きます。

@main
struct SampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // ← 起動後に最初に表示される画面
        }
    }
}

起動画面はあくまでXcodeの設定とStoryboardによって表示されるものであり、SwiftUI側では特別な対応は不要です。起動画面と ContentView のデザイン(背景色やロゴの位置)を似せておくと、切り替わりがより自然に見えます。

よくある質問(FAQ)

Q1. 起動画面にアニメーションを入れることは可能ですか?

A. 残念ながら不可能です。起動画面は完全な静的画面であり、コードや動的処理は一切実行できません。

もしアニメーションを入れたい場合は、次のような構成にするのが一般的です。

  • 起動画面:ロゴのみのシンプルなLaunch Screen
  • 起動直後:SwiftUIやUIKitで「擬似スプラッシュ画面」を表示してアニメーション
  • 数秒後にメイン画面へ遷移

このように、アニメーション自体はアプリ起動後の最初の画面で実装するのがポイントです。

Q2. ローディング中のインジケーター(くるくる)は置けますか?

A. 配置すること自体は可能ですが、実際には動きません。ユーザーに「フリーズしているのかな?」と誤解を与えやすいため、起動画面にローディングインジケーター風の表示を置くのは非推奨です。

Q3. 起動画面を画像1枚で作っても大丈夫?

A. 1枚の静的画像で起動画面を作ることも可能です。デザインツール(Figma、Sketch、XDなど)で画面全体の画像を用意し、それを全画面表示する方法です。

ただし、iPhoneやiPadは画面比率が異なるため、

  • 上下に余白ができる
  • 左右がトリミングされる

といった見え方のズレが起きやすくなります。そのため、ブランドカラーの背景+中央にロゴ、といったレイアウト形式で作るほうが実務では使いやすいケースが多いです。

Q4. 起動画面とホーム画面を似せるべきでしょうか?

A. はい、似せておくことをおすすめします。Appleのガイドラインでも、起動画面はアプリ本体のUIの簡易版であることが推奨されています。

起動画面と最初の画面の色や構成が近いほど、ユーザーは「画面がパッと切り替わった」という違和感を覚えにくくなります。

まとめ:iOSの起動画面は「シンプル・静的・中央ロゴ」が基本

iOSの起動画面(Launch Screen)は、複雑な処理や華やかなアニメーションを見せるためのものではなく、あくまでアプリ起動中のつなぎをスムーズにするための静的な画面です。

  • Storyboardを1枚作成する
  • ロゴや背景色をシンプルに配置する
  • Xcodeで起動画面として設定する

というシンプルな手順で、SwiftUIでもUIKitでも共通して利用できます。

まずはこの記事の流れに沿って「ブランドカラーの背景+中央ロゴ」の起動画面を作ってみてください。アプリの第一印象が整うことで、全体のクオリティも一段と高く見えるようになります。

プログラミングの独学におすすめ
プログラミング言語の人気オンラインコース
独学でプログラミングを学習している方で、エラーなどが発生して効率よく勉強ができないと悩む方は多いはず。Udemyは、プロの講師が動画で実際のプログラムを動かしながら教えてくれるオンライン講座です。講座の価格は、セール期間中には専門書籍を1冊買うよりも安く済むことが多いです。新しく学びたいプログラミング言語がある方は、ぜひUdemyでオンライン講座を探してみてください。
目次