Adobe XD ユーザーフェス2020ふりかえり

こんにちは。
株式会社iCAREのデザイナー産業保健の高橋名人です。

今回は9/26（土）にオンラインで開催されたAdobe XD User Festival 2020のふりかえりをしたいと思います。

iCAREデザインチームではAdobeXDを使用しています

まず、大前提として、弊社のデザインチームでではAdobe XDをメインで使っています。

2020年9月現在のiCARE開発部のデザインチームは私を含め2名おります。

XDを使い始めた理由を、
私の目線からメリットを分析してみると、

①スイッチングコストが低かったから
事業会社のインハウスデザイナーというのは実際のところUIの開発だけではなく、サイトデザインや印刷物のデザインも担当する機会がたくさんあります。
そうしたことからIllustratorやPhotoshopをはじめ、Adobeの他の製品も愛用しているため、使い始めることに障壁がありませんでした。

②XDは現在もアップデート中であり、Adobeの盤石な開発体制やコミュニティなどに安心感があるから
やはり、長年デザインツールを開発してきたAdobeの開発力には信頼を感じます。
また、今回のようなユーザーフェスティバルも含めて、イベントやツールの使い方のチュートリアルがTwitterやYoutubeで気軽に見られることも心強いです。

③リンク共有などで開発チームや別部署の意見も取り入れられるから
XDではデザインやプロトタイプをブラウザで確認するためのリンクを発行することができます。
私がデザインに携わっている健康労務の自動化クラウドCarelyの開発ではエンジニアはもちろんのこと、産業保健スタッフ目線や人事目線で他部署の人からコメントをもらうこともあり、簡単にアクセスできてコメントが残せることはチームでデザインする上で大きなメリットだと感じています。

④日本語化、Mac/Win対応がされているため、今後のチームの拡大時にも受け入れのハードルが低いから
また、今後開発メンバーが増えた時にOSに依存したり、英語表示のユーザーインターフェイスではハードルが上がります。
やはりチームで開発する以上、「みんなが使いやすい」ということはツール選択時の大切な基準となるので、iCAREデザインチームではAdobe XDを使用しています。

Adobe XD User Festival 2020

今回は全編オンラインでの開催となりましたが、実際に家でXDを使いながらセミナーを聞けたり、リアルタイムで質問がSlidoに上がるのが見られたりしたので、非常に良かったと思いました。

全体を通しても大変勉強になりました！ご登壇者、運営者のみなさまお疲れ様でした！！

セミナーまとめ

印象に残ったセミナーを簡単にまとめます

🎤 海老江 優太さん
「今日から使えるAdobe XDのTips集」
発表スライド

XDの使えるプラグインや見落としがちな機能を紹介してくださいました。

以下が特に便利だなと思ったものです。
共有linkの埋め込み
XDのプロトタイプをiframeで埋め込むためのコードを描き出せる機能です。
Adobe blog

例えば、Webページの一部に埋め込んで実際のインタラクションを実装する前にテストすることができるのは大変便利だと思いました。

unDraw

ビビッドなアクセントカラーを用いた可愛いイラストを挿入できるプラグインです。

🎤 平内 祐斗さん
「コロナでも問題なし。Adobe XDプラグイン活用でリモートワーク化でも戦える環境をつくる」
Google Sheets for Adobe XD

以前、会社のBLOGでも紹介したXDとGoogleSheetsとプラグインを用いてリモート時のテキスト素材や画像素材のやりとりを円滑にするやり方を紹介してくださいました。

こちらのプラグインは私もいろいろと試しているのですが、Carelyのように数値やテキストが多いアプリケーションのデザインをする上では状態変化を正しく認識するためにも、なるべくリアルなデータを反映してデザインを検討したいところです。
そこで、実際のCarelyのデモデータをスプレッドシートやCSVに起こして、それをXDに流し込むこともあるため、大変重宝しているプラグインです。

できれば文字のオブジェクトの内容をそのまま変数名にするのではなくて個別に変数を規定することができたり、
レイヤー名やアートボード名にも割り当てられると嬉しいなぁと思っています。

🎤 黒野 明子さん
「The UI Stack with XD　〜Adobe XDで画面の状態変化を作り込む〜」
XDでの特筆すべき便利機能リピートグリッドと 2020年6月のアップデートで実装されたスタックを使って状態変化を作るやり方を紹介してくださいました。
（スタック機能については下記の動画をご覧ください。）

リピートグリッドについては個別の編集が全体に反映してしまうという難点があり、
実際の画面を想定して実データを入れたデザインをする際は注意が必要でしたが、コンポーネントの作り方を工夫し、スタックを併せて活用することで、まちまちな文量のリスト表示やその順番の入れ替え、入力フォームのエラー時のUIデザインの作成が簡単に行えます。

Carelyのデザインでもエラーや空のtableなどが入ってくる状態もあるため、状態変化を簡単に作ったり状態を入れ替えたりできる機能がうまく活用していきたいところです💪

こちらは動画でみていただけると分かりやすいと思うのですが、現在は配信停止されていうるのようですので、
アーカイブが公開されたら、こちらに記載します。

当日上がっていたSlidoの質問に対する回答はXD相談室で回答されています（動画）

以上、簡単なふりかえりレポートでした！👍

当日の様子はこちらのToggeterでもまとまってますので、是非みてみてください

ではまた！！😇