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

鹿野 壮 Takeshi Kano @tonkotsuboy_com

松下 絵梨（@matsu_eri）さんとCSS Niteで登壇します！ モダンなCSSやJavaScriptを使って、アニメーションやスクロール連動演出を作る方法を全力で紹介します👩‍🎨 4/8（金）、ぜひお越しくださいませ cssnite.doorkeeper.jp/events/133255 本日から発表内容をチラ見せしていきます🌸 #adobexd #cssnite

Eri Matsushita 松下 絵梨 @matsu_eri

@nomco11 アーカイブは開催から3週間視聴可能ですし、デモデータもダウンロードできるので、ぜひ😊

Eri Matsushita 松下 絵梨 @matsu_eri

XDにビデオを読み込むには、MP4ファイルをアートボードにドラッグし、ヘッドアップディスプレイでビデオのトリミングやループ再生の設定を行います。 デフォルトでは「タップで再生」になっているので自動再生したいときは「ビデオ」セクションで「自動再生」を選択します。 #adobexd #cssnite pic.twitter.com/eOS8ZnGKR4

Eri Matsushita 松下 絵梨 @matsu_eri

XDにMP4以外のビデオを読み込もうとすると「XDがサポートするビデオは、MP4 H.264です。」とエラーメッセージが出ます。 Media Encoderで適切なファイルに変換してから読み込み直しましょう。 ✅最大ファイルサイズは15 MB以下です。 #adobexd #cssnite pic.twitter.com/TiMkXxHPkU

鹿野 壮 Takeshi Kano @tonkotsuboy_com

本日のSafari 15.4リリースにより、「全」モダンブラウザで使えるようになったウェブ技術 HTML ・<img loading='lazy'> ・<dialog> CSS ・:focus-visible ・scroll-behavior ・@layout ・accent-color ・contain JavaScript ・hasOwn() Cascade Layers、全ブラウザ実装の判断が早い🫥 #CSS

Eri Matsushita 松下 絵梨 @matsu_eri

Lottieアニメーション × Adobe XDで作成する、スプラッシュスクリーン（ローディング画面）のプロトタイプ 2パターン 1️⃣一度再生したら、次のアートボードに遷移 2️⃣リピート再生し、一定時間経過したら、次のアートボードに遷移 Lottie lottiefiles.com #adobexd #lottie #cssnite pic.twitter.com/HVMquXuQEK

Eri Matsushita 松下 絵梨 @matsu_eri

アニメーションを一から作りたい方は、こちらの動画をご覧ください。 📺Illustratorで描いたイラストををAfter Effectsで動かして、BodymovinでLottie JSONに書き出して、XDに読み込む流れ youtu.be/R2MvDS7rTGo

拡大

鹿野 壮 Takeshi Kano @tonkotsuboy_com

HTMLで動画を自動再生する際、mutedを忘れない。 <video src="動画パス" muted autoplay></video> 電車でウェブサイトを開いたとき、突然「パワー💪‼️」と音が鳴るとユーザーは困る。 ブラウザ側の仕様でmuted無しで自動再生できない。 developer.mozilla.org/ja/docs/Web/Me… cssnite.doorkeeper.jp/events/133255 #cssnite twitter.com/matsu_eri/stat… pic.twitter.com/5k3ujo2H88

Eri Matsushita 松下 絵梨 @matsu_eri

HTMLにvideoタグで動画を埋め込むときのポイント twitter.com/tonkotsuboy_co…

Eri Matsushita 松下 絵梨 @matsu_eri

XD に読み込む動画は、以下の条件を満たしている必要があります。 ・ビデオファイル形式:MP4 ・ビデオ圧縮形式（コーデック）:H.264 ・オーディオコーデック:AAC ・最大ファイルサイズ:15 MB ・最大解像度:4 K （@kenji_clown5 兄貴、補足ありがとう！） twitter.com/kenji_clown5/s… #adobexd #cssnite

けんじ / UX Designer @kenji_clown5

ちなみに、XDに読み込めるH.264形式のMP4ファイルでも、カメラによってはオーディオコーデックがAACではない場合があります。その場合、（15MB未満で）動画は読み込めるけど音声が読み込めない、ということもあるので、メディアエンコーダーを使って変換しましょう。手持ちのα7Cにて。 pic.twitter.com/Poed6MzLux twitter.com/matsu_eri/stat…

2022-03-14 11:07:50

鹿野 壮 Takeshi Kano @tonkotsuboy_com

全ブラウザ対応したてほやほやのCSS scroll-behaviorは、4/8（金）のCSS Niteでも紹介します🏋️‍♀️ cssnite.doorkeeper.jp/events/133255 #CSS #CSSNite

鹿野 壮 Takeshi Kano @tonkotsuboy_com

Safariの最新開発版で、ブラウザで初めてフラグなしのCSS Containerクエリ（ @container ）に対応💐 mediaクエリ（ @media ）→ ウインドウサイズに応じてスタイルを適用 Containerクエリ → 「要素の」サイズに応じてスタイルを適用 デモ by @rachelandrew codepen.io/rachelandrew/p… #CSS pic.twitter.com/r1zdmtkAQm

拡大

拡大

拡大

鹿野 壮 Takeshi Kano @tonkotsuboy_com

subgridで作ったデモの様子。 ウインドウサイズを変えると、「それぞれの」行で、画像・テキストの高さが全部揃う。 真ん中のテキストはそれぞれ量が違うが、最大の高さに揃う。 昔、こういうレイアウトは超難しかった。 素晴らしい時代だ… codepen.io/tonkotsuboy/pe… #CSS pic.twitter.com/ineHkjm0ik

Eri Matsushita 松下 絵梨 @matsu_eri

XDにMP4以外のビデオを読み込もうとすると「XDがサポートするビデオは、MP4 H.264です。」とエラーメッセージが出ます。 Media Encoderで適切なファイルに変換してから読み込み直しましょう。 ✅最大ファイルサイズは15 MB以下です。 #adobexd #cssnite pic.twitter.com/6ub7GUVZwP

Eri Matsushita 松下 絵梨 @matsu_eri

♠︎XD Tips♠︎マスクアニメーション XDの「シェイプでマスク」と自動アニメーションを組み合わせて、マスクアニメーションのプロトタイプを作成する方法です✨ #cssnite #adobexd pic.twitter.com/1lztWFaem2

Eri Matsushita 松下 絵梨 @matsu_eri

写真でなく動画（mp4）でも、同じ手順でマスクアニメーションが作れます。 マスクアニメーションを、どうやって実装するの？が気になる方は、ぜひこちらのセミナーにご参加ください✨ 鹿野 壮（@tonkotsuboy_com）さんが分かりやすく解説してくれます！ cssnite.doorkeeper.jp/events/133255 #cssnite

しきの @4ki_no

自腹で申し込んだｳｪｲ 動きのあるウェブページを作ろう！Adobe XDからのイマドキコーディング cssnite.doorkeeper.jp/events/133255 #cssnite @cssniteより

鹿野 壮 Takeshi Kano @tonkotsuboy_com

After Effectsで作ったアニメーションは「Lottie」を使うことでウェブページで再生可能になる。 lottiefiles.com ユーザーが作ったアニメーションも表示可能。 1. HTMLでLottieのライブラリを読み込む 2. JavaScriptでかんたんなJSを書く デモを作った tonkotsuboy.github.io/kanobox/202204… #cssnite twitter.com/matsu_eri/stat… pic.twitter.com/W5TV1tNrJs

鹿野 壮 Takeshi Kano @tonkotsuboy_com

Lottieで、一度アニメーションを再生したら次の画面に遷移というのもかんたん。 completeイベントやloopCompleteイベントをとればよいだけ。 airbnb.io/lottie/#/web?i… デモはこちら tonkotsuboy.github.io/kanobox/202204… #cssnite pic.twitter.com/cqSDdlNpVc

ウェブおばさんのうぇびん @webbing_cms

2012年から2018年までCSS Nite地方版の運営チームにいました。全国版のフォーマットがあるとはいえスゲェ大変で準備で睡眠削ったこともあります。ですがあの期間に得たことは一生ものですし、もう得られないかもとすら思います。大きな勉強会の運営に回ることはそれだけの価値があります #cssnite

Eri Matsushita 松下 絵梨 @matsu_eri

Lottieアニメーションをウェブページで再生するよう、実装するには・・・ ⬇️ twitter.com/tonkotsuboy_co… #lottie #cssnite

鹿野 壮 Takeshi Kano @tonkotsuboy_com

CSS Tips👩‍🎨マスクアニメーション CSSで画像のマスクアニメーションをする際、clip-pathプロパティを使う。 例えば、inset(0 100% 0 0)から inset(0 0 0 0)へ変化させることで、長方形のマスクアニメーションができる デモ codepen.io/tonkotsuboy/pe… #CSS #cssnite #XDからのモダンコーディング twitter.com/matsu_eri/stat… pic.twitter.com/TIWtBdIi90

Eri Matsushita 松下 絵梨 @matsu_eri

お申し込み人数が100名突破✨ありがとうございます。 いよいよ今週！ 鹿野 壮（@tonkotsuboy_com）さんと出演します🙋‍♀️🙋 「動きのあるウェブページを作ろう！Adobe XDからのイマドキコーディング」 cssnite.doorkeeper.jp/events/133255 #cssnite #XDからのモダンコーディング #adobexd twitter.com/matsu_eri/stat…

Eri Matsushita 松下 絵梨 @matsu_eri

✨4/8（金）20:00〜オンラインセミナー✨ 鹿野 壮（@tonkotsuboy_com）さんと共にCSS Niteに出演します💁🏻‍♀️💁🏻‍♂️ Adobe XDで作った動きのあるデザインカンプを、コーディングで実装するという内容です😊 ぜひご参加くださいませ！ cssnite.doorkeeper.jp/events/133255 #adobexd #cssnite pic.twitter.com/arB1yVuJvX

2022-03-09 21:34:53

たいしょう @freefuntimes

申し込み完了！ 動きのあるウェブページを作ろう！Adobe XDからのイマドキコーディングに申し込みました! cssnite.doorkeeper.jp/events/133255 #cssnite @cssniteより