マニュアル キャンセル

デザインスペックからのデザイン素材の書き出しとダウンロード

デザインスペックからデザイン素材を書き出す方法およびダウンロードする方法について説明します。

デザインスペックからデザイン素材を書き出す

レイヤーを書き出しとしてマークし、デザインスペックを公開するときにデザイン素材を含めると、それらを公開済みのデザインスペックのリンクからダウンロードできます。ベクターデザイン素材は SVG、PNG、PDF、JPG 形式で利用でき、ビットマップデザイン素材は PNG、PDF、JPG 形式で書き出すことができます。

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

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

  • 任意のアートボードレイヤーをクリックし、ポップアップメニューの書き出し対象にするチェックボックスをオンにします。
  • カンバス上のレイヤーを右クリックし、ポップアップメニューから「書き出し対象にする」を選択します。
  • macOS で キーボードショートカットを、Windows OS で キーボードショートカットを使用します。
  • レイヤーパネルを開き、レイヤー名の横にある書き出しマークを追加アイコン をクリックします。

複数のデザイン素材を書き出すには、アートボード内で複数のレイヤーを選択し、「書き出し対象にする」をクリックします。

「マークして書き出す」オプション

デザインスペックをデザイン素材付きで公開する

デザインスペックを公開するときにデザイン素材を含め、その公開済みのリンクを開発者と共有するときは、それらのデザイン素材を一元的にダウンロードするための場所を提供します。

  1. XD でレイヤーを書き出し用にマークします。

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

  2. 共有」をクリックして共有モードに切り替えます。「開発」を選択します。

    デザインの共有

  3. デザインモードで、書き出すデザイン素材を選択します。プロパティインスペクターで「書き出し対象にする」チェックボックスをオンにします。書き出すデザイン素材が、共有モードに表示されます。

  4. 共有モードで、「ダウンロード可能デザイン素材」チェックボックスをオンにし、デザイン素材を書き出し用にマークして、「リンクを作成」をクリックします。

    デザインを作成するプラットフォームに応じて、一連の解像度の設定は異なります。

    • Web:デザイン素材は 1 倍および 2 倍の解像度で書き出されます。
    • iOS:デザイン素材は 1 倍2 倍および 3 倍の解像度で書き出されます。
    • Android:デザイン素材は最適化され、次の Android 画面密度で書き出されます。
      • ldpi - 低密度(75%)
      • mdpi - 中密度(100%)
      • hdpi - 高密度(150%)
      • xhdpi - 超高密度(200%)
      • xxhdpi - 超超高密度(300%)
      • xxxhdpi - 超超超高密度(400%)
  5. 公開済みのデザインスペックをブラウザーで開くには、「ブラウザーで開く」アイコンをクリックし、アートボードを選択してデザイン素材を表示します。選択したデザイン素材とその他のアートボードの詳細がブラウザーに表示されます。

    デザイン素材にポインターを合わせると、「状況に応じた選択」機能により、選択したデザイン素材が青色でハイライト表示されます。

デザインスペックからデザイン素材をダウンロードする

開発者の場合は、公開中の共有アイテムのデザインスペックのリンクからデザイン素材をダウンロードできます。画面の詳細ビューで、アートボード上のダウンロード可能なすべてのデザイン素材を同時にダウンロードできます。レイヤーの詳細ビューでデザイン素材を個別にダウンロードすることもできます。

画面の詳細ビュー

アートボードの外側をクリックすると、画面の詳細ビューが表示されます。 

画面の詳細ビューでは、プロパティインスペクターの「デザイン素材」セクションに、画像、ビデオ、アニメーション、オーディオとして分類されたすべてのダウンロード可能なデザイン素材が表示されます。

画面の詳細ビュー
ダウンロード用に選択されたデザイン素材を含むアートボードの画面詳細ビュー

デザイン素材をダウンロードするには、「デザイン素材」セクションで次の手順を実行します。

1. 一緒にダウンロードするデザイン素材をクリックして選択します。

  • 複数選択するには、Shift キーを使用します。
  • デザイン素材カテゴリのすべてのデザイン素材を選択するには、1 つのデザイン素材をクリックしてから、Cmdまたは、Ctrl + A を使用します。

選択したデザイン素材」セクションが表示され、画像、ビデオ、オーディオとして分類された、選択済みのデザイン素材の数が示されます。

2. 「ダウンロード」をクリックします。

デザイン素材は、お使いのコンピューターのダウンロードフォルダーに .zip ファイルとしてダウンロードされます。画像をダウンロードする際、ベクター画像は SVG、PDF、PNG、JPG 形式に変更でき、ビットマップ画像は PNG、PDF、JPG 形式に変更できます。

注意事項

  • 「デザイン素材」セクションでビデオおよびオーディオのデザイン素材にポインターを合わせると、ファイル拡張子が表示されます。
  • アートボードでは、ビデオのコピーが複数ある場合、「デザイン素材」セクションにそのビデオのインスタンスが 1 つだけ表示されます。「デザイン素材」セクションのビデオにポインターを合わせると、そのビデオのすべてのインスタンスがアートボードで強調表示されます。
  • アートボードでは、複数のビデオに同じカバー画像がある場合、そのカバー画像の各インスタンスが「デザイン素材」セクションに表示されます。
  • 異なるカテゴリからデザイン素材を一緒にダウンロードすると、ダウンロードした .zip フォルダにそれらのカテゴリのサブフォルダが含まれます。
  • ビデオファイルは、デザイナーが XD デザインドキュメントにインポートしたのと同じ形式でのみダウンロードできます。サポートされているビデオ形式については、ビデオを操作を参照してください。
  • 画面の詳細ビューでは、対象のコンポーネントについて最後に確認されたステートまたはアクティブなステートのみが「デザイン素材」セクションに表示されてダウンロードできます。すべてのステートのデザイン素材をダウンロードするには、アートボードでコンポーネントレイヤーを選択し、レイヤーの詳細ビューに切り替えます。

レイヤーの詳細ビュー

アートボードでレイヤーを選択すると、レイヤーの詳細ビューに切り替わります。レイヤーの詳細ビューでは、選択したレイヤーのデザイン素材のみをダウンロードできます。

レイヤーの詳細ビュー
選択したレイヤーには、ビデオ、そのポスター画像、およびダウンロード可能なリンクされたオーディオファイルがあります

選択したレイヤーのデザイン素材をダウンロードするには、プロパティインスペクターの「デザイン素材」セクションで、デザイン素材の横にある「ダウンロード」をクリックします。

ビデオのダウンロード

アートボードでビデオレイヤーを選択する場合:

  • ビデオとポスター画像をダウンロードできます。
  • ビデオがオーディオ再生に接続されている場合は、そのオーディオファイルをダウンロードすることもできます。

Lottie のダウンロード

アートボードで Lottie レイヤーを選択する場合:

  • Lottie アニメーションを JSON ファイルとしてダウンロードできます。
  • Lottie がオーディオ再生に接続されている場合は、そのオーディオファイルをダウンロードできます。

コンポーネントのダウンロード

コンポーネントのデザイン素材をダウンロードするには、カンバス上でコンポーネントを選択します。次に、プロパティインスペクターで、各ステートに切り替えて対応するデザイン素材をダウンロードします。

XD アプリで、デザイナーがコンポーネントの複数のインスタンスを書き出し対象としてマークした場合、レイヤーパネルの最後にあるインスタンスのみが書き出されます。

XD 44 以降のバージョンのダウンロードエクスペリエンス

XD 44 以降のバージョンから公開されたリンクの場合:

ダウンロード」をクリックすると、進行状況を示すダイアログが表示されます。ダウンロードの完了後、アートボードの検証や、あるアートボードから別のアートボードへの移動を再開できます。

ダウンロードの進行状況を示すダイアログ
XD 44 以降のバージョンから公開されたリンクのダウンロードの進行状況を示すダイアログ。

デザイン素材のダウンロード中にエラーが発生した場合は、リンクを再公開して再度共有するようにデザイナーに依頼してください。

デザイン素材のダウンロード中にエラーが発生しました
デザイン素材のダウンロード中にエラーが発生しました

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

新規ユーザーの場合