今月のXDUG沖縄は当初オフラインでのイベント開催を予定していましたが、新型コロナウィルス（COVID-19）の状況を考慮し、
オンラインでのイベント開催に変更しましたが、沖縄在住のメンバーはもちろん、沖縄から県外に引っ越した方、県外在住の方など、総勢21名の方にご参加いただきました！
「XDUG沖縄 エンジニアさんに優しいXDデータ作成とは？研究会」と題して、どうやってコーディングしやすいデザインデータをXDで作成するか、デザイン作成時に工夫していることや疑問、コーディングするエンジニア側の要望など気軽に相談できる機会になることを目的としました。
途中、話題が盛り上がり時間オーバーした関係で話のまとめができなかったので、こちらのレポートで詳しめに記載していますが、あくまで今回のXDUG沖縄イベント内で出た意見ですので、もっとこういう方法ある！という場合はぜひ機会あらば教えていただけると嬉しいです。
ちなみに、XDUG広島さんで、以前に「エンジニアに聞いてみよう！デザインデータの理想形」というテーマでイベント開催、イベントレポートがアップされていますので、ぜひ御覧ください！
Adobe XD ユーザーグループ広島 vol.7 – online
今回のゲスト
新垣 雄一郎さん
IT企業で働くデザイナー。Webサイト制作、Webアプリの設計、UI実装をまとめて担当し、最近はエンジニアと一緒にWebサービスをつくる仕事が多いです。HCD-Net認定 人間中心設計スペシャリスト / ウェブ解析士 / teratail ユーザーランキング98位。 たまにイラストも描きます。
https://note.com/new1ro
https://teratail.com/users/new1ro
https://store.line.me/stickershop/author/572248/ja
XDUG沖縄 エンジニアさんに優しいXDデータ作成とは？研究会
大変ありがたいことに、当初予定していた10名を上回る応募をいただいたので、ゲストの新垣さんとの事前打ち合わせで相談内容のアウトラインになるようなキーワードとサンプルデータをXDで作成し、画面共有しながらみなさんの意見を吸い上げつつ話を広げていくゆるいスタイルに。
参考で用意したXDデータ
プレビューはこちら ※閲覧可能期日未定
01.デザインデータはどうやってつくってる？
そもそもXDでデザイン作成するときって何をどれくらい用意してる？という話題から。
まずコーディングする側（デザインとコーディング両方している方も含む）から大前提として、「会社（チーム）によってルールが変わるので、まずは制作前にしっかり確認すること大事！」という意見が多数出ました。複数人のチームで制作する場合はもちろん、1人で制作する場合もクライアントさんへの確認や納品方法によっても正解は変わるので、しっかりコミュニケーションをとることはとても大切なことですね。
・PCとSPは両方つくる？
自分でコーディングする場合はPCのみしかつくらない派、クライアント確認やエンジニアさんが迷わないように両方つくる派など様々。デザイナーとコーディングが別々の場合は、PCとSPで仕様やデザインが変わる場合はエンジニア側でデザインの判断ができないので用意してほしいという意見がありました。
・ページは全ページつくる？
デザイナー兼コーディングを担当する方は、工数削減で全ページつくらないという判断もあるようです。基本は全ページ作成、場合によっては省略する場合もあるというところに着地。
・デザインガイドラインは必要？XDでのアセット登録は？
デザインガイドラインは「必要！」という意見が大多数。こちらはまだ作成したことがないという方も多かったので個人の意見ですが、一覧でわかるようにガイドラインのアートボードを作成しメインコンポーネントをまとめておくと便利です。XDのアセットもキレイに名称ルールやメインコンポーネントをキレイにまとめておく習慣を日頃からつけておくとGood！
ちなみに、マージンやパディングのガイドラインどうしてる？の話題は大変盛り上がり、これだけでイベント開ける感じになったので、また別の機会に。
※要素に透明のシェイプを配置する、などの意見も出たので個人的にも良い方法を研究してみようと思います
デザインシステム※に関してはAdobe社のデザインシステム「Adobe Spectrum」が公開、XDプラグインも用意されているので、こういったものを参考にして勉強しています。（あとは Googleのマテリアルデザインなど）
Adobe Spectrumはこちら
Blog:アドビ製品のデザイン作業が体験できるプラグイン、Spectrum for Adobe XDの一般公開
※デザインガイドライン＝デザインシステムではないのであしからず、興味のある方は違いを調べていただくとより理解が深まるかと思います
・PCとSPは別々にガイドライン必要？
全然別のデザインなら必要だけど、ルール決めがされている（例：見出し文字は大きさ80％など）場合は特別に作らなくて良いかなという着地でした。管理も2倍になるので大変なので、きちんとエンジニアさんにルールなど共有することが大事だと思いました！
・アニメーションや仕様の共有はどうしている？
アニメーションは、参考サイトのリンクを送ってエンジニアさんと話し合う、仕様に関してはXDデータのアートボード外に書く（XDデータ共有する場合のみ）などの意見が出ました。注意点として、XDのURL共有でコメントに仕様を書くと、フィードバックコメントと混ざってカオスになるのでおすすめできないという貴重な体験談も出ました。
・レイヤー整理どこまでしてる？
Photoshopや Illustratorほどしなくなったが大多数！アニメーションやコーディング補助の外部サービスと連携する際は整理が必要なので、できれば日頃からキレイにできるに越したことはないかと。（ちなみに私もレイヤーは汚部屋になることが多い）
フォルダをわける＝グループ化されて操作しずらい方は「ダイレクト選択：Cmd（Mac）または Ctrl（Windows 10）キーを押しながらオブジェクトをクリック」のショートカットを利用するのがおすすめ。こういった使い方のHoｗToをエンジニアさんに共有するのも大事ですね。
・レイヤー名称つけてる？
こちらは一緒にやるメンバーによるという意見が多かったです。会社ごとでCSSの名称ルールを決めている場合はそちらに合わせるのが良さそうです。ちなみにアイコンの名称ルールはfontawsome やマテリアルデザインのアイコンなど既存のものを参考にしている方も多かったです。
02.どうやってエンジニアさんへの共有してる？
現時点で考えられるのはこちらの4パターンでした！
今回の参加者は、XDデータを直で共有する、また共有リンク（開発）も送るという方が多かったです。
・ローカルデータを直に共有
Adobeアカウント（XD）を持っていることが前提。
一番確実といえば確実。XDデータに差分が出た場合は再度共有が必要、最新バージョンの管理徹底が必要。
・クラウドにアップして共同編集に招待
Adobeアカウント（XD）を持っていることが前提。
リアルタイム反映なので差分が出ず便利。同時編集もできるが、間違ってデザイン編集や削除してしまう危険性あるので、バージョン管理のルール決めは必要。あと、そもそもデータをクラウドにアップして良いか要確認。
・共有の開発者モードでURLを共有
Adobeアカウント（XD）を持っていなくても利用可能。
ただ、データの作り方によって数値が取れない場合があるので、XDデータ整理とエンジニアさんとのコミュニケーション必須。
・他の外部連携ツール
Adobeアカウント（XD）を持っていなくても利用可能。
実際に使っている方がいなかったので未知数！
03.コーディングしやすいデザインデータ
ご覧いただいた通り、前半で話が広がりすぎて、これ以降はさらっと触れる程度になってしましました。。！
・アイコンはアウトラインと背景マージンつける
アイコンをSVGで書き出す際に、シェイプをグループ化しただけではなく、線の場合はアウトラインを取り、ブーリアングループ（パスファインダ）すると親切です。（お仕事でエンジニアさんに指摘いただいてからやっている）また、アイコンは以下のようにマージン含めて書き出せるように、背景に透明のシェイプをおくのがおすすめ。
・ステートを使う場合は要注意
オブジェクトにステート機能を適用する場合は、XDのデザインデータを直に触る必要があるので、一見エンジニアさんにわかりずらい問題が発生することがあります。デザインガイドラインにステータス状態（例：ホバー）を明記してあげましょう。
・ゴリゴリアニメーション入れたやつはわかりにくい
XDのアニメーション機能はとても便利なのですが、アニメーションの都合でアートボードがめちゃくくちゃ増えたり、一部投透過にしたり。。と少し特殊なデータになるので、そのまま渡すとカオスになることがあります。（自分の失敗談）エンジニアさんに共有する場合は、事前に相談したり、XDデータを整理することをおすすめします。
・カラープロファイルされない問題
これはよく話題に上がるのですが、XDはカラープロファイルされない問題があるので、カラープロファイルが必要な場合はPhotoshop併用するなどしましょう。
04.XDデータをコーディングするときの注意点
この時点で20分押しになってしまったので、さらっと！これは引き続き話したい話題なので、今度また企画します。
・画像書き出しが荒れる
XDで画像を書き出すと、粗くなる気がする。。きっと調べれば解決法や詳しい方が出てくるのかもですが、XDUG沖縄では解決策みつからず。みなさんPhotoshopを併用してました！
・マージンがうまく測れない問題、マージンとパディングの区別がつかない
XDの共有リンク（開発）だと、リピードグリッド設定したままだと個別のオブジェクト同士のマージンが測れない問題、なんかマージンの数値ずれる？などみなさんの疑問が寄せられました。また、XDというかデザインガイドラインの課題にもなりますが、マージンとパディングどう定義するか迷うという意見で大変盛り上がったまま打開策が見つからなかったので、こちらは今後別途実験会してみようという話になりました。
05.コーディング補助プラグイン
こちらは、参加者の方に事前アンケートで「コーディング書き出しXDプラグイン。Zeplin、QuestAI、Anima等との連携の仕方と書き出しまで。他にお勧めあれば知りたいです。」といただいたのですが、運営側で使用経験がなかったので、「XDUG酒場04 XDUFes2020スペシャル！」 に参加して質問してきました！その際にご紹介いただいたプラグインを一覧にしておきます！
ちなみに、自分も何個か少しだけ試してみたのですが、XDデータの作り方がよくなかったのか、あんまりキレイに連携できず。こちらも引き続き調査していこうと思います！
Avocode
Zeplin
Mockplus
Anima for XD
Quest AI
Web Export
さいごに
初のオンライン開催イベントだったこともあり、スムーズにいかない部分も多々ありましたが、離れた場所からでもみんなで集まって意見交換ができるのは、とても良い機会になったと感じました。20名という人数でオンラインでコミュニケーションを取るのがなかなか難しかったという反省点もあるのですが、参加者さん同士でzoomのチャットを活用して質問したり、誰かが答えていたりと、盛り上がっていてとても嬉しかったです。
また、今回は事前確認の準備不足で録画していなかったこともあり、イベントレポートが超大作になってしまったので、こちらも今後は改善したいと思います！
▼運営サポート
Startup Lab Lagoon