ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。
2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。
アーカイブビデオ
公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公開終了までにぜひご覧ください。
スライド資料
スライド資料はこちらからご覧いただけます。当日の実演動画もスライドショーのなかに含めています。
引用のURL
スライド中に紹介したURLは次の通りです。
- Animate CC関係
- After Effects CC関係
- UI関係
- インタラクション不要論
- デザインシステム関係
当日の反響
50分の講演でしたが、200を超える多くのツイートで紹介されました。当日の発表の反響はTogetterにまとめています。
Twitterの中から、感想をいくつかピックアップして紹介します。
- 1つ一つの事柄に対して歴史の振り返りとともに丁寧に深堀りしていて、最高の50分でした！
- 概要から細かいテクニック、使い分けまで盛りだくさんのセッションでした！！
- webでアニメの制作フローが具体的に知れて良かった
- マイクロインタラクション。納期に追われがちだけど、ちゃんと意識できるようにしよう！
- 接続型アニメーション、デザイナーとエンジニアで頑張りたさある
- マイクロインタラクションのトレンドおもしろいなこれ、エンジニア大変そうだけど
- 池田さんのマイクロインタラクションのセッションとてもわかりやすくて良かった。。しかしウェブデザイナーってほんとやること増えすぎ。アニメーションまで1つ一つ作ってたら大変
発表の様子
▲600人定員の会場が満席となりました
▲発表のために開発したウェブコンテンツ「Creative Icons」。Adobeのツール群を3次元のカラーホイールにマッピングするデータビジュアライゼーション。年内公開予定。
類似の発表
Adobe MAX JAPANではデザイナー向けに紹介しましたが、11月30日（金）の勉強会「DIST.24 「Re: Adobe MAX Japan 2018」 - connpass」でフロントエンジニア向けの内容を発表しました。
上記の資料とは後半部分が異なっており、とくにVue.jsとThree.jsを利用した上記の開発中のビジュアライゼーションコンテンツの技術を解説しています。
