Adobe XD から制作用素材を PNG、SVG、JPG および PDF ファイルとして書き出す方法を説明します。

Web サイトやモバイルアプリケーションで使用するための制作用素材を開発者と共有できます。デザインアセットは XD から、iOS、Android または Web でのデプロイ用に最適化された PNG、SVG、JPG および PDF 形式に書き出すことができます。

特定のアセットまたはテキスト、特定のアートボード、またはプロジェクトのすべてのアートボードを書き出すことができます。Mac で XD を使用している場合は、他のアプリケーションにアセットを書き出すこともできます。詳しくは、サードパーティとの統合を参照してください。

デザインアセットとアートボードの書き出し

  1. Mac でデザインアセットを書き出すには、ファイル/書き出しを選択します。Windows では、ハンバーガーメニューをクリックし、「書き出し」をクリックします。

    レイヤーパネルでアートボードを選択し、右クリックして、「書き出し」を選択します。

    次の書き出しオプションを利用できます。

    • バッチ:「書き出しマークを追加」オプションを使用してマークされたアセットを書き出します。
    • 選択済み:選択されたアセットを書き出します。
    • すべてのアートボード:デザイン内のすべてのアートボードを書き出します。

    デザインスペックにアセットを含める方法については、デザインスペックからアセットを書き出すをご覧ください。

    アセットとアートボードを書き出すためのオプション

    注意:

    複数のオブジェクトを 1 つのアセットとして書き出すには、書き出す前にオブジェクトをグループ化する必要があります。

  2. 目的のプラットフォーム(WebiOSAndroid)とファイル形式(PNGSVGJPGPDF)を選択します。

    書き出しオプションについて詳しくは、次を参照してください。

  3. 出力ファイルを保存するには、ディレクトリを指定します。

  4. メッセージが表示されたら、アセットがデザインされる解像度を指定します。解像度がわからない場合は、デフォルトの解像度(1x)のままにします。

  5. 書き出し」をクリックします。

デザインアセットを PNG に書き出す

  1. Mac でデザインアセットを PNG として書き出すには、ファイル/書き出しを選択します。Windows では、ハンバーガーメニューをクリックし、「書き出し」をクリックします。

  2. フォーマット」オプションの横にあるドロップダウンリストをクリックし、「PNG」を選択します。XD ではそのオブジェクトに関連付けられているすべての解像度が書き出されます。

  3. 書き出す対象のプラットフォーム(デザインWebiOSAndroid)を選択し、「書き出し」をクリックします。

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

デザイン

デザインは、アセットを PNG に 1x 解像度で書き出す場合のデフォルトのオプションです。

Web

アセットは 1x および 2x 解像度で書き出されます。

iOS

iOS には、3 つの書き出しサイズがあります。アセットは 1x、2x、3x 解像度で書き出されます。 

様々な iOS デバイス向けのデフォルトのアートボードサイズでは 1x でのデザインが想定されているので、デフォルトを使用した場合、書き出しは 1x のままになりますが、アートボードの幅と高さを 2 倍にして、2x でデザインすることもできます。

次のインフォグラフィックに、1x および 2x でデザインした場合に、デザイン素材が iOS 向けにどのように書き出されるかを示します。

iOS 用に PNG としてアセットを書き出し
iOS 用に PNG としてアセットを書き出し

Android

デザインアセットは最適化され、次の Android 画面密度で書き出されます。

  • ldpi - 低密度(75%)
  • mdpi - 中密度(100%)
  • hdpi - 高密度(150%)
  • xhdpi - 超高密度(200%)
  • xxhdpi - 超超高密度(300%)
  • xxxhdpi - 超超超高密度(400%)

次のインフォグラフィックに、様々な解像度でデザインした場合に、デザイン素材が Android 向けにどのように書き出されるかを示します。

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

デザインアセットを SVG で書き出す

  1. Mac でデザインアセットを PNG として書き出すには、ファイル/書き出しを選択します。Windows では、ハンバーガーメニューをクリックし、「書き出し」をクリックします。

  2. フォーマット」オプションの横にあるドロップダウンリストをクリックし、「SVG」を選択します。

  3. 「スタイル」オプションを設定し、それらを埋め込み画像またはリンク画像として保存します。

    • スタイリング:視覚的なスタイル情報を SVG マークアップに保存する方法として、プレゼンテーション属性または内部 CSS を選択します。Android Studio など、一般的な開発ツールとの互換性が高めるため、SVG のデフォルトスタイリングは「プレゼンテーション属性」に設定されています。
      • プレゼンテーション属性:各 SVG タグの個々のスタイルプロパティごとに別々の XML 属性を使用します。この形式は、Android Studio で SVG アセットを使用するために必要です。
      • 内部 CSS:CSS クラスを持つ単一のスタイルタグを使用し、同じスタイルを持つオブジェクト間でスタイル設定を共有して、ファイルサイズを小さく抑えます。

    画像を保存:埋め込み画像またはリンク画像として保存できます。

    • 埋め込み:ビットマップ画像は SVG ファイルにエンコードされます。
    • リンク:ビットマップ画像は、SVG ファイルへの参照とは別に保存されます。
    デザインアセットを SVG で書き出す
    デザインアセットを SVG で書き出す
  4. アセットを最適化する場合は、Mac では「ファイルサイズを最適化 (縮小)」を、Windows では「ファイルサイズ」に対して「最適化済 (縮小化済)」をオンにします。

デザインアセットを JPG に書き出す

  1. Mac でデザインアセットを PNG として書き出すには、ファイル/書き出しを選択します。Windows では、ハンバーガーメニューをクリックし、「書き出し」をクリックします。

  2. フォーマット」オプションの横にあるドロップダウンリストをクリックし、「JPG」を選択します。

    デザインアセットを JPG で書き出す
    デザインアセットを JPG で書き出す
  3. アセット(写真など)を JPG として書き出すときに、書き出される JPG の画質レベルを適宜設定できます。「画質」ドロップダウンリストでパーセンテージを選択し、「書き出し先」に対して「デザイン」または「Web」を選択します。

デザインアセットを PDF で書き出す

  1. Mac でデザインアセットを PNG として書き出すには、ファイル/書き出しを選択します。Windows では、ハンバーガーメニューをクリックし、「書き出し」をクリックします。

  2. フォーマット」オプションの横にあるドロップダウンリストをクリックし、「PDF」を選択します。単一の PDF ファイルとして、または複数の PDF ファイルに個々に書き出すように選択できます。

    デザインアセットを PDF で書き出す
    デザインアセットを PDF で書き出す
  3. 単一の PDF ファイル:複数のアートボードまたはアセットを選択して、それらを 1 つの PDF ファイルとして書き出すことができます。複数のアートボードまたはアセットは、別々のページに配置され、1 つの PDF が作成されます。

    複数の個別の PDF ファイル:複数のアートボードまたはアセットを選択して、それらを複数の PDF として個々に書き出すこともできます。選択したアートボードまたはアセットごとに個別の PDF ファイルが作成されます。

  4. 次に、「書き出し」をクリックします。

サードパーティ統合の手順

XD と統合される他のアプリケーション(Zeplin、Avocode、Sympli(MAC 上のみ)、Kite Compositor、ProtoPie)にデザインを持ち込むことができます。 

以下のセクションでは、Zeplin を使用する Mac 上で実行される XD の例を使って、ワークフローの概要を説明します。

この手順は、XD をWindows で利用する場合も同じです。

注意:

この手順は、使用しているアプリケーションによって若干異なります。詳しくは、アプリケーションのドキュメントを参照してください。

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

    Zeplin へのアセットの書き出し
    Zeplin へのアセットの書き出し

    注意:

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

  2. 表示されるダイアログボックスで、「読み込み」をクリックします。

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

    Zeplin での画面の読み込み
    Zeplin での画面の読み込み

    アートボードが Zeplin に読み込まれます。

    Zeplin のアートボード
    Zeplin のアートボード

デザインスペック用のアセットの抽出

レイヤーをマークしてアセットとして書き出し、開発者にデザインスペックのリンクとして送信できます。開発者はすべてのベクターアセットを SVG、PNG、PDF として、ビットマップアセットを PNG、PDF としてダウンロードできます。

詳しくは、デザインスペック用のアセットの抽出を参照してください。

サードパーティアプリケーションをファイル/書き出しオプションで表示できない場合、「書き出し」オプションにサポート対象のサードパーティアプリケーションが表示されないを参照してください。

ファイルを書き出せない場合は、Adobe XD でファイルのインポートまたはエクスポートができないのはなぜですか?を参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー