Adobe XD Meeting #03の発表資料です。 Adobe XDをデザイナーからエンジニアへのデータ受け渡しツールとして使えるかどうかを検証。

1. エンジニアへの受け渡しの果て、
デザイナーの内宇宙に収斂した選択
Sony Interactive Entertainment
池原健治（@kenji_clown5）

2. そもそもXDで本気デザインはできる？
シンプルでコンポーネント化が可能なデザイン。
XDが得意とするデザイン
XDが苦手とするデザイン
複雑で有機的/写実的なデザイン
→ 外部ツールに大きく依存する
→ XD上でデザインが完結する
?

3. 受け渡しの定義
• コンテンツ（アプリ）全体の構成
• UI・画面・個々のパーツデザイン
• アニメーション、インタラクション
デザイナーが伝えたいこと
エンジニアが欲しいもの
• コンテンツ（アプリ）の仕様書、指示書
• 全パターンの破綻のないデザインデータ（位置計測、画像書き出し）
• 言語化もしくは可視化されたアニメーション、インタラクション
いい感じの見た目と動き
論理的な情報群

4. 受け渡しツールあれこれ
• Photoshop
おそらく一番多いパターン。
• Illustrator
高解像度対応で需要高まり中。
• Animate（Flash）、Fireworks
超限定的。
• XD、Sketch
ワイヤーフレームやプロトタイピングに。

5. 比較１: PSDファイルとPhotoshop
• 豊富な書き出しオプション、品質コントロール
• Illustrator連携（スマートオブジェクト）
• CSS書き出し
• レイヤー操作が直感的ではない
• 画像編集機能が強力な故の弊害
（描画モードとレイヤー効果に注意）
良いところ
残念なところ

6. 比較２: PSDファイルとExtract
• Adobeソフト不要
• オブジェクト間の距離計測、サイズ確認が直感的にできる
• CSS書き出し
• 読み込みと展開に時間がかかる
• 今後もサービスが継続するか不安
（Dreamweaverにも内包されてるよ）
良いところ
残念なところ

7. • 動作が軽い
• オブジェクト間の距離計測、サイズ確認が直感的にできる
• 全体の構成（ユーザーフロー）を俯瞰できる
• 画面遷移アニメーションの可視化、数値化
比較３: Adobe XD
• 書き出し機能不足（PNG 8bit、JPG、CSS）
• Photoshop、Illustratorとの連携が一方通行
良いところ
残念なところ

8. 比較表（異論は認める）
Photoshop Extract Adobe XD
レスポンス ○ △ ◎
距離/サイズ計測 △ ○ ◎
画像書き出し ◎ ○ △
CSSコピー ○ ◎ ×
画面遷移 アニメ
ーション × × ◎

9. ぼくのかんがえたさいきょうのXD
• JPG書き出し
• リピートグリッド内のオブジェクトに連番を振って一括で書き出す
• スマートオブジェクト（Photoshop、Illustrator連携）
• CSS書き出し → UPDATE予定
• スタイルガイド生成 → UPDATE予定
• バージョン管理 → UPDATE予定

10. 本日のまとめ
• XDが得意とするデザインなら受け渡しに使えるかも
• チーム内でのXDに対する情報共有が必須
• 一部の画像書き出しはデザイナー側のヘルプが必要
• コンポーネント化を想定した分かり易い構成を心掛ける
- 適切なシンボル化
- レイヤー名の徹底（命名規則を決めておくと尚良し）
ただし！

11. おしまい