登壇
- #CSS
「動きのあるウェブページを作ろう!Adobe XDからのイマドキコーディング」に登壇しました
発表日
数多くのウェブページやアプリが溢れる中で、ユーザーの心をつかむためには、印象的なムービーや操作して心地のよいインタラクションなどの、「動きのあるコンテンツ」が必要不可欠となっています。 しかし、多くのデザインツールでは静止画の部分までしか表現できず、デザイナーが頭の中で考えていた「動き」と、コーダーが解釈した「動き」に行き違いがあり、予定と異なる完成形になったり、実装の手戻りやコミュニケーションにコストがかかることもよくあります。
Adobe XDの自動アニメーション機能、Lottie・動画の読み込み機能を活用すれば、動きのあるデザインを表現することが可能です。それによって、デザイナーとコーダーが、より具体的な形でウェブページの完成イメージを共有できるようになり、アウトプットの質の向上と、開発の効率化につながります。
本セッションでは、Adobe XDで作られた動きのあるプロトタイプを、コーダーが実際にコーディングするフローを紹介します。デザイナーはどのようなことに気をつけてデザイン・プロトタイプを制作し、どのようにコーダーに伝えるか、コーダーはそれをどのようにHTML・CSS・JavaScript(Intersection Observer APIなどのモダンなウェブ技術)で実装するか、お互いどうすれば作りやすくなるのかを、開発現場の視点から解説します。
6つのトピックで構成します。
動画の再生
マスクアニメーション
Lottieの再生
ループアニメーション
スクロールに連動するアニメーション
パララックスの表現
![entryData.ogInfo.title](/_next/image?url=https%3A%2F%2Fdoorkeeper.jp%2Frails%2Factive_storage%2Frepresentations%2Fproxy%2FeyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBekN1QkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ%3D%3D--da1334c6d4222c86034d4e3dd388f499a56a5783%2FeyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMb0F6QT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ%3D%3D--91839951a073aea8822f6907dc8d81559a890706%2Fcover-Doorkeeper-XD-markup%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1.png&w=1920&q=75)
動きのあるウェブページを作ろう!Adobe XDからのイマドキコーディング
https://cssnite.doorkeeper.jp/events/133255