Figmaのストロークで内側と外側の違いとは？位置で変わる見え方を解説

図形の輪郭を整えるストローク。細かいデザインの調整では「内側にストロークを貼るか」「外側か」「中央か」の選択が意外と重要です。Figma にはこれらを簡単に切り替える機能がありますが、違いを理解していないと意図しない見え方になったり、開発時に実装で困ることがあります。この記事では Figma のストローク設定、位置ごとの視覚的影響、SVG／レイアウト上の注意点、使い分けのコツなどを分かりやすく解説します。さあ、ストロークの「内側」「外側」の違いをマスターしましょう。

Figma ストローク 内側 外側 違い：基本概念とプロパティ

Figma のストローク設定には「位置（Position）」というプロパティがあり、輪郭線をパスの内側（Inside）、外側（Outside）、中央（Center）に描くかを選べます。多くの形状におけるデフォルトは内側ですが、線（Line）では中央配置が基本です。これを変えることで線の見た目・図形の寸法・デザインの印象に大きな差が出ます。
またエクスポート時（特に SVG 形式）には、内側・外側ストロークは中央ストロークに簡素化されるため、見た目には変化がなくてもコード上は違いが出る可能性があります。
この章ではまず、Figma におけるストローク位置の基本と、それぞれの特徴を整理します。

内側ストロークとは

内側ストローク（Inside Stroke）は、図形の元のパスの内側に沿ってストロークが描かれる設定です。パスの外側にはストロークが広がらず、内部領域を侵食する形になります。
この設定を選ぶと、図形全体の外形（外側の輪郭線の外端）は元の形と同じ位置になるため、外部のスペース調整や配置レイアウトでの予測がしやすいというメリットがあります。特に UI コンポーネントなど、隙間や位置を厳密に扱いたいデザインで有効です。

外側ストロークとは

外側ストローク（Outside Stroke）は、図形のパスの外側にストロークが描かれる設定です。元の図形パスを囲むように外へ広がるため、図形そのものの表示領域がストロークにより拡張されます。
見た目のインパクトが強く、図形の外側に余裕を持たせて強調したい状況で使われることが多い設定です。ただし外側にストロークがあるため、他の要素との間隔調整を慎重に行わないと重なったりずれたりする可能性があります。

中央ストロークとは

中央ストローク（Center Stroke）は、パスの中心線を基準にストロークが内外に半分ずつ広がる設定です。ストロークの重心がパス中央にあるため、視覚的にバランスが取りやすく、多くの図形編集ソフトや描画環境で標準的な設定です。
しかし Figma で“内側”あるいは“外側”を使った場合にこの中央設定に変換されることがあり、特に SVG やコード設計の際には「中央ストロークしか反映されない」ケースを理解しておくことが重要です。

見た目と寸法の変化：内側・外側の違いの影響

ストロークの位置を変えることは見た目だけでなく、図形の寸法・線の細さ・角処理にも影響を与えます。ここでは具体的にどう変わるのか、比較しながら見ていきます。

図形の寸法への影響

内側ストロークを設定していると、ストロークの分だけ図形の内部領域が縮みます。そのため図形全体を基準にしたレイアウトでは、ストロークの細さを含めて寸法を考慮する必要があります。一方、外側ストロークでは外側に広がるため、見た目的には図形が大きく見えることになります。中央ストロークの場合は内外に広がるため、外形がどちらかの方向にずれやすくなる特徴があります。

視覚的な印象の違い

ストロークが内側にあると図形が締まって見える印象を与えます。特にモダンな UI やアイコン設計では、シャープで整った印象を出したい場合に好まれることが多いです。外側ストロークはエッジが拡張され、太さが強調されるため、強調したい要素に適しています。中央ストロークはその中間で、両側へ広がる印象があるため厚みや重さを感じさせることがあります。

角（Corner）の扱いとストロークの重なり

角の処理（Join）は、ストローク位置によって見え方が変わります。内側・外側どちらでも角が尖った（Miter）・ベベル・ラウンドに設定できますが、外側ストロークでは尖った角が特に目立ちやすくなります。中央ストロークでは内外に広がる分、角の見える部分が両側に影響します。高解像度処理でもレンダリングの際にアンチエイリアスの影響で角がにじんで見えることがあるため、用途によりラウンドやベベルを選ぶ配慮が必要です。

技術的制約とSVG／コードへの影響

デザインから制作（エクスポート・コーディング）に移す際、内側・外側ストロークには技術的に把握しておきたい制約があります。特に SVG 出力時や Web レイアウト、Auto Layout の挙動に注意が必要です。

SVG 形式でのエクスポート時の簡素化

Figma で内側または外側のストロークを設定して SVG にエクスポートすると、そのストローク位置は中央ストロークとして簡素化されます。見た目は変わらないことが多いですが、SVG コード中ではストロークが中央に配置されるため、再編集やコントロールで期待した通りに動かないことがあります。

Auto Layout やレイアウトサイズへの影響

Auto Layout 機能を使っている場合、内側ストロークを含める／含めない設定により、オブジェクトのサイズ表示が変わります。ストロークの重さがレイヤーの寸法に含まれるかどうかを設定できるため、レイアウト設計時に余白や配置にずれが出ないよう注意が必要です。外側ストロークを使うと、見た目上のサイズが拡大するため、他要素との間隔に余裕を持たせる設計が望ましいです。

Web実装（CSS等）とのギャップ

Web の CSS では通常、線（border）は中央ストロークのように振る舞うか、ボックスモデルや box-sizing の影響を受け外側に重なることがあります。デザイナーが内側ストロークを使っていても、開発側で実装すると外側になることがあるため、デザイン・開発間のルール設定や確認が必要です。ギャップを小さくするために Figma で作成したコンポーネントの見え方をコード実装視点でプレビューする運用が推奨されます。

使い分けのコツ：デザイン目的別に判断するポイント

どのストローク位置を選べばよいかは、デザインの用途や目的によって変わります。ここでは具体的な用途別におすすめの設定を整理します。

アイコンや小さな図形

アイコン等の細かい図形では、内側ストロークが望ましいことが多いです。理由は線の太さによる外側への膨らみを抑えて、図形のサイズや比率を重視できるためです。中央ストロークを使うと線が外へはみ出すことがあり、アイコンのボックスや背景と干渉する可能性があります。

ボタンの枠・カードなど強調部分

クリック可能な要素やカードデザインでは、外側ストロークを使うと周囲との差別化が図りやすくなります。外側にストロークを配置することで余白を活かした囲み感や視線を引く効果があります。ただし外側が余裕のあるレイアウトであることが前提です。

印刷・高解像度用途

印刷や高 DPI ディスプレイで見せる用途では、ストロークの設定を内側にしたほうが輪郭がきれいに見えることがあります。外側ストロークは端がぼやけることもあり得ます。中央ストロークを使う場合は線幅や角の処理を丁寧に設定することが重要です。

配置・余白・整列との整合性

多数の要素を画面やコンポーネント内で整列させるとき、内側ストロークのほうが位置ズレが出にくく予測しやすいです。外側ストロークでは見た目と実際の境界線が異なるため、整列基準やガイドラインを明確にしておくことが重要です。中央ストロークは内外の両方を意識する必要があります。

実践でよくある誤解と注意点

デザイン過程ややり取りの中で、ストローク位置に関する誤解やミスの原因となる要素がいくつかあります。ここでよくある誤りとその回避方法を紹介します。

SVG エクスポート後に位置が変わる問題

先に述べたように、内側または外側に設定されたストロークは SVG 出力時に簡素化されて中央ストロークと見なされることがあるため、配置や図形のふちが意図した位置にならないと感じることがあります。対策として、エクスポート前に必ずプレビューを確認し、重要な図形はベクターに変換（アウトライン化）しておくことが安心です。

線幅が細すぎて目立たない／崩れて見えるケース

線幅が小さいとき、特に外側ストロークでは細部が潰れたりアンチエイリアスの影響で線がぼやけたりすることがあります。アイコンなどで 1px や 0.5px 等を使う場合には、スクリーンサイズに合った見直しや、必要なら中央または内側配置の方が確実に見えることがあります。

異なる画面で比率が狂うことがある

Retina や高 DPI の画面、あるいは拡大縮小表示時に、中央ストロークや外側ストロークで線の見た目がぼやけたり、図形が微妙にずれて見えることがあります。こういった場合には、ラスタライズプレビューで確認したり、ストローク付き図形をピクセルグリッドにスナップさせるなどの調整が効果的です。

表で比較：内側・外側・中央ストロークの特徴

違いを一目で把握できるように、主要な項目で比較表を作成します。

おすすめの設定と実用的なワークフロー

デザインの効率化と成果物の整合性を高めるために、実際に使うときのおすすめ設定やワークフローを紹介します。

デザインシステムの基準を決める

チームでプロジェクトを進めるなら、まず「ストロークを内側／外側／中心どれを基本とするか」のルールをつくることが重要です。例として、UI コンポーネントは内側、強調枠は外側、アイコンは中央というようにカテゴリごとに方針を決めておけば混乱が減ります。

アウトライン化して編集可能な形にする

ストロークをアウトライン化（ベクター化）することで、線幅や位置の制約から自由になり、どの位置でも見た目どおりに扱えるようになります。特にロゴや複雑なアイコンなど、細部にこだわる要素にはこの方法が有効です。ただしアウトラインにしてしまうとストロークプロパティの変更ができなくなるため、複製を残すなどの準備をおすすめします。

Web 実装との整合性を常に確認する

開発に渡すデザインでは、CSS ボーダーや box-sizing、アウトライン等の挙動を確認し、ストローク位置の意図がコードで再現可能かを検証しておくことが大切です。デザインファイルだけでなく開発レビューで見た目を含めたチェックを行い、ズレが出ないようにします。

視覚テストを取り入れる

異なる画面サイズや縮小表示・拡大表示でどう見えるかを確認しましょう。特にアイコンや UI 要素などは、縮小時にストローク位置による視認性の差が出ることがあります。ピクセルグリッドにスナップする、プレビューを複数サイズで見せるなどの作業を入れると安心です。

まとめ

Figma におけるストロークの内側・外側・中央という位置設定は、見た目だけでなく寸法・レイアウト・エクスポート後の表示までに影響します。
内側ストロークは見た目の外形を保ちつつ内部を整えるのに優れ、細かく整列させたい UI やアイコンなどに適しています。外側ストロークは強調表現や余白を活かしたデザインに向いており、中央ストロークはバランスを取りたいケースに適します。
制作時にはデザインシステムの方針を明確にし、SVG の簡素化や Web 実装の差異などを把握しておくことが肝要です。ストローク位置の違いを理解・使い分けることで、より洗練されたデザインを効率良く作れるようになります。