FigmaでLPは作れる？公開方法と広告運用の注意点

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！

Figmaでデザインしたものを、そのままLPとして公開したいと考える方は多いと思います。FigmaでLPは作れます。 Figma Sitesを使えば、デザインを書き出してコーディングし直さなくても、そのままWebサイトとして公開できます。

ただし、Figma Sitesは2026年10月時点でもベータ版で、広告のLPとして運用するには注意点があります。特に、計測タグをページごとに入れられない点は、広告運用者にとって大きな違いになります。

この記事では、Figma SitesでLPを公開するまでの流れと、広告運用で詰まりやすい点を、Figmaの公式ヘルプをもとに整理します。

1. FigmaでLPは作れる？できることの範囲

1-1. Figma Sitesを使えば、デザインをそのまま公開できる

Figmaの公式ヘルプ「Figma Sitesを探る」によると、Figma SitesはConfig 2025でオープンベータとしてリリースされ、すべての有料プランで利用できます。スタータープラン（無料）向けには、限定的な体験版が近日提供予定とされています。

できることは、Figma Designとほぼ同じ感覚でのページ作りです。

• Figma Designで作ったデザインを、コピーと貼り付けでWebページにする
• ランディングページやヘッダー、フッターなどの既成のブロックを並べる
• 画面幅ごとにレイアウトを変える（ブレークポイント）
• ホバーやスクロールのアニメーションを付ける

1-2. Figma Sitesで問題なくできること

ページ単位で設定できる項目もあります。Webサイトの設定に関するヘルプ（英語版）によると、タイトル、メタディスクリプション、SNSで共有したときの画像、検索結果に出すかどうかは、サイト全体とページごとの両方で設定できます。

キャンペーンの告知ページや、デザインを見せることが目的のLPなら、Figma Sitesだけで十分に作れます。

2. Figma SitesでLPを公開する手順

2-1. 公開する前にサイトの設定を確認する

左のナビゲーションバーの設定アイコンから「General」を開き、タイトルやメタディスクリプションを入れておきます。広告から人を流すページなら、検索結果への掲載を外す設定もここで決めます。

2-2. 公開する

公開に関するヘルプ（英語版）によると、左のナビゲーションバーのファイルアイコンを開き、左のサイドバーの「Publish」から公開します。公開できるのは有料プランで、Educationプランは1サイトまでです。

公開すると、ランダムに作られたfigma.siteのサブドメインでサイトが見られるようになります。このサブドメインは後から変えられません。

注意したいのは、キャンバス上にあるWebページはすべて公開に含まれることです。ベータ期間中は、公開の準備ができていないページを別のファイルに移しておくよう案内されています。テスト用に作った別案のページを同じファイルに残したまま公開すると、そのページも公開されてしまいます。

2-3. 独自ドメインをつなぐ

カスタムドメインに関するヘルプによると、有料プランでは自社で持っているドメインをつなげます。つなげる数はプランで決まります。

プラン	つなげるカスタムドメインの数
プロフェッショナル	10個
ビジネス	無制限
エンタープライズ	無制限

カスタムドメインは2025年までは無料とされ、制限は今後変わる可能性があると書かれています。ドメインはレジストラで先に購入し、Figma側の手順に沿ってDNSの設定を変えます。

3. Figma Sitesで作ったLPが広告運用で詰まる点

3-1. 計測タグはサイト全体にしか入れられない

Webサイトの設定のヘルプにある表では、Google AnalyticsとCustom code（自由にコードを入れる欄）はサイト全体だけに設定でき、ページ単位では設定できません。

広告のコンバージョンタグは、申込完了ページだけに入れたいことがよくあります。サイト全体にしか入れられないと、すべてのページでコンバージョンが発火してしまうおそれがあります。

• 症状：Figma SitesでLPと申込完了ページを1つのサイトとして公開し、Meta広告のコンバージョンタグをCustom codeに入れました。翌日、広告の管理画面でLPを見ただけの人までコンバージョンとして数えられ、獲得単価が実態より大きく下がって見えていました。予算配分の判断を、その数字のまま進めてしまいました。
• 原因：Custom codeがサイト全体にしか設定できないためです。申込完了ページだけで発火させるつもりのタグが、LPを含むすべてのページで読み込まれていました。ページごとに入れ分けられる前提で設定すると、こうしたずれが起きます。
• 対策：コンバージョンの計測は、タグの発火条件をURLで絞れる仕組み（タグマネージャーなど）を使って、申込完了ページのURLのときだけ動くようにします。または、申込完了ページをFigma Sitesの外に置き、そちらにだけコンバージョンタグを入れます。
• 回避策：広告を出す前に、テスト用のアクセスでLPを開き、広告の管理画面でコンバージョンが増えていないかを確かめます。LPを見ただけでコンバージョンが増えたら、タグの発火条件を見直してから配信を始めます。

3-2. Cookie同意バナーで広告ピクセルが止まることがある

Figma SitesにはCookie同意バナーの機能があります。Cookie同意バナーのヘルプ（英語版）によると、広告ピクセルのようなマーケティング用のCookieを訪問者が拒否すると、関連するピクセルや一部の埋め込みが読み込まれなくなります。

バナーが表示されるのは、同意が必要な地域からの訪問者です。海外にも配信するLPでは、計測の数字が実際より少なく出る原因になりえます。

3-3. ABテストや配信の出し分けの設定はない

Webサイトの設定の項目に並んでいるのは、タイトルやメタディスクリプション、Google Analytics、Custom codeなどです。複数のパターンを出し分けて比べる設定や、流入元ごとにページを変える設定は含まれていません。

別案を試したいときは、別のページを作って広告のリンク先を分けることになります。その場合も、2-2で触れたとおり、同じファイルにあるページはすべて公開される点に気をつけてください。

4. Figma Sitesで足りるLP・別のツールが要るLP

こんなLPなら	判断
デザインを見せることが目的のブランドサイトや告知ページ	Figma Sitesで足りる
コンバージョンを1種類だけ測る、広告をあまり回さないLP	計測の発火条件を工夫すれば足りる
訴求を変えた複数のパターンを並行で配信して比べたいLP	別のツールが要る
申込完了ページごとに別のタグを入れ分けたいLP	別のツールが要る

デザインはFigmaで作り、広告を回すLPは運用向けのツールで公開する、という分け方もできます。

5. 10月の新機能｜コードレイヤーとFigma Specs

2026年10月14日〜15日のConfig India 2026で、Figmaはいくつかの新機能を発表しました。発表のまとめ（英語版）によると、主なものは次のとおりです。

機能	状態	対象
コードレイヤー（キャンバス上に動くコードを置く）	オープンベータ	全プランに順次
Figma Specs（デザインのルールを書いておく機能）	オープンベータ	プロフェッショナル・オーガニゼーション・エンタープライズ
MCPの改善	提供中	全プラン

コードレイヤーはAIクレジットを使いますが、有料プランでは2026年11月4日まで無料で作成・編集できるとされています。LPの動きのある部分を試作するときに使えます。

6. LPの制作と運用を1つの環境で行う「Squad beyond」

ここまで見てきたとおり、Figma Sitesはデザインを素早く公開するには向いていますが、ページごとの計測やパターンの比較は苦手です。

Squad beyondは、広告のLPを作って運用するためのツールです。LPを複製して訴求を変えたパターンを並行で配信し、ページごとにコンバージョンを比べられます。Figmaから書き出した画像をアップロードして、LPの素材として使うこともできます（出典：画像/動画をアップロードする｜Squad beyond FAQ）。

ほかのツールとの違いはLP作成ツール比較で、Canvaで作る場合はCanvaでLPは作れる？作り方と広告運用での限界で扱っています。

7. FigmaでのLP制作についてよくある質問（FAQ）

8. まとめ

FigmaでLPは作れます。Figma Sitesを使えば、Figma Designのデザインをコピーして、そのままWebサイトとして公開でき、有料プランなら独自ドメインもつなげます。

ただし、広告のLPとして運用するには注意点があります。Google AnalyticsとCustom codeはサイト全体にしか設定できず、ページごとにコンバージョンタグを入れ分けられません。キャンバス上のページはすべて公開されるので、テスト用のページの扱いにも気をつけてください。

デザインの公開はFigma Sites、広告で回すLPは運用向けのツール、と役割を分けると、計測のずれを避けやすくなります。

　

Squad beyondサービス紹介資料はこちらからダウンロード