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

# Cricut用のレイヤー付きSVG：色とパスを分け、配置を保つ方法

> Cricut用SVGのレイヤーを準備します。塗りの色と物理的なパーツを区別し、重ねる構成か隣接する構成かを選び、色ごとのAttachで配置を保つ方法を解説します。

Source: https://perfectvector.com/ja/blog/layered-svg-for-cricut

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

Cricut用のレイヤー付きSVGを作るには、編集可能なベクター図形から始め、各図形に使う素材を決め、部分同士の位置をそろえます。色を分けると作業を整理できますが、1色が必ず1図形、1つながりのパーツ、1素材レイヤーを表すわけではありません。

このガイドではSVGの色別形状の準備と、その後Design Spaceで行う確認を扱います。色分離は既存の図形を保持する操作です。重ねるための土台を自動設計したり、重複を取り除いたり、正しくカットして組み立てられると証明したりするものではありません。

> **素材を計画してからファイルを準備する**
>
> * 完成品に必要な色と細部だけを残します。
> * 重ねるレイヤーか、重ならずに隣り合うパーツかを意図的に選びます。
> * 色を1つずつ表示し、離れたパーツ、小さな断片、不要な輪郭を確認します。
> * マット上で相対位置を保つ必要がある場合は、Design Spaceで**色ごとにAttach**を使います。
> * 実際のマットプレビューを確認し、全体を作る前に素材を試します。

## 色、パス、パーツ、レイヤーの違い

**塗りの色**は図形の表示色です。**パス**は形状を表し、1本のパスには離れた輪郭や穴など複数のサブパスを含められます。[SVGパスの標準](https://www.w3.org/TR/SVG/paths.html)がこの構造を定義しています。そのため、パス数は物理的なカットパーツ数としては信頼できません。

**素材レイヤー**は作業上の判断で、特定の素材から切り、特定の組み立て段に置く図形を指します。SVGのグループは図形を整理できますが、グループ化だけで形状がつながったり、マット上の配置が保たれたりはしません。

| 見えているもの | わかること               | 確認すること                 |
| ------- | ------------------- | ---------------------- |
| 5つの塗りの色 | 正確に異なる5つの表示色        | どの色が別の素材や組み立て段を表すか     |
| 同色の複数パス | 複数の形状オブジェクトが同じ塗りを持つ | 意図したパーツ、穴、それとも不要な断片か   |
| 1本の複合パス | 1オブジェクトに複数の輪郭を含められる | カットと不要部分の除去後にどの領域が残るか  |
| グループ    | デザインのキャンバス上で一緒に動かせる | カッティングマットの準備後も配置が保たれるか |

背景に見えるというだけで白や白に近い図形を消さないでください。カットしたい細部かもしれません。まず単独で確認します。

## レイヤー付きSVGを順番に準備する

編集可能なSVGまたは元のラスター画像、作業用コピー、形状変更用のベクターエディター、素材計画、取り込みとマット確認用のDesign Spaceを用意します。変更前に手を加えていない原本を保存してください。

### 1. 残す色と細部を決める

境界のはっきりした単色領域を持つデザインなら扱いやすくなります。写真やグラデーションは意図的な簡略化が必要な場合があります。濃淡そのものが組み立て計画になるわけではありません。

素材の色と、その色に含めるオブジェクトを一覧にします。近い色をまとめるのは、同じ素材と見た目の役割を持つ場合だけです。色変更は別々のパスを統合したり重複を除去したりしないため、変更後に形状を確認します。[SVGの色数を減らすガイド](https://perfectvector.com/ja/blog/reduce-svg-colors)で詳しく扱っています。

PNGやJPGしかない場合は、まずベクターパスを作ります。PerfectVectorでは原本をアップロードして無料プレビューを比較し、**編集と書き出しの前に結果をアンロック**します。その後、利用できる色を調整し、書き出した形状を確認します。[現在のアンロックポリシー](https://perfectvector.com/pricing.md)は固有の結果1件につき1クレジットで、アンロック後の再ダウンロードは無料です。トレースした結果にも以下の確認が必要です。

### 2. 重ねるレイヤーか、隣接するパーツかを選ぶ

**重ねるレイヤー**は土台の上にほかの部分を置く構成です。**隣接するパーツ**はパズルのように重ならず隣り合います。Cricutの[Convert to Layersの案内](https://help.cricut.com/hc/en-us/articles/360009556313-How-to-upload-images-into-Design-Space)が両方の出力形式を説明しています。

既存のSVGでは図形そのものを調べます。下の大きな図形を小さな図形が覆うなら重ねる構成かもしれません。隣り合う境界が一致するパーツなら、隣接する構成に適している場合があります。同じ表示画像でも、その下にある形状は異なりえます。

必要な一体の土台がSVGにない場合は、ベクターエディターでシルエットを作り輪郭を調べます。重ならないパーツが必要なら、作業用コピーで該当する重複領域を差し引き、境界を確認します。色分離だけでは、どちらも実行しません。形状編集で消えた穴や細部を戻せるよう、原本を残します。

選んだビニールやアイロン転写材について、素材メーカーの重ね貼りの指示に従います。見た目が重なるデザインだからといって、あらゆる素材の組み合わせを重ねてよいわけではありません。

### 3. 色を1つずつ確認して分離する

対応する単色のSVGには[SVG Color Separator](https://perfectvector.com/svg-color-separator)を使えます。

1. 作業用SVGを選び、受け付けられたプレビューを確認します。準備で見た目が変わった場合は、受け入れる前に原本と比べます。
2. 正確な色、図形数、警告を確認します。このツールは似た色を自動的にまとめません。
3. 色ごとのプレビューで、意図した細部、不要な背景図形、予定の作品には小さすぎる断片を確認します。
4. 必要な色ファイルをダウンロードするか、全レイヤーをZIPでダウンロードします。
5. ダウンロードしたSVGを開き、共通の幅、高さ、`viewBox`が保たれていることを確かめます。共通の位置合わせ基準が必要なら、色ごとに異なる範囲へ切り詰めないでください。

これは正確な色ごとの別SVGファイルであり、組み立て用の新しい多層デザインを自動的に作るものではありません。結合した原本も残します。色別ファイルでは、色をまたいで交互に描画する元の順序を再現できません。ある色の図形が、別の色の図形の後ろにも前にも置かれている場合があるためです。実際の重ね順を決める前に、この警告を確認してください。

**小さな領域を確認する**

![断片の確認箇所を示すため、目と色の境界付近に小さな赤い印を付けた既存の鳥の説明図](https://perfectvector.com/blog/layered-svg-for-cricut/messy-layers.webp)

*既存の説明用拡大図です。印は形状を確認すべき箇所を示します。計測した変換ツール比較や、絵のカット結果を証明するものではありません。*

### 4. ファイルと一緒に素材計画を保存する

各色に使う素材と組み立て位置を記します。共通の座標基準と結合した原本を保ちます。同色のパーツが異なる段に属する場合は、色を共通の1レイヤーと扱わず計画上で区別します。

アップロード前に対応外の可視機能を修復します。Cricutの[SVGアップロードの制約](https://help.cricut.com/hc/en-us/articles/360009553213-Image-uploads-unsupported-items)は、パターンの塗り、クリッピングパス、編集可能な文字、リンク画像を扱っています。必要な文字を図形に変え、修復した絵を確認してからSVGを保存します。

## 準備したサンプルで確認できたこと

公開されている[森のキツネのSVGサンプル](https://perfectvector.com/landing/cricut/samples/cricut-fox-v1.svg)を使いました。実際のエンジンによる変換は2026年9月13日に記録されています。表示用コピーでは確認済みの全面背景を除去し、残った5つの塗り色は43本のパスに分かれていました。今回の更新では過去の変換を再実行せず、ローカルで色分離の作業を行いました。

同じ1254 × 1254の座標領域を持つ5つの色別SVGをダウンロードしました。内訳はオレンジ1本、クリーム11本、暗い色18本、緑8本、ラベンダー5本です。パスの座標と同色内の順序は保たれ、各色の単独描画は元データからその色だけを表示した描画と一致しました。

ツールは色をまたぐ重なり順についても警告しました。すべてのパスを保っていても、色ごとにまとめ直すと合成した見た目が変わりました。これが、色別の5ファイルだけでは組み立て準備済みの5つの物理レイヤーを証明できない理由です。緑のファイルにも、予定の作品サイズで確認する価値のある小さな断片がありました。

この検証の対象はローカルでのファイル準備とダウンロードです。Design Spaceへの取り込み、Cricutマットの確認、カット、不要部分の除去、組み立ては行っていません。

## Design Spaceで取り込み、配置を保つ

以下はCricutの現在の資料に基づく手順です。自分のファイル、アプリのバージョン、機械、素材で確認してください。

1. **SVGをアップロードしてCanvasを確認する。** Cricutの[アップロードガイド](https://help.cricut.com/hc/en-us/articles/360009556313-How-to-upload-images-into-Design-Space)では、レイヤー付きのベクター画像はグループ化された状態で入り、解除できると説明しています。実際の取り込みで予定の図形、色、物理サイズを確かめます。
2. **カットするレイヤーを1つずつ確認する。** ほかのレイヤーを隠し、穴や断片を調べます。[Contour](https://help.cricut.com/hc/en-us/articles/360009508613-How-to-use-Contour-in-Design-Space)は、選択したレイヤー内の不要なカット線を隠せますが、色分離を作る機能ではありません。
3. **配置が重要なパーツを色ごとにAttachする。** 必要なら多色デザインのグループを解除します。同じ素材色で配置を保つべきパーツだけを選んで**Attach**を使い、次の色でも繰り返します。別々の素材でカットする場合は、多色デザイン全体をAttachしないでください。
4. **マットプレビューを確認する。** [CricutのAttachガイド](https://help.cricut.com/hc/en-us/articles/360009380514-How-to-use-Attach-in-Design-Space)では、通常の素材節約配置はオブジェクトを詰める一方、Attachは互いの相対位置を保つと説明しています。予定の各色／素材マットと必要な位置を確認します。
5. **素材設定を確認して小さく試し切りする。** Cricutの[素材設定ガイド](https://help.cricut.com/hc/en-us/articles/360009501793-How-do-I-choose-material-settings)は、作品を作る前に小片で試すことを勧めています。素材に適した反転、カット、組み立ての指示に従います。

共通のSVG `viewBox`はファイルの位置合わせ基準として役立ちますが、別々のアップロードがCanvasの一致する位置に来ると証明するものではありません。Design Spaceでサイズと位置を確認します。マットでパーツが再配置されたらCanvasに戻り、色ごとのAttachの選択を確認し、再度プレビューします。Attachは選択範囲内の相対位置を保ちます。異なる色の組み立て時の位置合わせは自分で管理する必要があります。

元画像と形状のより広い確認には、[Cricut用SVGファイルの準備（英語）](https://perfectvector.com/blog/svg-files-for-cricut)を参照してください。[SVGのマットサイズプレビューガイド](https://perfectvector.com/ja/blog/preview-svg-on-cricut-mat)はファイルの寸法と収まりを確認するためのものです。最終的な配置は実際のDesign Spaceマットで確認します。

単色領域のラスター画像から始める場合は、[Cricut用のSVGパスを作成し](https://perfectvector.com/ja/svg-for-cricut)、プレビューを比較し、編集と書き出しの前にアンロックして、色を準備し、Design Spaceで各素材レイヤーを確認します。

## よくある質問

**SVGの各色は1つの物理的なカットパーツになりますか？**
いいえ。1色が複数のパスに現れ、1本のパスに離れた輪郭や穴が含まれる場合があります。形状を調べ、各素材と組み立て段に属するオブジェクトを決めます。

**PNGをレイヤー付きSVGにするには？**
ベクターパスを作り、配色を意図的に簡略化し、色ごとの形状を調べます。重ねる構成か隣接する構成かを選び、Design Spaceで取り込んだレイヤーとマットを確認します。色分離だけでは一体の土台は作られず、重複も除去されません。

**CricutマットにはGroupとAttachのどちらを使いますか？**
GroupはCanvasの整理に使います。選択した同素材のパーツがマット上でも相対位置を保つ必要がある場合は、色ごとにAttachを使います。マットプレビューを確認し、別々の素材でカットする場合は全色を一緒にAttachしないでください。

**Design Spaceはラスター画像をレイヤーに分離できますか？**
公開されているConvert to Layers機能はCricut Access加入者専用で、重ねる構成と隣接する構成を選べ、最大9レイヤーを作れます。生成されたレイヤーを確認してください。レイヤー数だけではカットや組み立ての適性はわかりません。

**色分離後のファイルで重ねた絵が変わるのはなぜですか？**
元SVGの描画順が色をまたいで交互になっている場合があります。図形を色ごとにまとめると、その順序を1つの重なりで保てません。原本を残し、重複形状を確認し、物理的な組み立て順を意図的に選ぶか設計し直します。

## 参考資料

1. [W3C — SVGパス](https://www.w3.org/TR/SVG/paths.html) — パス、サブパス、輪郭、穴。
2. [Cricut — Design Spaceへの画像アップロード](https://help.cricut.com/hc/en-us/articles/360009556313-How-to-upload-images-into-Design-Space) — ベクター取り込みとConvert to Layersの形式、制限。
3. [Cricut — Design SpaceでAttachを使う](https://help.cricut.com/hc/en-us/articles/360009380514-How-to-use-Attach-in-Design-Space) — マット上の相対配置と色ごとのAttach。
4. [Cricut — 画像アップロードの対応外項目](https://help.cricut.com/hc/en-us/articles/360009553213-Image-uploads-unsupported-items) — SVG機能の制約と修復。
5. [Cricut — Design SpaceでContourを使う](https://help.cricut.com/hc/en-us/articles/360009508613-How-to-use-Contour-in-Design-Space) — レイヤー内のカット線を隠す、戻す操作。
6. [Cricut — 素材設定を選ぶ](https://help.cricut.com/hc/en-us/articles/360009501793-How-do-I-choose-material-settings) — 素材設定と小さな試し切り。
7. [PerfectVector — SVG Color Separator](https://perfectvector.com/svg-color-separator) — 正確な色別ファイル、共通キャンバス、互換性の確認。
8. [PerfectVector — 現在のアンロックポリシー](https://perfectvector.com/pricing.md) — 変換プレビュー、アンロック、再ダウンロードのポリシー。

## Explore

- [Read the HTML article](https://perfectvector.com/ja/blog/layered-svg-for-cricut)
- [Cricut用PNGからSVGへの変換：背景・輪郭・配置を診断する](https://perfectvector.com/ja/blog/png-to-svg-for-cricut.md)
- [切断や購入の前にSVGファイルを確認する方法](https://perfectvector.com/ja/blog/check-svg-before-cutting.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)