> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# シャドーボックス用SVG：つながる紙のレイヤーを設計する

> 枠を揃え、紙の形をつなぎ、重ね順を確認したシャドーボックス用SVGを設計します。独立した月が保存形状をどう変えるかも確認します。

Source: https://perfectvector.com/ja/blog/shadow-box-svg-connected-layers

Language: ja
Author: Irene Kim
Published: 2026-10-08T08:00:00+09:00
Updated: 2026-10-08T08:00:00+09:00

シャドーボックス用のレイヤー付きSVGを作るには、奥行きごとのレイヤーを、ひと続きのパネルとして設計します。枠、その奥行きに属するデザイン、残したい紙をつなぐために十分な接続形状が必要です。各パネルの外形寸法を同じにし、重なった素材の形を統合してから、手前のパネルが何を隠すかを確認します。

このガイドでは、3枚のパネルで作る山の風景を使い、SVGの設計とファイル準備を説明します。保存した輪郭を調べ、ブラウザーでレンダリングしました。Cricut Design Spaceへの読み込みや紙のカットはしていないため、つなぎの強度、素材設定、実物の組み立ては引き続きテストが必要です。

## 各紙パネルに何を配置するか決める

**奥行きレイヤー**は、別のパネルの前後に置く1枚のパネルです。色は画面上で見分ける助けになりますが、パネルの役割は位置と形で決まります。PNGを色別に分けても、それらの関係は決まりません。ビニールや平面的な色の重ね合わせには、別の[Cricut向けレイヤー付きSVGガイド](https://perfectvector.com/ja/blog/layered-svg-for-cricut)を使ってください。

**残す素材**は、残したい紙の部分です。**切り抜き**は、取り除く穴です。**ブリッジ**は、細部をパネルの残りの部分につなぐ、残す素材の帯です。**浮いた島**は、残す素材のうち、そのパネルにつながっていない部分です。

以下の例では、奥のパネルに山と月、中間のパネルに木と地面、手前のパネルに低い土手を配置します。すべてのパネルに外枠があり、残す細部はそれぞれ枠につながります。

**保存したSVGの設計例**

![つながった200 mmのSVGパネル3枚、月が独立した反例、位置を揃えた平面の重ね合わせをブラウザーで表示したもの](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp)

*3枚のパネルはそれぞれ、残す領域がひと続きになっています。月が独立した版には領域が2つあります。平面の重ね合わせは形同士の隠れ方を示すもので、紙の強度や実物の奥行きを再現するものではありません。*

## 外形寸法を揃えた3つのレイヤーを作る

図形の差分と統合を扱えるベクターエディター、単純なモチーフ、予定する額の寸法が必要です。形を統合する前に、編集可能なマスターを残します。使えるベクターデータがすでにあれば、それから始めます。モチーフがPNGやJPGだけにある場合は、まずパスを取り出し、紙の接続は別に設計します。

### 1. 枠を1つ作って複製する

額の内側でパネルに使えるスペースを測ります。最終的な作品サイズを選ぶ前に、裏板と予定するスペーサーが占めるスペースを考慮します。

今回のファイルは、外側が**200 × 200 mm**の正方形で、**枠の幅は12 mm**です。開口部はx = 12から188 mm、y = 12から188 mmです。これは例の寸法であり、すべての額への推奨サイズではありません。

外側の正方形と、中央に置く小さい正方形を描きます。小さい正方形を差し引いて穴を作り、その枠を3枚のパネル用に複製します。Inkscapeは、**差分**を差し引き、**統合**を選択したパスの共通の外形を残す操作として説明しています。差分では重なり順が重要で、差し引く形を残す形の上に置きます。[Inkscapeのブール演算](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html)

すべてのレイヤーで同じページ原点と外側の正方形を使います。書き出しごとに個別のモチーフに合わせて切り詰めないでください。例のファイルはすべて `width="200mm"`、`height="200mm"`、`viewBox="0 0 200 200"` を宣言し、保存した形状も同じ200 mmの範囲を持ちます。SVGの `viewBox` は、ビューポートへ対応させる座標の長方形を定義します。実物の寸法は使用先アプリでも再確認します。[W3CのSVG座標系](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute)

### 2. 奥の風景を枠につなぐ

山のシルエットの底辺が、枠の下側の帯に重なるよう置きます。その上に月を加えます。穴の中に月だけを置くと、残す紙の別パーツになるため、奥のパネルを1枚につながったままにしたいなら、意図的な接続が必要です。

この例では、月の中心を **x = 145、y = 46 mm**、公称半径を **14 mm** とします。**x = 143から147 mm**の縦長の長方形で、月を上の枠につなぎます。統合前に、この長方形は月と枠の両方に重なっています。

枠、山、月、ブリッジを統合します。できた輪郭を調べます。元のオブジェクト同士の重なりの境界は消え、余分な内部カット輪郭として残らない状態にします。

例のブリッジの幅は **4 mm** です。この数値は確認したファイルを説明するもので、使う紙、長さ、機械、仕上がりサイズに対する最小幅を定めません。予定する素材と形状で小さなテストを行ってください。

### 3. 中央のモチーフを底部でつなぐ

木の樹冠、幹、地面をつなげておきます。この例の幹は **8 mm幅**で、x = 56から64 mmです。幹は樹冠と地面に重なり、地面は枠の下側の帯に重なります。これらの形を統合して中間パネルにします。

目、星、文字のカウンターによって、どの領域がつながるかが変わる場合があります。簡略化する前に、その細部を残す素材と切り抜きのどちらにするか確認します。書き出し後に穴が予期せず埋まる場合は、[SVGの穴と塗り規則の診断](https://perfectvector.com/ja/blog/svg-holes-fill-in)に従います。

### 4. 主題が見えるように前景を低く保つ

3つ目の枠に低い土手を足し、下の帯と統合します。山を木の後ろ、土手を手前にして3枚の位置を揃えます。

**遮蔽**とは、見る方向から1つの形が別の形を隠すことです。この平面の重ね合わせでは、木が山の一部を隠し、土手が木の根元を隠します。月は見えたままです。土手が樹冠や他の見せたい中心的な細部を隠す場合は、書き出す前に土手を低くするか、主題を動かします。

画面上の重ね合わせは、見える形の関係を確認するのに役立ちます。スペーサーの厚さ、見る角度、照明、額の内側で使える奥行きは、実物のモックアップで確認する必要があります。

## 保存したSVGで素材の接続を調べる

1つのパス要素に、つながっていない複数の形が含まれる場合があります。**パス数を数えても接続の検証にはなりません。** 複合パスは1つのパスオブジェクトに複数の輪郭を含み、どの囲まれた領域を塗るかは塗り規則で決まります。SVG仕様は、今回のファイルで使う `evenodd` を含め、それらの塗り規則を定義しています。[W3CのSVGの塗りと塗り規則](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty)

例のパネルは、残す領域を統合して閉じた輪郭を書き出し、保存したSVGデータから塗り領域を再構成して作りました。これにより、色付きの形が重なっただけの状態ではなく、実際に書き出した形状を確認しました。

| 保存ファイル        | つながった残す領域の数 | 確認から分かること          |
| ------------- | ----------- | ------------------ |
| 奥：山、月、ブリッジ    | 1           | 月がブリッジを通して枠につながる   |
| 中間：木と地面       | 1           | 樹冠、幹、地面、枠が1つの領域になる |
| 手前：低い土手       | 1           | 土手が枠につながる          |
| ブリッジを除いた奥のパネル | 2           | 月が独立した残す領域になる      |

4つのファイルはいずれもパス要素を1つ含みます。つながったパネルには、外側の境界と穴の境界という閉じた輪郭が2つずつあります。月が浮いた版では、独立した月のための3つ目の輪郭があります。そのため、レイヤー名、グループ、パス数だけでは、意図した紙がつながったままになるかは分かりません。

自分の書き出しでは、次を確認します。

1. 保存したSVGを開き直し、各パネルを単独で単純な塗りを使って表示します。
2. 各細部から枠まで、残す素材の中を通る連続した経路をたどります。形がほぼ接する場所は拡大してください。点で触れるだけでは、測定できる幅の紙の帯がありません。
3. つなげたオブジェクトの周りの輪郭を調べます。残したい素材を分断する重なりの継ぎ目は統合します。
4. 穴を形状として確認します。別の形の上に白い形を描くと、下の輪郭を取り除かなくても穴のように見える場合があります。
5. 保存したレイヤーを共通の原点と寸法で使い、平面のプレビューを組み直します。

細部が孤立したままなら、ブリッジを加えて統合する、つながった素材の上へ移す、切り抜きにする、別に貼り付けるパーツとして計画する、といった方法があります。その選択を組み立て計画に明記します。

## モチーフがラスター画像の場合のPerfectVectorの役割

PerfectVectorは、適切なPNGやJPGのデータから編集可能なSVGパスを取り出せます。[Cricut向けSVGの手順](https://perfectvector.com/svg-for-cricut)では、使用先ファイルを準備する前に形をプレビューし、色を調整できます。再利用したいラスターモチーフにはこの工程を使えますが、枠の作成、ブリッジ、奥行きの順序は別の設計作業です。

はっきりしたシルエットか、単純なフラットイラストから始めます。パネルへ置く前に、取り出した輪郭に不要な断片や欠けた穴がないか調べます。[線画からSVGへのガイド](https://perfectvector.com/ja/blog/line-art-to-svg)は、輪郭としてトレースした形と、元に描いた線の違いを説明しています。

細かい写真では、どの物体をどの奥行きに置き、どの形を紙にするかを決める必要があります。パネルを計画する前に、その形を簡略化するか描き直します。自動の色分けは、その組み立て計画を作るものではありません。

## 使用先ファイルを確認してから素材を試す

外形寸法が揃い、残す領域が意図どおりにつながり、重なりの継ぎ目がなく、保存した重ね合わせで正しい細部が見えれば、SVG設計の確認は完了です。組み立て順が分かるように、マスターファイルと一緒に番号付きのレイヤー一覧を残します。

完成品を作る前に、実際のカッティングアプリと額で次を確認します。

* 読み込んだパネルの寸法が予定サイズと一致する。
* プレビューで穴が残り、不要な内部カットがない。
* 各パネルに、予定したカット操作と素材が割り当てられている。
* 最も長いブリッジの小さなサンプルが、カット、マットからの取り外し、取り扱いに耐える。
* 選んだスペーサーが残す素材の上に収まり、穴から見えない。
* 組み上げたレイヤーが、裏板を付けた状態で額に収まる。

読み込みで穴や輪郭が変わったら、保存した形状に戻り、その輪郭を修正します。ブリッジが破れたり曲がったりする場合は、幅、長さ、接続部、素材を見直して再テストします。ブラウザーの描画だけでは、こうした実物の問題は解決できません。[Cricut向けSVG準備の総合ガイド](https://perfectvector.com/ja/blog/svg-files-for-cricut)が、より広いファイル確認を扱っています。

## よくある質問

### 画像を自動でシャドーボックス用SVGにできますか？

ベクター化で画像から形を取り出せますが、奥行きレイヤー、枠への接続、切り抜き、組み立て順は自分で選ぶ必要があります。単純なシルエットは出発点に適しています。複雑な写真は、手作業の簡略化や描き直しが必要な場合があります。

### シャドーボックスの各パネルは1つのSVGパスにする必要がありますか？

1つのパスにも、つながっていない残す領域を含められます。パス数に頼らず、残す領域と実際の輪郭を確認してください。この例では、つながった奥のパネルも、月が独立した反例も、パス要素は1つです。

### ブリッジの幅はどのくらいにすべきですか？

素材、長さ、仕上がりサイズ、カットの手順に合わせて選び、試してください。例示した月のブリッジは4 mm幅ですが、カットも強度試験もしていません。これは例の寸法であり、共通の最小値ではありません。

### シャドーボックスのレイヤーはCricutの色レイヤーと同じですか？

シャドーボックスのレイヤーは、奥行き配置の中のパネルです。色レイヤーは、色や素材ごとにデザインを分けるものです。奥行きパネルには1つの枠につないだ複数のモチーフを含められます。それらを色だけで分けても、接続の設計にはなりません。

## 出典

1. [Inkscape — ブール演算](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — 統合、差分、結合と重なり順の役割を説明。
2. [W3C — SVGの座標系・変換・単位](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — `viewBox` を通して対応させる座標の長方形を定義。
3. [W3C — SVGの描画](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — 塗り、サブパス、例で使う `evenodd` の塗り規則を定義。
4. [PerfectVector — Cricut向けSVG](https://perfectvector.com/svg-for-cricut) — ラスターデザインの取り出し、形の確認、カット前の検証を説明。

***

モチーフがPNGやJPGなら、[PerfectVectorでSVGパスを準備し](https://perfectvector.com/ja/svg-for-cricut)、輪郭と穴を調べます。エディターで枠の接続と奥行きレイヤーを作り、保存したパネルを開き直し、小さな素材サンプルを試してから、完成するシャドーボックスを作ってください。

## Explore

- [Read the HTML article](https://perfectvector.com/ja/blog/shadow-box-svg-connected-layers)
- [Cricutのノックアウト：土台と名前のレイヤーを設計する](https://perfectvector.com/ja/blog/cricut-knockout-real-cutouts.md)
- [CricutのSVGでカス取りが大変な理由とファイルの直し方](https://perfectvector.com/ja/blog/cricut-svg-hard-to-weed.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)