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サイト上でもアニメーションを再生できるようです。

GitHub

airbnb/lottie-web

https://github.com/airbnb/lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/ - airbnb/lottie-web

同じAdobe製品だと、Adobe Animateというソフトもあり、こちらはベクターに向いているのと、Animateで作ったアニメーションをPixi.jsでWebGLで実装すると、パフォーマンスが高くなるそうです。

CSS Animationでの実装

• SVGも複雑な動きでなければCSS Animation + Transitionで実装可能
• 複数の要素を重ねたり、タイミングをズラすとそれっぽくなる

CSS Animationに関しては、ICS MEDIAさんの記事でがっつりコードが書かれてあるものがありますので、そちらを参考にしてみて下さい。

ICS MEDIA

CSSアニメーションで実現！ コピペで使えるマイクロインタラクション

https://ics.media/entry/15130/

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変...

まとめ

最近はかなりリッチなアニメーションのサイトも増えましたし、Nuxt.jsなんかで遷移アニメーションがついてあるサイトも見かけるようになってきました。

もちろん、ただ流行ってきたから実装するのではなく、なぜそれが必要なのか考える必要がありますし、それを踏まえてクライアントに提案できるようになりたいですね。