記事より動画で見たい方はこちらから！（チャプター付きリンク有）
【動画のChapter】
00:45 今回のお題～タイトル紹介
01:55 「Figma Sites」でつくるスムーススクロールのサンプル
02:35 実際にFigmaを操作しながら解説
04:18 動きづけ～インタラクション設定をおこなう
05:35 「追従してくるヘッダー」だった場合の調整
05:55 「追従ヘッダー」のつくり方
06:48 「追従ヘッダー」の場合の「オフセット」設定による位置の調整
07:55 応用：「ページのTopへ戻る」をつくる
09:38 今回のまとめ
こんにちは。上武 ハヤです！今回は、「デザインデータ」だけで
スムーススクロールもつくれます、というお話なのです
みなさんこんにちは！
私は「上武 ハヤ（うぇぶ はや）」といいます🌟
最近、動画配信を始めたVの者(Vtuber)ですよーーー🌟
tedateさんのCSS解説動画を制作したご縁で、
こちらにも投稿させてもらってます！（これ言うの7回目📢～）
今日もよろしくおねがいしますっ！
さて、前回の内容につづいて。
今回も、「Figma Sites」についての動画をつくりましたので、そのお話をさせてください！
もしかして：FigmaSites スムーススクロール
今回の動画はですね…、「デザインデータだけで実装する、スムーススクロールのつくり方」について、チャレンジしてみました！
「Figma Sites」を使えば、
「スムーススクロールの実装」についても
「デザインデータを用意するだけ」で、ほんとうにできちゃうんです！
今回も動画の中で、実際に手を動かしてご紹介しているわけなのですが、
・CSSなら scroll-margin 等で調整する位置ずれ
・JavaScriptなら window.scrollTo を実行するときに、変数どうしを引き算したりして調整する位置ずれ
の調整なども、「デザインデータに設定を入れるだけ」で。
調整の効いた、
スムーススクロールが実現できてしまうんです！
- ・(1). クリックしたら遷移できる要素（メニューなど）を用意
- ・(2). その要素に対して、「インタラクション」の設定をおこなう
- ・(3). 設定さえできていれば、「スムーススクロール」がしっかり動く！
たったこれだけの、わずか数ステップで！
スムーススクロールも実装できてしまうんです。
今回の動画では、同じやり方を使って、
「ページTopに戻る」や、
「追従ヘッダーだった場合の調整」
などもご紹介していますので、
ぜひぜひ！動画本編を、ご覧くださいね～！！
【実践動画】【Figma Sites】スムーススクロールも「デザインデータだけ」で実装できちゃうっ！！
【動画のChapter】
00:45 今回のお題～タイトル紹介
01:55 「Figma Sites」でつくるスムーススクロールのサンプル
02:35 実際にFigmaを操作しながら解説
04:18 動きづけ～インタラクション設定をおこなう
05:35 「追従してくるヘッダー」だった場合の調整
05:55 「追従ヘッダー」のつくり方
06:48 「追従ヘッダー」の場合の「オフセット」設定による位置の調整
07:55 応用：「ページのTopへ戻る」をつくる
09:38 今回のまとめ
みなさんぜひぜひ、チャンネル登録お待ちしてますっ！！！
上武 ハヤでした～！またねっ🌟🌟🌟！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。