マニュアル キャンセル

デザイン素材の書き出し

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトの線、塗りおよびドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

Adobe XD から制作用のデザイン素材を PNG、SVG、JPG および PDF ファイル形式で書き出す方法を説明します。

ビットマップ画像、アイコン、背景パターン、テキスト、アートボードなどのデザイン素材を XD から PNG、SVG、JPG、および PDF として書き出すことができます。これらの書き出されたデザイン素材は、iOS、Android、または Web アプリケーションでのデプロイメント用に最適化されます。

macOS で XD を使用している場合、サードパーティ統合(Zeplin、Avocode、Sympli、Kite Compositor、Protopie など)にデザインを取り込むこともできます。

デザイン素材やアートボードを書き出し用に選択する

macOS

オブジェクトまたはアートボードを選択し、ファイル書き出しに移動するか、Cmd + E を押します。

Windows

オブジェクトまたはアートボードを選択し、ファイル書き出しに移動します。

  • バッチプロパティインスペクターで「書き出し対象にする」オプションを使用してマークされたデザイン素材をバッチ書き出しできます。複数のオブジェクトを 1 つのデザイン素材として書き出すには、書き出す前にオブジェクトをグループ化します。
  • 選択済み:特定のデザイン素材を選択して書き出すことができます。
  • すべてのアートボード:デザインプロジェクトで書き出すすべてのアートボードを選択できます。
  • After Effects:After Effects に書き出すデザイン素材を選択できます。

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

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

  • カンバス上のレイヤーを右クリックし、ドロップダウンメニューから「書き出しマークを追加」を選択します。 
  • レイヤーパネルを開き、レイヤー名の横にある書き出しマークを追加アイコン をクリックします。

デザイン素材を異なるファイル形式に書き出す

デザイン素材は、Web サイトで HTML/CSS/JS を使用したり、iOS および Android アプリケーションで Swift や Java などのネイティブ言語を使用したりして、デザインしたものをデベロッパーが再作成するために必要とするデザインファイルです。

一般に、最も一般的なデザイン素材は、ビットマップ画像、アイコン、背景パターンであり、PNGSVGPDFJPG で書き出すことができます。

PNG として書き出し

PNG として書き出し
PNG として書き出し

一般的な書き出しサイズまたはプラットフォーム固有の書き出しサイズを選択するか、カスタムの書き出しサイズを設定します。

  • プリセットまたはカスタムの書き出しサイズ - プリセットの書き出しサイズ(0.5 x、1 x、1.5 x、2 x、3 x、4x)のいずれかを選択します。0.1 x から 10 x までのカスタムの書き出しサイズを入力することもできます。
  • Web - デザイン素材は 1x および 2x 解像度で書き出されます。
  • iOS - デザイン素材は 1x、2x、3x 解像度で書き出されます。
  • Android - デザイン素材は最適化され、次の Android 画面密度で書き出されます。
    • ldpi - 低密度(75%)
    • mdpi - 中密度(100%)
    • hdpi - 高密度(150%)
    • xhdpi - 超高密度(200%)
    • xxhdpi - 超超高密度(300%)
    • xxxhdpi - 超超超高密度(400%)

SVG として書き出し

SVG として書き出し
SVG として書き出し

オブジェクトまたはアートボードを SVG として書き出す場合、次のオプションを設定できます。

ビジュアルスタイル

  • プレゼンテーション属性:各 SVG タグの個々のスタイルプロパティごとに別々の XML 属性を使用します。この形式は、Android Studio で SVG デザイン素材を使用するために必要です。
  • 内部 CSS:CSS クラスを持つ単一のスタイルタグを使用し、同じスタイルを持つオブジェクト間でスタイル設定を共有して、ファイルサイズを小さく抑えます。

埋め込み画像またはリンク画像:

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

PDF として書き出し

PDF として書き出し
PDF として書き出し

デザイン素材を PDF で書き出すには次の方法があります。

  • 単一の PDF ファイル:複数のアートボードまたはデザイン素材を選択して、それらを 1 つの PDF ファイルとして書き出すことができます。
  • 複数の PDF ファイル:複数のアートボードまたはデザイン素材を選択し、それぞれを個別の PDF ファイルとして書き出すこともできます。選択したアートボードまたはデザイン素材ごとに個別の PDF ファイルが作成されます。

JPG として書き出し

JPG として書き出し
JPG として書き出し

デザイン素材を JPG として書き出す場合、次のオプションを設定できます。

品質: 20%、40%、60%、80%、100% から選択します。

書き出しサイズ:

  • プリセットまたはカスタムの書き出しサイズ - プリセットの書き出しサイズ(0.5 x、1 x、1.5 x、2 x、3 x、4x)のいずれかを選択します。0.1 x から 10 x までのカスタムの書き出しサイズを入力することもできます。
  • Web - デザイン素材は 1x および 2x 解像度で書き出されます。

JPG は PDF に変換されません。ラスタライズ画像は画像としてインポートされるため、PDF に変換されることがあります。

デザイン素材をサードパーティアプリケーションに書き出し

XD から他のアプリケーション(ZeplinAvocodeSympliKite CompositorProtoPie)にデザインを提供することもできます。

Zeplin を使用した macOS での XD のサンプルワークフローを以下に示します。

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

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

    Zeplin へのデザイン素材の書き出し
    Zeplin へのデザイン素材の書き出し

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

    XD で Zeplin を使用しているときに問題が発生する場合は、「書き出し」オプションにサポート対象のサードパーティ製品が表示されないでソリューションを確認してください。

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

トラブルシューティング

デザイン素材の書き出しについての問題が発生している場合は、書き出しに関する問題を解決するには、Adobe XD でファイルのインポートまたはエクスポートができないのはなぜですか?
を参照してください。

ご質問または共有するアイデアがある場合

コミュニティで質問

お気に入りのデザインツールに追加してほしい書き出しワークフローはありませんか? XD UserVoice
に投票するか、リクエストを追加します。

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。

アドビのロゴ

アカウントにログイン