マニュアル キャンセル

デザイン素材の書き出し

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 などのネイティブ言語を使用したりして、デザインしたものをデベロッパーが再構築するために必要とするデザインファイルです。

一般に、最も一般的なアセットは、ビットマップ画像、アイコン、背景パターンであり、PNGSVGPDFJPG の形式で書き出すことができます。

XD 57 以降では、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 ファイル:複数のアートボードまたはデザイン素材を選択して、それらを 1 つの 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 から他のアプリケーション(ZeplinAvocodeSympliKite CompositorProtoPie)にデザインを提供することもできます。

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

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

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

    Zeplin へのデザイン素材の書き出し
    Zeplin へのデザイン素材の書き出し

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

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

Android 向けに PNG として書き出す場合の書き出しオプション
Android 向けに PNG として書き出す場合の書き出しオプション

トラブルシューティング

デザイン素材の書き出しについての問題が発生している場合は、書き出しに関する問題を解決するには、Adobe XD でファイルのインポートまたはエクスポートができないのはなぜですか?
を参照してください。

ご質問または共有するアイデアがある場合

コミュニティで質問

お気に入りのデザインツールに追加してほしい書き出しワークフローはありませんか? XD UserVoice
に投票するか、リクエストを追加します。

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。

ヘルプをすばやく簡単に入手

新規ユーザーの場合