Adobe XDからの PDF書き出し、使い所と勘所@ほぼ毎月 AdobeXD勉強会（仮）

2016/8/9@KAZUMA87Kazuma Sekiguchi

Who?関口和真Comcent,Inc CTOシステム開発、Web製作全般、講師

最近は Cordovaを利用したアプリ開発ECサイト及び関連システム構築

Fireworks Users Group暫定会長

一昨日 Lv３６になりました

Agenda

1 XDでの PDFエクスポート

2 書き出される PDFの特徴3 DEMO4 最適化

今回の内容はAdobe Experience Design CCの

バージョン 0.5.10.8 β版（ 2016年 7月公開版）に基づく内容のため、

今後の開発状況やバージョンによって内容に変更が生じます

1 XDでの PDFエクスポート

XDからの PDF書き出し

•XDからアートボードの PDF形式書き出しが可能•指定したアートボード、全てのアートボードの書き出しを切り替え可能

•書き出しはできるが読み込むことは不可能•残念・・・

嬉しいこと

•Windows環境で XD作品の確認がファイルとして可能•XDを持っていないクライアントに渡すことも可能•ほかの PDFと結合して 1つの PDFファイルとして渡すことができる•弊社の場合、これが非常に多い

•PDFに注釈を入れて共有が可能•印刷して確認、赤入れも可能

書き出される PDFの順番•アートボードの配置順で PDF内のページ順番が変わる•上にあるもの、左にあるアートボードからページが割り振られる

1つめのアートボードPDF：

1ページ目

2つめのアートボードPDF：

2ページ目

1つめのアートボードPDF：

2ページ目

2つめのアートボードPDF：

1ページ目

2 書き出される PDFの特徴

PDFの特徴•テキストは全てアウトライン化されて書き出される• なぜかフォントも埋め込まれている（？）• Aiでテキスト編集は不可能

• PDFを Aiで開き画像を確認するとかなり変な画像が出てくる

• Aiで開き編集することは現時点では不可能• Acrobatでも追記は可能だが、編集は不可能

•プロトタイプモードで付与したインタラクションは無視される（ PDFに反映されない）

3DEMO

4 最適化

最適化

•XDから書き出される PDFファイルはファイルサイズが妙に大きい•フォントが埋め込まれている（？）• Acrobatの容量の調査で「フォント」部分が妙に大きいバイトとして表示される

•ファイルサイズが大きいため、共有しづらい•Acrobatの最適化を利用してファイルを最小化するのがオススメ

最適化

Acrobat Proでいろいろとやってみた

最適化

•結果的には以下がファイルサイズが低くなり画面での表示品質に問題が起きない

「 PDF最適化」パネルで•「画像」にチェック（画像は画質に応じて設定を変更する）•「透明」にチェックし、解像度を選択（標準解像度で問題無さそう）•「ユーザーデータを破棄」にチェックし、中は全てチェック•「最適化」にチェック

これで大体半分以下のファイルサイズになる

5 まとめ

まとめ

•PDFへ注釈を入れたら XDに反映されるような機能があると嬉しいが、今後に期待•または XDへのコメント機能

•書き出しの最適化が進むと良いが、現状でも Acrobatで最適化すればファイルサイズはある程度削減可能•社内などのファイルサイズが問題ならない環境であれば、そのままの PDFでもOKのはず

Thank youWindows版早く出ないかな～