CSS Nite in Kobe, vol.45「Adobe XDの自動アニメーションで作るプロトタイプと 現場で活用できるマイクロインタラクションの作り方」に参加してきました
先日開催されたCSS Nite in Kobe, vol.45「Adobe XDの自動アニメーションで作るプロトタイプと 現場で活用できるマイクロインタラクションの作り方」に参加してきました。
今回の登壇者
今回の登壇者はツキアカリの松下絵梨さんと、株式会社ICSの池田泰延さんです。
松下さんは最近Adobe XDのユーザーグループを主催していたり、CSS Nite in Osakaの主催もされている方です。
池田さんはWeb界隈ではかなり有名なICS MEDIAというメディアを運営している、株式会社ICSの代表です。
今回は松下さんにAdobe XDの自動アニメーション機能を使ったプロトタイプの作成方法、池田さんにはAdobe XDで作成したプロトタイプをどのようにして実装するのか、デモベースでセッションしてもらいました。
全体に対しての感想
Adobe XDは毎月どんどんアップデートしていて、いま勢いが凄いので、関連するセミナーもよく見かけるのですが、毎月アップデートが繰り返されているが故に、使い方と最新機能の紹介で終わってしまうことがほとんどです。
そう考えると、今回のセミナーでは「プロトタイピングの作成」と「それを基にした実装」のバランスが非常に良かったように感じます。
いくらプロトタイピングを作成しても、現時点ではその後には「実装」工程があるわけです。
もちろん早い段階でクライアントやコーダー（実装側）と共通認識を取れるのが、Adobe XDの長所なので、早い段階で制作物を共有していけば問題はなさそうです。
ただ、「Adobe XDで作ったプロトタイプが、どのようにして実装されるのか？」というのは、仮にデザイナーで実装をしなかったとしても、知っていて損はありません。
そういう意味で、別々の視点からのお話が聞けたのはすごく面白かったです。
松下さんのセッション
- Adobe XDのプロトタイプではトリガー（きっかけ）とアクション（何が起こるか）の組み合わせが重要
- イージングは適切に使い分ける
- 「スナップ」と「ワインドアップ」は似たもので対応（Easing Functions Cheat Sheet）
- 「バウンス」は、完璧に実装しようとすると時間がかかってしまう
プロトタイプで使える小技
スクロール位置の保持
プロトタイプモードでオブジェクトを選択して「スクロール時に位置を固定」にチェックを入れると、スクロールしても追尾するヘッダーや、ページ上部へ戻るボタンが作れます。
オーバーレイ機能
プロトタイプモードでオブジェクトを選択して、アクションを「オーバーレイ」に設定すると、移動先に設定したアートボードが現在のアートボードの上に乗っかる形で表示されるようになります。
ハンバーガーメニューを開いたときの表示や、モーダルの表示などに使えますね。
リピードグリッドを使ったマスク
Adobe XDには2つマスクの方法があるのですが、更にもう1つ、リピートグリッドを使ったマスクもできます。
リピートグリッドは本来オブジェクトを複数並べる目的で使うのですが、ドラッグする方向を逆にすると、画像を隠すこともできます。
簡単に画像を隠せますし、自動アニメーションでちゃんと動いてくれるのでかなり使えそうです。
池田さんのセッション
- 世界観の構築をするためのアニメーションと、UIの理解を促すアニメーションがある
- XDは遅延が苦手だったりするので、データをそのまま実装するのではなく、本来やりたかったことをデザイナーに確認（ヒアリング）して実装する必要がある
- 今後は接続型のアニメーションが増えていきそう
職業ごとのやるべきこと
アニメーション・マイクロインタラクションを実装していくに当たって、職業ごとにやらなくてはいけないことの紹介がありました。
| 職業 | やるべきこと |
|---|---|
| ディレクター |
|
| デザイナー |
|
| エンジニア |
|
また、ディレクター・デザイナーがマイクロインタラクションを実装したくても、エンジニアがやりたくないと実装は難しいと仰っていました。
マイクロインタラクションの必要性を共有して、お互いの作業への理解が必要になってきます。
Affter Effectsでの実装
After Effectsでアニメーションを実装して、それをWebサイトで使いたい場合は、Bodymovinというプラグインで書き出して、Lottieという再生エンジンを使うとWebサイト上でもアニメーションを再生できるようです。
同じAdobe製品だと、Adobe Animateというソフトもあり、こちらはベクターに向いているのと、Animateで作ったアニメーションをPixi.jsでWebGLで実装すると、パフォーマンスが高くなるそうです。
CSS Animationでの実装
- SVGも複雑な動きでなければCSS Animation + Transitionで実装可能
- 複数の要素を重ねたり、タイミングをズラすとそれっぽくなる
CSS Animationに関しては、ICS MEDIAさんの記事でがっつりコードが書かれてあるものがありますので、そちらを参考にしてみて下さい。
まとめ
最近はかなりリッチなアニメーションのサイトも増えましたし、Nuxt.jsなんかで遷移アニメーションがついてあるサイトも見かけるようになってきました。
もちろん、ただ流行ってきたから実装するのではなく、なぜそれが必要なのか考える必要がありますし、それを踏まえてクライアントに提案できるようになりたいですね。
