# CSS Nite in Kobe, vol.45「Adobe XDの自動アニメーションで作るプロトタイプと 現場で活用できるマイクロインタラクションの作り方」に参加してきました

URL: https://webrandum.net/cssnite-kobe-45/
公開日: 2019-08-28
更新日: 2019-08-28
カテゴリー: セミナー・イベント
タグ: CSS Nite, XD
出典: Webrandum（著者: サイトウ マサカズ）

先日開催されたCSS Nite in Kobe, vol.45「Adobe XDの自動アニメーションで作るプロトタイプと 現場で活用できるマイクロインタラクションの作り方」に参加してきました。

## 今回の登壇者

今回の登壇者はツキアカリの松下絵梨さんと、株式会社ICSの池田泰延さんです。

松下さんは最近Adobe XDのユーザーグループを主催していたり、CSS Nite in Osakaの主催もされている方です。

池田さんはWeb界隈ではかなり有名な[ICS MEDIA](https://ics.media/)というメディアを運営している、株式会社ICSの代表です。

今回は松下さんにAdobe XDの自動アニメーション機能を使ったプロトタイプの作成方法、池田さんにはAdobe XDで作成したプロトタイプをどのようにして実装するのか、デモベースでセッションしてもらいました。

## 全体に対しての感想

Adobe XDは毎月どんどんアップデートしていて、いま勢いが凄いので、関連するセミナーもよく見かけるのですが、毎月アップデートが繰り返されているが故に、使い方と最新機能の紹介で終わってしまうことがほとんどです。

そう考えると、今回のセミナーでは「プロトタイピングの作成」と「それを基にした実装」のバランスが非常に良かったように感じます。

いくらプロトタイピングを作成しても、現時点ではその後には「実装」工程があるわけです。

もちろん早い段階でクライアントやコーダー（実装側）と共通認識を取れるのが、Adobe XDの長所なので、早い段階で制作物を共有していけば問題はなさそうです。

ただ、「Adobe XDで作ったプロトタイプが、どのようにして実装されるのか？」というのは、仮にデザイナーで実装をしなかったとしても、知っていて損はありません。

そういう意味で、別々の視点からのお話が聞けたのはすごく面白かったです。

## 松下さんのセッション

- Adobe XDのプロトタイプではトリガー（きっかけ）とアクション（何が起こるか）の組み合わせが重要

- イージングは適切に使い分ける 「スナップ」と「ワインドアップ」は似たもので対応（[Easing Functions Cheat Sheet](https://easings.net/)）

- 「バウンス」は、完璧に実装しようとすると時間がかかってしまう

### プロトタイプで使える小技

#### スクロール位置の保持

プロトタイプモードでオブジェクトを選択して「スクロール時に位置を固定」にチェックを入れると、スクロールしても追尾するヘッダーや、ページ上部へ戻るボタンが作れます。

![「スクロール時に位置を固定」](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_1-25.png)

#### オーバーレイ機能

プロトタイプモードでオブジェクトを選択して、アクションを「オーバーレイ」に設定すると、移動先に設定したアートボードが現在のアートボードの上に乗っかる形で表示されるようになります。

![「オーバーレイ」アクション](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_2-21.png)

ハンバーガーメニューを開いたときの表示や、モーダルの表示などに使えますね。

#### リピードグリッドを使ったマスク

Adobe XDには2つマスクの方法があるのですが、更にもう1つ、リピートグリッドを使ったマスクもできます。

リピートグリッドは本来オブジェクトを複数並べる目的で使うのですが、ドラッグする方向を逆にすると、画像を隠すこともできます。

![リピートグリッドでマスク](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_3-18.png)

簡単に画像を隠せますし、自動アニメーションでちゃんと動いてくれるのでかなり使えそうです。

## 池田さんのセッション

- 世界観の構築をするためのアニメーションと、UIの理解を促すアニメーションがある

- XDは遅延が苦手だったりするので、データをそのまま実装するのではなく、本来やりたかったことをデザイナーに確認（ヒアリング）して実装する必要がある

- 今後は接続型のアニメーションが増えていきそう

### 職業ごとのやるべきこと

アニメーション・マイクロインタラクションを実装していくに当たって、職業ごとにやらなくてはいけないことの紹介がありました。

| 職業 | やるべきこと |
| --- | --- |

| ディレクター | 目標やビジョンを明確にする 参考モーションをデザイナー・エンジニア・クライアントに伝える |
| --- | --- |

| デザイナー | 動きをイメージして、グラフィックとして制作する エンジニアに要望や指示を正確に伝える モーションサンプルを作る（できれば） |
| --- | --- |

| エンジニア | デザインデータからモーションを作る 求められるものを忠実に再現する |
| --- | --- |

また、ディレクター・デザイナーがマイクロインタラクションを実装したくても、エンジニアがやりたくないと実装は難しいと仰っていました。

マイクロインタラクションの必要性を共有して、お互いの作業への理解が必要になってきます。

### Affter Effectsでの実装

After Effectsでアニメーションを実装して、それをWebサイトで使いたい場合は、[Bodymovin](https://github.com/airbnb/lottie-web)というプラグインで書き出して、Lottieという再生エンジンを使うとWebサイト上でもアニメーションを再生できるようです。

[![](https://www.google.com/s2/favicons?domain=github.com)GitHub![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/55a3cc106cea21a6440a72b93456b02e5f263157a88ea750ee742687b48da40e.webp)airbnb/lottie-webhttps://github.com/airbnb/lottie-webRender After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/ - airbnb/lottie-web](https://github.com/airbnb/lottie-web)

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

### CSS Animationでの実装

- SVGも複雑な動きでなければCSS Animation + Transitionで実装可能

- 複数の要素を重ねたり、タイミングをズラすとそれっぽくなる

CSS Animationに関しては、[ICS MEDIAさんの記事](https://ics.media/entry/15130/)でがっつりコードが書かれてあるものがありますので、そちらを参考にしてみて下さい。

[![](https://www.google.com/s2/favicons?domain=ics.media)ICS MEDIA![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/456bb0f288144ef87084043455b410ebdf1149a57e369890ae3344636a70c336.webp)CSSアニメーションで実現！ コピペで使えるマイクロインタラクションhttps://ics.media/entry/15130/マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変...](https://ics.media/entry/15130/)

## まとめ

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

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