XDのショートセッションぜんぶ観る【#AdobeMAXJapan 2019レポート】

2019.12.09

フジワラ
IA兼エンジニアのフジワラです。Adobe MAX Japan 2019で、「11人のXDマニア」による「Adobe XD Short Sessions」をぜんぶ観てきました。

はじめに

2019年12月3日(火)にパシフィコ横浜で開催されたAdobe MAX Japan 2019に行ってきました。毎年、どのセッションを観るか(あきらめるか)で悩むのですが、今年は「Adobe XD Short Sessions」によって、さらに難しい決断を求められました。さんざん迷った末に、通常セッションは同僚にまかせて、怒涛の11ショートセッション・一挙観に挑戦しました。

当日、入場してすぐにショートセッションのブースをチェック。予想よりもせまく、座席が20しかないことが判明。入場制限を避けて確実に観るために、ランチセッションの予定を変更して早めにブースに向かう作戦にしました。

「Adobe XD Short Sessions」のスケジュールはかなりタイト。3セッションごとに15分の休憩があるものの、それ以外は5分間隔です。濃い内容を短い時間に詰め込んでの一発勝負の連続。予定通りに進めるのは至難の業だと思います。そして、ぜんぶ観る人(おそらく全参加者でひとりだけ)にとっても苦難の道のりになる予感がしていました。

Session1 プロトタイピングを制するためのXDテクニック!』(12:40 - 13:00)

最初のセッションは、フラッグ 佐藤修さん(@OsatoCom)による『プロトタイピングを制するためのXDテクニック!』。開始時間の15分前くらいにはブースを取り囲む人の輪ができ始め、開始時点では100人超えているんじゃないかというくらい(佐藤さんは予想の3倍と言っていた)の大盛況。観るのをあきらめた人も多かったのかもしれません。

「操作も表現ももっと自由なプロトタイプを作れるようになろう」というテーマで、「ブランクオブジェクト」を使ってアニメーション機能の制約を超える「見えざる世界へ」と、通常は固定されるプロトタイプの遷移先をランダムにしてしまう「変えられる未来」の2つを紹介。

これはXDを使いこなしている人ほどビックリする、まるでマジックショーのような内容でした。実際、同僚のデザイナーはアニメーションを見て「何が起こってるか何も分からない」と衝撃を受けていました。

Session2 『XDプラグインでワークフローを大幅改善 - フロントエンジニアのトレンド技術を活用』(13:05 - 13:25)

2番目のセッションは、「ICS MEDIA」でおなじみ、ICS 池田泰延さん(@clockmaker)による『XDプラグインでワークフローを大幅改善 - フロントエンジニアのトレンド技術を活用』。

未知のプラグインの開発事例を期待していましたが、人工知能で画像のレイヤー名を英語に自動変換する「レイヤー名を英語にする君」は想像をはるかに超える驚きでした。この実演が全ショートセッションの中で一番会場が沸いた瞬間だったと思います。プラグインは正式公開に向けて準備中とのことなので、非常に楽しみです。

さらに「One more thing」として、デザインファイルとHTMLファイルを比較して違いを自動的に検出してくれるデバッグツールも紹介(これも衝撃)。会場は大いに盛り上がりました。エンジニアは強烈な刺激を受ける内容だったと思います。

Session3 『キーボードとゲームパッドトリガーで進化するプロトタイピング』(13:30 - 13:50)

3番目のセッションは、ソニー・インタラクティブエンタテインメント 池原健治さん(@kenji_clown5)さんによる『キーボードとゲームパッドトリガーで進化するプロトタイピング』。2017年のセッション『伝言ゲームをなくしてデザインの質を高める!Adobe XDを使ったライブデザインのコツ』が面白かったこともあり、かなり期待していました。

記念すべき「プレイステーションの日」にあわせて、DUALSHOCK 4やキーボードからプロトタイプを操作するためのノウハウやテクニックを紹介。単にゲーム会社だからというだけでなく、アクセシブルとは何かという観点でテーマを掘り下げて語っていたのが印象的で、「XDで、デザイナーも(アクセシビリティを)検証できる」というのはとても説得力がありました。

「DUALSHOCK 4の26種類のボタンやマイクでも操作できる」という、XDでつくりこんだスライドの完成度も驚異的でした。

このセッション終了後に最初の15分休憩。係員により椅子の間隔が詰められて、立ち見スペースが広くなりました。この辺でトイレに行こうと思ったのですが、通常セッションの移動時間と重なって人の動きがかなり流動的だったために自重。ひとりでショートセッションをぜんぶ観る場合、トイレのタイミングは激ムズです。

Session4 『プラグインとカスタマイズで作ろう!自分だけの最速XD』(14:05 - 14:25)

4番目のセッションは、2018年10月にXDでプラグインが使えるようになった直後にテキストばらしの「Split Rows」プラグインを発表していたことでも知られる、したたか企画 中野成さん(@sttk3com)による『プラグインとカスタマイズで作ろう!自分だけの最速XD』。

内容はプラグインやショートカットによる単純作業の高速化・自動化の紹介。Keyboard MaestroやAutomatorなどを駆使しながら、わずか数秒のちょっとした操作でも時短を目指す徹底ぶりはまさに職人芸。考えることに集中するためとはいえ、「そこまでやるのか」という驚きでした。

なお、このセッションから観ている人は最初の半分以下になっていました。これは裏番組となったTHE GUILD 奥田透也さんのセッション、『ユーザーの心を掴む!気持ちいいインタラクションがつくりだすインターフェースデザイン』に移動した人が多かったのが理由だと思います(自分も観たかった!)。

Session5 『Creative Challengeで学ぶモーションデザイン』(14:30 - 14:50)

5番目のセッションは、Alpaca.Lab 緑間なつみさん(@natsumi_512)による『Creative Challengeで学ぶモーションデザイン』。

移住した沖縄にはスタートアップ系の会社が多いため、UIデザイン案件が増えたとのこと。それまで苦手にしていたモーションデザインに取り組むために「Adobe XD Creative Challenge」に挑戦し、スキルを上達させていった実体験を投稿した作品とともに紹介。応用編ではコーヒーの選択メニューの課題をラーメンに変えてトッピング機能を追加するなど、お題をアレンジして楽しむコツも教えてくれました。

それまでのマニアックさとは異なる比較的XD初級者向けの内容で、これからXDでインタラクションデザインに挑戦したい人には最適なセッションだと思いました。

このセッションの終了後、人の動きを見て素早くトイレへ。戻ってきたのは次のセッション開始ギリギリでした。パシフィコ横浜開催のAdobe MAX Japanの場合、トイレ往復には最低5分かかることがわかりました。

Session6 『VRプロトタイピング:実践的なアプローチと今後の展開』(14:55 - 15:15)

ようやく折返しとなる6番目のセッションは、DMM 河西紀明さん(@norinity1103)による『VRプロトタイピング:実践的なアプローチと今後の展開』(登壇資料はこちら)。

「未成熟なVR市場に立ち向かう」取り組みの中で、デザインアセットや様々なドキュメントの管理、プロトタイピングやUIテストにXDを活用しているとのことでした。

一方で、「1つのツールにこだわりすぎない」として、After EffectsやProject Aeroなどの活用も紹介。ツールの進化にあわせた体験設計をチームで考えるのが大切、というまとめが印象的でした。

Session7 『XDゲームで学ぶアニメーションとトリガーのポイント』(15:30 - 15:50)

7番目のセッションは、popIn 北村崇さん(@tah_timing)による『XDゲームで学ぶアニメーションとトリガーのポイント』。

「XDレベル15くらいを想定」という内容は、XDでドラクエ風ゲームをつくっている軌跡を時間の許す限り見せるというもの。ルーレットやパズル、リバーシなどをかなり無理やり実装するノウハウを次々に紹介。

一見すると実用性がなさそうに見えるものの、実はゲームづくりを通して新しい技などを発見できると熱く語っていました。本人が心底楽しみながらつくっているのが伝わってくるセッションでした。

Session8 『データタイプごとに考えるXDのより良いアセット管理』(15:55 - 16:15)

8番目のセッションは「スターターキットの中の人」、ネットパイロティング 湯口りささん(@risay)による、『データタイプごとに考えるXDのより良いアセット管理』(登壇資料はこちら)。

すべて扱うと「絶対に終わらない!」ということで、XDで使用する写真、イラスト、ロゴ、テキストの受け取りから利用までの管理方法に絞って、注意点や最適解などをわかりやすく紹介。

ふだんの業務で試行錯誤していることもあり、まったく新しい発見があったわけではありませんが、迷っていた箇所の答え合わせとして安心できる内容でした。

ところで、通常セッション会場のパイプ椅子は硬いことで有名ですが、ショートセッションブースの椅子も負けていません。当然ながら長く座り続けていると、おしりが痛くなってきます。来年以降、全ショートセッションを観る人(たぶんいないでしょうが)はクッションなどを持参するのがよいでしょう。

Session9 『マイクロインタラクションを活かしたコンセプトデザインの作成』(16:20 - 16:40)

9番目のセッションは、つみき 鈴木慎吾さん(@shingo2000)による、『マイクロインタラクションを活かしたコンセプトデザインの作成』(登壇資料とサンプルファイルはこちら)。これまでもTwitterやnoteなどで「コンセプトデザイン」を発表している鈴木さんということで、注目度が高い上に、通常セッションの切れ目に重なったことも影響してか、かなり立ち見の人が増えていました。

内容は、これまでの作品を紹介しながら、その制作プロセスを解説するというもの。コンセプトアイデアをXDでラフデザイン化し、インタラクションをブラッシュアップして公開するまでの流れが、実にわかりやすくまとまっていました。

ブラッシュアップのポイントで最も重要と挙げていた「〇〇した感のある動き」は、渡邊恵太さんの名著『融けるデザイン』に出てくる「自己帰属感」に通づるものがあると思いました。個人的に、全ショートセッションの中で一番ワクワクするセッションでした。

Session10 『XDプラグインでIoTやVRとも連携して感じる未来の話!』(16:55 - 17:15)

10番目のセッションは、HoloLensを付けて登場のワンフットシーバス 田中正吾さん(@1ft_seabass)による『XDプラグインでIoTやVRとも連携して感じる未来の話!』(登壇資料はこちら)。

見た目の怪しさだけでなく、その内容も衝撃的。XDプラグイン経由でIoTと連動し、XDのアートボード上からLEDライトの色を変えたり、クルマを操作したり。控えめに言って、頭オカシイです(ほめ言葉)。

ただ単に奇をてらっているのではなく、VRや3DコンテンツのUIプロトタイピングには有効とのこと。未来感にあふれたセッションでした。

さて、これでようやく2ケタに突入。この辺まで来ると、疲労が限界に達してきます。ショートといっても中身は通常セッション並みに濃いため、観ているだけでも相当疲れます。

Session11 『これからはレスポンシブグリッドで作る!XDのレイアウトグリッドを活用したウェブ制作』(17:20 - 17:40)

ようやく最後、11番目のセッションは、中村優人さん(@_masatojpn)による、『これからはレスポンシブグリッドで作る!XDのレイアウトグリッドを活用したウェブ制作』。

「レスポンシブグリッド」はまだ聞き慣れない用語ですが、Adobeのデザインシステム「Spectrum」やGoogleの「マテリアルデザイン」でも採用されている、今後主流となるシステムとのこと。ハードルは高そうですが、XDのレイアウトグリッドと相性が良く、簡単に導入できて直感的にカスタマイズできるという話でした。

関連して、レスポンシブグリッドのCSSフレームワーク「SNUG CSS」を公開しているほか、XDのレイアウトグリッドをCSSにできるプラグインも開発中とのこと。実際の業務に活用できそうなので、これらは要注目です。

まとめ

「Adobe XD Short Sessions」は、どれも期待以上のセッションばかりでした。今回は後から発表されたこともあり、ショートセッションの存在自体を知らなかった人も多かったようです。来年以降は事前にチェックして、興味があるものを見逃さないことをオススメします。

ただし、いろんな意味でしんどいので、ぜんぶ観るのは絶対にオススメしません。素直に通常セッションと組み合わせるがよいと思います。

というか、来年以降、ショートセッションはあるのでしょうか?

Neuromagic Labsの新着記事