【2026年最新版】Figmaのエクスポート・書き出し設定完全ガイド｜PNG・SVG・PDFの書き出し方

公開日：2026/03/11　更新日：2026/03/24　

※本ページにはプロモーション(広告)が含まれています

Figmaでの書き出しがうまくいかない？設定を正しく理解しよう

「Figmaでデザインを書き出したら画像が荒くなってしまった」「SVGで書き出すとレイアウトが崩れた」「PDFに書き出す方法がわからない」——デザインの書き出し（エクスポート）でつまずくことは多いものです。

Figmaのエクスポート機能は非常に高機能ですが、形式ごとの設定方法を知らないと、品質の低い書き出しになったり、用途に合わない形式で出力してしまいます。

本記事では、FigmaでPNG・SVG・PDF・JPEGなど各形式への書き出し設定と、倍率・スライス・一括エクスポートなどの実践テクニックを初心者向けに解説します。

この記事でわかること

Figmaエクスポートの基本的な操作手順
PNG・SVG・PDF・JPEGそれぞれの書き出し設定と使い分け
解像度（倍率）の設定方法とRetina対応の考え方
スライス機能を使った部分的な書き出し
複数要素の一括エクスポート方法

Figmaエクスポートの基本操作

エクスポートパネルの表示方法

Figmaでファイルを開きます
書き出したいフレーム・グループ・レイヤーを選択します
右パネルの下部に「エクスポート」セクションが表示されます
「+」ボタンをクリックしてエクスポート設定を追加します

エクスポートパネルが見当たらない場合は、右パネルの「デザイン」タブを選択した状態で、画面を下にスクロールしてください。

エクスポートの実行

エクスポート設定を追加した状態で「エクスポート [要素名]」ボタンをクリック
ファイル保存ダイアログが開くので、保存先を選択します
「保存」をクリックするとダウンロードが始まります

形式別エクスポート設定ガイド

PNG形式で書き出す

PNGは最も汎用性の高いラスター形式で、透過（アルファチャンネル）に対応しています。ウェブ用アイコン・バナー・スクリーンショット素材に最適です。

PNG書き出しの手順と設定

エクスポートパネルで「+」をクリック
形式ドロップダウンから「PNG」を選択
倍率を設定します（通常: 1x、Retina対応: 2x、高解像度: 3x）
「エクスポート」ボタンをクリック

倍率（Scale）の選び方

倍率	用途	ファイルサイズ
1x	通常のディスプレイ向け	小
2x	Retina / HiDPIディスプレイ向け（推奨）	中
3x	スマートフォン向け高精細対応	大
カスタム倍率（例：1.5x）	特定の出力サイズに合わせる場合	可変

ウェブサイトに使う画像は2x（Retina対応）で書き出しておくと、高解像度ディスプレイでも綺麗に表示されます。

SVG形式で書き出す

SVGはベクター形式で、拡大縮小しても画質が劣化しません。ロゴ・アイコン・イラストに適しています。

SVG書き出しの手順

書き出したい要素を選択（フレームまたはグループ）
エクスポート形式から「SVG」を選択
オプションを設定します：
- 「Include “id” attribute」：CSSやJSでIDを使う場合にチェック
- 「Outline text」：テキストをパス変換して書き出す（フォント未インストール環境対応）
- 「Include content outside frame」：フレームをはみ出した要素も含める
- 「Simplify stroke」：ストロークを単純化して最適化
「エクスポート」をクリック

SVG書き出し時の注意点

テキストが含まれる場合、閲覧環境にフォントがないと意図しない表示になることがあります。「Outline text」にチェックを入れると安全です
グラデーションや一部のエフェクトは正しく書き出せない場合があります。事前にプレビューで確認しましょう
Webでインタラクティブに使用する場合、SVGのコードを直接貼り付けることも検討してください

JPEG形式で書き出す

JPEGは写真・風景など色数の多い画像に適した形式です。透過には対応していませんが、ファイルサイズを小さくできます。

エクスポート形式から「JPG」を選択
品質（Quality）をスライダーで設定します（推奨：80〜90%）
倍率を設定して「エクスポート」をクリック

品質を100%にすると画質は最高ですが、ファイルサイズが大きくなります。ウェブ用は80〜85%が品質とサイズのバランスが良い設定です。

PDF形式で書き出す

PDFはプレゼンテーション資料・仕様書・印刷用ドキュメントに使います。

PDF書き出しの手順

書き出したいフレームを選択します（複数フレームを選択するとページごとのPDFになります）
エクスポート形式から「PDF」を選択
「エクスポート」をクリック

重要：Figmaの1フレーム＝PDFの1ページになります。スライド形式のプレゼンを作っている場合、フレームを選択してPDF書き出しすれば、そのままスライド資料として使えます。

印刷用PDF設定のポイント

フレームのサイズをA4（210×297mm → 794×1123px at 96dpi）に合わせておく
テキストは「Outline text」オプションを使ってパス変換すると印刷環境のフォント依存を回避できる（PDFオプションに直接はないため、先にSVG変換→PDFに変換する方法もある）
印刷会社へ入稿する場合は、担当者に推奨解像度・カラーモードを確認する

スライス機能を使った部分書き出し

スライスとは

スライス機能を使うと、フレームやレイヤーの一部だけを指定して書き出すことができます。ウェブ素材の細かなパーツを切り出す際に便利です。

スライスの作成方法

左パネルのツールバーから「スライス（Sキー）」ツールを選択します
書き出したい範囲をドラッグして矩形を作成します
右パネルのエクスポートセクションで形式・倍率を設定します
「エクスポート」をクリックして書き出します

スライスの使い所

フレーム全体ではなく、特定のアイコンやボタンだけを書き出したい場合
複数の素材を一度のエクスポートでまとめて切り出したい場合
デザインの一部分だけをデベロッパーに渡したい場合

複数要素の一括エクスポート

方法1：複数選択して一括書き出し

書き出したい複数のフレーム・レイヤーをShiftクリックで選択します
右パネルのエクスポートセクションで設定を追加します
「エクスポート [選択数] レイヤー」ボタンをクリックします
各要素が別ファイルとしてZIPでダウンロードされます

方法2：「書き出し設定済み要素をすべて書き出す」

メニューバーの「ファイル」→「エクスポートの設定が含まれるものをすべてエクスポート」を選択します
エクスポート設定が追加されているすべての要素が一括でZIPダウンロードされます

大規模なデザインシステムや多数のアイコンを書き出す際に非常に効率的な方法です。

形式別エクスポートの使い分けまとめ

形式	透過	拡大縮小	主な用途
PNG	対応	ラスター（劣化あり）	UI部品・スクリーンショット・バナー
JPEG	非対応	ラスター（劣化あり）	写真・背景ありの画像
SVG	対応	ベクター（劣化なし）	ロゴ・アイコン・イラスト
PDF	対応	ベクター（劣化なし）	プレゼン資料・仕様書・印刷
WebP	対応	ラスター（劣化あり）	Webページの軽量化

🛒

この記事に関連するおすすめ商品

Anker USB-C 充電器 30W

約2,490円

スマホPC両対応

Amazonで探す

※ 価格は変動します

よくある質問（FAQ）

Q1. 書き出した画像がぼやけてしまうのはなぜですか？

倍率が1xのままになっている可能性が高いです。Retinaディスプレイでは1xで書き出すと表示が粗く見えます。エクスポート設定で倍率を2xに変更して書き出しなおしてください。また、フレームサイズが元々小さい（例：24×24px）場合、書き出し後の実サイズも小さくなるため、フレームサイズ自体を大きくすることも検討しましょう。

Q2. エクスポートしたSVGをブラウザで開くと色が変わるのはなぜですか？

SVGのカラーコードの問題か、使用しているグラデーション・効果の互換性問題が考えられます。Figmaでは「Outline text」オプションを有効にしたり、複雑なエフェクト（ぼかし・影など）が含まれる場合はPNG形式で書き出すことを検討してください。また、SVGをテキストエディタで開いてコードを確認すると、カラー値が正しく出力されているか確認できます。

Q3. PDFで書き出したときにフォントが変わってしまいます

書き出し環境にフォントがインストールされていない場合に発生します。Outline text（テキストをアウトライン化）機能を使うことで、テキストをパスに変換してフォント非依存で書き出せます。ただし、Figmaの標準PDFエクスポートにはこのオプションがないため、一度SVGに書き出してからAdobe IllustratorなどでPDFに変換する方法が確実です。

Q4. 複数のフレームをまとめて1つのPDFにするには？

書き出したいフレームをすべて選択した状態でPDF形式でエクスポートすると、選択したフレームの数だけページを持つPDFが作成されます。フレームの並び順がPDFのページ順になるため、事前にレイヤーパネルでフレームの順序を整理しておきましょう。

Q5. エクスポートボタンが表示されないのですが？

右パネルの「デザイン」タブが選択されていない可能性があります。「デザイン」タブを選択してから画面を一番下までスクロールすると「エクスポート」セクションが表示されます。それでも表示されない場合は、要素が何も選択されていないか確認してください。フレームやレイヤーを選択した状態でないとエクスポートパネルは表示されません。