1. TOP
2. レポート一覧
3. デザインから公開までFigmaだけでできる！Figma Sitesを使ってみよう

公開 2025.12.25

去る2025年11月20日（木）、オンラインセミナー「デザインから公開までFigmaだけでできる！Figma Sitesを使ってみよう」が開催された。

Figma Sitesとは、Figma上で作成したデザインをWebサイトとして公開できる機能のこと。今回は現在Webクリエイターとして活躍中の小泉誠氏、またUIデザイナー/フロントエンドエンジニアとして活躍中の庄司美幸氏をゲストに迎え、Figma Sitesの基本機能や実践的な使い方についてお話いただいた。

講師プロフィール

小泉 誠（MAKOTO KOIZUMI）

個人事業主 Studio FireColor

Studio FireColorの屋号でフリーランス歴12年。Web制作会社、SEO関連会社、システム開発会社などを経て独立。Webデザイナー、UI/UXデザイナー、フロントエンド、SEO、マーケティング、システム開発、動画制作、社内のIT化のコンサルティングなどなど。現在は「本人も職種がわからない…」といった感じで、ゼネラリスト道を邁進中。基本的にモノづくり好きで調理師免許を持ち、飲食店経営の経歴もあり。近年は自分で勉強会を主催したり、Web技術の講師などにも従事。現在は株式会社IMAKEにも役員として参画し、組織デザインに取り組んでいる。

庄司 美雪（MIYUKI SHOJI）

UIデザイナー / フロントエンドエンジニア

1992年2月8日生まれ。宮城県仙台市の文系大学を卒業後、東京でインフラエンジニアとして就職。その後、Web広告業界で営業や広告運用を経験し、広告に関わる中でWebメディア制作に関心を持ち、フロントエンドエンジニア兼Webデザイナーに転身。フリーランスを4年経て法人化し、現在はWebサイト・Webアプリ制作に限らず、コーディングメンターやコーチング、ライターなどWebに関わる様々な仕事を広く手がける。

Figmaでデザインする感覚でWebサイトの制作や公開が可能

庄司氏はFigma Sitesを「ノーコードでWeb制作ができるツール」だと説明する。小泉氏と庄司氏はFigma Sitesの使い方を解説する書籍の著者であり、そのLPを実際にFigma Sitesで制作したという。セミナーでは、実例として公開されたLPやそのソースとなる編集画面が共有された。

画面中央の「ホーム」セクションに、デスクトップ、タブレット、スマートフォン上での表示と、使用するカラーやコンポーネントなどがまとめられている。見た目はFigmaとほとんど変わらないため、庄司氏は「Figmaでデザインをする感覚でWebサイトの制作から公開までが可能」と話す。

そのうえで、庄司氏はFigma Sitesを使用する際のポイントを３つ挙げた。

1つめは、「FigmaでできることがFigma Sitesでもできるとは限らない」ということ。Figma Sitesはβ版ということもあり、画像の調整や線のグラデーションといった細かい部分で、Figmaでデザインした内容が再現できないことがある。Figma SitesでWebサイトを公開すると決めているのであれば、FigmaでデザインしてからFigma Sitesで公開するのではなく、最初からFigma Sitesでデザインから公開まで進めたほうがよい。

２つめは、「モバイルサイトから制作したほうがよい」ということ。原則的にモバイルサイトは縦1列のシンプルな構成であるため、まずはモバイルサイトでデザインを考えてから、デスクトップ・タブレットを意図した２列・３列のレイアウトを展開したほうが作りやすい。

最後の３つめは、「設計がすべてである」ということ。あらかじめコンポーネントを作成し、それらを組み立てるようにサイトを構築すれば、あとから色や見出しに変更があった場合でも一括で変更することができる。そのためには、最初にサイト構成をきちんと設計することが重要だ。

庄司氏：Figma Sitesには、まだまだ機能が制限されている部分もあります。しかし実際にひと通り使ってみた感触では、簡単なLPをサッと作って公開するようなレベルであれば十分使えるものであると思います。

Figma SitesでのWebサイト制作のコツ

次のセクションでは、小泉氏が実際にFigma Sitesを触りながら使い方のコツについて説明した。

Figma Sitesで新規作成を行うとページが１つ生成され、さらにモバイルサイトなどのページを追加することもできる。ここで重要なのが「プライマリーブレイクポイント」だ。ブレイクポイントとは、レスポンシブデザインにおいてデザインを切り替える起点となる幅のこと。小泉氏はFigma Sites上で、モバイルサイトにプライマリーブレイクポイントを設定した。

小泉氏：モバイルサイト用のページにレクタングルを置くと、他のページにもレクタングルが置かれましたね。今度はデスクトップサイトのページに円を置いてみますが、他のページには反映されません。このように、プライマリーブレイクポイントに行った変更は、他のページにも自動的に反映されます。Figma Sitesでは、プライマリーブレイクポイントに設定したページでまず作業し、ひと通り終えたところで他のページを更新すると効率的です。

Figma Sitesでは、Figmaのオートレイアウト機能をそのまま使用することができる。画面の幅に合わせて自動的にレイアウトが変更できる強力な機能であるが、それだけでは対応できない場面もある。

たとえば縦長のカードタイプの要素を設け、その中に見出し・画像・本文を配置したとする。これを横長のレイアウトにしたいとき、左側に画像、右側に見出し・本文の配置になることが理想だが、オートレイアウトでは左から見出し・画像・本文でレイアウトされてしまう（スクリーンショット参照）。

これを解決するのがバリアントだ。バリアントは、言わば画面サイズごとの「別バージョン」を作るもので、各サイズに対応したバリアントを作っておけば、サイトによって自動的にレイアウトが切り替わる。先ほどのカードタイプの例で言えば、「横長のレイアウトで左側に画像、右側に見出し・本文」となるバリアントを作り、デスクトップサイト用に設定すれば、理想とするレイアウトに自動的に切り替わるわけだ。

セミナーでは、小泉氏が実際にFigma Sitesを操作し、オートレイアウトによるレイアウトの変化や、バリアントの設定、コンポーネントの作成などを実演した。

テキストスタイルも、サイトごとに自動的に切り替えることができる。たとえばデスクトップサイトではフォントサイズを大きく、モバイルサイトでは小さく設定することが可能だ。

Webサイトのデザインが完了したら、いよいよサイトを公開する。公開画面でいくつかの項目を確認したあと、「公開」ボタンを押せば、Webサイトがインターネット上に公開される。ドメインを指定して公開することも可能だ。

小泉氏：現状のFigma Sitesでは、ドメイン直下のページのみが作成可能で、２階層以下のページを作ることはできません。その点は少し残念ですが、このようにWebサイトの制作から公開までが簡単にできることが理解いただけたかと思います。

Figma Sitesの利用には「目的の明確化と設計」が重要

セミナーの終盤、小泉氏と庄司氏はこの日の内容をまとめ、「目的の明確化と設計がすべて」だと語った。

小泉氏：現状はβ版ということもあり、すべてがFigma Sitesで完結するわけではありません。コーディングの手間は減るかもしれませんが、その分、綿密な設計が必要になります。Web制作の現場で使用するには、そのことを念頭に置いて使ったほうがいいでしょう。もちろん、個人でポートフォリオサイトを作って公開する、といった場合には、とても便利なツールだと思います。

セミナーは参加者の質疑応答で締めくくられた。寄せられた質問からピックアップして掲載する。

「設計がすべて」というお話でしたが、制作途中で修正が何度も入り、最初の設計とは違うものができあがることも少なくありません。最初はざっくりしたデザインでもいいのかもしれない、と感じることもあるのですが、どう考えればよいでしょうか。

「変更に耐えうる設計」を考えることが大切です。

小泉氏：これはFigma Sitesに限らない話ですが、設計にはある程度の柔軟性が必要だと思っています。たとえばセミナーで説明したテキストスタイルは、サイズのほかに色やスタイルも登録できます。そこをきちんと設計していれば、あとから色の変更があっても、簡単に全体に色の変更を反映できます。最初から「変更に耐えうる設計」を考えておくことが大切です。

ブログ機能を組み込むことはできますか？

CMS機能を使えば実現可能です。

小泉氏：Figma Sitesでブログを作ろうとすると、ブログ記事を追加するたびに逐一ページを作ることになり、あまり現実的ではない……のですが、実はこのセミナーの前日にCMS機能が実装されたので、ブログのようなこともできるようになりました。記事の追加や更新がCMS上からできるようなので、さらに使い方の幅が広がったと思います。