HTML to Figma：HTMLをFigmaに変換する方法【2026年完全ガイド】

どのデザインチームも、いつか同じ壁にぶつかります。作業したいものはブラウザ上のHTMLとして存在しているのに、作業したい場所はFigmaだという壁です。リデザイン前のクライアントの公開サイトかもしれませんし、開発者がリリースしたばかりのステージングビルドや、AIツールが数秒で生成したランディングページかもしれません。手作業で作り直せば何時間もかかります。スクリーンショットを貼り付けても、見ることはできても編集はできません。

このガイドでは、HTML to Framesプラグインを使って、HTMLをFigmaに本物の編集可能なレイヤー（フレーム、テキスト、ベクター、画像）として変換する方法を解説します。ページを取り込む5つの方法、画面の選び方、オンにすべきオプション、きれいに変換されるものとされないもの、そして最もよくある問題である不足フォントの解決方法を学べます。

そもそも、なぜHTMLをFigmaに変換するのか？

ブラウザとデザインツールは、別々の問題を解決します。ブラウザはリリースされるものの信頼できる情報源であり、Figmaは検討し、注釈を付け、比較し、引き渡す場所です。変換すれば、現在の実態を意思決定の場に持ち込めます。

チームが変換を行うよくある理由：

• リデザイン。 白紙のキャンバスではなく既存のサイトから始めれば、変更する前に実際に何があるのかを把握できます。詳しくはWebsite to Figmaリデザインガイドをご覧ください。
• 監査。 DevToolsから推測するのではなく、余白、文字サイズの体系、色の使い方をレイヤーごとに確認できます。
• デザインとコードのずれ。 リリースされたバージョンをFigmaに取り込み直し、元のモックアップと比較できます。
• 逆方向の開発者ハンドオフ。 フロントエンド開発者が localhost で作ったものを、デザイナーがFigmaでレビューし、磨き上げます。
• AIが生成したUI。 ClaudeやCursorなどのツールはHTMLを素早く生成します。それを本番品質に仕上げる場所がFigmaです。
• 学習。 学生やジュニアデザイナーは、よくできたサイトをレイヤーごとに研究できます。

これらすべてに共通するキーワードは編集可能であることです。ビットマップはページを見せるだけですが、レイヤーなら変更できます。

HTMLをFigmaに取り込む5つの方法

HTML to Framesは、5種類のソースからWebページを受け付けます。HTMLがどこにあるかに合わせて選んでください。

1. Link（単一の公開URL）

Linkタブに公開WebページのURLを貼り付けます。ページは隔離されたブラウザでレンダリング・測定され、Figmaレイヤーとして再構築されます。ページが公開されているなら、これが最速の方法です。この流れについて詳しくはURL to Figmaをご覧ください。

2. Multiple（最大10件のリンク）

Multipleタブでは、一度に最大10件のリンクを扱えます。リンクは順番に処理され、各ページがキャンバス上の1行になるので、ホームページ、料金ページ、ブログ記事を横に並べて比較できます。MultipleインポートはFreeを含むすべてのプランで利用できます。

3. ローカルファイル、フォルダ、.zip、コードの貼り付け

HTMLがまだ公開されていない場合は、Local fileタブを使います：

• 単一のHTMLファイル
• サイトフォルダ全体（ドラッグ & ドロップしてから、インポートするページを選択）
• .zipアーカイブ
• Paste code（コードを貼り付け）— 生のHTMLとCSS

アップロードは最大30 MBまでです。ファイルは隔離されたブラウザ内でメモリから開かれ（file:// を経由することはありません）、インポートが完了するとすぐに削除されます。中断されたアップロードは2分後に削除されます。詳細はセキュリティページをご覧ください。

4. Browser（無料のChrome拡張機能）

サーバーからはアクセスできないページもあります。ログイン後のダッシュボード、localhost、プライベートネットワーク、あるいは特定の状態にあるページ（開いたメニュー、入力済みのフォーム、商品が入ったカート）などです。そうしたページには、無料のHTML to Frames Chrome拡張機能をインストールしてください。

ページ全体をキャプチャすることも、単一の要素を選択することもできます（ホバーでハイライト、矢印キーで親要素や子要素に移動、Enterでキャプチャ、Escでキャンセル）。結果はクリップボードまたは .h2f ファイルに保存され、プラグインのBrowserタブに貼り付けます。さらに簡単な方法として、ワンタイムコードで拡張機能をプラグインに一度接続してSend to Figmaを使えば、キャプチャが開いているプラグインに直接届きます。

5. MCP経由のAIツール

AIアシスタントでUIを作っているなら、プラグインのAIタブからClaude Code、Claude Desktop、Cursor、その他あらゆるMCPクライアントを接続できます。トークンとコピー & ペーストで使える設定が表示されます。接続後、アシスタントが import_html（最大2 MBのHTML）、import_url、import_status を呼び出すと、ページが開いているプラグインに届き、あなた自身のプランでインポートされます。claude.aiのWebコネクタにはまだ対応していません。詳しくはAI to Figmaをご覧ください。

どの方法を使うべき？

ステップバイステップ：HTML to Framesでページを変換する

一般的な公開ページの場合の流れは次のとおりです。

1. Figmaのデザインファイルでプラグインを開き、Linkタブを選びます。
2. 変換したいページのURLを貼り付けます。
3. 画面を選びます — Desktop（Site width）、Laptop、Tablet、Mobile、またはワンクリックのResponsive set。
4. Auto Layout、Full page、Images、Hide cookie banners & popupsなどのオプションを確認します。
5. インポートを開始します。 インストールされていないフォントがページで使われている場合は、構築前にMissing fonts画面が表示されます。
6. 不足しているフォントの代替フォントを選びます（提案をそのまま採用してもかまいません）。
7. 結果画面を確認します。 フレーム、レイヤー、Auto Layoutの割合、不足フォント、警告が一覧表示されます。
8. 編集を始めます。 ページは、本物のテキスト、ベクター、画像を持つ入れ子のFigmaフレームになっています。

各画面はそれぞれ独立したフレームになり、example.com/pricing — Desktop (1920) のような名前が付きます。プロトコルや www は付かず、最大60文字なので、大量にインポートしてもレイヤーパネルで見渡しやすいままです。

画面の選び方：Site widthとは

画面の選択は、見た目以上に重要です。間違った幅でレンダリングされたページは、不自然に引き伸ばされるか、デザイナーが意図していないレイアウトに押し込まれてしまいます。

Desktop = Site width

HTML to Framesは、とりあえず1440を選んでうまくいくことを祈るわけではありません。インポート時にページの実際のデザイン幅を測定します：

• 全幅のデザイン（背景が端から端まで広がるもの）は、コンテンツボックスを中央に置いた1920で取り込まれます。
• 本当にボックス型のサイトは、そのボックス幅（例：1200、1280、1440）で取り込まれます。
• 固定コンテナのないフルードなサイトは1440で取り込まれます。

推測ではなく実測です。複数ページのインポートでは、1つのサイトのすべてのページが1つの幅を共有するので、フレームがきれいに揃います。

その他の画面

• Laptop — 1280
• Tablet — 768
• Mobile — 390
• Custom width — 必要な任意の幅（Pro）

Responsive setを使えば、Desktop、Tablet、Mobileをワンクリックで取得できます。同じページの画面は並列でキャプチャされます。

Freeでは、1回のインポートにつき1画面です。ProとTeamでは、1回のインポートにつき最大4画面まで使えます。重要なのは、1インポート＝すべての画面を含む1ページであることです。1ページのレスポンシブセットは1回のインポートとして数えられます。プランの詳細は料金をご覧ください。

知っておきたいオプション

ほとんどのページはデフォルト設定で問題ありませんが、次のオプションは理解しておく価値があります：

• Auto Layout — ブラウザのジオメトリからスタック、間隔、パディング、配置を推定し、結果を確定する前に検証します。仕組みはAuto Layoutの解説で説明しています。
• Styles & variables（Pro）— カラー変数、テキストスタイル、シャドウスタイルを作成し、ファイルにすでにあるものは再利用します。
• Snap to my file's styles（Pro）— 完全一致がない場合、色と文字をあなた自身のデザインシステムで最も近いスタイルに合わせます。
• Full page — 最初のビューポートだけでなく、スクロールするページ全体をキャプチャします。
• Images — 画像の塗りを含めるか省略するかを選びます。
• Hide cookie banners & popups — オーバーレイなしで、通常の訪問者が見るとおりにページをキャプチャします。
• Color scheme — Light、Dark、またはLight + Dark（Pro）。Light + Darkは両方のモードを持つ1つの変数コレクションを作成します。
• Detailed layers（Pro）、Reference screenshot（Pro、比較用の非表示でロックされたレイヤー）、Extra wait（Pro、読み込みの遅いページ向け）。
• Accordion text as notes — デフォルトはオフ。閉じた <details> のテキストをFigmaの注釈に変換します。
• Page language — 15言語に対応し、多言語サイトで役立ちます。

変換されるもの、されないもの

目標は実際に作業できるデザインファイルなので、何が取り込まれるのかを正確に知っておく価値があります。

編集可能なレイヤーに変換されるもの

• 入れ子のフレームとしてのレイアウト（検証できる箇所ではAuto Layout付き）
• 混在スタイル、リンク、文字間隔、行の高さ、text-transformを含むテキスト
• 色とグラデーション — pxでの停止位置や繰り返しグラデーションを含む、線形・放射・円錐グラデーション
• object-fit、background-size、タイル、高解像度の srcset に対応した画像
• 編集可能なベクターとしてのSVG
• ボーダー（片側だけ異なる色のものを含む）、角の半径、シャドウ（内側、外側、text-shadow）
• 不透明度、ブレンドモード、ぼかし、背景ぼかし
• CSSの回転と拡大縮小、filter: grayscale/opacity
• ::before と ::after、clip-path、mask-image
• フォームフィールド、Chromeと同じように描画されるリストマーカー、CSSカウンター、上付き・下付き文字
• Shadow DOMと正しいz-indexの順序

画像として取り込まれるもの

レイヤーとして表現できないコンテンツもあります。iframe（埋め込み地図など）、ポスター画像のない動画、WebGLや3Dのcanvas、object/embed 要素は、そのボックスだけのスクリーンショットとしてキャプチャされます。ページの残りの部分は編集可能なままです。その理由はHTML to canvasの比較記事で説明しています。

まだ対応していないもの

• スキューと3D変形
• path() を使ったclip-path
• 複数レイヤーのマスク
• Display-P3カラー

きれいな結果を得るためのヒント

いくつかの習慣で、結果は目に見えて変わります：

1. マーケティングサイトでは**「Hide cookie banners & popups」をオンにしましょう**。そうしないと、同意ダイアログがヒーローセクションの上に重なることがあります。
2. 認証が必要なページにはChrome拡張機能を使いましょう。 サーバーはあなたとしてログインできませんが、あなたのブラウザはすでにログインしています。
3. 状態は意図的にキャプチャしましょう。 まずブラウザでメニューを開いたりフォームを入力したりしてから、拡張機能でキャプチャします。
4. 料金カードやナビゲーションバーなど、コンポーネントだけが必要なときは単一の要素を選択しましょう。キャプチャが小さいほど、整理も早く済みます。
5. コンテンツの読み込みが遅いページではExtra wait（Pro）を使いましょう。
6. インポート結果が公開中のページと一致することを示す必要があるときは、Reference screenshot（Pro）を追加しましょう。表示を切り替えて比較できる、非表示でロックされたレイヤーです。
7. 3回に分けてインポートする代わりに、レスポンシブセットでインポートしましょう。1回のインポートで済み、フレームもまとまって配置されます。
8. 最初のインポートの後はImport linked pagesを使って、同じサイトの他のページを選びましょう。Multipleインポートとして取り込まれます。
9. 公開中のページが変わったらワンクリックでRe-importしましょう。ソースURLはフレームに保存されています。

不足フォントの解決

インポートしたページが「何か違う」ように見える最もよくある原因は、不足フォントです。サイトがライセンス書体や、ローカルにインストールされていないWebフォントを使っているのかもしれません。

HTML to Framesは、レイヤーを構築する前にこれに対処します：

1. キャプチャ後、Missing fonts画面に、ページで使われているがFigmaで見つからないすべてのファミリーが一覧表示されます。
2. それぞれについて、プラグインが代替フォントを提案します。そのまま採用することも、別のフォントを選ぶこともできます。
3. 選択はサイトごとに記憶されます（お好みですべてのサイト共通にもできます）。同じドメインからの次回のインポートでは、もう尋ねられません。

フォントの置き換えはすべてのプランで利用できます。フォントはローカルで一覧表示されるだけで、プラグインがFigmaファイルの内容を読み取ることはありません。長期的にそのデザインで作業を続けるなら、サイトが実際に使っている書体をインストールするのが、やはり最も正確な方法です。

次のステップ

HTMLをFigmaに変換するのは最初の一歩にすぎません。価値が生まれるのは、そのレイヤーを使って何をするかです：

• リデザインを計画中なら、HTML to designのワークフローをお読みください。
• AIが生成したページを扱うなら、AI to FigmaとMCP経由でAI生成UIをFigmaへ取り込むガイドをご覧ください。
• localhostやログイン後のページが必要なら、Chrome拡張機能から始めましょう。
• ツールを比較しているなら、代替ツール比較ページで選択肢を公平にまとめています。

準備ができたら、プラグインを入手して、いま作業しているページで試してみてください。すべてのオプションの詳細はドキュメントで解説しています。