数多くのウェブページやアプリが溢れる中で、ユーザーの心をつかむためには、印象的なムービーや操作して心地のよいインタラクションなどの、「動きのあるコンテンツ」が必要不可欠となっています。
しかし、多くのデザインツールでは静止画の部分までしか表現できず、デザイナーが頭の中で考えていた「動き」と、コーダーが解釈した「動き」に行き違いがあり、予定と異なる完成形になったり、実装の手戻りやコミュニケーションにコストがかかることもよくあります。
Adobe XDの自動アニメーション機能、Lottie・動画の読み込み機能を活用すれば、動きのあるデザインを表現することが可能です。それによって、デザイナーとコーダーが、より具体的な形でウェブページの完成イメージを共有できるようになり、アウトプットの質の向上と、開発の効率化につながります。
本セッションでは、Adobe XDで作られた動きのあるプロトタイプを、コーダーが実際にコーディングするフローを紹介します。デザイナーはどのようなことに気をつけてデザイン・プロトタイプを制作し、どのようにコーダーに伝えるか、コーダーはそれをどのようにHTML・CSS・JavaScript（Intersection Observer APIなどのモダンなウェブ技術）で実装するか、お互いどうすれば作りやすくなるのかを、開発現場の視点から解説します。
6つのトピックで構成します。
- 動画の再生
- マスクアニメーション
- Lottieの再生
- ループアニメーション
- スクロールに連動するアニメーション
- パララックスの表現
（1）動画の再生
XDに動画を配置し、マスクをかけたり位置を調整したりする方法と、そのコーディングでの実装方法について解説します。
（2）マスクアニメーション
XDの「シェイプでマスク」と自動アニメーションを組み合わせて、動画をマスクアニメーションで徐々に表示します。XDのインタラクションパネルに入力した値を、CSSでどう指定するかがポイントです。
（3）Lottieの再生
Lottieとは何か、どのような流れでダウンロードし、XDに配置してコーディングで実装するかについて解説します。
例として、ページが見つからなった時の404（Notfound）ページを作成します。
（4）ループアニメーション
ループして無限に繰り返すアニメーションについて解説します。
（5）スクロールに連動するアニメーション
「要素が表示領域に入ってきたらアニメーションが始まる」という演出について解説します。
（6）パララックスの表現
参加者特典
デモで使う全ての教材ファイル（Adobe XDファイル、コーディングファイル）をプレゼント！
出演
- 鹿野 壮さん：フロントエンドエンジニア
- 松下 絵梨さん：デザイナー
