記事より動画で見たい方はこちらから！（チャプター付きリンク有）
【動画のChapter】
01:28 今回のお題～タイトル
02:08 実際にFigmaを操作しながら解説
02:58 プロジェクト一覧から「サイト(Figma Sites)」作成開始
03:15 タブレット用のブレークポイント追加～事前にキャンバスサイズをデザインに合わせる
04:10 ヘッダーをつくりながら、必要な構造を見てみる（オートレイアウトの構造）
05:46 Figma Sitesがもつ「マルチ編集機能」で背景色を同時反映～ヘッダの可変プレビュー
07:10 メインビジュアルの配置（横幅100%で可変させるには？必要な塗りの設定）
07:59 キャッチコピーの配置（メインビジュアルの上に配置するためのオートレイアウト設定）
09:08 ファーストビュー完成！実際のブラウザでチェックしてみる
09:46 文字が生きている状態で書き出されていることの確認
10:18 「Figma Sites」がもつ「マルチ編集機能」について
11:39 h1～h6の見出し設定ができること、リンクが簡単に付けられること、HTML編集機能について
12:18 「Figma Sites」が使用できるプランについて
こんにちは。上武 ハヤです。今回は、レスポンシブのお話だよ。
みなさんこんにちは～！！
どーもどーも、私は「上武 ハヤ（うぇぶ はや）」といいます！
最近、動画配信を始めたVの者(Vtuber)です！
tedateさんのCSS解説動画（近日公開予定）を制作したご縁で、
こちらにも投稿させてもらうことになりました！（これ言うの2回目）
よろしくおねがいしますっ！
さて、前回の内容にひきつづき。
今回も、神ツール「Figma Sites」についてのお話です！
デザインデータだけで、レスポンシブ実装しちゃうよって話。
今回はですね…、みんなだいすき「レスポンシブ化」について、やってみました！
「Figma Sites」を使えば、
「Webサイトのレスポンシブ対応」についても
なんと…
「デザインデータを用意するだけ」で、ほんとうに「レスポンシブ化」、
できちゃうんです！！
私ね…実際やってみて…もう革命よこれ。
レボリューション。もーすんごい。やばい。
この前も言いましたが「Figma Sites」、
「ゲームチェンジャー」になりえます。
おそらく、
Webデザイン、Web制作のワークフロー、変わってくると思います。（これ言うの2回目）
デザインデータだけで、レスポンシブ対応実際にやってみて…
「Figma Sites」の強さ、再実感しました。
もう最高。エクストリーム。
大正解のイグザクトリー。
…ということで、今回も、実際に使ってみた様子を動画として配信してますので、ぜひご覧ください！
【実践動画】【Figma Sites】レスポンシブ対応もできちゃいます！
【動画のChapter】
01:28 今回のお題～タイトル
02:08 実際にFigmaを操作しながら解説
02:58 プロジェクト一覧から「サイト(Figma Sites)」作成開始
03:15 タブレット用のブレークポイント追加～事前にキャンバスサイズをデザインに合わせる
04:10 ヘッダーをつくりながら、必要な構造を見てみる（オートレイアウトの構造）
05:46 Figma Sitesがもつ「マルチ編集機能」で背景色を同時反映～ヘッダの可変プレビュー
07:10 メインビジュアルの配置（横幅100%で可変させるには？必要な塗りの設定）
07:59 キャッチコピーの配置（メインビジュアルの上に配置するためのオートレイアウト設定）
09:08 ファーストビュー完成！実際のブラウザでチェックしてみる
09:46 文字が生きている状態で書き出されていることの確認
10:18 「Figma Sites」がもつ「マルチ編集機能」について
11:39 h1～h6の見出し設定ができること、リンクが簡単に付けられること、HTML編集機能について
12:18 「Figma Sites」が使用できるプランについて
みなさんぜひぜひ、チャンネル登録お待ちしてます！
上武 ハヤでした～！またねー！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。