---
url: "/ja/pitchdeck/design/import-markdown.md"
description: "Pitchdeckで.mdと.markdownのプレゼンテーションファイルをFigmaにインポートします。Deckset形式の構文、編集可能なテキスト、画像、表、スピーカーノート、フッター、スライド内リンク、対応するコマンドを扱えます。"
---

# MarkdownのプレゼンテーションファイルをFigmaに編集可能なスライドとしてインポートする

> Pitchdeckで.mdと.markdownのプレゼンテーションファイルをFigmaにインポートします。Deckset形式の構文、編集可能なテキスト、画像、表、スピーカーノート、フッター、スライド内リンク、対応するコマンドを扱えます。

> **Note:** **Markdownインポートはベータ版です**。このインポーターは、一般的なMarkdownプレゼンテーションファイルのDeckset構文に対応しています。標準のMarkdownに加えて、スライドの区切り、背景、画像、ノート、フッター用のプレゼンテーション向けコマンドを使った資料で最もよく機能します。

## Markdownファイルをインポートする {#importing-a-markdown-file}

MarkdownのプレゼンテーションファイルをFigmaにインポートするには、Pitchdeckプラグインを開き、パソコンの`.md`、`.markdown`、`.zip`ファイルを、スライドリストの下にあるインポート用のドロップゾーンにドラッグします。インポート用のドロップゾーンをクリックして、ファイルを参照することもできます。

Deckset用に書いた資料なら、同じMarkdownファイルをそのままインポートできます。Pitchdeckは、スライドの区切り、スピーカーノート、画像、フッター、スライド番号、その他の対応するプレゼンテーションコマンドについて、Deckset形式の構文に対応しています。

Pitchdeckは現在のFigmaファイルに新しいページを作成し、Markdownの各スライドを編集可能なFigmaのスライドフレームとして追加します。インポートされたコンテンツのほとんどは、通常のFigmaのテキスト、画像、ベクター、レイアウトのレイヤーとして作成されるので、インポート後も資料を編集し続けられます。

> **Tip:** **ローカルのメディアはMarkdownファイルと一緒にZIPにまとめる**。Markdownファイルがローカルの画像、SVG、動画、音声ファイルを参照している場合は、`.md`または`.markdown`ファイル1つと、それが参照するすべてのローカルのメディアファイルを含む`.zip`ファイルを作成してください。ローカルのファイルをまとめたくない場合は、代わりに外部の画像やメディアの直接URLを使ってください。

## 対応しているMarkdownのコンテンツ {#supported-markdown-content}

Markdownインポートは一般的なプレゼンテーションのコンテンツに対応しており、可能な場合は編集可能なFigmaのレイヤーとしてインポートします。

- 見出し、段落、引用、インラインコード、コードブロック、数式を編集可能なテキストとして。
- 太字、斜体、取り消し線、上付き文字、下付き文字、インラインリンク、シンプルな``によるテキストのスタイル。
- 箇条書き、番号付き、入れ子のリスト、およびソースで番号を指定したリスト。
- 基本的な配置を指定した表。
- 名前付きの脚注や複数行の脚注を含む脚注。
- `^ note`行によるスピーカーノート。
- `[Jump](#slide-anchor)`リンクを含む、スライド内のアンカーとリンク。
- インライン画像、背景画像、左右に分割した画像、画像の行、リモートのSVG、メディアが見つからない場合のプレースホルダー。
- メディアのメタデータまたはプレースホルダーとしての動画・音声の参照。
- ベクターの図としてのMermaidのフローチャート、グラフ、円グラフ。
- ベクターの図としてのPikchrのボックス・矢印の図。

## プレゼンテーションコマンド {#presentation-commands}

Markdownファイルの先頭にコマンドを追加すると、インポート全体を制御できます。

```markdown
autoscale: true
background-image: hero.png
build-lists: notFirst
fit-header: #, ##
footer: Confidential
image-corner-radius: 18
paragraphs-as-presenter-notes: false
slide-dividers: ####
slidecount: true
slidenumbers: true
time-budget: 12
```

角かっこの構文を使って、スライドごとのコマンドを追加することもできます。

```markdown
[.background-color: #111827]
[.footer: Local footer override]
[.slidenumbers: false]

# Slide title
```

一部のコマンドは、Figmaに直接編集できる同等の機能がない場合でも、元のMarkdownの意図が失われないようメタデータとして保持されます。

```markdown
build-lists: notFirst
slide-transition: dissolve(0.4)
time-budget: 12
```

スライドのトランジションには、`dissolve(0.4)`、`fade(0.4)`、`push(left, 0.4)`、`move(right, 0.4)`、`reveal(bottom, 0.4)`などの値を使います。`dissolve`と`fade`は、どちらも同じディゾルブ系のトランジションを指定します。

## スライドの区切りとアンカー {#slide-dividers-and-anchors}

スライドを区切るには`---`を使います。見出しでスライドを区切りたい場合は、ファイルの先頭に`slide-dividers`コマンドを追加します。

```markdown
slide-dividers: ####

# First slide

---

#### Second slide
```

アンカーは、見出しに追加するか、HTMLのアンカータグで追加できます。

```markdown
# Closing Summary {#closing-summary}

```

外部リンクは、Figmaのテキストのハイパーリンクとしてインポートされます。インポートしたスライドのアンカーを指すローカルのリンクは、すべてのスライドが作成されたあとで、Figmaのプロトタイプのナビゲーションリンクに変換されます。

```markdown
[Visit Hypermatic](https://hypermatic.com)
[Jump to closing](#closing-summary)
```

## 画像とメディア {#images-and-media}

画像には、通常のMarkdownの画像構文を使います。

```markdown
![inline 50%](diagram.png)
![left fit](product-shot.png)
![right alpha(0.6)](panel.png)
```

ローカルの画像の場合は、参照するファイルのパスをMarkdownファイルと同じ`.zip`の中に入れておきます。

```text
presentation.zip
  deck.md
  images/hero.png
  diagrams/flow.svg
```

そのうえで、Markdownからそれらのファイルを参照します。

```markdown
![inline](images/hero.png)
![inline](diagrams/flow.svg)
```

ZIPにまとめたインポートに画像が含まれていない場合は、代わりに外部の直接URLを使います。

```markdown
![inline](https://example.com/images/hero.png)
```

よく使う画像の修飾子には、次のものがあります。

- `inline`：スライド内にインラインで配置するコンテンツ。
- `left`または`right`：画像を分割したスライドのレイアウト。
- `fit`または`fill`：画像の拡大・縮小。
- `alpha(0.6)`：画像の不透明度。
- `corner-radius(16)`：画像の角丸。
- `bn`、`bw`、`vivid`、`noir`、`chrome`、`fade`、`saturation()`、`blur()`、`contrast()`、`brightness()`、`exposure()`、`sepia()`、`vignette()`、`sharpen()`：静的な画像フィルターの近似。

スライドの冒頭にある画像だけの行は、背景画像として扱われます。SVGの背景画像は、Figmaの画像塗りではなく、通常のベクターのコンテンツとしてインポートされます。

動画と音声の参照は、Markdownのメディアのメタデータとして保持されます。メディアファイルを解決できる場合、Pitchdeckはファイルのメタデータを使ってプレースホルダーを作成します。解決できない場合は、インポートを続行できるように、メディアが見つからないことがはっきりわかるプレースホルダーを作成します。

## 図 {#diagrams}

MermaidとPikchrのフェンス付きコードブロックは、対応している図の種類であれば、ベクターの図としてインポートされます。

````markdown
```mermaid
flowchart LR
  A[Markdown] --> B[Pitchdeck]
  B --> C[Figma]
```
````

````markdown
```pikchr
box "Markdown"
arrow right
box "Figma"
```
````

より複雑なMermaidやPikchrの図は、元の図のソースがインポート後も見えて編集できるよう、フォールバックとしてベクターのソースカードでインポートされる場合があります。

## 表と脚注 {#tables-and-footnotes}

Markdownの表は、テキストベースの編集可能な表のレイアウトとしてインポートされます。

```markdown
| Left | Center | Right |
| --- | :---: | ---: |
| Plain | _Emphasis_ | **Strong** |
```

脚注は、それを参照しているスライドにまとめられます。

```markdown
Here is a claim with a footnote.[^source]

[^source]: First footnote line.
  Continuation line for the same footnote.
```

## スピーカーノート {#presenter-notes}

スライドにスピーカーノートを追加するには、`^`で始まる行を使います。

```markdown
# Slide title

Visible slide content.

^ This note is saved with the imported slide.
```

スピーカーノートは、インポートしたスライドにPitchdeckのスライドデータとMarkdown固有のプラグインデータとして保存されるので、インポート後にPitchdeckで使えます。

## 現在の制限 {#current-limitations}

- 数式の構文は編集可能なテキストとしてそのまま表示されます。レンダリングされた数式の図には変換されません。
- build-listのコマンドはMarkdownのメタデータとして保持されますが、Figmaのネイティブなレイヤーのビルドステップには変換されません。
- 通常のFigmaデザインファイルへのインポートでは、slide-transitionのコマンドはメタデータとしてのみ保持されます。Figma Slidesファイルにインポートする場合、Figma APIが対応していれば、Pitchdeckは最も近いFigmaのネイティブなスライドトランジションの適用を試みます。
- 「スライド間のディゾルブ」効果を使いたい場合は、通常のFigmaデザインファイルでPitchdeckの別のスライド設定を探すのではなく、Markdownのソースで上記の`slide-transition`コマンドを使ってください。
- 音声ファイルは、インポートしたFigmaのフレームから直接再生されません。音声の参照はメタデータ・プレースホルダーとして保持されます。
- リモートのメディアをインポートするには、プラグインからそのURLに直接アクセスできる必要があります。
- 一部の図と画像フィルターのコマンドは、Figmaで利用できる最も近い動作に合わせて近似されます。

## トラブルシューティング {#troubleshooting}

インポートが遅いと感じる場合は、インポーターがMarkdownのスライドの準備を終えるまでお待ちください。リモートの画像が多い大きなMarkdownファイルでは、資料をレンダリングする前にプラグインがそれらのアセットを解決する必要があるため、時間がかかることがあります。

インポート後に画像、動画、音声ファイルが欠けている場合は、参照しているローカルのメディアファイルを同じドラッグ＆ドロップの操作に含めて、Markdownファイルをもう一度インポートしてみてください。

スライド内のリンクで別のスライドに移動できない場合は、移動先のスライドに一意のアンカーがあり、リンクが同じアンカーIDを使っていることを確認してください。

## AIでMarkdownの資料を作成する {#creating-markdown-decks-with-ai}

> **Tip:** **AIを使って対応する`.md`の資料の下書きを作る**。OpenAI、Claude、GeminiなどのAIツールに依頼すると、スライドのアイデア、大まかな構成、会議メモ、文字起こし、既存のドキュメントを、Pitchdeckに対応したMarkdownに変換できます。最良の結果を得るには、プレーンなMarkdownだけを出力するよう依頼し、スライドの間には`---`を、見出しには`#`と`##`を使い、スピーカーノートは`^`で追加し、対応していないHTMLやカスタムCSSは避けてください。

コピーして調整できるプロンプトの例をいくつか紹介します。

```text
Turn the notes below into a Pitchdeck-compatible Markdown presentation.

Use Deckset-style syntax with:
- `---` between slides
- `#` for slide titles
- concise bullets
- Markdown tables where useful
- `^` lines for presenter notes

Add these commands at the top of the file:
autoscale: true
fit-header: #, ##
slide-dividers: ---
slidenumbers: true

Output only the final .md file content, with no explanation.

Notes:
[paste your notes here]
```

```text
Create a 10-slide product demo deck as a Pitchdeck Markdown import file.

Use a strong title slide, problem slide, workflow slide, feature slides, a comparison table slide, and a closing slide.
Use `---` to separate slides, `#` and `##` for headings, and `^` lines for presenter notes.
Add simple per-slide commands like `[.background-color: #f8fafc]` only where they help the design.

Do not use unsupported HTML layouts or custom CSS.
Output only Markdown.
```

```text
Convert this meeting transcript into an executive summary deck for Pitchdeck.

Keep each slide focused on one idea.
Include slide titles, 3-5 bullets per slide, and presenter notes that summarize what to say.
Use Deckset-style Markdown syntax compatible with Pitchdeck import:
- `---` between slides
- `#` and `##` headings
- Markdown tables where comparison is useful
- `^` lines for presenter notes

Output only the .md file.

Transcript:
[paste your transcript here]
```

## Markdownのスターター例 {#starter-markdown-example}

Markdownインポートを手軽に試したい場合は、下の例をコピーして新しい`.md`ファイルに貼り付けるか、より充実したデモ資料をダウンロードしてください。

PitchdeckのMarkdownインポート用デモ`.md`ファイルをダウンロード

```markdown
autoscale: true
background-color: #f8fafc
fit-header: #, ##
footer: Pitchdeck Markdown Import Demo
slide-dividers: ---
slidecount: true
slidenumbers: true

[.background-color: #0f172a]
[.header: #ffffff, alignment(center), text-scale(92)]
[.text: #cbd5e1, alignment(center), text-scale(34)]

# [fit] Markdown to Figma Slides

Turn a plain `.md` deck into editable Pitchdeck slides.

^ This note is saved as a presenter note on the imported slide.

---

# Why Markdown Import?

[.column]
## Write fast

- Draft in any editor
- Keep slides in Git
- Reuse existing Markdown notes

[.column]
## Design later

- Import as editable Figma layers
- Adjust type, layout, and colors
- Export to PPTX when ready

[.end-columns]

---

# One file, many layer types

| Markdown source | Imported result |
| --- | :---: |
| Headings and paragraphs | Editable text |
| Lists and quotes | Structured text |
| Tables | Text-based table layout |
| Presenter notes | Slide notes |

---

[.background-color: #ecfdf5]
[.header: #065f46, alignment(center), text-scale(76)]

# Try it yourself

1. Save this as `pitchdeck-demo.md`.
2. Open Pitchdeck in Figma.
3. Drag the `.md` file into the import dropzone.
4. Edit the imported slides in Figma.
```

## ファイルサイズの上限 {#file-size-limits}

インポートするファイルは、展開前で100 MBまで対応しています。アーカイブ内の各ファイルは64 MBまでで、ネストされたパッケージを含めて、ファイル数は合計10,000個まで、展開後のコンテンツは合計256 MBまでです。インポートがこれらの上限を超える場合は、ドキュメントを分割するか画像サイズを小さくしてから、もう一度お試しください。