2026年9月7日

WordPressにFigmaのデザイン・プロトタイプを埋め込む方法（埋め込みコードとカスタムHTML）

メディア・画像

Figma のデザインファイルやプロトタイプは、Figma が発行する埋め込みコード（iframe）を使えば WordPress のページに表示できます。クライアント向けの確認ページや、デザインの解説記事に使えます。

WordPress 本体は Figma の oEmbed に対応していないため、YouTube のように URL を貼るだけでは埋め込まれません（URL はリンクとして表示されます）。この記事では、Figma で埋め込みコードを取得し、WordPress の「カスタム HTML」ブロックに貼る手順を説明します。内容は Figma の公式ヘルプと開発者向けドキュメントで確認しています（2026年11月時点）。

埋め込む前に確認すること

Figma の公式ヘルプによると、埋め込みは全プランで使え、Figma Design・FigJam・Figma Slides のファイルとプロトタイプが対象です。表示できるかどうかは、Figma の共有設定で決まります。

共有設定	ページの訪問者から見えるか
リンクを知っている全員が閲覧可	ログインしていない訪問者も閲覧できる
組織（チーム）のメンバーだけ	組織のメンバーが Figma にログインしている場合だけ表示される
パスワード付き	埋め込みからは開けない

不特定の読者に見せる記事なら、リンクを知っている全員が閲覧できる設定にします。逆に、社外に出せないデザインは公開ページに埋め込まないでください。埋め込みコードはページの HTML に含まれるため、ページを見られる人はファイルの URL も知ることができます。

手順1: Figmaで埋め込みコードを取得する

デザインファイル・FigJamの場合

ファイルを開きます。特定のフレームだけを見せたい場合は、そのページを開いて最上位のフレームを選択しておきます。
右サイドバーの「Share」をクリックします。
閲覧できる相手と権限を設定します（公開記事なら、リンクを知っている全員・閲覧のみ）。
「Get embed code」をクリックします。
「Copy」で埋め込みコードをコピーします。

プロトタイプの場合

ファイルとページを開き、「Present」をクリックして、左サイドバーでフローを選びます。
ツールバーの「Share prototype」をクリックします。
閲覧できる相手と権限を設定します。
「Get embed code」のリンクをクリックします。
「Copy」で埋め込みコードをコピーします。

デザインファイルの埋め込みとプロトタイプの埋め込みは別物です。画面遷移を操作して見せたい場合は、プロトタイプ側からコードを取得します。

手順2: WordPressのカスタムHTMLブロックに貼る

投稿または固定ページの編集画面を開きます。
ブロック挿入ツール（「+」）で「カスタム HTML」を検索して追加します。
コピーした埋め込みコードを貼り付けます。
ブロックのツールバーで「プレビュー」に切り替えると、エディター上で表示を確かめられます。
下書きを保存し、プレビューで表示を確認してから公開します。

クラシックエディターの場合は「テキスト」タブに切り替えて貼ります。ビジュアルタブに貼ると、コードが文字として入ってしまいます。

iframe を含む HTML を保存できるのは、unfiltered_html 権限を持つユーザー（通常のサイトでは管理者と編集者）だけです。投稿者・寄稿者が貼った iframe は保存時に取り除かれます。マルチサイトでは、特権管理者以外は unfiltered_html を持ちません。

埋め込みコードの形とURLパラメーター

Figma の開発者向けドキュメントでは、埋め込みの src は次の形と説明されています。

https://embed.figma.com/{design|board|proto}/ファイルキー

design はデザインファイル、board は FigJam、proto はプロトタイプです。ドキュメントに載っている例は次のとおりです。

<iframe src="https://embed.figma.com/design/nrPSsILSYjesyc5UHjYYa4?embed-host=figma-embed-docs" height="450px" width="100%" allowfullscreen></iframe>

embed-host は埋め込み先を識別する文字列で、必須のパラメーターです。「Get embed code」で取得したコードには最初から付いているので、消さないでください。

必要に応じて、次のパラメーターを URL に &名前=値 で追加できます（開発者向けドキュメントより）。

パラメーター	内容	既定値
`node-id`	表示するページやフレーム	なし（フレームを選んで取得したコードには付く）
`footer`	下部の Figma のフッターを表示するか	`true`
`viewport-controls`	パン・ズームの操作を許可するか（Slides ではスライド送り）	`true`
`page-selector`	ページ切り替えを表示するか	`true`
`theme`	埋め込みの UI を `light`・`dark`・`system` から選ぶ	`light`
`mode`（`m`）	`dev` で Dev Mode として開く	なし

たとえば、フッターとページ切り替えを消すには、src の末尾に &footer=false&page-selector=false を足します。

スマートフォンでも縦横比を保つCSS

Figma のコードは width と height が固定の数値になっていることがあり、そのままだとスマートフォンで横にはみ出したり、縦に間延びしたりします。埋め込みコードを div で囲み、CSS で幅と縦横比を指定します。

カスタム HTML ブロックには次のように貼ります（width・height は外し、src は取得したコードのまま）。

<div class="figma-embed">
  <iframe src="取得したコードの src の値をそのまま" allowfullscreen></iframe>
</div>

CSS は、クラシックテーマなら「外観」→「カスタマイズ」→「追加 CSS」、ブロックテーマならサイトエディターのスタイル画面にある「追加 CSS」に書きます。

.figma-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

aspect-ratio は現在の主要ブラウザーが対応しているプロパティで、padding-top と position: absolute を組み合わせる古い書き方は不要です。縦長のモバイル画面のデザインを見せる場合は、aspect-ratio: 9 / 16; と max-width を組み合わせるなど、デザインに合わせて比率を変えます。

表示されないときの確認点

症状	確認すること
ログインを求められる	共有設定が組織内だけになっていないか。公開記事ならリンクを知っている全員が閲覧できる設定にする
何も表示されない・アクセスできない	ファイルにパスワードが設定されていないか
埋め込み内で許可を求められる	ブラウザーが埋め込みコンテンツの許可を求めている。Figma のヘルプにあるとおり、訪問者が許可すると表示される
保存したら iframe が消えた	保存したユーザーに `unfiltered_html` 権限がない
URLを貼ったらリンクになった	WordPress は Figma の oEmbed に対応していない。埋め込みコードをカスタム HTML ブロックに貼る
デスクトップアプリで見えない	Figma のヘルプでは、埋め込みはブラウザーで動くアプリケーションが対象とされている

運用上の注意

共有設定はファイル単位で管理する: 埋め込みは Figma の共有設定に従います。あとで共有範囲を狭めると、公開ページの埋め込みも見えなくなります。記事で使うファイルは、公開してよい内容だけを置いた専用のファイルに分けると管理しやすくなります。
埋め込みは最新の内容を表示する: Figma 側でデザインを変更すると、埋め込みにも反映されます。記事で特定の時点のデザインを説明している場合は、画像として書き出して掲載するほうが説明と食い違いません。
外部サービスの読み込みをプライバシーポリシーに書く: 埋め込みのあるページを開くと、訪問者のブラウザーは Figma のサーバーに接続します。
1ページに多数並べない: 埋め込みは1つずつ Figma の画面を読み込むため重くなります。多数のフレームを見せる場合は、node-id でフレームを分けた埋め込みを数個に絞るか、画像で掲載します。

まとめ

WordPress は Figma の oEmbed に対応していないため、Figma の「Get embed code」で取得したコードを「カスタム HTML」ブロックに貼る。
公開ページで見せるには、Figma の共有設定をリンクを知っている全員が閲覧できる設定にする。組織内限定は要ログイン、パスワード付きは表示できない。
footer・page-selector・theme などのパラメーターで表示を調整でき、embed-host は消さない。
iframe を保存できるのは unfiltered_html 権限を持つユーザーだけ。レスポンシブ表示は aspect-ratio で指定する。