All About XDで学んだ、Adobe XD CCでワークフロー改善
さる6月30日に参加した、CSS Nite LP57「All About XD再演版」で得た、これから自分でも業務に活かせそう！と感じたポイントをレポートしたいと思います。
CSS Niteとは？の説明と、全体の感想はこちらの記事で書きました！
記事を分けたのにめちゃくちゃなボリュームになってしまいましたがお付き合いください。
この記事の目次
「All About XD」について
タイトルの通り、Adobe XD CCにまつわるセッションだらけの講演会でした。
基調講演から数えて8セッションという長丁場。
ライブでXDの使い方を見せていただいたり、実際の案件でどのようにXDを使ったのかを実例を紹介していただきました。
追加されたばかりの新しい機能の紹介もあり、1日でXDへの理解がぐっと深まりました。
今すぐXDを案件に導入したいと思わせられる講演ばかりでした！
下記レポートは、セッション別ではなく全体を通して参考になった！という点についてとりとめなくダラッとまとめてますので、複数の登壇者さんの発言がまざってる部分があります。あらかじめご了承ください。
XDがワークフローを変える
多くのセッションで共通して出て来た、XDの役割を表す重要なキーワードが2つありました。
一つは「XDの導入によりワークフローが改革できる」。
そしてもう一つが「XDはコミュニケーションツールである」。
XDにより、プロジェクト初期からデザインまでをひとつのアプリケーションで一貫することができる。
従来の不可逆的な一方向のワークフローから、XDを介してコミュニケーションをしながら模索し、少しずつ方向性を確認していく。
従来のワークフローでの使用ツール（例）はこう↓
SketchやProttといったアプリケーションを使っている会社もありますが、わたしのいた会社でもこういう感じが多かったですね。
いずれにせよ、各段階によって違うアプリケーションを使うことが常態化。
ドキュメントやデータが分散し、場合によっては先祖返りなどの弊害もありました。
XD時代ではこれをこう変えていきましょうというのが次の項です。
ワークフローのアプリケーションはXDに集約しよう
今まで要件定義やワイヤーフレームはExcelやPowerPoint、デザインはPhotoshopやIllustrator、と言ったように、各作業によってツールが分かれてしまっていた制作現場は多かったと思います。
ちなみにXDを使い初めてからのわたしとディレクターのワークフローはこんなかんじ↓
わたしはこれではXDを生かせていない、ただのワイヤーフレーム専用アプリケーションになっていることに、もどかしさを感じていました。
（仕様書や要件定義をドキュメント化せずメール等のやりとりで終わらせてるのが早くなんとかしなければポイントなので一旦そこについてはスルーしてください）
講演において何度か出てきたXD時代のワークフローはこう↓
このように、コーディング前までのワークフローをすべてXDで行ってしまおう、ということです。
要件定義、仕様書、プレゼンテーションもXDで作ろう！！
そして意外にもわたしにとって盲点だったのが、
ワイヤーフレームやデザインだけではなく、
PowerPointの役割をもXDに担わせるという発想。
なんとなくWebページ制作に対するツールのような感覚でいたので、ドキュメントを作るために使うっていうアイデアが自分の中に全くなかったので、これは真似したい！
ページをプロトタイプモードでリンクさせれば、プレビュー時はブラウザ上でスライドのように見せることができます。
講演でも、XDでスライドを作ってる登壇者さんいらっしゃいました。
もちろん、PowerPointのように、オブジェクトごとに豊かなアニメーションをつけることは現状ではできませんが、そういった演出を必要としないスライドを作る際には、XDでも十分です。
わたしも早速提案書をXDで作ってみましたが、動作の軽さ、アートボードを並べて全体を見渡せること、アセットを使える、というアドバンテージが大きかったため、PowerPointのプレゼンテーション作りに苦手意識があったわたしでも、XDなら比較的スピーディに提案書作りができました！
こちらの提案書は実際にクライアントに、URL共有で提出したものです。
案件名が見えないようにちょっとぼかし強めで失礼します。雰囲気伝わればいいかなと…。
バージョン管理をXDで行おう
XDのいくらアートボードを増やしても軽々な利点を活かし、1つのXDファイルでアートボードを増やしバージョン管理をする手法がなかなかキュンときました！
また目次用アートボードを用意してプロトタイプモードでリンクさせれば参照も楽という、これも自分には盲点なアイデアでした。
そのほか、CMS管理画面の設計に（管理画面と実際のページの比較）。
デザインの赤入れに（指示ファイルがいくつもできてしまうのを防げる）。といった利用方法も紹介されました。
このようにワイヤーフレームやデザインに入る前の、プロジェクトの初期段階からXDを使う利点が大きく、プロジェクト全体を管理する役割をXDが担うことができるというのが正に、ワークフロー改革の一番大きなポイントじゃないでしょうか。
そしてその利点の大きなポイントになるのは、「少しさわればデザイナーでなくても使い方がすぐ学習できるシンプルさ」です。
URL共有でクライアントとコミュニケーション
実は、わたしは今までXDで作ったワイヤーフレームをPDF保存してクライアントに渡していました。
URL共有ができない（セキュリティ上の制約等で）場合は別として、普段のクライアントであればURL共有のほうが遥かに便利ですね。
いまいちわかってなかったのが恥ずかしいのですが、URL共有のコメントはAdobeアカウントを持っていなくてもできるんですね…。
修正した後は「公開リンク更新」をすればよいので、URLひとつで済みます。
これにより、従来のグラフィックソフトで作って書き出したものを渡していたころと比べると、修正のたびにバージョン違いのファイルが増えていってしまうという、煩わしさが解消されます。
また、クライアントも修正指示や質問を書き込むのが簡単だし、記録が残るので複数の指示ファイルが来て混乱して対応漏れ…ということも減りそうです。
それに、プロトタイプでリンクを繋いでおくことで、画像で見るのとは違い遷移先のイメージなどが掴みやすくなるので、できるだけプロトタイプをクライアントに共有したいと思いました。
ちなみにわたしは、ディレクターとの間でURL共有でフィードバックをもらう方法に最近切り替えました。
今の所はワイヤーフレームや提案書ですが、作りながら途中途中で更新して、方向性を確認してもらう、という方法です。
修正のたびにファイル書き出し＆ファイル送信がない分、確認が楽になりました。
XDの苦手分野は、得意なツールに任せる
デザインにおいては、どうしてもPhotoshopやIllustrator等のグラフィックソフトでやるものだという意識があり、自分たちのフローでは、XDで作ったワイヤーをもとにPhotoshopでデザインするという流れになってしまっていました。
グラフィックソフトでデザインをすることの不便な点
- ・アートボードが増えると重すぎる
- ・下手すると1つのアートボードのファイルでも重すぎる
- ・たとえばボタンデザインが変更になったら、他のボタン全部を修正するのがすごく手間
それでもグラフィックソフトでやっていた理由
- ・XDでは写真のレタッチや加工ができないから
- ・XDではロゴやアイコンといった素材を作れないから
- ・XDでは文字をつかったデザインに弱いから
- ・XDではレイヤースタイルやアピアランスといったリッチデザインができないから
…といったところが挙げられます。
XDの弱点×グラフィックソフトの強み
確かに、XDの不得手な面はリッチデザインや写真加工等の画像の扱いに弱いところです。
しかし、逆に、XDにできないことはそれが得意なソフトで行い、それをCCライブラリを使ってXDと連携することで弱点は回避できます。
XDでPhotoshopとIllustratorと同じレベルの機能を再現できないからデザインツールとして使わない、というのは非常にもったいない話だなと気づかされました。
Photoshopで写真加工やバナー素材などを作り、
Illustratorでロゴやアイコン素材などを作る。
それをCCライブラリに登録すれば、XDでそれらの素材を呼び出して配置することができます。
また、ライブラリに登録した素材はオリジナルを修正すればライブラリに反映され、XD上でも自動反映されます。
これでXDの大量アートボードでも軽く早いという特性を活かしながら、リッチな画像パーツをデザインに乗せていくことができます。
元来、Webデザインではヘッダーやフッター等、ほとんどのページで共通する要素やボタンなどの同じデザインパーツが複数ページに置かれているため、ここでXDのアセットが大活躍します。ひとつを修正すれば共通する全てが一瞬で変更できるというメリットがとても大きいので、
PhotoshopやIllustratorで素材を作り
XDで素材を配置しデザインデータを作る
という方法がもっとも素早く、効率的にクオリティの高いものを作ることができるというお話が複数の登壇者からありました。
わたしもそれは間違いないと思います。
Illustratorでも画像データをリンク画像として配置することはできますし、ヘッダーやフッターデザインを別ファイルとして作り、リンクで配置させる方法を取っている方も多いと思いますが、動作の軽さやアートボードをどんどん増やしても全然耐えられるという点でXDのアセットに軍配が上がるとジャッジしたいです。
まとめ
他にもこんな使い方もできるよ、という面白い使い方の実例もあり、実際の案件に使えるかどうかはさておきXDにできることがどんどん広がっていくという楽しさがたくさん得られました。
まだ正式なデビューから1年ちょっと、毎月のようにアップデートされて使いやすさが改善されていっているので、今できないことも、将来的にはXDに機能として備わるかもしれません。
今のところ、プロトタイプ部分についてはシンプルな遷移が主で、ようやくオーバーレイが実装された（実はこれ結構感動しました）ので、今後はインタラクションが進化したりアニメーション部分が強化されたりするのかな？と予想してます。
まだまだXDは完成途上のアプリケーションなので、あと半年後にはどんな姿になってるんだろう？と非常に楽しみです。
今回の講演で得たことを実際の案件に取り入れ、わたし自身のワークフロー改善が実現することをまずは目指していきたいと思います！
長くなりましたがレポートは以上です！
