【Swift】Capsuleとは？使い方や活用シーン、注意点までわかりやすく解説

2025年9月27日 2025年9月27日

SwiftUIでボタンや背景、枠線のデザインを整える時によく使われるのが Capsule です。

名前の通り「カプセル型（両端が丸い長方形）」を描画するシェイプで、UIを柔らかく見せたいときに大活躍します。

この記事では、Capsuleの基本的な意味や使い方や活用シーン、注意点までわかりやすく解説します。

Capsuleとは？

Capsule は SwiftUI に用意されている Shape の一種で、長方形を両端が丸くなるように変形した図形です。

イメージとしては「薬のカプセル型」で、ボタンやラベルの背景に使うことで角丸の矩形よりも自然で柔らかいデザインが実現できます。

例えば、角丸矩形の RoundedRectangle も似ていますが、Capsule は常に「短辺の半分の半径」で端を丸めるため、どんなサイズでも自然な楕円長方形になります。

具体例：Capsuleを描画してみる

import SwiftUI

struct ContentView: View {
    var body: some View {
        Capsule()
            .fill(Color.blue)
            .frame(width: 200, height: 60)
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Capsule()

.fill(Color.blue)

.frame(width: 200, height: 60)

}

このコードでは、青色に塗りつぶした Capsule を幅200、高さ60のサイズで表示しています。

実行すると、下記のように両端がきれいに丸くなった長方形が描画されます。

ポイントは、Capsule は縦横比に応じて形が変わるということです。

高さが大きいとほぼ楕円に近づき、幅が広いと細長いカプセル型になります。

例えば、上記コードで高さだけ120に変更すると下記のようになります。

具体例：Capsuleをボタンに活用する

Capsule の一番よくある使い方は、ボタンの背景です。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("ボタンが押されました")
        }) {
            Text("Capsuleボタン")
                .foregroundColor(.white)
                .padding()
                .frame(width: 200, height: 50)
                .background(
                    Capsule().fill(Color.green)
                )
        }
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Button(action: {

print("ボタンが押されました")

}) {

Text("Capsuleボタン")

.foregroundColor(.white)

.padding()

.frame(width: 200, height: 50)

.background(

Capsule().fill(Color.green)

)

}

この例では、テキストを Capsule で囲んでボタン風にしています。

普通の角丸よりも柔らかく、フラットデザインのアプリにぴったりのボタンを簡単に作ることができます。

ボタンのタップ領域も Capsule のサイズに広がるので、ユーザーにとって押しやすいのも良い点ですね！

具体例：Capsuleのストローク（枠線）を使う

Capsule は塗りつぶしだけでなく、枠線だけを描くことも可能です。

Capsule()
    .stroke(Color.red, lineWidth: 3)
    .frame(width: 200, height: 60)

Capsule()

.stroke(Color.red, lineWidth: 3)

.frame(width: 200, height: 60)

このように書くと、中は透明で赤い枠線だけが表示されます。

「枠だけCapsuleにして、中は背景色を活かす」といったデザインにもよく使われます。

Capsuleの活用シーン

Capsule は次のような場面で活躍します。

ボタンの背景にして、丸みのあるデザインを作りたいとき
タグやラベルをカプセル型で表示したいとき
アイコンや画像を囲む背景としておしゃれに見せたいとき
枠線を使って強調したいとき

具体例：タグ風デザイン

Capsuleを使ってタグ風のデザインを作ることも可能です。

Text("SwiftUI")
    .padding(.horizontal, 12)
    .padding(.vertical, 6)
    .background(
        Capsule().fill(Color.orange.opacity(0.2))
    )
    .overlay(
        Capsule().stroke(Color.orange, lineWidth: 1)
    )