XD系セッション３本連続で聞いてきたよ！ 【#AdobeMAXJapan 2019レポート】
2019.12.12
ひらさわ Adobe MAX Japan 2019のXDのセッションを３つ聞いてきました！まとめて簡単にレポートします！
Adobe MAX行ってきました
アシスタントデザイナーのひらさわです。先日Adobe MAXに行ってきました！2年ぶり3回目の参加でしたが、セッションもブースもMAX充実していて、とても満足度の高いイベントでした。去年行かなかったことを後悔するくらい。うちらのAdobeがまじMAXだった。
最近XDばっかり使っているのでBRAKEOUT SESSIONでXD系のセッションを3連続で聞いてきました。
概要と個人的に印象に残ったところを簡単にレポートします！
【１本目】ユーザーの心を掴む！気持ちいいインタラクションがつくりだすインターフェースデザイン
THE GUILDのインタラクションデザイナー, プログラマーである奥田透也さん@alumican_netによるセッションです。発表スライドはご本人のツイッターにアップされています。
インタラクションとはなんなのかを丁寧に紐解きながら、ユーザーが思わず触りたくなるインタラクションを作るために、どんなことを心がけているかを語ってくださいました。
このセッションに期待していたこと
普段の仕事でインタラクションはエンジニアに任せがちで、文献なども読んだことがなく…これから頑張るためにモチベーションをあげたい＆気持ちいいインタラクションを作るヒントをゲットしたいと思って選びました。
印象に残ったところ
セッション冒頭のインタラクションとは何か紐解いていく解説が印象に残りました。
システムとユーザーの間にあるのがインターフェースで、インタラクションはシステムとユーザーを繋ぐ、いわば両者の対話。
この間のアクションは 「気づき、行為、反応」 の３つに分解され、その一連の流れをデザインすることがインタラクションデザインである。
電気のスイッチのon/offの動作をこの３つに分解するとこんな感じ。たくさんありますね…！無意識の動作をここまで分解できるのかと唸りました！
この後セッションの内容は気づき、行為、反応の詳細説明や事例紹介へと続きました。最初から最後まで学びが多いセッションでどこをピックアップしようか迷ったのですが、冒頭から引き込まれたここを選びました！
これまで私はインタラクションを１つの現象として捉えていたので「気づき、行為、反応」の分解はとても新鮮でした。正直なところ「インタラクション＝なんかいい感じの気持ちい動きにするとかっこいいヤツ」くらいにしか思てなかった…反省です…気持ちいいインタラクションを生み出す道に近道はなさそうなので、まずは丁寧に扱っていくことを心がけようと思います！
【２本目】Adobe XDがプロジェクトメンバーを繋ぐ！導入事例から学ぶ、チームビルディングとデザインシステム活用の試み
株式会社コンセントのディレクター, プロジェクトマネージャーである江辺 和彰さんによるセッションです！
コンセントの会社説明から、最近のプロジェクトの傾向、八海山のブランドサイト制作を事例に、XDをどう活用したかを語ってくださいました。
このセッションに期待していたこと
現在進行形でXDを使用するプロジェクトにアサインされており、XDでデザインシステムを導入した事例があれば詳しく知りたいと思いこのセッションを選びました！
印象に残ったところ
コンセントにはクライアントワークのためのweb構築パッケージのコネクトというものがあります。どんなサイトにも使用できる標準コンポーネントを揃えて持っているそうで、コネクトをXDでも使えるようにすることで、シームレスな開発を実現できたそうです。
設計〜デザインのフローはこんな感じ
- マスターコンポーネントのリストから適したコンポーネントをペタペタ貼りながらWFを作成。同時にタイポグラフィやトンマナなどのデザイン検討を進める。
- デザイン方向性が決まったらマスターコンポーネントのリストに反映していく
- WFにデザインが反映されていく。余白やボタンの調整をデザイナーが行う
このフロー自体は想像通りでした！コンポーネント指向のサイト制作とXDはやはり相性がいいんですね〜
ただ、このフローを理想的な形で実行できるXDファイルを作るのは至難の技なのでは？ と思います。実際自分でやってみてこれ結構難しいな…と感じているからです。これは相当な手練れの技だと思うんですよ。
作業者が増えたり、要件が変わったり、コンポーネントが増えたり、素早く検討するために誰かに見せながら編集したり…ちゃんと考えないと色んなタイミングでぐちゃぐちゃになってきます…
さらっと語られていますが、コンセントさんのコネクトを作られた知見や、ディレクター、デザイナー陣のXDの使いこなし術があってこそだと思うので、簡単そう！便利！とか安易な気持ちで適当にやらないようにしようと改めて思いました。
XDが共創プロジェクトと相性が良いという話も印象的でした！私も現在進行形でそれを感じています！
江辺さんもおっしゃってましたが、XDを使うとクライアントに試行錯誤をオープンにできますし、ミーティングで出たフィードバックを画面ですぐ検証、具体的なイメージをその場で共有することもできます。
これまでデザイナーだけのものになりがちでブラックボックス化してたデザイン作業が、プロジェクトメンバーみんなのものになったような感覚があります。
またXDは導入のハードルが低いので、広告代理店を挟んだクライアントワークでも共創型チームが実行できる日も近いのではと胸が高鳴りました！
【3本目】手間をかけずにコーディングを効率化するデザインシステムの活用法｜Adobe XDのコンポーネント機能とBootstrapの連携
株式会社まぼろしのエンジニアである久保 知己さん@kojika17のセッションです！
Adobe MAX Japan 2019のサイトを事例に、XDのコンポーネント機能とbootstrapを使った効率的なコーディングについて語ってくださいました。登壇資料はアップされていませんが、今後Adobe Blogで連載予定だそうなので要チェックです。
このセッションに期待していたこと
事前情報にあった「小規模なサイト制作でも役に立つ簡易版のデザインシステム」について興味があったので選びました！
印象に残ったところ
デザインシステムliteの考え方が明日からでも導入できそうだなと思いました。
構築に工数が必要なため、小規模なサイトや更新を必要としないLPの制作には向いていないとされているデザインシステムですが、CSSフレームワークと久保さん命名の「デザインシステムlite」を使って、手間なく導入できるそうです。
CSSフレームワークを使うメリットはこちら
0から作成しなくて良いのは楽でいいですね！
あとUIデザインファイルが配布されているのデザイナー的には超ありがたい。
デザインシステムliteは、
- カラーパレット
- タイポグラフィ
- ボタン
- ヘッダー・フッター
などといった必要最低限のデザイン要素だけを含んでいて、コンポーネントの共通化は３回以上使うパーツにのみ行うそうです。
Adobe MAX Japan 2019のサイトでのデザインシステムliteの内容はこちら
実践するにしても基準に迷うので、この事例紹介はめちゃくちゃありがたいと思いました。また、デザインシステム入門編としてもデザインシステムliteは良いのではと思います。CSSフレームワークを使っていくフローもエンジニアと相談しながら実践してみたいです！
全体の感想
どのセッションもすごく面白かったです！新しい気づきがたくさんありました。XDの事例紹介は全体的にwebサイトでの事例がメインだったので、今後モバイルアプリやwebサービスを作られている方の事例も聞いてみたくなりました。
あと事後配信絶対あると踏んで、あえて聞かなかった轟さんのセッションの配信が待ち遠しいです！アドビさんアーカイブ動画まだですか！
今後のXDに期待すること
今年１１月のアップデートでまたパワーアップしたXD。クラウドドキュメントはまだ時々不安定ですが、共同編集機能もつきましたし、今後もさらに発展してプロジェクトのあり方に変革をもたらしてくれることと思います。
そろそろ、かゆいところに手が届く細かいアップデートもして欲しいなあ…個人的にはアートボード、レイヤー、アセットの名前変更にショートカットキーがつくのと、カラーピッカー下のスウォッチが編集できるようになるのを心待ちにしています💭
