デザイン素材の書き出し

最終更新日 : 2023年6月6日

Adobe XD から制作用のデザイン素材を PNG、SVG、JPG および PDF ファイル形式で書き出す方法を説明します。

ビットマップ画像、アイコン、背景パターン、テキスト、アートボードなどのデザイン素材を XD から PNG、SVG、JPG、および PDF として書き出すことができます。これらの書き出されたデザイン素材は、iOS、Android、または Web アプリケーションでのデプロイメント用に最適化されます。

macOS で XD を使用している場合、サードパーティ統合（Zeplin、Avocode、Sympli、Kite Compositor、Protopie など）にデザインを取り込むこともできます。

デザイン素材やアートボードを書き出し用に選択する

macOS

オブジェクトまたはアートボードを選択し、ファイル／書き出しに移動するか、Cmd + E を押します。

Windows

オブジェクトまたはアートボードを選択し、ファイル／書き出しに移動します。

バッチ：プロパティインスペクターで「書き出し対象にする」オプションを使用してマークされたデザイン素材をバッチ書き出しできます。複数のオブジェクトを 1 つのデザイン素材として書き出すには、書き出す前にオブジェクトをグループ化します。
選択済み：特定のデザイン素材を選択して書き出すことができます。
すべてのアートボード：デザインプロジェクトで書き出すすべてのアートボードを選択できます。
After Effects：After Effects に書き出すデザイン素材を選択できます。

書き出し用にレイヤーをマークする

書き出し用にマークされたレイヤーは、アセットとしてデザインスペックに含まれます。デザイン素材を書き出し用にマークするには、カンバス上でレイヤーを選択して、次のいずれかのオプションを使用します。

カンバス上のレイヤーを右クリックし、ドロップダウンメニューから「書き出しマークを追加」を選択します。
レイヤーパネルを開き、レイヤー名の横にある書き出しマークを追加アイコンをクリックします。

デザイン素材を異なるファイル形式に書き出す

アセットは、Web サイトで HTML/CSS/JS を使用したり、iOS および Android アプリケーションで Swift や Java などのネイティブ言語を使用したりして、デザインしたものをデベロッパーが再構築するために必要とするデザインファイルです。

一般的に、最も多く使用されるアセットは、ビットマップ画像、アイコン、背景パターンで、次の形式で書き出すことができます：PNG、SVG、PDF、JPG。

XD 57では、アドビはXDのカラーマネジメント機能を改善し、一貫した色再現でJPG、PNG、PDFアセットを書き出すことができるようになりました。これを実現するには、ドキュメントのカラープロファイルを sRGB に切り替えます。管理されていないカラープロファイルを含むドキュメントからアセットを書き出そうとすると、書き出されたアセットにカラーの不一致が生じる可能性があることを知らせるメッセージが表示されます。詳しくは、カラーマネジメントを参照してください。

PNG として書き出し

一般的な書き出しサイズまたはプラットフォーム固有の書き出しサイズを選択するか、カスタムの書き出しサイズを設定します。

プリセットまたはカスタムの書き出しサイズ - プリセットの書き出しサイズ（0.5 x、1 x、1.5 x、2 x、3 x、4x）のいずれかを選択します。 0.1 x から 10 x までのカスタムの書き出しサイズを入力することもできます。
Web - デザイン素材は 1x および 2x 解像度で書き出されます。
iOS - アセットは1x、2x、3xの解像度で書き出されます。
Android - デザイン素材は最適化され、次の Android 画面密度で書き出されます。
- ldpi - 低密度（75％）
- mdpi - 中密度（100％）
- hdpi - 高密度（150％）
- xhdpi - 超高密度（200％）
- xxhdpi - 超超高密度（300％）
- xxxhdpi - 超超超高密度（400％）

SVG として書き出し

オブジェクトまたはアートボードを SVG として書き出す場合、次のオプションを設定できます。

ビジュアルスタイル：

プレゼンテーション属性：各 SVG タグの個々のスタイルプロパティごとに別々の XML 属性を使用します。この形式は、Android Studio で SVG アセットを使用するために必要です。
内部 CSS：CSS クラスを持つ単一のスタイルタグを使用し、同じスタイルを持つオブジェクト間でスタイル設定を共有して、ファイルサイズを小さく抑えます。

埋め込み画像またはリンク画像：

埋め込み：ビットマップ画像は SVG ファイルにエンコードされます。
リンク：ビットマップ画像は、SVG ファイルへの参照とは別に保存されます。

PDF として書き出し

デザイン素材を PDF で書き出すには次の方法があります。

単一PDFファイル：複数のアートボードやアセットを選択して、単一のPDFファイルとして書き出すことができます。
複数の PDF ファイル：複数のアートボードまたはデザイン素材を選択し、それぞれを個別の PDF ファイルとして書き出すこともできます。選択したアートボードまたはデザイン素材ごとに個別の PDF ファイルが作成されます。

JPG として書き出し

デザイン素材を JPG として書き出す場合、次のオプションを設定できます。

品質： 20％、40％、60％、80％、100％から選択します。

書き出しサイズ：

プリセットまたはカスタムの書き出しサイズ - プリセットの書き出しサイズ（0.5 x、1 x、1.5 x、2 x、3 x、4x）のいずれかを選択します。 0.1 x から 10 x までのカスタムの書き出しサイズを入力することもできます。
Web - デザイン素材は 1x および 2x 解像度で書き出されます。

JPGはPDFに変換されません。ラスター画像は画像として読み込まれるため、PDFになったように見えます。

デザイン素材をサードパーティアプリケーションに書き出し

XD から他のアプリケーション（Zeplin、Avocode、Sympli、Kite Compositor、ProtoPie）にデザインを提供することもできます。

macOSでZeplinを使用したXDのサンプルワークフローを以下に示します：

XD ファイルでアートボードまたはレイヤーを選択し、ファイル／書き出し／Zeplin をクリックします。

XD と統合されているアプリケーションが複数ある場合、キーボードショートカット（⌥⌘E）では最後に使用した統合が起動されます。

Zeplin へのデザイン素材の書き出し — Zeplin へのアセットの書き出し

「読み込み」をクリックします。 Zeplin の既存の画面を同じ名前の画面に置き換えるには、「Replace screens with the same name（同じ名前の画面に置き換える）」を選択します。 Zeplin では、同じ画面の新しいバージョンとして画面が追加され、注釈も失われません。

XD で Zeplin を使用しているときに問題が発生する場合は、「書き出し」オプションにサポート対象のサードパーティ製品が表示されないでソリューションを確認してください。