icon
icon

XcodeでiPhoneアプリの起動画面を変更する方法【初心者向け】

XcodeでiPhoneアプリの【起動画面】を変更する方法を初心者向けに解説した記事です。追加する画面、画像サイズ(2種類)、iOSシミュレーターでの確認方法まで、基礎から理解できる内容になっています。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

Xcodeを使って、iPhoneアプリの起動画面を変更する方法を初心者向けに紹介していきます。

iPhoneアプリの見た目で変更できるポイントとして、UIパーツやアイコンがあります。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

iPhoneアプリの起動画面を変更する

まずはナビゲーションエリアから、Generalを選択し、Launch Imagesの項目を探します。Sourceという項目があるので、その右端の”→”をクリックして、画像追加画面に移動します。

DropShadow-11

 

すると、画像の追加画面が表示されます。

DropShadow-21

この赤枠で囲った部分に画像をドラッグ&ドロップすることで追加していきます。

なお、今回はiPhoneアプリとしていますが、iPadアプリでも方法は同じです。

 

 

起動画面用の画像を用意する

画像の追加画面まで確認できたら、一度Xcodeは最小化して起動画面用の画像を用意しましょう。

今回はPhotoshopを使って用意してみました。見た目にこだわるのが目的ですので、アプリのイメージに沿ったものを用意しましょう。

 

画像のサイズ

ここで、注意しなければならないのが起動画面用の画像のサイズです。

先ほどの画面でわかるように、”2×”と”R4”の2種類があります。それぞれ画像の高さが下記の通り異なりますので注意しましょう。これは、iPhone Retina(4inch)とiPhone Retina(3.5inch)に対応するために必要です。

  • 2×:640px × 960px
  • R4:640px × 1136px
1時間でできる無料体験!

また、.jpgファイルでは読み込みエラーが出ることがありますので、.pngファイルを用意すると良いでしょう。

 

画像の用意ができたら、先程の画像追加画面に戻ってドラッグ&ドロップで画像を追加します。完了するとこのように表示されます。

DropShadow-31

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

iOSシミュレーターでチェックする

起動画面に設定した画像はiOSシミュレーターで確認することができます。

今回は、R4(iPhone Retina(4inch))は緑色の画像にしました。

DropShadow-41

 

もう1つの、2×(iPhone Retina(3.5inch))ではクリーム色の画像にしました。例として画像の色を変えましたが、iOSシミュレーターのデバイスによって別の画像が表示されることが理解できたと思います。

DropShadow-51-1

 

今回の記事は以上です。

iPhoneアプリのアイコンを変更する方法の記事もあるので、合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する