Figma Sites 2025（β版）

Figma Sites 2025（β版）

オープンβ対応版

Figmaのカンファレンス「Config 2025」で発表され、現在オープンβ版として公開されている「Figma Sites」の解説動画です。正式版のリリース後、こちらの動画コンテンツもそれに併せて差分を吸収して、この商品も正式版にアップデートされます。

既にFigma Design講座のいずれかのパッケージをご購入いただいた方は無料でご覧になれますので、改めてこちらをご購入いただく必要はございません。

※Figma Sitesを効率よく使うためにはFigma Designの知識が必要となりますので、動画内の解説の意味や操作がわからない場合は本サイトの「Figma Design」講座をお薦めいたします。
※本商品の購入後、販売中の「Figma Design」関連動画を後日あらためて購入される際には、チェックアウト時にクーポンコード「Z548MNAA4Y37」をご利用いただくことで現在の販売価格分の値引きが適用されます。

動画本数: 32本
（2025年10月3日現在。正式版に移行後、コンテンツを追加予定）

内容の紹介動画（YouTube）

【各講座の無料プレビュー公開中】

---

01. Figma Sitesの基本

1. Figma Sitesの全体像（06:52）
2. 左ナビゲーションバー（03:53）
3. 左サイドバー（03:11）
4. ツールバー（01:56）
5. 右サイドバー（02:09）
6. 設定（03:33）

02. 新規サイトとページ

1. 新規サイトの作成（05:31）
2. ページの追加と削除、管理（03:42）
3. ブレイクポイントの追加と削除（03:11）
4. ページへのオートレイアウト指定（02:45）
5. プライマリーブレイクポイント（03:32）
6. マッチングレイヤー（04:16）

03. コンテンツの作り込み

1. Sitesでのコンテンツの作り方（07:51）
2. プリセットを使ったサイト制作（04:21）
3. ブレイクポイント別の調整（08:07）
4. レスポンシブなコンポーネント作成（06:57）
5. レスポンシブなテキストスタイル（04:29）
6. Figma Designからの取り込み（11:03）
7. AIツール群の活用（02:57）
8. ライブラリの参照と更新（03:30）

04. インタラクションの追加

1. 外部サービスの埋め込み（05:29）
2. HTMLタグとWAI-ARIAの指定（06:13）
3. インタラクションの追加（04:13）
4. リンクの追加（04:07）
5. コードレイヤーを追加する（07:45）
6. ドロップダウンメニューの実装（08:09）

05. サイトのプレビューと公開

1. サイト／ページのプレビューと共有（02:33）
2. サイトとページの設定（03:51）
3. サイトの公開と更新、停止（04:41）
4. パスワード認証の追加（02:11）
5. クッキーバナーを表示する（02:13）
6. ドメインの設定（01:49）