見出し画像

Adobe XD ユーザーフェス 2021セッションによせられた質問・疑問にお答えします！

xdufes

Adobe XD ユーザーフェス 2021スタッフのまつおです。
2021年9月25日（土）にオンラインで開催されたAdobe XD User Festival 2021へたくさんの方にご参加いただき、無事終了することができました！
ありがとうございます。

今年のテーマは「多彩」ということで、特定の分野に収まらない自由で多彩なAdobe XDのセッションが行われました。

■多彩な登壇者のご紹介はこちら
■当日の様子はアーカイブ（Youtube）でご覧いただけます
■togetterに当日のコメントをまとめました！

登壇者の方へ質問・疑問をいただきありがとうございました。
それぞれの回答を質問・疑問とともにご紹介します。

session2／「XDを使っても起きてしまうコミュニケーションロスを軽減する4つのステップ」青山益美さんによせられた質問・疑問

Q：XDでデザインシステムか。zeroheightとかを使うのはどうなんだろう

A：私自身はzeroheightでデザインシステムを作成したことがないのですが、XDにzeroheightのプラグインがあるので、zeroheight利用者にはありがたいすね。
ZeplinもXDのデザインスペックに比べて機能が豊富だったりしますが、自分やチームが使いやすいツールを使うのが一番良いので、余裕があれば色々なツールを試してみて、作業効率の良いやり方やコミュニケーションが取りやすいやり方を模索することをオススメします。
私もまだまだ模索中です！

■zeroheightのXDプラグイン
https://help.zeroheight.com/3xlwst8/p/61810b-adobe-xd


session3／「Adobe XDを使った『DMM オンライン展示会』のデザイン制作」二口紗由理さんによせられた質問・疑問

Q：アートボードの配置が綺麗だなあ。関連するアートボードを繋げるのに役立つプラグイン、あるかな・・・

A：本案件ではプラグインは特に使用せず手動で頑張ってました…！ある程度自動化できたら最高ですね！

Q：XDはファイル作成者のみ更新可能！？共同編集に招待しててもダメなのかな・・・

A：共同編集に招待していても（共有リンクの）更新はファイルオーナーのみの権限になります。
ぜひ今後のアップデートに期待したいところです…！

■#XDTrail↓の解説も是非あわせてご確認ください
https://xdtrail.com/collaborate-coedit-designs/

特別企画／「XD基本の『き』」松下絵梨さん・森和恵さんによせられた質問・疑問

Q：アニメーションあれAEにもっていけるんだ

A：XDのインタラクションは、After Effectsへ移せませんが、XDのアートボード（レイヤー含）をAEへ書き出せます。
#XDTrail↓の解説が詳細です
https://xdtrail.com/after-effects/
XDでラフな絵コンテを作り、素材をAEへ持って行こうと思っての発言でした。
言葉足らずで誤解をさせてごめんなさい。

session5／「UIデザイナーでもできる！Adobe XDを使ったXRデザイン」まちるださんによせられた質問・疑問

Q：興味深いです。XDの3D変形が実装される前はAEかイラレでやっていたのかも…?

A：3D Transformがなかったら確かに別のツールを使う必要ありますよね！
もちろんレイアウトを伝えるために3D Transformも使いますが、やはりUIの細かいインタラクションまで伝え切れないのでCinema4Dという3Dツールを併用しています！
ですが、まず静止画レベルでボタンのステータスを伝えるときに3D Transformが活躍します！

Q：UIは視点に応じて動く（視界での相対位置不変）ものと、背景に固定されているものがある気がしています。これらがレイの出元から同一直線上に並ぶと選択が難しくなると思いますが、どのように回避するのでしょう。初心者質問ですがよろしくお願いします。 

A：こちらは確かにおっしゃる通りでUIのレイアウトと情報の表示する重なり方はまずXRデザインで考慮しなければならない点になります。
具体的に、私が普段XRのUIデザインをするときに気をつけていることとしては基本的に「視界に多くの情報を詰め込まず、その時取りうるアクションに視線をフォーカスできる状態にすること」がポイントだと考えています。
また、XRのデザインでは主観で見えているデザイン以外に俯瞰図というものを作成し、視野角なども考慮した上で一直線上にならないようなレイアウトを考えていきます。
背景に固定のUIと視界に追従するUIも上記のように、まずは直線上にならないレイアウトを俯瞰図と共に作成。
そして、おそらく視界に追従するUIというのはモーダルのような一時的な表示のものが多いので、その際には背景のUIは薄くしてアクションが取れないようにするなど、操作をフォーカスするというのがいいかと思います。
例外として、メニューなどは追従するかつ常に表示されるべきUIなので、少し下を向くとARグラスの傾きを検知して視界に入るなどの工夫で仰る問題は回避できるかと思います！

session6／「エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック」沖良矢さんによせられた質問・疑問

Q：エンジニアと共有する時に色の設定とか細かい設定をエンジニアやコーダーはXDを見て理解してもらえるのか？エンジニアやコーダーもxdも理解する必要があるってことですか？

A：​​これまでもエンジニアはカンプをもとにコーディングをしてきたのでPhotoshop、Illustratorなどをある程度操作する必要があり、最低限の理解はしているはずです。それはXDを使う場合でも変わりません。逆にデザイナーとしては一方的にカンプを渡して終わりではなく、XD上のデータをどういう意図で作っているか、どこに注意してほしいか、などの情報共有をしたり、エンジニアからどういう作りになっていると作業しやすいかフィードバックをもらったりすることが重要と感じます。

Q：デザイナーのディスプレイはたいてい大きいので、ノートパソコンでも破綻することが・・・

A：​​レスポンシブデザインは局所的に突き詰めたチューニングよりも、全体的な最適化が基本となる考え方ですので、普段自分が使っていない環境でチェックするクセをつけたいものですね。
同時に、自分たちのメインターゲットはどういう環境で使うことを想定しているのか、などブレイクポイント設計にまつわる情報共有をチーム全体で行うことが大切だと思います。
ちなみに私も32インチのディスプレイを使っていますが、普段はウィンドウ小さめにしてチェックしています。

XD Challengeによせられた質問・疑問

フェスで楽しむコンテスト企画！XD Challenge 2021。多彩な作品に「どうやったらそんな発想にたどりつくの？」といった驚きの声が上がりました。
作品によせられた質問・疑問に作者の方にもお答えいただきましたので、ご紹介します。
→ XD Challengeの応募作品まとめはこちら！

LittileLoveStory／Osamuさん

Q：条件判定がどうなってるのか、きになるなる

A：「結果がランダムに変わる仕組み」は、過去のnoteに解説があるので、こちらを参考にしてみてください！

セミファイナル／Osamuさん

Q：セミファイナルが大好きなんですけど、このようなアイデアってどうやって生まれるんですか？

A：フェス中のトークでも触れましたが、
「XDの活用を、Webやアプリのような実務に縛らない！」のがポイントだと思います。
日常生活・風景の中から「動きで説明した方が、伝わりそうだな」「操作できた方が、理解度が増しそうだな」といった、観察を楽しんでみると、アイディアの実はたくさん落ちていると思います！（実務に役立つことは少ないですけどね）

Slidoによせられた質問・疑問を登壇者の方々に答えていただきました！

Q：デザインシステムを制作しているデータを外部パートナーのエンジニアさんに共有しても、きちんと見てくれていないようで、文字間やらアニメーションやらが異なる時が多いです。エンジニアの方はあまりXDに慣れていないものなのでしょうか...

【古堂あゆ美さん】
A：エンジニアさんのスキルにもよるところはあるのかもしれませんが、私はコーダーさんにファイルを共有する際、細かいところを打ち合わせで説明することが多いです。結果的に、その方がコストが抑えられる気がします。

【青山益美さん】
A：figmaに慣れているエンジニアさんなどは、XDを使ったことがなくても感覚的に使いこなせるので出し戻しはそれほどなくスムーズに進みますが、エンジニアさんの経験値によりますかね。
エンジニアさんがXDに慣れていなくても、細かく説明を入れたりチャット等でコミュニケーションを取るようにすると改善されると思います。

ちなみに弊社が外部エンジニアさんをアサインする際は、予めどの形式でデザインデータを渡したらやりやすいかを、デザインする前に毎回確認をしています。
XDやfigmaを使ったことがない場合、コーディングをする以前にツールの学習をしなければいけず無駄な工数がかかってしまうため、事前に確認をし、お互いストレスを感じない体制を作るようにしています。

【沖良矢さん】​
A：もちろんエンジニアの習熟度・スキルにも依存しますが、「見てくれていない」ということは「見方が分からない」「見てもやるべきことが分からない」「重要だと思っていない」のではないでしょうか。データを共有するだけでなく、それをもとにして直接コミュニケーションする必要性を感じます。

Q：XDで作った画面に対して「ここがタッチできるエリアで、タッチするとこうなります」といったタッチ操作の仕様を実装者にどのように示していますか？

【古堂あゆ美さん】
A：マウスオーバーや挙動した際のの指示書のようなものをXD内に作り、デザインと一緒に共有しています。

【青山益美さん】
A：デザインスペックのコメントで説明しています。

【二口紗由理さん】
A：デザインのアートボードとは別に指示書用のアートボード を用意して、そこに補足画像やテキストを置いたりしています。それを踏まえた上で口頭やチャットツールですり合わせを行ったりしています。

【沖良矢さん​】
A：プロトタイプモードでインタラクションを設定し、一緒に動作を見ながら仕様を確認します。複雑なUIはXDを使わず図と言葉で伝えることもあります。

Q：共同作業が必要になるとfigmaのほうが適してると言われたり、figmaの方がデータ共有という面で優れている感じがすると言われています。
figmaとXDって似てるようでどっちがいいのか良さがわからないのですが、figmaより勝るXDの良さはなんですか？

【古堂あゆ美さん】
A：figmaは英語のUIなので、とっつきやすいのはXDなのかなと思います。
figmaより勝るXDの良さは、
・まだphotoshopなどが主流のチームや組織に浸透させる場合、Adobe製品のXDの方が受け入れてもらいやすい
・クライアントにデザインデータを納品しなければいけない場合、Adobe製品であるXDなら対応できるけど、figmaはNGの場合が多い
・CCライブラリで素材が共有できる
・日本語UI
こんなところかなと思います。

【青山益美さん】
A：figmaもXDもどちらも使いやすいツールですが、figmaより勝るXDの良さはざっと下記があげられるかと思います。
・Adobe CCを契約していれば別途課金しなくてもよい
・CCライブラリでPhotoshopやIllustratorと連携できる
・機能追加スピードが速い
・日本語UI
・日本語でのTipsが豊富
　（XDユーザーが多いのかTipsを公開している方が多い印象）

弊社はXDもfigmaも契約していてどちらも使っていますが、クライアントの指定ツールに合わせて使い分けをしています。

【二口紗由理さん】
A：個人の感覚なのですが、XDの方がグラフィックの作り込みがやりやすいと感じています。
XD単体ではないですが「Adobe製品」というくくりで見るとIllustratorやPhotoshop、CCライブラリなどの連携ができるからこその部分もあります。

【沖良矢さん​】
A：動作の軽快さ、日本語UI、Adobeエコシステムの強さ、あたりですね。細かい機能の差異は両者とも日進月歩なので、チームにどちらが馴染みやすいか、で決めてもよいと思います。


【イベント概要】
Adobe XD ユーザーフェス 2021
テーマ：多彩
開催日：2020/09/25（土）
開催場所：オンライン
ハッシュタグ：#XDUFes2021

Adobe XD ユーザーグループ
・公式Facebookグループ
・公式ウェブサイト

xdufes公式SNS
・Twitter@xdufes
・note/xdufes





いいなと思ったら応援しよう！