【SwiftUI】horizontalSizeClassってなに？画面サイズでレイアウトを変える便利ワザ！

2025.05.25 2025.05.26

「iPhoneでは縦に並べたいけど、iPadでは横に広く使いたい…」

そんなときに使えるのが horizontalSizeClass（ホリゾンタルサイズクラス） という機能です！

画面の広さに合わせて、レイアウトをパッと切り替えられるとアプリがもっと使いやすくなりますよね。

今回はこの horizontalSizeClass をSwift UI初心者の方でも理解できるように具体的に解説していきます！

horizontalSizeClassってなに？

horizontalSizeClass は、画面の横幅（＝水平方向の広さ） をもとに、今のデバイスや表示状態を2つに分ける仕組みです。

.compact（コンパクト） → 画面が狭い（例：iPhoneを縦に持った時）
.regular（レギュラー） → 画面が広い（例：iPadを横にした時）

この値を使うと「今の画面は狭いから縦並びにしよう」「広いから横並びにしよう」と表示をかんたんに変えられます！

どうやって使うの？

SwiftUIでは @Environment という仕組みを使って、今の horizontalSizeClass を取得できます。

以下のコードを見てみてください。

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    var body: some View {
        if horizontalSizeClass == .compact {
            VStack {
                Text("コンパクトモード！")
                // コンパクト向けのUI
            }
        } else {
            HStack {
                Text("レギュラーモード！")
                // レギュラー向けのUI
            }
        }
    }
}

struct ContentView: View {

@Environment(\.horizontalSizeClass) var horizontalSizeClass

var body: some View {

if horizontalSizeClass == .compact {

VStack {

Text("コンパクトモード！")

// コンパクト向けのUI

}

} else {

HStack {

Text("レギュラーモード！")

// レギュラー向けのUI

}

画面がせまいときは縦並び（VStack）、ひろいときは横並び（HStack）にしています。

これだけで、iPhoneとiPadでレイアウトがガラッと変わるんです！すごくシンプルですよね。

具体例①：ボタンの並びを変えたい！

たとえば、3つのボタンを表示したいとき。iPhoneでは縦に並べて、iPadでは横に広げて表示したい！というときはこう書きます。

struct ButtonLayoutView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    var body: some View {
        Group {
            if horizontalSizeClass == .compact {
                VStack(spacing: 16) {
                    Button("ボタン1") { }
                    Button("ボタン2") { }
                    Button("ボタン3") { }
                }
            } else {
                HStack(spacing: 16) {
                    Button("ボタン1") { }
                    Button("ボタン2") { }
                    Button("ボタン3") { }
                }
            }
        }
        .padding()
    }
}

struct ButtonLayoutView: View {

@Environment(\.horizontalSizeClass) var horizontalSizeClass

var body: some View {

Group {

if horizontalSizeClass == .compact {

VStack(spacing: 16) {

Button("ボタン1") { }

Button("ボタン2") { }

Button("ボタン3") { }

}

} else {

HStack(spacing: 16) {

Button("ボタン1") { }

Button("ボタン2") { }

Button("ボタン3") { }

}

.padding()

}

画面サイズに合わせて、自然なレイアウトに切り替えられるので、見た目も操作感もバッチリです。

具体例②：Split View（画面分割）にも対応！

iPadで2つのアプリを並べて使っているとき（Split View）にも horizontalSizeClass は活躍します。

Split Viewでアプリの表示エリアがせまくなると、自動的に .compact に切り替わるのでこういうときにも対応できます。

struct SplitViewSupportView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    var body: some View {
        if horizontalSizeClass == .compact {
            Text("狭い画面用レイアウト")
        } else {
            Text("広い画面用レイアウト")
        }
    }
}

struct SplitViewSupportView: View {

@Environment(\.horizontalSizeClass) var horizontalSizeClass

var body: some View {

if horizontalSizeClass == .compact {

Text("狭い画面用レイアウト")

} else {

Text("広い画面用レイアウト")

}

「Split Viewのときだけ崩れる…」なんて悩みも、これで解決です！

まとめ

horizontalSizeClass を使うと、画面の横幅に合わせてレイアウトを簡単に切り替えられる！
.compact は狭い画面、.regular は広い画面のときに使う！
SwiftUIでは @Environment(\.horizontalSizeClass) で取得できる！
iPhone/iPadや画面の向き、Split Viewにも柔軟に対応できる！

参考リンク

「画面サイズでUIを切り替えられるようになりたい！」という方はまずこの horizontalSizeClass をマスターしておくととても便利です。

SwiftUIのレイアウト力がグッと上がりますよ！