【SwiftUI】余白の作り方｜Spacerとpaddingの違いを徹底解説

SwiftUIのSpacerとpaddingの違いとは？

SwiftUIでレイアウトを組んでいると、「Spacerとpaddingってどう違うの？」と感じたことはありませんか？
見た目は似ていますが、使い方や目的は大きく異なります。

この記事では、初心者でも分かるように、Spacerとpaddingの違いを具体例と一緒に比較していきます。

Spacerとは？

Spacerは空白（余白）を自動で埋めてくれるViewです。
主に HStack や VStack の中で使われ、Viewの間隔を広げたり、要素の位置を調整したりする時に使います。

HStack {
    Spacer()
    Text("中央に表示")
    Spacer()
}

この例では、Textが左右のSpacerによって中央に表示されます。

paddingとは？

paddingはViewの内側に余白を追加する修飾子（modifier）です。
指定した方向にスペースを設けることで、見た目の調整やタップ領域の拡大ができます。

Text("余白付きテキスト")
    .padding()

この例では、テキストの周囲にスペースが入り、少しゆとりのある表示になります。

Spacerとpaddingの違い【比較表】

使い分けの実例

✅ ボタンを右寄せにしたい時（Spacer）

HStack {
    Spacer()
    Button("ログイン") {
        // 処理
    }
}

✅ テキストに余白を追加したい時（padding）

Text("ようこそ！")
    .padding(.horizontal, 16)

よくあるミス・注意点

• Spacerは高さがない → VStackで使う場合は .frame(height:) で明示的に高さ指定が必要です。
• paddingのつけすぎ注意 → Viewのサイズが不必要に大きくなる場合があります。

Spacerとpaddingの併用例

Spacerとpaddingは、同時に使うことでより柔軟なレイアウト調整が可能です。
ここでは、ボタンを右下に配置しつつ、少し内側に寄せたいという場面を例にします。

VStack {
    Spacer()
    HStack {
        Spacer()
        Button("送信") {
            // 処理
        }
        .padding(.trailing, 16)
    }
    .padding(.bottom, 16)
}

このコードでは、以下のようなレイアウトになります：

• Spacer() で画面下＆右に寄せる
• padding(.trailing, 16) でボタンを右端から少し内側に寄せる
• padding(.bottom, 16) で画面下との間隔を調整

このように、「大きな空白はSpacer、細かな調整はpadding」という使い分けが便利です。

まとめ

Spacerとpaddingは、どちらも余白を作る手段ですが、役割が異なります。

• Spacer：レイアウト調整用の空白を作るView
• padding：Viewの内側に余白を設ける修飾子

どちらも正しく使い分けることで、SwiftUIのUI設計がより快適になります。
ぜひ実際のプロジェクトで試してみてください！