エンジニアへの受け渡しの果て、デザイナーの内宇宙に収斂した選択

Sony Interactive Entertainment池原健治（ @kenji_clown5 ）

そもそも XD で本気デザインはできる？シンプルでコンポーネント化が可能なデザイン。

XD が得意とするデザイン

XD が苦手とするデザイン複雑で有機的 / 写実的なデザイン→ 外部ツールに大きく依存する

→ XD 上でデザインが完結する ?

受け渡しの定義• コンテンツ（アプリ）全体の構成• UI ・画面・個々のパーツデザイン• アニメーション、インタラクション

デザイナーが伝えたいこと

エンジニアが欲しいもの• コンテンツ（アプリ）の仕様書、指示書• 全パターンの破綻のないデザインデータ（位置計測、画像書き出し）• 言語化もしくは可視化されたアニメーション、インタラクション

いい感じの見た目と動き

論理的な情報群

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

比較１ : PSD ファイルと Photoshop

• 豊富な書き出しオプション、品質コントロール• Illustrator 連携（スマートオブジェクト）• CSS 書き出し

• レイヤー操作が直感的ではない• 画像編集機能が強力な故の弊害（描画モードとレイヤー効果に注意）

良いところ

残念なところ

比較２ : PSD ファイルと Extract

• Adobe ソフト不要• オブジェクト間の距離計測、サイズ確認が直感的にできる• CSS 書き出し

• 読み込みと展開に時間がかかる• 今後もサービスが継続するか不安（ Dreamweaver にも内包されてるよ）

良いところ

残念なところ

• 動作が軽い• オブジェクト間の距離計測、サイズ確認が直感的にできる• 全体の構成（ユーザーフロー）を俯瞰できる• 画面遷移アニメーションの可視化、数値化

比較３ : Adobe XD

• 書き出し機能不足（ PNG 8bit 、 JPG 、 CSS ）• Photoshop 、 Illustrator との連携が一方通行

良いところ

残念なところ

比較表（異論は認める）Photoshop Extract Adobe XD

レスポンス ○ △ ◎距離 / サイズ計測 △ ○ ◎

画像書き出し ◎ ○ △CSS コピー ○ ◎ ×

画面遷移アニメーション × × ◎

ぼくのかんがえたさいきょうの XD

• JPG 書き出し• リピートグリッド内のオブジェクトに連番を振って一括で書き出す• スマートオブジェクト（ Photoshop 、 Illustrator 連携）• CSS 書き出し　→　 UPDATE 予定• スタイルガイド生成　→　 UPDATE 予定• バージョン管理　→　 UPDATE 予定

本日のまとめ• XD が得意とするデザインなら受け渡しに使えるかも

• チーム内での XD に対する情報共有が必須• 一部の画像書き出しはデザイナー側のヘルプが必要• コンポーネント化を想定した分かり易い構成を心掛ける

- 適切なシンボル化- レイヤー名の徹底（命名規則を決めておくと尚良し）

ただし！

おしまい