マニュアルキャンセル

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

検索

最終更新日 : 2022年2月25日

Adobe XD ユーザーガイド
はじめに
デザイン
1. アートボード、ガイド、レイヤー
2. シェイプ、オブジェクト、パス
3. テキストとフォント
  1. 描画ツールとテキストツールの操作
  2. Adobe XD のフォント
4. コンポーネントとステート
5. マスキングと効果
6. レイアウト
7. ビデオと Lottie アニメーション
プロトタイプ
共有、書き出し、およびレビュー
デザインシステム
クラウドドキュメント
統合とプラグイン
XD iOS 版および Android 版
1. モバイルデバイスでプレビュー
2. Adobe XD モバイル版に関する FAQ
トラブルシューティング
1. 既知の問題と修正された問題
  1. 既知の問題
  2. 解決済みの問題
2. インストールと更新
3. 起動時のクラッシュ
4. クラウドドキュメントおよび Creative Cloud ライブラリ
5. プロトタイプ作成、公開、レビュー
6. 読み込み、書き出し、その他のアプリの操作

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

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

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

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

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

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

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

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

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

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

書き出しマーク
「共有」をクリックして共有モードに切り替えます。「開発」を選択します。
デザインモードで、書き出すデザイン素材を選択します。プロパティインスペクターで「書き出し対象にする」チェックボックスをオンにします。書き出すデザイン素材が、共有モードに表示されます。
共有モードで、「ダウンロード可能デザイン素材」チェックボックスをオンにし、デザイン素材を書き出し用にマークして、「リンクを作成」をクリックします。
デザインを作成するプラットフォームに応じて、一連の解像度の設定は異なります。
- Web：デザイン素材は 1 倍および 2 倍の解像度で書き出されます。
- iOS：デザイン素材は 1 倍、2 倍および 3 倍の解像度で書き出されます。
- Android：デザイン素材は最適化され、次の Android 画面密度で書き出されます。
  
  ldpi - 低密度（75％）
  
  mdpi - 中密度（100％）
  
  hdpi - 高密度（150％）
  
  xhdpi - 超高密度（200％）
  
  xxhdpi - 超超高密度（300％）
  
  xxxhdpi - 超超超高密度（400％）
公開済みのデザインスペックをブラウザーで開くには、「ブラウザーで開く」アイコンをクリックし、アートボードを選択してデザイン素材を表示します。選択したデザイン素材とその他のアートボードの詳細がブラウザーに表示されます。

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

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

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

画面の詳細ビュー

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

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

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

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

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

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

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

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

注意事項

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