この記事の要点

Xcode で iOS アプリに画像を追加する標準手順は Assets.xcassets → New Image Set → ドラッグ&ドロップ 1x / 2x / 3x の 3 サイズを登録 — 解像度別画像で全端末で綺麗に表示 画面表示は Image View (UIImageView) を Storyboard に配置し、Image プロパティで Assets を指定 コードから操作するには Image View をエディタにドラッグして @IBOutlet 接続 最新の SwiftUI では Image("名前") 一行で同じ Assets 画像を表示できる

Xcode で画像を追加する

iOS アプリで画像 (アイコン / 写真 / イラスト) を画面に表示するには、Assets.xcassets に画像を登録して、Storyboard の Image View (UIImageView) から参照するのが標準手順です。本記事では UIKit ベースの追加手順を画像付きで解説します。

1. Image Set の作成

Xcode 左ペインの「Assets.xcassets」を開き、左下の「+」→「New Image Set」を選択します。

新しい Image Set が追加され、名前を任意に変更できます（例: logo, hero_image など）。英数字とアンダースコアで分かりやすい名前にしましょう。コードから UIImage(named: "hero_image") でアクセスする際の識別子になります。

2. 1x / 2x / 3x の画像を登録

1x, 2x, 3x の枠にそれぞれ Finder などから画像をドラッグ&ドロップします。

nx は解像度別の倍率を表し、1x < 2x < 3x の順に大きくなります。具体的な対応関係は以下のとおり。

倍率	主な対応機種	例: 表示サイズ 100x100 の場合の必要 px
1x	古い非 Retina 端末 (現代ではほぼ使われない)	100 x 100 px
2x	iPhone SE / iPad などの Retina 端末	200 x 200 px
3x	iPhone Pro 系などの Super Retina 端末	300 x 300 px

すべて用意しなくても動きますが、2x と 3x は最低限用意するのがおすすめ。用意していない倍率の画像は、システムが他のサイズから自動拡縮するため画質が落ちます。

3. Image View をビューに追加

Main.storyboard を開き、右上の「Object library ボタン」(+ アイコン) をクリック、検索欄に image と入力すると「Image View」が候補に出ます。これをビュー上にドラッグ&ドロップします。

4. Image View に画像を割り当て

追加した UIImageView を選択した状態で、右ペインの Attributes Inspector を開きます。Image 欄に Assets.xcassets で登録した画像名（先ほどの Image Set 名）を指定します。

選択時にプルダウンで候補が出るので、登録済みの画像名から選びます。表示倍率は端末に応じて Xcode が自動判定。

5. コードから操作するための @IBOutlet 接続

Image View をコードから動的に書き換えたい場合は、エディター (ViewController.swift) に対してドラッグ&ドロップして @IBOutlet として接続します。

Name 欄に「imageView」と入力して Connect ボタンを押下（名前は任意）。

すると ViewController.swift に以下のコードが自動挿入されます。

@IBOutlet weak var imageView: UIImageView!

6. ビルドと確認

シミュレーターまたは実機で実行すると、画面に画像が表示されます。表示が崩れる場合は以下を確認:

• Image View の Content Mode (Aspect Fit / Aspect Fill / Scale to Fill) を調整
• Auto Layout 制約を設定して位置とサイズを確定
• 1x / 2x / 3x のうち、利用倍率を欠かさず登録

コードから画像を動的に切り替える

// Storyboard で接続済みの imageView に画像をセット
override func viewDidLoad() {
    super.viewDidLoad()
    imageView.image = UIImage(named: "hero_image")
    imageView.contentMode = .scaleAspectFit
}

// ボタンタップで別の画像に切り替え
@IBAction func tapButton(_ sender: UIButton) {
    imageView.image = UIImage(named: "another_image")
}

SF Symbols を使う (iOS 13+)

iOS 13 以降は Apple 提供のSF Symbols (システムアイコン約 5,000 種) を Assets 登録なしで使えます。

imageView.image = UIImage(systemName: "star.fill")
imageView.tintColor = .systemYellow

SwiftUI の場合

SwiftUI なら Assets に登録した画像を 1 行で表示できます。Storyboard も IBOutlet も不要。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("hero_image")
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
    }
}

FAQ

Q: PNG と JPEG どちらを使うべき？
A: 透過が必要なら PNG、写真なら JPEG (ファイルサイズが軽い)。ロゴやアイコンはPDF または SVG ベクターを 1x に登録すると、Xcode が全倍率に自動展開してくれる。

Q: ダークモード対応の画像を出し分けたい
A: Image Set の Attributes Inspector で「Appearances」を「Any, Dark」に切替。Light / Dark 用の画像を別々に登録できる。

Q: アプリアイコンや起動画面の画像はどこに置く？
A: アプリアイコンは AppIcon、起動画面は LaunchScreen.storyboard または Launch Image (iOS 12 以前)。通常の Image Set とは別管理。

Q: 画像が表示されない
A: 画像名のスペル違いが定番。UIImage(named:) はファイル名ではなくImage Set 名を指定する点に注意。デバッグ時は print(UIImage(named: "hero_image")) で nil チェック。