記事より動画で見たい方はこちらから！（チャプター付のリンクから見たいところを再生できます）
【動画のChapter】
01:30 今回のお題～タイトル紹介
02:10 CMS機能の場所と使いかた
02:32 Figma SitesのCMS機能は、どんな場面で効果的なの？
03:12 CMS機能とデザインの連携～ベースとなるコンポーネントの用意～
04:00 CMS機能の管理画面に入ってデータを準備する
04:50 画像など、独自のフィールドを追加したい場合
05:20 CMS機能とデザインをつないでみる
05:50 CMS機能とデザインをつなぎ、実際にデータが入る様子
07:03 どう便利なのか？とCSV連携もできるという話
08:38 カードをスライダーのように動かす方法の話と、今回のまとめ
こんにちは。上武 ハヤです！今回は、Figma SitesにCMS機能がやってきた！というお話です🪄
みなさんこんにちは☺️
私は「上武 ハヤ（うぇぶ はや）」といいます✨
Web制作に関する動画配信をしているVの者(Vtuber)ですよー！
2026年2本目の動画は🥳！
Figma Sitesに最近登場した、「CMS機能」についての内容になります🪄✨
てみじかに言うと…
「デザイン」と、そこに載せる「情報」を分けて管理して、Webサイトをもっと管理しやすくする機能という感じですかねっ🥳
特に、「新着情報」とか「ニュース」、「記事一覧」とか「商品一覧」とか。
Webサイト上で、同じパーツが繰り返されるUIを持っているセクションをつくるのに便利な機能だと思います✨
このFigma Sites の「CMS機能」。3つの概念からできてるそうです☺️
昨年11月末頃に、いつの間にか登場していた「Figma Sites のCMS機能」。
こちら、なにやら次の3つの概念から構成されているようでして…
- ・(1). CMSコレクション…デザイン上に乗せたいデータを管理できるシート。「コンテンツのスプレッドシートのようなもの」と Figma公式の解説ページ では言われています。
- ・(2). CMSページ…コレクション内の各アイテムがもつ、詳細を表示できるページ。
- ・(3). CMSリスト…CMSコレクションがデザイン上に展開された、複数アイテムを表示するデザインブロック。
↑今回の動画では「CMSコレクション」の作成方法、それをFigma Sites上のデザインとどうやって連携するの😐❓
という部分についてを中心に、ご紹介しています！
ぜひとも今回の動画も！ご覧くださいね～☺️
【実践動画】【Figma Sites】に【CMS機能】を連携して！Webサイトを更新しやすくする方法！
【動画のChapter】
01:30 今回のお題～タイトル紹介
02:10 CMS機能の場所と使いかた
02:32 Figma SitesのCMS機能は、どんな場面で効果的なの？
03:12 CMS機能とデザインの連携～ベースとなるコンポーネントの用意～
04:00 CMS機能の管理画面に入ってデータを準備する
04:50 画像など、独自のフィールドを追加したい場合
05:20 CMS機能とデザインをつないでみる
05:50 CMS機能とデザインをつなぎ、実際にデータが入る様子
07:03 どう便利なのか？とCSV連携もできるという話
08:38 カードをスライダーのように動かす方法の話と、今回のまとめ
ぜひ、みなさんのチャンネル登録をお待ちしてますよっ！
上武 ハヤでした～！またねっ😉！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※この動画は個人によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※動画は自身の責任において閲覧ください。本記事掲載の動画の内容を無断で講座や教材等に転用することを禁じます。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。