LIFE is 日々一歩(99)[ウェブ]『Adobe XD ユーザーフェス(大阪)』に参加してきました/森 和恵

投稿:  著者:  読了時間:8分(本文:約3,500文字)


こんにちは! 森和恵です。前回と同じタイトルっぽいですが、今回は大阪で開催された『Adobe XD ユーザーフェス 2019(大阪)』にも参加したよ、というお話です。

会場いっぱいに並べ尽くされた椅子席がすべて使われた、満員御礼のイベントでした。Twitterで実況するために、張り切ってはやく会場入りして、一番前の席に陣取りました。



前回のコラムで、XDユーザーグループとはなんぞや? と解説しましたが、プロトタイプ作成ツール「Adobe XD」のユーザーが集う勉強会のグループです。

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

東京に引き続いて、二番目に大阪で開催されました。テーマが違っていたこともあり、わたしは両方参加しました。




東京は、制作者とツールの関わり方や大規模案件での事例紹介など、XDというツールを俯瞰した、広いテーマだったように思います。登壇された方の取り組みや姿勢に学ぶところが多く、自分も倣って襟を正して仕事に取り組もうと、気合いをいれてもらった感じを受けました。

対して大阪は、アニメーションの作り込みテクニックや、デザインシステムなど一歩突っ込んだ内容で、ツールの経験者は「家に帰ってすぐ試したい!」とメモを取ったし、これから使い始める人は「なんだかすごいことができそうだぞ」と魅了されたのではと思います。

これを書いている時点では、公式のフォローアップが届いていないので、資料がない状態ですが、当日のわたしのツイートを見ながら振り返ろうと思います。



はじめのセッションは、松下絵梨さんの、5月のバージョンアップのお話でした。今回は、初めての参加する人・XDをこれから使う人が多かったので、XDの特長や概要の説明からスタートしたのが、スムーズな流れでさすがだなと思いました。

印象に残ったのが、プレステのコントローラーを使った「キーで操作できるアニメーション」。押されたボタンによって、画面のネコがアニメーションしてくれます。

アートボードに仕掛けた自動アニメーションをボタンの数だけ作っておき、押されたらそのアニメーションが実行されるという作品なのですが、かなりの数のアートボードが作り込まれていて、クオリティが高かったです。



次のセッションは、海老江優太さんの「遊んで学ぶ Adobe XD 勉強法」。XDの機能を学んで身につけるために、「おみくじ」「ゲーム」など、自分が面白いと思う動きを作ってみて、遊びながら学ぼうというお話でした。

作品データを見ながら制作過程やテクニックを紹介くださったのですが、「オーバーレイ時は自動アニメーションが一時停止」など、いくつも試作を重ねた人だけが気づいたのであろう、わかりやすい説明が満載でした。

あまりにも関心したので、懇親会で「XDの機能を試したいから作品を作るのか/作りたい作品ありきで試行錯誤するのか」を海老江さんにお聞きしました。

すると、作りたい作品を思いついたら、XDでどうやったらそれが実現するかを、何度も試行錯誤して作り上げていくということでした。

XDはプロトタイプを作るためのソフトにしか過ぎないので、精細にアニメーションの表現をするとなると不自由なツールです。

Adobe After Effectsや Adobe Animateといった、アニメーション表現の専門ソフトを使った方がよほど楽に作れます。

それでもなお「XDでこれができると楽しそう」という理由で試しているという、ツールで遊ぶぞ! という楽しい気概を感じました。

ツールは、機能をどう組み合わせて使うか? という発想力で、どれぐらい深く使えるのかという熟練度が決まります。通り一遍の使い方を学んだ後、ツールとどれだけ向き合ったのか? がダイレクトに出るのです。

「楽しみながら学びたい」と思えるということだけで、違いがでてくるんだなと思いました。



最後は、境祐司さんの「Adobe XD 最新動向〜これから搭載される機能/デザインシステムって何?」。XDを中心にした、デザインシステムと制作フローのお話でした。

デザインシステムとは、ウェブサイトやアプリをチーム制作する時の指標となる「デザインの設計書」で、複数の人が制作にたずさわっても、見た目や使い勝手に一貫性が保たれるようにさまざまなルールを書き記したものです。

境さんのサイトで「デザインシステム」について解説されているページでは、Microsoft・Google・Appleのような大手のウェブサイトで一般公開されているデザインシステムへのリンクや、参考書籍などがまとめられています。

http://design-zero.tv/AdobeXD/design-systems.html

いろんなデザインシステムを見比べることで、その要素として何を決めておかなくてはならないか、現在どんな手法やデザインが支持されているかなどを学ぶことができます。

セッションでは、デザインシステムの大切さや、デザインシステムはたんに見栄えを定義したものではなく、チームで連携して働くときのコミュニケーション手法や、生成されるコードについてなども包括したものであることなどの話もありました。



とツイートしたのですが、いま勉強を進めている「UIのインタラクション」をウェブページのコードに落とし込むために、Adobe Animateを用いる方法について、家に帰ってさっそく試してみました。

Adobe Animateで作った動きを、CCライブラリ経由でDreamweaverに持ってこれたら楽だなと思ったのですが、残念ながら現在は対応していなかったようです。

Adobe AnimateからCCライブラリに、「アニメーション」としてモーショントゥイーンを登録できますが、それを読み込めるのはAdobe Museと Adobe InDesignで、Dreamweaverで見たところ「アニメーション」ライブラリは扱えませんでした。

https://helpx.adobe.com/jp/animate/using/sharing-symbols.html

ですが、Adobe Animateから「OAMファイル」を書き出して、Dreamweaver側でアニメーションコンポジションとして読み込むことができました。

https://helpx.adobe.com/jp/dreamweaver/how-to/export-oam-files-animate-website.html

簡単なムービーで試してみたら、実現できて嬉しかったです。あとは、読み込んだムービーをどうやってインタラクションに利用していくのかを、試行錯誤してみたいと思います。

海老江さんを見習って、面白そうだな、と思ったらすぐ試していくスタンスで楽しく学ぼうと思います。

ということで、今回はここまで。

公式からフォローアップメールが届いたら、メモったテクニックを試してみた結果をレポートする予定です。公開は少し先になりますが、よかったらみてみてください。(いまは、当日のツイートをまとめたページになっています)

【Adobe XD User Fes 2019 大阪レポート】
https://note.mu/r360studio/n/n352c2aa18218

ではまた、次回お目にかかりましょう!
(^^)

近況報告:ようやく、YouTubeチャンネルの登録者数が1000人越えとなりました。応援くださったみなさま、ありがとうございます。6月18日より、新シーズン「WordPress再入門(仮題)」を始める予定です。よろしくお願いします。
https://www.youtube.com/r360studio


【 森和恵 r360studio ウェブ系インストラクター 】
mail:r360studio@gmail.com
サイト:http://r360studio.com/