急に秋めいてきた気がしますが、いかがお過ごしでしょうか。このまま秋らしくなってくれたら良いのですが…。
さて、現在Figmaの新しい機能？というかサービス？である「Figma Sites」がオープンβ版として公開されています。先月からは無償版のアカウントでも利用可能になったり、WAI-ARIAのサポートやパスワード認証が付けられるようになったりと、正式版に向けて機能追加がおこなわれているようです。
そんなFigma Sitesの正式版がリリースされる前の現段階（2025年10月初頭）ではありますが、オープンβを使い込んで解説動画のコンテンツを作ってみました。Figma Designの使い方がある程度わかっていないとこれもまた使えないかと思いますので、操作を理解されている方推奨です。また、まだβ版である以上、画面や操作などの変更が発生する可能性がありますが、そこはそれ正式版になったら差分を見ながらコンテンツを追加するという方向でコンテンツを販売したいと考えております。
商品ページはまだ準備しておりませんが、これまで当サイトのFigma Design動画（どれでも構いません）をご購入いただいた皆様を対象にして、Figma Sitesの解説動画を先行して公開しました（もちろん、こちらは無料。正式版になっても無料のままで提供いたします）。これから単体商品の販売前までに、Figma Designの解説動画をいずれかご購入いただいた場合ももちろん無料でご覧になれますのでご安心ください。
ご購入いただいたアカウントでログインし、注文履歴の商品からマイコースにアクセスしてください。マイコースのトップにご注文頂いた商品と並んで「Figma Sites（β版）」のコンテンツが表示されているかと思います。誰よりも先に使い方をマスターしましょう。
※正式版のリリースでコンテンツを追加することになるのは間違いないので、現段階でのコンテンツは少し余裕を持たせた形にしています。2025年10月2日現在のコンテンツは以下の通りです。
Figma Sites 2025 β版
01. Figma Sitesの基本
- Figma Sitesの全体像（06:52）
- 左ナビゲーションバー（03:53）
- 左サイドバー（03:11）
- ツールバー（01:56）
- 右サイドバー（02:09）
- 設定（03:33）
02. 新規サイトとページ
- 新規サイトの作成（05:31）
- ページの追加と削除、管理（03:42）
- ブレイクポイントの追加と削除（03:11）
- ページへのオートレイアウト指定（02:45）
- プライマリーブレイクポイント（03:32）
- マッチングレイヤー（04:16）
03. コンテンツの作り込み
- Sitesでのコンテンツの作り方（07:51）
- プリセットを使ったサイト制作（04:21）
- ブレイクポイント別の調整（08:07）
- レスポンシブなコンポーネント作成（06:57）
- レスポンシブなテキストスタイル（04:29）
- Figma Designからの取り込み（11:03）
- AIツール群の活用（02:57）
- ライブラリの参照と更新（03:30）
04. インタラクションの追加
- 外部サービスの埋め込み（05:29）
- HTMLタグとWAI-ARIAの指定（06:13）
- インタラクションの追加（04:13）
- リンクの追加（04:07）
- コードレイヤーを追加する（07:45）
- ドロップダウンメニューの実装（08:09）
05. サイトのプレビューと公開
- サイト／ページのプレビューと共有（02:33）
- サイトとページの設定（03:51）
- サイトの公開と更新、停止（04:41）
- パスワード認証の追加（02:11）
- クッキーバナーを表示する（02:13）
- ドメインの設定（01:49）