[勉強会レポート] 7/5 Adobe XD workshop ＆ meeting

はじめまして。ネットパイロティング株式会社にてUIデザイナーをしている湯口りさです。

正式な名前が決定する前、Project CometとしてMax 2015で発表された時からリピートグリッドに惹かれて注目をしていたAdobe XD。3月18日にプレビュー版が公開されて以来、仕事・ハッカソンで毎日のように使い、勉強会で紹介したり寄稿をしたりしてきました。
使って楽しいAdobe XDを他の人にも同じように使って欲しいと勉強会を開く場所を探していたところ、Adobeの大崎オフィスの会議室をお借りできることになり、Adobe XDの勉強会「7/5 Adobe XD Workshop & Meeting」を行いました。その様子を当日の参加者のツイートを交えながらレポートします。

今日はアドビさんでの #AdobeXD （ #adobexd_study ）の勉強会にきています。 pic.twitter.com/7KRxVcFJIA

— 池田@sdQuattro手に入れました (@clockmaker) July 5, 2016

今回は少人数でAdobe XDに触れる勉強会にしようと事前に参加者同士で話し合っていました。そのため、内容はワークショップが中心です。

ワークショップ1：基本操作とチップス(発表者：湯口りさ)
FireworksユーザーのためのAdobe Experience Design(発表者：関口和真)
ワークショップ2：プロトタイピング機能とQ&A(発表者：湯口りさ)

これから始めようという方に向けた内容です。参加者のコメントと共にお伝えしますので、お楽しみください。

ワークショップ1：基本操作とチップス

1つ目のワークショップでは、湯口が講師をつとめ、操作がとてもシンプルなAdobe XDの中から、実務で使ったときに気が付きにくい機能を中心に紹介しました。集中してツールや機能に慣れてもらうために、アートボードを1枚ずつ追っていくと一通りのデザインビューの機能を体験できるようにつくったxdファイルを、事前に各自ダウンロードしてもらっていました。

https://blog.adobe.com/media_831fbf2731b0ad6f1f5e821a5127fa4df7b9df47.gif

ワークショップ1で配布したXDファイル

紹介した機能は、ダブルクリックでオブジェクトの種類を問わず編集できる独特の操作、メニューに隠れているため見落とされやすいシェイプでマスクなど…その中で、特に関心が高かったのはやはり看板機能であるリピートグリッドでした。

Adobe XDの編集はわかりやすくて、どんなオブジェクトもダブルクリックで編集可能。複合パスやグループも。
（私みたいな初学者には嬉しいですね）#AdobeXD #adobexd_study

— 鹿野壮@7月28日ヒカラボ登壇 (@tonkotsuboy_com) July 5, 2016

#adobexd の花形「リピートグリッド」について。なんでもリピートできるよ。 #xd_study pic.twitter.com/aubnoKZpPM

— Akiko Kurono (@crema) July 5, 2016

ビールが増えた… #AdobeXD #adobexd_study

— Kazuhiro Hara. (@kara_d) July 5, 2016

FireworksユーザーのためのAdobe Experience Design

続いてAdobe Fireworksユーザグループ(継続中！)の暫定会長である関口さんの発表。

https://blog.adobe.com/media_9f393248c444ac22aff3736f0db804089ecaffd2.gif

Fireworksとの比較して「これができる」「この機能がない」「これはないけれど制作に不便はなかった」を分けて紹介する発表は、参加者にFireworksの利用者も多かったこともあり、UXデザインツールとしてスタートしたばかりのAdobe XDを理解しやすいと大変好評でした。

Fireworksユーザーにとってたいへんわかりやすい解説ｗ#AdobeXD #adobexd_study

— izuizu (@izuizu) July 5, 2016

「●●ができない」ってのを教えてくれるのすごく助かる・・・結構まだ出来ないこと多いなぁ #adobexd #xd_study

— ユミソラ( ’-’ )ノ)`-‘)ﾍﾟﾁ (@YumiSora) July 5, 2016

Adobe XDで「今、できること」を知ったことで、「これからどんな方向にツールと発展していくのか?」や「自分であればどう使っていくか」に関心が広がったようです。

グラデーションや点線ができないとのことだが、そもそもAdobe XDはどれくらいデザインができるようになるのだろうか。プロトタイプツールとして最低限のデザイン止まりなのか、UXデザインツールとして多種のデザインができるようになるのか#AdobeXD #adobexd_study

— 鹿野壮@7月28日ヒカラボ登壇 (@tonkotsuboy_com) July 5, 2016

（Aiとの連携が強化されたら、細かいところはAiで作り、そのあとXDにもってきてしまいそうな予感のわたくし……。あ、怒られそうw）#AdobeXD #adobexd_study

— Akiko Kurono (@crema) July 5, 2016

未実装な機能に不安を感じる一方で、充実したUIキットに価値を感じる声も。

Adobe XdにiOS UIキットやGoogleマテリアルのデザインが揃ってる。こういうのが揃ってないと不安だからとAdobe Xdを躊躇しているのはアレだなぁ。 pic.twitter.com/9psr9FmkqD

— 池田@sdQuattro手に入れました (@clockmaker) July 5, 2016

関口さんのプレゼンテーションはSlideshareにアップされています。

ワークショップ2：プロトタイピング機能とQ&A

https://blog.adobe.com/media_077a83ed1b30a30acdf40472ec4774e2fc618030.gif

ワークショップ2で配布したワイヤーフレームのxdファイル

後半のワークショップは再び湯口が担当。こちらも事前にワイヤーフレームを作成し、幾つかのボタンをクリックすると画面が遷移する状態にしたxdファイルを配布しました。プロトタイプビュー上でアートボード同士を結んで画面遷移するだけでなく、デザインビュー上で書いたボタンを選択して任意のアートボードに遷移できること、デザイン/プロトタイプビュー問わず、変更が即座に反映されるライブなプレビュー機能を紹介。

リアルタイムプレビュー機能はおおって思ったね。ワイヤーレベルの打ち合わせ時変更にいいんじゃないかなあ #AdobeXD #adobexd_study

— Kazuhiro Hara. (@kara_d) July 5, 2016

Q&Aではワークショップ1の内容に多くの質問が出ましたが、質問以上に参加者からこうなったら良いという要望やここが便利という感想が出てきました。

スタイルは、Adobe CCライブラリを通じて管理・共有したいなぁ(要望)。#Adobe Xd #adobexd_study

— 池田泰延 clockmaker_bot (@clockmaker_bot) July 5, 2016

高さが動的なリピートグリッドはできないけど、みんな欲しいよねーという話をしているときに、AdobeのTどろきさん（誰）が何度もうなずいていたので実現されそうな気がします。 #adobexd_study

— 沖良矢 (OKI Yoshiya) (@448jp) July 5, 2016

テキストの置換ってわりと業務であるあるだと思うので、いつか置換機能が追加されるといいなぁ・・・#AdobeXD #adobexd_study

— izuizu (@izuizu) July 5, 2016

機能面で物足りなさは正直多々あるけど、とにかく軽い、サクサク動くのは普通にモチベーションに影響してくるからバカにできなさそう。めっちゃ軽いなぁ#AdobeXD #adobexd_study

— ユミソラ( ’-’ )ノ)`-‘)ﾍﾟﾁ (@YumiSora) July 5, 2016

なお、Adobe XDに対する要望やバグ報告はUserVoiceから日本語でも投稿できるそうです。全世界から集まる要望にはこの日にでた意見に近いものも投稿されています。

最後に、現状のAdobe XDの開発状況について、少しだけ轟さんのお話を伺いました。

https://blog.adobe.com/media_5db688ae4b7e71fd77ffaea8f14bfef96a88c720.gif

終了後は懇親会へ！勉強会参加者の9割が懇親会に参加してAdobe XDやUIの話題で盛り上がりました。その中で「またやりたい」「アップデートのたびに勉強会をしたい」という感想もいただけました。

そして打ち上げちう。

#adobexd #xd_study pic.twitter.com/BsjHSpwEVf

— 北村たあ♪ (@tah_timing) July 5, 2016

もともとは「自宅でAdobe XDの勉強会したいのだけど参加したい人はいますか？」から始まった小さな企画でしたが、20人近い方の参加とAdobeの轟さんの協力によりこのような勉強会になりました。今後はまたAdobe XDのアップデートの内容を取り込んだ勉強会を開催したいと思っていますので、告知を見かけた際にはよろしくおねがいします。