記事よりも動画で見たい方はこちら！（チャプター付きリンク有）
【動画のChapter】
02:13 タイトル
02:48 実際にFigmaを操作しながら解説
03:31 プロジェクト一覧から「サイト」作成～適切なサイズ更新、デザイン配置
06:00 デザインデータをWebサイト公開する直前の、自動修正の方法
06:55 Webサイトとして公開
07:30 シークレットウインドウで確認してみる
08:10 テキスト情報が生きている状態で生成されたことの確認
08:45 リンクの設定方法→ECサイトへ遷移させる
10:55 h1, h2等見出しタグの設定方法、そのほか「Figma Sites」でできること
13:05 「Figma Sites」は、ゲームチェンジャーになり得るかも！
14:38 「Figma Sites」を使用できるプランについて
はじめまして。上武 ハヤです。
みなさんこんにちは～！！
はじめまして！私は、「上武 ハヤ（うぇぶ はや）」といいます！
最近、動画配信を始めたVの者(Vtuber)です！
tedateさんのCSS解説動画（近日公開予定）を制作したご縁で、こちらにも投稿させてもらうことになりました！
よろしくおねがいします！
さて、今日なんですが。
あのですねー、みなさん、Figma、つかってますか？
私はよく使っているんですが（あ、普段は私もWebデザイン・Web制作のお仕事してます！）、最近そのFigmaにすんごい機能が追加されたの、知ってますでしょうか？
その機能とは…
「デザインから一発で、Webサイトを生成できる機能」なんです！
その名は「Figma Sites」。
つい先日、今年の5月2週目にアメリカ（とイギリス）で開催されていたFigmaのカンファレンス、「Figma Config 2025」で発表されて、その後リリースされた超機能なんです！！
機能の例をあげると…
・デザインデータだけで、本当に一発でWebサイトを生成可能（画像ではなく、コーディングされたhtmlとして生成されます）
・レスポンシブにも対応（レスポンシブ用にデザインを用意しておけば一発でいけます）
・見出しタグをh1～h6までデフォルトで、デザインデータ上で設定できる
・デザイン上に直接リンクを貼ると、それが生成されたサイトにもしっかり反映される
・HTMLを直接編集できる機能も近日リリース予定とのこと
…と。夢の様なはたらきをしてくれる、神ツール爆誕なんです！！！
私も実際使ってみたんですが、これ、本当にすごかったです。
「ゲームチェンジャー」になりえます。おそらく、Webデザイン、Web制作のワークフロー、変わってくると思います。
今までこの分野（デザイン主体で、ノーコードでサイト化させるツール）では、Studioというノーコードツールがありましたが、
圧倒的に「Figma Sites」が強いです！！もう圧勝。Figma優勝。
ということで、実際に使ってみた様子を動画として配信してますので、ぜひご覧ください！
【実践動画】【Figma Sites】つかってみた！
【動画のChapter】
02:13 タイトル
02:48 実際にFigmaを操作しながら解説
03:31 プロジェクト一覧から「サイト」作成～適切なサイズ更新、デザイン配置
06:00 デザインデータをWebサイト公開する直前の、自動修正の方法
06:55 Webサイトとして公開
07:30 シークレットウインドウで確認してみる
08:10 テキスト情報が生きている状態で生成されたことの確認
08:45 リンクの設定方法→ECサイトへ遷移させる
10:55 h1, h2等見出しタグの設定方法、そのほか「Figma Sites」でできること
13:05 「Figma Sites」は、ゲームチェンジャーになり得るかも！
14:38 「Figma Sites」を使用できるプランについて
みなさんぜひぜひ、チャンネル登録お待ちしてます！
上武 ハヤでした～！またねー！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。