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

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

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

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

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

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

  • 任意のアートボードレイヤーをクリックし、ポップアップメニューの書き出し対象にするチェックボックスをオンにします。
  • カンバス上のレイヤーを右クリックし、ポップアップメニューから「書き出し対象にする」を選択します。
  • 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. 公開済みのデザインスペックをブラウザーで開くには、「ブラウザーで開く」アイコンをクリックし、アートボードを選択してデザイン素材を表示します。選択したデザイン素材とその他のアートボードの詳細がブラウザーに表示されます。

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

    web 上でのデザイン素材

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

公開済みのデザインスペックを開発者と共有すると、開発者はそこからデザイン素材をダウンロードできます。開発者はデザイン素材を個別にまたは同時にダウンロードできます。

 command + A キーまたは Ctrl + A キーを使用してすべてのデザイン素材を選択するか、Shift キーを使用して複数選択することもできます。デザイン素材は、お使いのコンピューターのダウンロードフォルダーに .zip ファイルとしてダウンロードされます。ベクター素材の形式を SVGPDF および PNG に変更、ビットマップ素材の形式を PNG および PDF に変更できます。

デザイン素材をダウンロードする

アドビのロゴ

アカウントにログイン