はじめに
テクノロジーディビジョン、アーキテクチャ・インテグレーションチームに所属しておりますhig-higと申します。
今回は私がプロダクトオーナー（以下、POと記載）を努めているWebアプリケーション開発にAdobeXDを採用した際のあれやこれやについて、お伝えできればと思っております。
参考： https://www.adobe.com/jp/products/xd/details.html
この記事を執筆しようと思った理由
AdobeXDはユーザーの画面操作についての表現や共有に優れており、また他のAdobe製品との親和性も高いことからホームページ制作で活用事例が増えているツールでちょっと検索すれば様々な事例がHitします。
しかしながら、 （ 筆者の検索能力がポンコツという点を加味しても） Webアプリケーション開発での活用事例については情報が少ないと感じました。
そのような背景の中、実際に取り組んでみて解ったことや注意点などを紹介することで、同様のケースに取り組んでいる・取り組もうとしている誰かの役に少しでも立てれば良いなとの思いでこちらのテーマを取り上ることにしました。
AdobeXD導入の経緯
私がPOを担当しているWebアプリケーションの全面リプレースを行うこととなり、画面デザインについてはオーナ部署にて担当する枠組みとなりました。
そういった状況の中、よりスピーディに効率よくデザイナーと開発チームの連携を図りたいと考え今回はAdobeXDを採用することとしました。
※採用にあたっての検討内容などはこちらの記事が参考になりますのでよろしければご一読ください。
参考：Adobe XD と Figma 、どっちつかう？ – 料金編 –
デザイン仕様の連携はこう変わった
オーナー←→開発チーム間のデザイン合意プロセスがどう変わったか、ビフォーアフターで紹介すると下記のようになります。
・Before
①オーナーからの要望をPOが聞き取りし、パワーポイントやExcelなどで画面イメージ（既存画面のスクリーンショットを加工等）を作成。開発へ共有。
②開発チームが資料を元に実装。実装時点で都度質疑応答が発生（開発 ↔ PO ↔ オーナー）
③作成した画面をオーナーへ共有し、画面の挙動や遷移・レイアウトの微調整
・After
①デザイナーがAdobeXDでプロトタイプ（画面デザイン）を作成し、PO・スクラムマスター（以下SMと表記）へファイルを共有。
※機能使用やレイアウトの微調整は共有されたファイルにコメント付け等してリアルタイムに修正
②POから開発チームへ共有リンクを発行し、それを元に実装。
※プロトタイプが更新された場合はリンクを更新すると反映されます。
変わったことで何ができるようになったか
上記のように連携方法を変更したことでオーナー（デザイナー）、開発チームにどのようなメリットが発生したのかについてご紹介していきます。
・オーナー（デザイナー）
望むデザインを実現できるようになった。また質問 → 修正の結果がリアルタイムに反映されるため意思疎通がスムーズになった。
・PO、開発チーム
デザインや画面の挙動などについて質問から回答（修正反映）の時間が短縮され待ち時間が削減された。
開発用共有リンクからは、部品の配置位置（座標）、サイズ、色などのCSS定義を取得できるのでデザインを忠実に再現できるようになった。
Webアプリケーション独特の問題点
AdobeXDを利用することで得られるようになったメリットについて書いてきましたが、ここからはWebアプリケーション開発に利用する際に見えてきた問題点をお伝えしていきます。
CSS情報は取得できる内容に限界がある
アプリケーション開発を行う上で、CSS定義の設計は必須となります。
もちろん一般的なホームページ作成でも必要な作業ではあるのですが、画面の点数や階層、ボタンなど部品の点数が圧倒的に異なります。
開発の方針としては全てを独自に設計・定義する、CSSフレームワークを採用するなど様々な方法がありますが、重要なポイントとしてはAdobeXDで作成される共有リンクではClass構造までは取得できないという点です。
個々の部品についての情報は取得できますが、その部品がどのクラスに定義されていて何を継承しているのかといった情報までは取得できません。
これを解決するためには開発メンバー内での工夫が必要となってくるところです。
世代管理には工夫が必要
AdobeXDはファイルの世代管理を行うことができません。（2020年2月現在）
今後のUpdateによって機能が搭載される可能性はありますが、それまでの間はどのタイミングで、誰が、何処にマスターファイルを置いて更新するのかといったオペレーションが必要となります。
導入時の苦労点
本件のリプレースに伴い、AdobeXDを活用するという取り組みを開始しましたが、デザイナー・PO・開発チームの全員にとって初めての取り組みでしたので、様々な苦労がありました。
特にPOという立場はオーナーと開発の仲立ちをしながら、プロダクトの価値を最大限に高めるのが最大の目的となりますので、諸々の調整は中々に困難なものでした。
特に デザイナーもプログラマーも職人気質が強く、その上でそれぞれの求めるものは方向性が正反対だったりしますので・・・。
この辺りの対人の交渉・調整についての顛末は別の機会に記事にまとめてみたいと思っています。
さいごに
Webアプリケーション開発にAdobeXDを採用するという取り組みは、まだまだ始めたばかりで見えていない点や改善していくべき点が多々あると思っています。
しかし、手応えとしては今後も継続して挑戦するだけの価値が十分にあると感じています。
いままでのプロセスを振り返ってみて導入前に関係者へ周知しておくべき内容であったり、それぞれの立場がスムーズに連携できるよう調整に苦労した点などについては改めて別の記事でお伝えしたいとかんがえております。
むしろそちらのほうが核心に近いお話かもしれませんが・・・（汗）
拙い文章でしたが、お付き合いいただきありがとうございました。
また別の記事でお目にかかれますよう。
