数多くのウェブページやアプリが溢れる中で、ユーザーの心をつかむためには、印象的なムービーや操作して心地のよいインタラクションなどの、「動きのあるコンテンツ」が必要不可欠となっています。 しかし、多くのデザインツールでは静止画の部分までしか表現できず、デザイナーが頭の中で考えていた「動き」と、コーダーが解釈した「動き」に行き違いがあり、予定と異なる完成形になったり、実装の手戻りやコミュニケーションにコストがかかることもよくあります。

Adobe XDの自動アニメーション機能、Lottie・動画の読み込み機能を活用すれば、動きのあるデザインを表現することが可能です。それによって、デザイナーとコーダーが、より具体的な形でウェブページの完成イメージを共有できるようになり、アウトプットの質の向上と、開発の効率化につながります。

本セッションでは、Adobe XDで作られた動きのあるプロトタイプを、コーダーが実際にコーディングするフローを紹介します。デザイナーはどのようなことに気をつけてデザイン・プロトタイプを制作し、どのようにコーダーに伝えるか、コーダーはそれをどのようにHTML・CSS・JavaScript（Intersection Observer APIなどのモダンなウェブ技術）で実装するか、お互いどうすれば作りやすくなるのかを、開発現場の視点から解説します。

6つのトピックで構成します。

1. 動画の再生

2. マスクアニメーション

3. Lottieの再生

4. ループアニメーション

5. スクロールに連動するアニメーション

6. パララックスの表現