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

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

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

アセットまたはアートボードを書き出す

  1. すべてのアートボードを書き出す:

    アートボードまたは素材が選択されていないことを確認します。ペーストボード(アートボードの周りのグレーの領域)をクリックして、オブジェクトまたはアートボードを選択解除できます。

    特定のアセットまたはアートボードを書き出す:

    書き出すアセットまたはアートボードを選択できます。アートボードを選択するには、アートボードのタイトルをクリックします(Command/Ctrl キーを押しながらクリック)。または、レイヤーパネルを開いて、書き出すアートボードを選択します。

    また、後で書き出すアセットやアートボードをマークして、XD が対応しているあらゆる形式に一括で書き出すこともできます。書き出すアセットをマークするには、レイヤーパネルを開いて、バッチ書き出しマークを追加アイコンをクリックします。または、レイヤーパネルのアセットを右クリックして、「バッチ書き出しマークを追加」を選択します。

    注意:

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

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

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

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

    • バッチ:「書き出しマークを追加」オプションを使用してマークされたアセットを書き出します。
    • 選択済み:選択されたアセットを書き出します。
    • すべてのアートボード:デザイン内のすべてのアートボードを書き出すには、「すべてのアートボード」を選択します。
    アセットとアートボードを書き出すためのオプション
  3. 目的のプラットフォーム(Web、iOS、Android)とファイル形式(PNG、SVG、JPG または PDF)を選択します。

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

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

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

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

PNG への書き出し

PNG に書き出す場合、XD ではそのオブジェクトに関連付けられているすべての解像度が書き出されます。正しい書き出しサイズになるようにデザインに使用する形式を選択し、書き出し先のプラットフォームを選択します(デザイン、Web、iOS、または Android)。

例えば、1x でデザインした場合、10 x 10 の四角形が 10px x 10px、20px x 20px、30px x30px で書き出されます。2x でデザインした場合、10 x 10 の四角形が 5px x 5px および 15px x 15px で書き出されます。 

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 への書き出し

SVG 形式でアセットを書き出して、スタイリングオプションを設定し、埋め込み画像やリンク画像として保存することもできます。

スタイリング:スタイリングプレゼンテーション属性または内部 CSSで選択できます。Android Studio に SVG をエクスポートするなど、一般的な開発シナリオとの互換性が向上するため、SVG のデフォルトスタイリングは「プレゼンテーション属性」に設定されます。

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

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

アセットを最適化する場合は、Mac では「ファイルサイズを最適化 (縮小)」を、Windows では「ファイルサイズ」に対して「最適化済 (縮小化済)」をオンにします。

SVG としての書き出し時の書き出しオプション
SVG 書き出しオプション

JPG への書き出し

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

JPG としての書き出し時の書き出しオプション
JPG としての書き出し時の書き出しオプション

PDF への書き出し

PDF 形式に書き出した場合、単一の PDF ファイルまたは個別の複数の PDF ファイルに書き出すように選択できます。

PDF としての書き出し時の書き出しオプション
PDF としての書き出し時の書き出しオプション

1 つの PDF ファイル

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

複数の個別の PDF ファイル

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

サードパーティとの統合

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

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

この手順は、Windows で実行される XD の方法と同じです。

注意:

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

  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 としてダウンロードできます。

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

XD で書き出しオプションが表示されない場合

サードパーティアプリケーションをファイル/書き出しオプションで表示できない場合、Unable to see supported third-party app in Export options(書き出しオプションでサポートされているサードパーティアプリケーションを表示できない)を参照してください。

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

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