カバー

Adobe XD ユーザーフェス (東京) レポート『XDのことを深く、ウェブ制作現場のことも知る』

r360studio 森和恵

トランプさんが訪日された土曜日、ウェブ系のイベントのために東京へ向かっていました。参加したのは『Adobe XD ユーザーフェス（東京）』、200人規模で開催された熱気溢れるイベントです。

🔎 Adobe XD ユーザーフェス（東京）
https://xd-study.connpass.com/event/129011/

ウェブ系のAdobeソフトで最も若い Adobe XD はユーザーグループが活発で、先に立ち上がった東京・大阪では定期的にユーザー会が行われています。

ついで、札幌・秋田・仙台・名古屋・京都・広島・福岡とユーザーグループが立ち上がったのを機に、この夏全国でフェスが開催されるそうです。

🔎 Adobe XD User Group Japan
https://xdug.jp/

ユーザーグループに参加しているひとは、XDのことが大好きで、よりよくしていきたいという気持ちに溢れているように感じます。

XDが正式にリリースされる前からβ版が公開されていたことや、毎月のようにバージョンアップが行われていて、ユーザー目線で使えるソフトに成長していく過程を見られることが、XDへの愛着に繋がっているのだと思います。

わたしとXDの関係はというと、以前毎日のように使っていた Adobe Fireworks というソフトと似ていることで興味がわき（ Fireworksの教科書　という本を書きました）、使ってみて軽さと操作の簡単さに感動し、使い方を広めたいからとYouTubeチャンネルにもXD関連の動画を上げています。

🔎 ［検証］Adobe XDアップデート
https://www.youtube.com/playlist?list=PL7LtdGFp5DwR6RVe3q0p7Y8fia-iExJnU

地元大阪のフェスにも参加する予定なのですが、今回わざわざ東京まで足を運んだ理由は2つあります。

ひとつは、やっぱり全国で一番大きな規模のフェスを見ておきたいというミーハーな気持ち。

もうひとつは、セッション3のXDを使った事例紹介が LIFULL HOME’S という大規模なデータを扱う案件で、XDでどこまでカバーできるのか？ということを見たかったからです。

東京に着くとトランプさん訪日の影響で、駅のロッカーがすべて使えなかったり、新橋から会場の汐留まで歩く途中にとてもたくさんの警察官がいたりと、いきなりの非日常感でした。

会場までは順調にたどり着いて、30分前に到着。地下のスターバックスでお茶をしたりしていました。のんびりしすぎて、開場から10分して受付に到着すると既に行列。ようやく席にたどり着いたのはスタート10分前でした。焦った。

フェスっぽく、入場リストバンドが配られました。フェスのロゴもキュートだし、XDカラーのピンクもステキで、わくわくしながらセッションが始まるのを待ちました。

セッション1「あなたはどんなデザイナーになりたいですか？」

基調講演の役割になるセッション1では、「あなたはどんなデザイナーになりたいですか？」と題して、長谷川恭久さんの制作者とツールの関わり方についての話になりました。

📺 YouTubeアーカイブ動画（長谷川さんのとこから）
https://youtu.be/rwRKrHnBWiQ?t=365

「Photoshopなら凝ったデザインが作れるが、XDだとそれなりにしかできない」

制作者にはツールへのこだわりがあるという話から始まりました。みんながXDが良いと言っても簡単には切り替えにくい。ツールの選択は、個人的でナーバスな話題になりがちです。

それを皮切りに「ではまず、よいデザインとは何か？」という話題に入りました。

見栄えのする凝ったデザインがよいとされる案件もあれば、シンプルで使いやすいデザインがよいとされる案件もある。よいデザインとは、問題を解決して目標を達成するための一要因だから、よいデザインもまたいろんな選択肢があるというお話でした。

長谷川さんは締めくくりに「自分の好きなこと／期待されていることに合うツールを選ぶ」ことが必要だと言いました。

作業する自分自身が使いやすいこと（使っていてストレスがない、好き）はもちろん大切だけど、依頼主から期待されていることがスムーズに遂行できるツールかどうかを判断することも大切だということでした。

いろいろなツールの特性を見極めて、仕事を円滑に進められるツールをチョイスすることの重要さを提示してくれたセッションでした。

セッション2「PhotoshopとIllustratorが手放せない人のためのXD」

続くセッション2は、「PhotoshopとIllustratorが手放せない人のためのXD」と題して、角田綾佳さんのお話でした。

角田さん自身が、XDを使ってみたときに起こったこと・感じたこと・使いこなすコツを体験を交えて教えてくれました。

📺 YouTubeアーカイブ動画（角田さんのとこから）
https://youtu.be/rwRKrHnBWiQ?t=1979

とくに印象的だったのが、CCライブラリを用いた相互のデータのやりとりで、PhotoshopやIllustratorからXDへデータを持ってくる時に知っておくべき、注意しておくべき内容でした。

XDに完全に乗り換えるというのではなく、PhotoshopやIllustratorを併用し、適材適所でソフトを使い分けていく様子がよく見れたのではと思います。

セッション1から2の話の流れがよく、納得しながらお話を聞くことができました。XDは画面設計が得意なソフトで、そこに配置する写真やアイコンなどのグラフィックはPhotoshopやIllustratorで仕上げるという、ツールの使い分け・位置づけがよく伝わりました。

個人的に「リピートグリッドは中毒になります」というスライドで、わかりみしかなくて超頷いてしまいした。

連続しているオブジェクトがあったら、なんとかリピートグリッドにならないかな？と考えるところがXD好きにはありますよね。（適材適所で使わないと、かえってややこしくなることもあるので注意したい……）

セッション3「XDでデザインをデザインしよう。」

そして、セッション3・小林武蔵さんの「XDでデザインをデザインしよう。」では、LIFULL HOME’S でXDをどのように使って制作しているのかという事例紹介でした。

📺 YouTubeアーカイブ動画（小林さんのとこから）
https://youtu.be/rwRKrHnBWiQ?t=4834

不動産会社の物件検索アプリケーション設計において、膨大な数の画面をXDで作成してプロトタイプを検証し、本番環境に反映する流れが公開されました。（ずっと、サイト設計の話をしてると勘違いしてて、動画をみてアプリの話だと後から気づきました…(_ _)）

PhotoshopやIllustratorだけを使ってデザインデータを制作・管理する場合と比べて、XDだと「データが重くなっても操作が軽い（膨大な量のアートボードが並んでいても操作がサクサクに動く）」、「最新版がどこにあるか？など、データ管理がしやすい（他者とのデータ共有機能がある）」という利点について語られました。

実例を惜しみなく紹介してくださって、規模が大きくても、XD使って効率化が図れるんだなということを実感できました。

小林さんのログミーにある「デザイナーの放課後」での対談記事も興味深いです。 https://logmi.jp/persons/2929

セッション4「5つの作例で学ぶ2019年5月更新」

セッション4は湯口りささん「5つの作例で学ぶ2019年5月更新」のお話で、先日の大型アップデートの詳細が語られました。

📺 YouTubeアーカイブ動画（湯口さんのとこから）
https://youtu.be/rwRKrHnBWiQ?t=6974

先月の5月アップデートでは、ガイド・多角形ツール・コンポーネント……と待っていた機能が加わり、ユーザーにとって熱の入るアップデートでした。

湯口さんは、毎月行われている東京のユーザーグループの勉強会で、ずっとアップデートの話を登壇し続けていらっしゃって、XDについて多くの知見をお持ちの方です。

今回も、出たばかりの機能なのに機能を深く理解されていて、素直にすごいな！と思えたセッションでした。わたしもYouTubeで動画を公開していますが、もっと精進して使い込んでいきたいと思います。

とくに勉強になったのが「グリッド／レイアウト／ガイド」機能の使い分けの考え方、「コンポーネントが入れ子」になったときの動きのクセ、「レスポンシブリサイズ」の動きの特徴についてでした。

アーカイブ動画で、もう一度みて復習します。マニアックにXDを使っている人は、必見です。

セッション5「XDはBeautiful SVGの夢を見るか」

セッション5は松田直樹さん「XDはBeautiful SVGの夢を見るか」のお話で、XDから生成されるSVGコードのお話でした。

📺 YouTubeアーカイブ動画（松田さんのとこから）
https://youtu.be/rwRKrHnBWiQ?t=10517

ウェブサイトのUIやUXが問われる中、ユーザーに不安を感じさせないためにボタンをクリックしたことを表すアニメーションを付けたりなど『マイクロインタラクション』を組み込むことが増えました。

パスデータを用いた形式のSVG画像に動きをつければ、ビットマップ画像と違って画質が劣化せずに動きがなめらかになる……ということもあり、SVG画像を使う頻度がますます増えています。

そんな時に、XDで作ったデータをウェブ用に書き出すときに「パスデータをコピペでSVGに変換」したらどうなっているのか？というお話はタイムリーでした。コピペが一番手軽ですものね。

XDからエディターへ直接コピペしてSVGコードを書き出すと、ある特徴的なコードが付加され、そのまま使うには不便。どう処理すれば実用で使えように工夫できるのか？という内容でした。

日頃、コードに近い部分で制作をされているからこその目線は、新しい気づきでした。XDだけにこだわらずに、いろんなツールを試して手早く運用しているようすにプロフェッショナルを感じました。

XD側を作っている側からすれば、コピーしたコードには内部処理的に必要なコードを付加していて、まさかそのままコピペして使われるとは想定されていないでしょう。

けれども、ユーザーからの意見として「こんな使い方したら不便」という意見が具体的に上がってくれば、改良される可能性もあります。

このセッションで、松田さんは苦言を呈していますが、XDに対しての愛情も感じられる口調で、ユーザー会らしい内容だったなと思います。

XDを深く使っている方々に、登壇を通じてどんどん意見出しをしていただけたら、もっとステキなソフトになるよねと感じました。

セッション4と5は、すでにXDを使い込んでいる方に対しての新しい話で、XDマニアの人たちに「なるほど、すごい。」と思わせてくれた内容でした。

全体を通して、XDをこれから使う人、すでに使っている人、両方を満足させてくれるセッション運びになっていて、双方を飽きさせることなくというのが、とても満足な見応えに繋がっていたのだと思います。

セッション6「Adobe XDが目指すこと」

最後のセッションは、メーカーセッション。Adobe 轟啓介さんの「Adobe XDが目指すこと」でした。

XDがどのように生まれて成長してきたか、いま現在どんな現場で、どんな雰囲気の中で開発されているか、これからどんなふうに成長していく予定なのか？を聞くことができました。

📺 YouTubeアーカイブ動画（轟さんのとこから）
https://youtu.be/rwRKrHnBWiQ?t=11649

轟さんのセッションは、次にこんな機能を開発しているというお話が聞けるのが醍醐味で、

「コンポーネントのステートとアニメーション（hover処理やGIFアニメ的な表現ができそう）」

「共同編集者のアクセス確認（共有しているGoogleドキュメントの右上に出てくる他の編集者のアイコンみたいなの）」

「リアルタイム同時編集（こちらもGoogleドキュメントみたいに共有している人が同時に編集できるっぽい）」

「バージョン管理（XDファイルのバージョンを元に戻したりできる？）」

という機能を現在開発中というお話を聞くことができました。コンポーネントのアニメーション機能が待ち遠しい！

スポンサーセッションは、他だと宣伝色が強かったり、おざなりになりがちなのですが、轟さんのXDへの情熱というか、愛情を持って製品を紹介している様子が伝わってきました。

聞いていてワクワクし、「そっか！だったら、わたしたちもXDを応援していくよ！」という気分になりました。

さてさて。自分が思ったことをつらつらと書き綴りました。主観混じりなところは、ご容赦頂けると幸いです。こんな意見もあるよ、ということで。

当日の様子をもっと知りたいかたは、ツイートまとめがTogetterにアップされているので、読むといろんな方の意見がわかって興味深いと思います。

🔎 Adobe XD ユーザーフェス（東京）#XDUFes2019 - Togetter
https://togetter.com/li/1359695

このまとめをみると、イベントのハッシュタグ「#XDUFes2019」に対して600ものツイートがあったことがわかります。YouTubeライブで全国に配信したということを考慮しても、ツイートの数がすごいですね。

XDユーザーが登壇者の話の内容に親しみを感じ、自分事だと思っていて、ついつい突っ込んで意見を出している様子がとても楽しそうです。

ユーザーと共に歩むXDの、さらなる活躍に期待したい！ ですね。

👩🏻‍🏫 終わりに自己紹介

記事をお届けしたのは、r360studio 森和恵でした。公開されている動画の休憩中のシーン https://youtu.be/rwRKrHnBWiQ?t=3701 で前から歩いてくるのが私ですww（現地で一枚も写真撮らなかったのですが、こんなトコで写真をゲットできるとは！）

会場懇親会で、書籍のプレゼントをした人です。よかったら、お友だちになってくださいね。Twitterフォローお待ちしています。


この記事が参加している募集

#イベントレポ

28,116件

この記事が気に入ったらサポートをしてみませんか？