初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

こんにちは。シナップデザイナーの飯山です。

この記事はAdobe XD Advent Calendar 2016の14日目の記事です。

2016年11月上旬にベータ版がリリースされたAdobe Experience Design(以下、Adobe XD)。
Adobe XDでデザインできるのはUIだけでなく、画面遷移が可能な動くモックアップを制作できるのが最大の特徴とも言えます。 アップデートされる度に新たな機能が追加され、ますます実務が捗るアプリケーションへと進化しています。

クライアントなど関係者への確認出しや実装に必要な画像パーツを用意する場面で、Adobe XDで制作したデザインを画像ファイルとして書き出すことはよくあると思います。書き出し作業のような小さくとも頻度が多いタスクは極力効率化してサクサク進めたいですよね。 ところがAdobe XDを使い始めると書き出しで戸惑うことが多くあります。

そこで、今回はAdobe XDに備わっている数々の機能の中から、「書き出し」機能に注目してお伝えします。

※ Adobe XDのバージョンは、0.6.2.7 ベータ版(2016年11月リリース版)に基づいた内容です。バージョンによっては内容が異なる場合があります。

書き出し機能を使う

  • メニューバー:ファイル > 書き出し
  • ショートカットキー:⌘ + E


書き出せるフォーマットは3つ


PNG

デザインレビュー用にアートボードごと書き出す場合にオススメです。

▼書き出し先

選択できるのは、「デザイン」「Web」「iOS」「Android」の4つ。 Android用を選択すると最大6種類の倍率で同時に書き出すことができます。

  • デザイン:1x
  • Web:1x、2x
  • iOS:1x、2x、3x
  • Android:75%(ldpi)、100%(mdpi)、150%(hdpi)、200%(xhdpi)、300%(xxhdpi)、400%(xxxhdpi)


▼設定サイズ

設定サイズは、デザイン時に使用したアートボードの倍率に合わせて選択することをオススメします。

例えば、iPhone6/7(375×667)のアートボードで「書き出し先:Web」を選択した場合、1x(等倍)と2x(2倍・Retinaサイズ)で書き出されるPNGサイズは以下になります。

等倍でデザインした場合
アードボード:iPhone6/7(375×667)

書き出し先:Web 1x書き出し先:Web 2x設定サイズ:1x375×667750×1334設定サイズ:2x188×334375×667

Retinaサイズでデザインした場合
アードボード:iPhone6/7(750×1334)

書き出し先:Web 1x書き出し先:Web 2x設定サイズ:1x750×13341500×2668設定サイズ:2x375×667750×1334
等倍でデザインした場合は「1x」、Reitnaサイズの2倍でデザインした場合は「2x」を選択すれば良さそうです。

▼アートボード単位で書き出す

すべてのアートボードを書き出す場合

アートボードを未選択の状態で書き出しを実行し、「すべてのアートボードを書き出し」をクリック。

特定のアートボードだけ書き出す場合

書き出したいアードボード全体をドラッグで選択、またはアートボード名をクリックして選択。

アートボード全体を選択できていないと選択済みパーツが対象となり、アートボードは書き出されません。 クリックでアートボードを選択した方が楽な場合もあるのでうまく使い分けましょう。

▼個々のアセット単位で書き出す

書き出したいオブジェクトのレイヤーを選択して書き出しを実行します。 「PNGファイル名 = レイヤー名」となります。※

複数オブジェクトを1つのアセットで書き出す場合はグループ化したフォルダを選択して書き出しを実行します。 「PNGファイル名 = グループフォルダ名」となります。※

※ 書き出し時にファイル名を付けることも可能です。

SVG

実装時のアイコンパーツを書き出す場合にオススメです。

▼画像を保存

ベクター画像とビットマップ画像を組み合わせてSVGで書き出しする時、「埋め込み」または「リンク」のそれぞれ適した方を選びます。

  • 埋め込み

ビットマップ画像はbase64エンコードされた画像として、SVGコードに埋め込まれます。 SVGファイルの容量は大きくなりますが、リンク切れすることがなくなります。

  • リンク

ベクター画像がhref属性によってコード内で参照されます。

▼ファイルサイズを最適化

SVGファイルのコードが、インデントや余分な改行やスペースがミニファイされて容量が軽くなります。

PDF

複数画面を作成して各画面を1つのファイルに収めたい場合にオススメです。

  • 単独のPDFファイル

選択した複数のオブジェクトまたはアードボードは、1つのPDFファイルとして書き出されます。

  • 複数のPDFファイル

選択した複数のオブジェクトまたはアードボードは、別々のPDFファイルとして書き出されます。

今後のアップデートにも期待!

いかがでしたでしょうか。今回お伝えしたAdobe XDの書き出し機能はAdobe公式動画に詳細がまとめられています。

すぐに使えるアセットを書き出して共有 | Adobe Experience Design CC (Preview) tutorials

また、以下に書き出しにおける気をつけたいポイントを挙げてみました。

  • 書き出しファイル名を考慮した名称でアートボードを管理すると効率的です。
  • 書き出し時にその都度ファイル名を編集することもできますが、リネームの手間が省けます。
  • PDF化されたテキストはコピー&ペーストが正しくできない!?
  • どうやらうまく動作しない恐れがありそうです。
  • Adobe XD で書き出せる素材の最大サイズは 16,000 x 16,000px。
  • もし縦長ページ作成時にうまく書き出せなかった場合は、アードボードのサイズを確認してみましょう。

Adobe XDはこれまでのPhotshopやIllustratorのデザインツールに比べると、デザインのアウトプットに至るまでの操作が簡略化されています。これが直感的にサクサク使える理由の1つだと感じました。

情報設計・ワイヤーフレーム・UIデザイン・画面遷移など、実装スタートまでの工程を一貫したアプリケーション内で実行できることは、プロダクト開発スピードを上げることにも繋がるかもしれません。

今後のアップデートでは、スタイルガイドが生成できる「ライブラリ」機能も追加されるようなので期待したいと思います!

シナップではプロトタイピングによるプロダクト開発のお手伝いを行っております。
お気軽にお問い合わせください。

シナップは、Webサイト、アプリ、IoTなどインターネットとつながるユーザー接点すべてをデザインし、クライアントのビジネス立ち上げ、サービスの継続的発展をサポートすることを得意としている会社です。
プロトタイピングによるプロダクト開発に関するご相談ございましたら、お気軽にお問い合わせください

Web戦略から制作、グロースまで総合的に支援します
シナップはサービスの継続的な成長をサポートするデザインコンサルティングです。戦略的から制作・開発、そしてサービスのグロース・運用まで、すべてのワークフローにおいて支援が可能です。
この記事をシェアする
飯山 嘉之
飯山 嘉之
大学でマスコミュニケーションを専攻し、音楽関連企業で経営企画・宣伝販促・営業を経てシナップに。UIデザイン、CMS実装、CV改善を担当。猫、写真、サウナを好むデザイナー。信州を絶賛開拓中。

関連記事

Webサービスを成功に導くシナップのUXリサーチ

2023.10.04
  • UXデザイン

一見良さそうに見えるデザインにも問題点が… デザイン4大原則から考えるUIデザインの完成度を高める方法

2023.06.06
  • UXデザイン
  • UI/UX

カスタマージャーニーマップは何で作る?カスタマージャーニーマップを作るツール3選

2022.10.25
  • UXデザイン

UXリサーチとは?今日からスモールスタートで始めるUXリサーチ

2022.06.14
  • UXデザイン

成長するサービスに必要不可欠なデザインシステム4つのメリット

2021.11.09
  • UXデザイン

成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

いますぐできる利用者のネガティブな感情を取り除き、 ポジティブな感情をもたらすUXデザインのヒント

2021.04.13
  • UXデザイン

春のスタートダッシュを決めよう!~2021年度版:Web業界の新人さんにオススメの書籍10選~

2021.04.07
  • UXデザイン

この3つだけはおさえておきたい。明日から作業効率が大幅アップする!この半年で行われたAdobeXDの新機能(2020年6月-12月)

2021.01.14
  • UXデザイン

2020年春からおさえておきたいデザイントレンド 7選

2020.04.14
  • UXデザイン

参考にしたいデザインシステムまとめ 10選

2019.04.11
  • UXデザイン

簡単に作れて見栄えする!CSSで作るリッチなhover演出

2018.06.21
  • UXデザイン

パーツごとに見るモバイルUI:参考にしたいUIまとめ

2017.09.12
  • UXデザイン

パーツごとに見るモバイルUI:フォームの事例と、UIを考えるときのポイント

2017.09.06
  • UXデザイン

パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介

2017.08.09
  • UXデザイン

視覚で伝わるインフォグラフィック!面白い事例も作ってみました!

2017.06.01
  • UXデザイン

初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

よくわかるIoTの仕組み 「モノ」とインターネットを接続するには

2015.11.19
  • UXデザイン

記事をページ分割するメリット・デメリット(モバイルフレンドリー対応)

2015.08.07
  • UXデザイン

モバイルフレンドリー対応:スマホで読まれる文字数は?

2015.07.30
  • UXデザイン

スマホサイトの「続きを読む」は必要か?(モバイルフレンドリー)

2015.05.28
  • UXデザイン

人気記事

「microCMS」導入を徹底解説!メリット・デメリット、料金体系、適切なプランの選び方、最後に相談できる会社の見つけ方まで!

2024/05/22
  • Web技術

KJ法とFigma(Figjam)を活用したZoomミーティングでの意見整理テクニック

2024/05/15
  • その他

恋愛マンガシチュエーションで面白く学ぶ Webガバナンスが必要なシグナル

2024/04/10
  • その他

企業のWeb戦略成功への鍵 Webガバナンスの重要性

2024/03/13
  • その他

『SINAP Journal 2024 Winter』PDF版をアップしました!

2024/02/20
  • シナップについて

自己成長を加速させるシナップの新人研修

2023/12/12
  • シナップについて
  • 採用

注目の国産ヘッドレスCMS「microCMS」

2023/11/14
  • Web技術

Webサービスを成功に導くシナップのUXリサーチ

2023/10/04
  • UXデザイン

リアルとリモートを上手に使った、柔軟なコミュニケーション

2023/09/12
  • シナップについて

ABテスト運用でよくある6つのお悩みと解決策

2022/03/15
  • グロース

成長するサービスを支えスケールを可能にするデザインシステムとは

2021/10/12
  • UXデザイン

次世代アナリティクス「Googleアナリティクス4(GA4)」の主な特徴と今後について

2021/09/14
  • グロース