Adobe XDのプロトタイプをPDFで保存する

炊飯器が壊れてしまい、数日間パックご飯で凌ぐことになった池島です。(一升炊きは在庫が少ないのです)
前回に引き続き、Adobe XDの活用についてお話したいと思います。

Adobe XDのプロトタイプ機能。ページ動線が設定できて、すぐに書き出せて、コメントが付けられて、とっても便利なのですが、インターネット環境がないと見ることができません。クライアントさんが、勝手にコメントを書き換えてしまうかも?という不安もあります。(コメントを変更すると、通知は来ますが)
そこで、ブラウザのアドオン(プラグイン)のPDF書き出し機能を使って、PDF書き出しを行ってみました。
(こういう機能がXDに標準装備される日を待っています。)

PDFの書き出しについて

PDF書き出しの準備

用意する物

Adobe Acrobat

書き出されたPDFの編集に使います。
お使いのAdobe XDがAdobe Creative Cloudでの契約であれば、それに含まれています。
Adobe XDが単体契約の場合は、別途購入するか、サードパーティー製のPDF編集ソフトをお使いください。

ブラウザ

Adobe PDF ツールバーでの書き出しもできますが、印刷機能を使った方が簡単かと思います。

参考)Adobe PDF ツールバーを使った場合のPDF書き出し方法です。
https://helpx.adobe.com/jp/acrobat/using/converting-web-pages-pdf.html

PDF書き出し

MacでGoogle Chromeを使った例です。

(1) ブラウザにXDプロトタイプを表示します。

「返信」は、全て開いておきます。

(2) ブラウザのメニューの「印刷」をクリックします。

(3) 印刷の設定をします。

送信先:「PDFに保存」
レイアウト:縦
用紙サイズ:A3

用紙サイズをA3縦にすると、イメージとコメントをバランス良く配置できるように思います。
ワイヤーフレームやデザインの画面が横長ばかりだったり、コメントが少ない場合は、横レイアウトやA4を選んでも。
画面イメージのサイズは、一旦印刷をキャンセルして、ブラウザの幅で調整します。

ブラウザ幅を大きくしていると、画面イメージが切れてしまいます。
画面イメージとコメントのサイズ比はこれくらいで。

(4) 設定・調整が終わったら、「保存」でPDFを書き出します。

コメントが多く、1ページに収まらない場合は、コメントをスクロールしながら、複数回に分けて書き出します。
「解決済みのコメント」も、忘れずに表示させて書き出します。
画面イメージが長い場合は、XDから画像を書き出しておいて、PDFに貼り付けた方が早いです。<br>ピン止めのマークは、PDF上でオブジェクトに分割されます。

PDFを編集

ここからは、Adobe Acrobatでの作業となります。
書き出されたPDFを1ファイルにまとめ、余分な要素を削除します。

(1) 書き出したPDFを、ベースにするPDFファイルに挿入してまとめていきます。

(2) 不要な要素を削除します。

「ログアウト」や返信フォームなど、不要な要素を選択・削除します。
また、ページをまたぐコメントは、重複部分を削除し、読みやすいように位置を調整します。

(3) 切れている画面イメージは、XDから書き出した画像に差し替えます。

ピン止めのマークも、重なり順を上にして、位置を調整します。

(4) 必要に応じて、編集に制限をかけます。

「PDFを編集」画面で、「編集を制限」にチェックを入れると、パスワードの設定ができます。

(5) 再度、全体をチェックして完成です。

最後に

XDのプロトタイプをPDFに書き出す、という必要に駆られることはあまりないかもしれませんが、お役に立てましたら幸いです。

新たなツールAdobe XDを取り入れ、運用・活用方法を手探りで考えながら使っているところです。
XD自体、まだ未完成で成長段階にあると思いますし、これから次々に機能の追加や改善があることでしょう。
これからも、期待を持って、注目していきたいと思います。

このエントリーをはてなブックマークに追加