Doorkeeper

動きのあるウェブページを作ろう!Adobe XDからのイマドキコーディング

2022-04-08(金)20:00 - 22:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む

申し込み受付は終了しました

今後イベント情報を受け取る

経費版 5,000円 前払い
自腹版 2,200円 前払い
協賛企業枠 無料
出演者、スタッフ 無料

詳細

noteにてアーカイブ(スライド・動画)を販売しています。
「アーカイブを見たい方」「申し込みそびれてしまった方」はご利用ください。

https://note.com/cssnite/n/n7a530972751b

鹿野 壮さん、松下 絵梨さんに、Adobe XDからのコーディングに関してお話しいただきます。

動きのあるウェブページを作ろう!
Adobe XDからのイマドキコーディング

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

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

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

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

  1. 動画の再生
  2. マスクアニメーション
  3. Lottieの再生
  4. ループアニメーション
  5. スクロールに連動するアニメーション
  6. パララックスの表現

(1)動画の再生

XDに動画を配置し、マスクをかけたり位置を調整したりする方法と、そのコーディングでの実装方法について解説します。

(2)マスクアニメーション

XDの「シェイプでマスク」と自動アニメーションを組み合わせて、動画をマスクアニメーションで徐々に表示します。XDのインタラクションパネルに入力した値を、CSSでどう指定するかがポイントです。

(3)Lottieの再生

Lottieとは何か、どのような流れでダウンロードし、XDに配置してコーディングで実装するかについて解説します。

例として、ページが見つからなった時の404(Notfound)ページを作成します。

(4)ループアニメーション

ループして無限に繰り返すアニメーションについて解説します。

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

「要素が表示領域に入ってきたらアニメーションが始まる」という演出について解説します。

(6)パララックスの表現

参加者特典

デモで使う全ての教材ファイル(Adobe XDファイル、コーディングファイル)をプレゼント!

出演

  • 鹿野 壮さん:フロントエンドエンジニア
  • 松下 絵梨さん:デザイナー

鹿野 壮(かの・たけし)

フロントエンドエンジニア

九州大学でメディアアートを学んだ後、ウェブ制作会社にてウェブページ制作やモバイルアプリ開発に携わる。最新のフロントエンド技術を駆使したコンテンツづくりが好きで、暇があればコードを書いている。TechFeed公認エキスパート。

近著に『JavaScript コードレシピ集』(技術評論社)がある

松下 絵梨(まつした・えり)

松下絵梨

ツキアカリ

大阪出身大阪在住のWeb/UIデザイナー。東京理科大学理工学部卒業。

通信機器メーカーで開発・サポート業務に従事したのち、デザイン・広報秘書業務に転身。2010年よりフリーランスとして独立し、DTP/Web/アプリデザイン、ディレクションを行なっている。

講師業や、「Adobe XD ユーザーグループ大阪」、「CSS Nite in Osaka」の運営、セミナー登壇・企業研修にも力を入れている。 2020年に『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』(翔泳社)を上梓。

イベント概要

  • 開催日:2022年4月8日(金)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ウェビナーのコメントに【質問】と添えて記入ください。
  • ツイートされる場合には、ハッシュタグは「#XDからのモダンコーディング」をお付けください。
  • 終演時間は若干の延長の可能性があります。また、終了後、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をフォローくださいますと幸いです。

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

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

協賛

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

株式会社ヘルツ有限会社アップルップルともすた株式会社トゥーアール(to-R)株式会社Gear8Qiita株式会社

コミュニティについて

CSS Nite

CSS Nite

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年にスタートし、2021年10月で丸16年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...

メンバーになる