---
url: "/ja/copydoc/sync/merge-tags.md"
description: "CopyDocの強力なマージタグ構文を使うと、書式を保ったままテキストレイヤー内のコンテンツを動的に置き換えられ、1つのレイヤーで複数の置き換えも行えます。"
---

# Figmaでマージタグを使い、スプレッドシートのデータに置き換える

> CopyDocの強力なマージタグ構文を使うと、書式を保ったままテキストレイヤー内のコンテンツを動的に置き換えられ、1つのレイヤーで複数の置き換えも行えます。

### 動画チュートリアル：スプレッドシートからFigmaテキストレイヤーのマージタグを同期する

この動画では、CopyDocプラグインを使って、スプレッドシートからFigmaテキストレイヤーのマージタグを同期する方法を説明しています。
[Embedded media](https://www.youtube-nocookie.com/embed/odONMaXerQQ)
### 動画チュートリアル：スプレッドシートのセルで高度なマージタグを使ってコンテンツを同期する

この動画では、CopyDocプラグインを使って、スプレッドシートのセルで高度なマージタグを使い、Figmaのテキストコンテンツを同期したりFigmaレイヤーの名前を変更したりする方法を説明しています。
[Embedded media](https://www.youtube-nocookie.com/embed/M3TCf3VWOlg)

[Video](/assets/videos/copydoc/sync/placeholder-sync.mp4)

## マージタグの構文 {#merge-tag-syntax}

CopyDocでは、`#{columnName}`というシンプルなマージタグ構文を使います。マージタグはテキストレイヤー内のどこにでも挿入でき、スプレッドシートの値に置き換えられます。

### 使用例 {#example-usage}

**Figmaのテキストレイヤー：**
```
Hello #{firstName} #{lastName},
Your order #{orderId} is ready for pickup!
```

**スプレッドシートの列：**
| firstName | lastName | orderId |
|-----------|----------|---------|
| John      | Smith    | 12345   |
| Sarah     | Johnson  | 67890   |

**同期後の結果：**
- `Hello John Smith, Your order 12345 is ready for pickup!`
- `Hello Sarah Johnson, Your order 67890 is ready for pickup!`

## 主なメリット {#key-benefits}

- **書式を保持**：テキストスタイル、フォント、色はそのまま維持されます
- **複数のマージタグ**：1つのレイヤーで必要な数だけマージタグを使えます
- **柔軟な列名**：さまざまな形式の列見出しに対応しています
- **スマートなフォールバック**：一致する列が見つからない場合、マージタグのテキストはそのまま残ります
- **ほかの行の参照**：`.N`構文で特定の行のデータを取得できます
- **動的なレイヤー名**：マージタグを使ってフレームやレイヤーの名前を変更できます

### 列見出しの柔軟性 {#column-header-flexibility}

CopyDocは列見出しを賢く照合します。次の形式はすべて使えます。
- 標準：`firstName`は`#{firstName}`に一致します
- #プレフィックス付き：`#firstName`は`#{firstName}`に一致します
- マージタグ形式：`#{firstName}`は`#{firstName}`に一致します

## 高度な機能 {#advanced-features}

[Video](/assets/videos/copydoc/sync/advanced-spreadsheet-merge-tags.mp4)

### 行番号の指定（`.N`構文） {#row-index-override-n-syntax}

`.N`構文を使うと、特定の行のデータを取得できます。`N`は行番号です（1行目は見出しなので、2から始まります）。

**例：**

**スプレッドシート：**
| firstName | lastName |
|-----------|----------|
| John      | Smith    |
| Sarah     | Johnson  |
| Mike      | Williams |

**1行目のFigmaテキストレイヤー：**

Current: `#{firstName} #{lastName}`
Next up: `#{firstName.3} #{lastName.3}`

**結果：**

Current: John Smith
Next up: Sarah Johnson

次のような用途に便利です。
- 「次はこちら」や「前へ」といった参照を作成する
- ほかの行の関連データを表示する
- 比較表示を作成する
- 参照リストを作成する

### マージタグでレイヤーの名前を変更する {#renaming-layers-with-merge-tags}

マージタグは、フレームやレイヤーの名前の変更にも使えます。スプレッドシートの列の値にマージタグを使うと、レイヤー名を動的に生成できます。

**例：**

**スプレッドシート：**
| frameName | firstName | lastName |
|------------------------|-----------|----------|
| `#{firstName} #{lastName}` | John      | Smith    |
| `#{firstName} #{lastName}` | Sarah     | Johnson  |

**結果：** フレームの名前は次のように変更されます。
- 「John Smith」
- 「Sarah Johnson」

レイヤー名にも行番号の指定を使えます。
- `#{firstName.2}` vs `#{firstName.3}`で、比較用のフレーム名を作成できます
- 「ビフォー／アフター」や「オプションA vs オプションB」のような場面に最適です

### レイヤー名の一括変更 {#bulk-layer-renaming}

よりシンプルに名前を変更したい場合は、たとえば6つのFigmaフレームの名前がすべて **#My Frame**なら、これをスプレッドシートの列名として使い、固定の値やマージタグの組み合わせで一括変更できます。

## スプレッドシートのセル内での差し込み {#spreadsheet-cell-content-interpolation}

スプレッドシートのセルでは、マージタグ構文を使ってほかの列を参照できます。この処理は値がFigmaレイヤーに適用される**前**に行われるため、計算した値を作成できます。

**例：**

**スプレッドシート：**
| firstName | lastName | fullName | greeting |
|-----------|----------|----------|----------|
| John      | Smith    | `#{firstName} #{lastName}` | `Hello, #{fullName}!` |
| Sarah     | Johnson  | `#{firstName} #{lastName}` | `Hello, #{fullName}!` |

**仕組み：**
1. `fullName`列は「John Smith」または「Sarah Johnson」に解決されます
2. 次に`greeting`列がその解決済みの値を使い、「Hello, John Smith!」または「Hello, Sarah Johnson!」になります
3. この最終的な値がFigmaのテキストレイヤーに適用されます

**メリット：**
- スプレッドシート内で再利用できる数式を作成できます
- 複数の列を組み合わせて、整形された文字列を作れます
- シンプルなデータの組み合わせから複雑なコンテンツを作成できます
- 似たパターンのコンテンツで一貫性を保てます

**行の参照を使った高度な例：**

| product  | price | competitor | comparison |
|----------|-------|------------|------------|
| Widget A | $99   | Widget B   | `#{product} (#{price})` vs `#{product.3} (#{price.3})` |
| Widget B | $149  | Widget C   | `#{product} (#{price})` vs `#{product.4} (#{price.4})` |
| Widget C | $199  | Widget A   | `#{product} (#{price})` vs `#{product.2} (#{price.2})` |

これにより、「Widget A ($99) vs Widget B ($149)」のような動的な比較テキストが作成されます。

### よくある用途 {#common-use-cases}

- **メールテンプレート**：受信者の名前や詳細をパーソナライズ
- **名刺**：連絡先情報の異なる複数のバリエーションを生成
- **マーケティング資料**：コンテンツの異なるローカライズ版を作成
- **データの可視化**：ラベルやタイトルを動的に更新
- **商品カタログ**：商品名、価格、説明を一括更新
- **比較レイアウト**：複数の行のデータを並べて表示
- **動的なレイヤー整理**：内容に基づいてフレームに自動で名前を付ける

### ヒント {#tips}

- CSVでカンマを含む値は引用符で囲みます：`"42,580"`
- デザイン全体に適用する前に、まずいくつかのレイヤーで試してください
- スプレッドシートをわかりやすくするために、意味のある列名を使いましょう
- 行番号は2から始まる（1行目は見出し）ため、`.2`は最初のデータ行を参照します
- スプレッドシートのセル内の差し込みが先に解決され、その後にFigmaレイヤーへの差し込みが行われます
- マージタグを工夫して組み合わせ、複雑な動的コンテンツを作成しましょう