Adobe XDの現場の今 vol. 2 ～動画とLottieを学ぶ、XD最新アップデート〜

2021年3月に刊行された『豊富な作例で学ぶ Adobe XD Webデザイン入門』の著者2名をお迎えし、書籍発売時点からのアップデート内容と書籍には含まれない「動画とLottie」の扱いについて解説いただきます。

前半は、アップデート内容や動画、Lottieの基礎的な導入。後半は、動画やLottieを利用したプロトタイプの表現方法を解説。Adobe MAX 2021に登壇した二人による、XDのアップデート講座です。

Adobe XDの現場の今 vol.2
〜動画とLottieを学ぶ、XD最新アップデート〜

動画やLottieを利用する、少し先行くプロトタイプの表現方法を紹介します。
書籍『豊富な作例で学ぶ Adobe XD Webデザイン入門』の著者二人が、動画やLottieを活用して表現力の高いプロトタイプを操作しながら解説します。

• 「アップデートが頻繁にあって、今なにができるかわからない」
• 「Lottieは知ってるけど、さわったことがない」
• 「動画をプロトタイプに組み込む必要あるの？」

初めてLottieにさわる方でも安心できるように、簡単なモーショングラフィックスの作成方法から紹介します。動画やLottieを活用したいけど何から始めれば良いかわからない全てのXDユーザーが学びを得られます。

Lottieとは

Lottieとは、json形式のファイルとして書き出したベクターアニメーションを、Webやアプリ上でネイティブにレンダリングすることができるアニメーションライブラリです。

動画をプロトタイプに組み込む必要あるの？

動画をプロトタイプに組み込むことで、デザイナーが考える動画やアニメーションを使った表現方法を、見た目やわかりやすさ、使いやすさ、といった観点で、より実装に近い形で評価することができます。動画を組み込んだデザインを評価した結果、「やはりこれはない方が良いね」という結論になったとしても、それを事前に確認できた、ということが最大のメリットになります。

【前半】書籍とデモによるアップデート内容の徹底解説

書籍の重版に伴って追加修正されたアップデート内容と、書籍には含まれない動画とLottieへの対応について基礎から解説します。

書籍と合わせて、よりXDを使いこなし、デザインやプロトタイピングに活用するための学びを得ることができます。

• ライブラリの共有についての変更点
• XDからBehanceに公開しよう
• 動画の扱い方と注意事項
• Lottieの導入方法

【後半】プロトタイプの表現力を上げる動画とLotteiの活用法

前半で紹介した動画とLottieを使って、プロトタイプの表現力を上げるヒントを紹介します。
例えば、書籍の中で紹介したテクニックを動画やLottieで再現すると、どんなメリットがあるのかなどです。　

単純に動画やLottieを再生するだけでなく、一歩踏み込んだ表現も紹介します。

• 通常再生以外の動画の使い方
• 通常再生以外のLottieの使い方
• 動画とLottieを組み合わせた使い方

参加者特典

• Lottieのサンプル制作に使ったファイル一式

出演

『豊富な作例で学ぶ Adobe XD Webデザイン入門』の著者のお二人にお話しいただきます。

• 佐々木 雄平さん（by）
• 池原 健治さん

イベント概要

• 開催日：2022年2月25日（金）20:00 - 22:00
  • （最大23:00までアフタートーク）
• 形式：オンライン（Zoomウェビナー）
• 主催：CSS Nite
• 共催：DTP Transit
• 参加費（お一人）
  • 2,200円（個人版）
  • 5,000円（経費版）

終演時間は若干の延長の可能性があります。

チケットに関して

• 経費として処理される方は経費版を選択ください。
• 2021年までのチケットは次のように変更になりました。
  • 「自腹での参加」 → 「個人版」
  • 「経費での参加」 → 「経費版」
• 「協賛企業枠」のチケットは、CSS Niteに年間での協賛してくださっている企業向けです。

当日の進行などに関して

• 19:30以降にZoomにログインしてください。Zoomアプリは最新版にしておくことをオススメします。
• 19:45から「椅子ヨガ」を予定しています。
• 質問事項は、Zoomウェビナー内の「Q&A」でなく、Sli.doにご記入ください。事前に記入いただくことも可能です。
• ツイートされる場合には、ハッシュタグは「#cssnite」をお付けください。
• 終演時間は若干の延長の可能性があります。また、終了後、30分程度を目安に「アフタートーク」を予定。

視聴に関して（1）

• Zoomの視聴URLは前日・当日に再確認をお願いします。
• 参加される方のカメラ、マイクは自動的にOFFになっています（ONにできません）。
• 画面共有でスライドやデモ画面を表示しますので、PCでの参加をおすすめします（スマホ/タブレットでも参加できます）。
• 内蔵スピーカーでは聞き取りづらい場合があります。イヤホン・ヘッドホンの利用を推奨します。
• 120分程度の接続で数百MBのデータ通信が必要です。通信制限の上限等にご注意ください。

視聴に関して（2）「音声が途切れる。画面が遅延する/カクカクする」場合

• Zoomから退出したり、PCを再起動するなどして再度接続してみてください。
• バックグラウンドで走っているアプリケーションを終了することで改善されることもあります。
• 可能であればWi-Fiでなく有線で接続してみてください。
• 改善されない場合には、後日提供する動画をご覧ください。

後日の視聴

当日見られなかった方、および、改めて見返したい方には、5日後（翌月曜日）に発行するフォローアップメールにて視聴URLをお知らせします。

• 動画の視聴期限は開催から3週間を予定。

お振込の方

会社から複数名にて参加される場合には、まとめてお振込いただき、振り込み後にご一報ください。

その他

• 開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。
• 本セミナーのタイトルや内容は調整されることがあります。

オンライン椅子ヨガ

今回のCSS Niteはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

• 19:45-20:00　開演まで
• 20:55-21:05　休憩時間（前後することがあります）

一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga

Twitter/note/YouTubeをフォローください！

セミナー前後に関連情報をお出しすることがありますので、Twitter/note/YouTube/LINEをフォローくださいますと幸いです。

• Twitter
• note
• YouTube
• LINE

CSS Nite（シーエスエス・ナイト）は、ウェブ制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2021年10月で丸16年。

これまでに、800回を超える関連イベントを通して、のべ75,000名を超える方にご参加いただいています（2021年10月現在）。

• CSS Nite公式ウェブサイト

協賛

CSS Niteには次の企業をはじめ、多くの制作会社に協賛いただいています。