【Swift】.strokeBorder とは？使い方や.stroke との違い、活用時の注意点までわかりやすく解説

2025年9月25日 2025年9月25日

SwiftUIで図形やビューに枠線をつけたいときに便利なのが .strokeBorder() です。

「.stroke とどう違うの？」と疑問に思う人も多いと思います。

実は .strokeBorder() は「枠線が図形の内側に収まる」ように描画されるのが特徴で、見た目やUI設計に大きく影響する場面があります。

この記事では .strokeBorder() の意味や使い方、.stroke() との違い、活用シーン、注意点までわかりやすく解説します。

.strokeBorder() とは？

.strokeBorder() は SwiftUI の Shape に対して使える修飾メソッドで、枠線を図形の境界線「内側に沿って」描画します。

通常の .stroke() だと線が図形の外側にもはみ出してしまいますが、.strokeBorder() を使うと枠線が図形の内側にきっちり収まります。

つまり「指定したサイズの図形を保ったまま、内側に枠線を描く」のが .strokeBorder() の役割です。

具体例：矩形に枠線を描く

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 40) {
            // .stroke の場合
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 250, height: 150)
                .overlay(
                    Rectangle().stroke(.red, lineWidth: 10)
                )
                .overlay(Text(".stroke"))

            // .strokeBorder の場合
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 250, height: 150)
                .overlay(
                    Rectangle().strokeBorder(.blue, lineWidth: 10)
                )
                .overlay(Text(".strokeBorder"))
        }
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

VStack(spacing: 40) {

// .stroke の場合

Rectangle()

.fill(Color.yellow)

.frame(width: 250, height: 150)

.overlay(

Rectangle().stroke(.red, lineWidth: 10)

)

.overlay(Text(".stroke"))

// .strokeBorder の場合

Rectangle()

.fill(Color.yellow)

.frame(width: 250, height: 150)

.overlay(

Rectangle().strokeBorder(.blue, lineWidth: 10)

)

.overlay(Text(".strokeBorder"))

}

このコードでは、同じサイズの四角形に赤と青の枠線をつけています。

.stroke → 線幅の半分が外にはみ出す
.strokeBorder → 線幅すべてが内側に収まる

そのため .stroke の方は「外に大きく見える」枠線になり、.strokeBorder の方は「図形の中を削るように枠線が描かれる」違いがあります。

上記では.strokeの方が四角形が大きくなっていますよね？（わずかですが）

この違いはボタンやカードUIなど、レイアウトをきっちり揃えたいときにとても重要です。

.stroke と .strokeBorder の違い

.stroke はシンプルに線を描くのに適していますが、線が外側にはみ出すため、レイアウト上で意図せずサイズが大きく見えることがあります。

一方で .strokeBorder は「内側だけ」に線を引くため、図形のサイズを正確に維持しつつ枠線を付けたいときに便利です。

項目	.stroke	.strokeBorder
描画位置	境界線の内外に半分ずつ広がる	境界線の内側だけに描画
見た目	図形のサイズが少し大きく見える	サイズを保ったまま内側に枠線
よく使う場面	シンプルに線だけ描きたいとき	ボタンやカードなど正確なサイズを保ちたいとき

特に UI 要素（ボタンやカードなど）の装飾では、サイズの一貫性を保つために .strokeBorder を使うのが実用的かと思います。

主要な引数とその意味

.strokeBorder の主な引数には、色・太さ・アンチエイリアスの有無などがあります。

これらを適切に指定することで、見た目をコントロールできます。

項目	説明	例
content（必須）	線の色やグラデーションを指定する	`.strokeBorder(Color.blue)`
lineWidth	枠線の太さをポイントで指定する	`.strokeBorder(.blue, lineWidth: 5)`
antialiased（省略可）	アンチエイリアス（図形や文字の輪郭を滑らかに見せるための処理）を有効にするかどうか。通常は true（滑らかに描画される）	`.strokeBorder(.blue, antialiased: true)`

content は必ず指定が必要で、lineWidth と antialiased は必要に応じて追加します。

特に lineWidth を変更することで、枠線の印象を大きく変えることができます。

.strokeBorder の活用シーン

.strokeBorder は、UI の装飾やレイアウトの正確さを求められる場面で特に役立つ修飾です。

下記のような場面で活用できます。

ボタンやカードの装飾
→ レイアウト崩れを防ぎつつ枠線をつけたい時
グリッドや一覧UI
→ 枠線込みで正確なサイズを維持したいとき
図形の正確な大きさをキープしたいとき
→ デザインガイドライン通りにピクセルを揃えたいケース

このように「正確なサイズを保ちながらデザインしたい」ときに .strokeBorder は最適です。

.strokeBorder を使うときの注意点

.strokeBorderは便利ですが、下記の点には注意しましょう。

Shape に対して使う必要がある
→ 普通のビューに直接 .strokeBorder はつけられません（Rectangle や Circle などの Shape が対象）。
内側が削られるので内容と干渉することがある
→ 例えば Text を置いているボタンに太い枠線をつけると、文字と枠線が近すぎることがあります。その場合はpadding を調整しましょう。

正しく使うことで、デザイン崩れを防ぎながらきれいに枠線を表現できます。

特に UI 要素のサイズ感を厳密に管理したいときに有効です。