HTML to Canvas：ビットマップと編集可能なFigmaレイヤーの違い
「HTML to canvas」には、html2canvasによるビットマップと、Figmaキャンバス上の編集可能なレイヤーという2つの意味があります。違いと使い分けを解説します。
EUREKA! · · 8 分で読めます
「HTML to canvas」は、検索する人によって2つの異なる意味を持つ言葉です。フロントエンド開発者が指すのは通常、DOM要素をHTMLの <canvas> にレンダリングすること、つまりhtml2canvasのようなライブラリの役割です。デザイナーが指すのは通常、作業できるように WebページをFigmaキャンバスに取り込むこと です。
どちらもHTMLから始まり、どちらも「キャンバス」と呼ばれるものに行き着きます。しかし結果は根本的に異なります。一方は ピクセルの平坦なグリッド、もう一方は 編集可能なレイヤーのツリー です。選択を誤ると時間を失うので、正確に区別しておく価値があります。
意味1：HTMLをHTMLの <canvas> へ（ビットマップ）
仕組み
HTMLの <canvas> 要素は描画面です。JavaScriptで描画できるピクセルの矩形領域です。html2canvas などのライブラリはDOMをたどり、計算済みスタイルを読み取って、Canvas 2D APIを使い ページをcanvasに描き直します。出力はPNGやJPEGとして書き出せるビットマップです。
関連する手法も、同じ種類の結果を生みます。
- ブラウザのスクリーンショット — ブラウザ自体のスクリーンショット機能、DevToolsの「Capture node screenshot」、ヘッドレスブラウザのスクリーンショットなど。
- SVGの
foreignObjectを使う手法 — HTMLをSVG内に埋め込み、それをcanvasに描画してピクセルを書き出します。 - サーバーサイドのスクリーンショットサービス — ヘッドレスブラウザがページをレンダリングし、画像を返します。
ビットマップが適している場面
画像そのものが成果物 である場合、ビットマップは非常に便利です。
- 「画像として共有」ボタン — チャート、領収書、引用カードなど。
- ビルド間でピクセルを比較するビジュアルリグレッションテスト。
- サムネイルやSNS用のプレビュー画像。
- ユーザーが見たものを正確に示す必要があるバグ報告。
- ある時点でのページの見た目のアーカイブ。
これらはいずれも、結果を編集する必要がありません。見られればよいのです。
ビットマップの限界
キャプチャしたページで 作業 したくなった途端、ピクセルが邪魔になります。
- 編集できない。 見出しを変えたり、間隔を調整したり、色を差し替えたりできません。上から塗りつぶすことしかできません。
- テキストがない。 テキストはピクセルです。選択も検索もできず、フォントサイズを確認したり、仕様書にコピーしたりもできません。
- 拡大するとぼやける。 ビットマップの解像度は固定です。拡大したり、1xのキャプチャを高密度ディスプレイに配置したりすると、輪郭がにじみます。
- 構造がない。 フレームも階層もなく、確認できる余白の値もありません。ボタンとその背後の背景は同じレイヤーです。
- レスポンシブでない。 1440で撮ったスクリーンショットは永遠に1440のままです。幅ごとに別のキャプチャが必要で、どれも意味のある形でリサイズできません。
- デザインシステムにならない。 色や文字をバリアブルやスタイルにできず、繰り返し要素をコンポーネントにすることもできません。
- 再現性の差（描き直し型の場合）。 DOMをcanvasに描き直すライブラリはCSSをJavaScriptで再実装しているため、新しいCSS機能やあまり一般的でないCSS機能は、実際のブラウザとは異なる表示になることがあります。
意味2：HTMLをFigmaキャンバスへ（編集可能なレイヤー）
仕組み
Figmaでいう「キャンバス」は、フレームが置かれる無限の作業スペースです。HTMLをFigmaキャンバスに置くとは、レンダリングされたページをFigmaネイティブのオブジェクトに変換すること を意味します。フレーム、テキストレイヤー、ベクター、画像の塗りです。
これを行うのが HTML to Frames です。ページを実際のブラウザでレンダリングし、ジオメトリと計算済みスタイルを計測したうえで、プラグインがFigma上に次のように再構築します。
- ページ構造を反映した 入れ子のフレーム（検証できた箇所にはAuto Layout付き）、
- 複数スタイルの混在、文字間隔、行の高さ、リンクを備えた 実際のテキストレイヤー、
- 編集可能なベクターとしてのSVG、
- object-fitやbackground-sizeを尊重した 画像の塗りとしての画像、
- ネイティブプロパティとしての ボーダー、角丸、シャドウ、グラデーション、ぼかし、描画モード。
結果は、編集、スタイル変更、リサイズ、コンポーネント化ができるものです。ページの写真ではなく、実際に使えるデザインファイルです。インポートの流れ全体は HTML to Figmaガイド で解説しています。
編集可能なレイヤーが適している場面
- 既存サイトから始める リデザイン。
- 余白、文字、色の 監査。
- デザインシステムの抽出 — カラーバリアブル、テキストスタイル、シャドウスタイル（Pro）。
- コードで作られたページの ハンドオフとレビュー（Chrome拡張機能 経由の
localhostを含む）。 - MCP経由で取り込んだ AI生成UIの仕上げ — AI to Figma をご覧ください。
- レスポンシブ対応の作業 — 1回のインポートでDesktop、Tablet、Mobileを作成。
比較表
| ビットマップ（html2canvas、スクリーンショット） | Figmaキャンバス上の編集可能なレイヤー | |
|---|---|---|
| 出力 | 1枚の平坦な画像（PNG/JPEG） | 入れ子のフレーム、テキスト、ベクター、画像 |
| テキストの編集 | 不可 | 可能 |
| 余白やサイズの確認 | ピクセルを測るしかない | 実際のフレームサイズ、パディング、間隔 |
| きれいに拡大縮小 | 不可（解像度固定） | 可能（ベクターと実テキスト） |
| レスポンシブなリサイズ | 不可 | Auto Layoutとコンストレイント |
| 色をバリアブルに | 不可 | 可能（Pro、Styles & variables） |
| コンポーネント | なし | 繰り返し構造から検出（Pro） |
| プロトタイプのリンク | なし | リンクとNavigateインタラクション |
| 向いている用途 | 共有、テスト、プレビュー、アーカイブ | リデザイン、監査、デザインシステム、ハンドオフ |
| 動作環境 | ページ内（JS）またはヘッドレスブラウザ | Figmaプラグイン（背後でブラウザがキャプチャ） |
要するに、html2canvasはピクセルを、HTML to FramesはFigmaキャンバス上のレイヤーを提供します。
実際のブラウザでレンダリングすることが重要な理由
どちらの方法も、そもそもページがどれだけ忠実にレンダリングされるかに左右されます。html2canvasのような描き直し型のライブラリはページ内で動作し、CSSのレイアウトと描画をJavaScriptで再実装 しています。一般的なスタイルならうまくいきますが、ライブラリが実装していないもの、あるいは微妙に異なる実装のものは、画像上のずれとして現れます。
HTML to Framesは別の方法をとります。公開ページ、ローカルファイル、貼り付けたコードは 隔離されたサンドボックスのブラウザ でレンダリングされ、Chrome拡張機能でキャプチャしたページは あなた自身のブラウザ から取り込まれます。いずれの場合も、プラグインはブラウザが実際に生成したジオメトリと計算済みスタイルを読み取り、Figmaオブジェクトとして再構築します。そのため、間違いやすい細部も正しく再現されます。
- Chromeと同じように描かれるリストマーカー、CSSカウンター、上付き・下付き文字。
- グラデーション — 線形、放射、円錐（pxのカラーストップや、繰り返し・タイル状のグラデーションを含む）。
- object-fit、background-size、タイリングを尊重した
srcsetの高解像度画像。 - 1辺だけ色の異なるボーダー、内側・外側のシャドウ、text-shadow。
ページは 一般の訪問者が見るとおりに キャプチャされます。Cookieバナーやポップアップは必要に応じて非表示にでき、アニメーションは停止されるため、遷移の途中ではなくきれいなフレームが得られます。
本当にcanvasであるものはどうなる？
ここで2つの意味が交わります。Webページの一部には本質的に ピクセルである ものがあり、どんな変換ツールでも意味のあるベクターレイヤーにはできません。
<canvas>に描画された WebGLや3Dシーン、- 一部のチャートやゲームなどの 2D canvasの描画、
- 埋め込みの 地図 を含む iframe、
- ポスター画像のない動画、
object要素とembed要素。
HTML to Framesはこれらを現実的に扱います。それぞれが その領域だけのスクリーンショット画像 として取り込まれます。画像は、それ以外は完全に編集可能なページの中で、正しい位置に正しいサイズで配置されます。ヒーローの見出し、ナビゲーション、カードは実際のレイヤーのままで、ビットマップになるのは3Dの製品ビューアや埋め込みの地図だけです。
アニメーションするコンテンツについては、きれいで安定したフレームを得ることを目指しています。アニメーションは停止 され、WebGLは数フレーム後に停止 されるため、キャプチャ前にシーンが意味のある内容を描画する時間が確保されます。
このハイブリッドは、たいていデザイナーが求めるものです。埋め込み地図の中身をリデザインすることはなく、デザインするのはそれを囲むカードです。埋め込み部分はスクリーンショットのプレースホルダー、それ以外はすべて編集可能、というのが実用的な結果です。
まだ変換されないもの
制限についても正確にお伝えします。skewや3DのCSS変形、path() によるclip-path、複数レイヤーのマスク、Display-P3カラーにはまだ対応していません。CSSの回転と拡大縮小、単一の clip-path 図形、mask-image、blurとbackdrop-blurには対応しています。全リストは 機能一覧 をご覧ください。
適切な方法の選び方
問うべきことは1つです。結果を誰かが編集するか？
- いいえ — 閲覧、共有、テストのため。 ビットマップを使いましょう。html2canvasやブラウザのスクリーンショットのほうがシンプルで速いです。
- はい — デザイン作業のため。 Figmaキャンバス上の編集可能なレイヤーを使いましょう。
- ほぼはい、ただし一部は地図、動画、3D。 編集可能なレイヤーを使いましょう。それらの領域は自動的に画像として取り込まれます。
実際のシナリオをいくつか紹介します。
- 「スライド用にこのチャートのPNGが欲しい。」 ビットマップ。
- 「料金ページをリデザインしたい。」 編集可能なレイヤー。インポートしてから反復します。
- 「本番環境とモックアップを比較したい。」 編集可能なレイヤーに、オプションの Reference screenshot（参照スクリーンショット、Pro）を組み合わせます。ピクセル単位で比較するときに表示を切り替えられる、非表示でロックされた画像レイヤーです。確認用のビットマップと作業用のレイヤーという、2つの意味がうまく連携する好例です。
- 「ログイン後のダッシュボードをFigmaに取り込みたい。」 Chrome拡張機能による編集可能なレイヤー。ブラウザで見えるページを、現在の状態も含めてキャプチャできます。
「とりあえずスクリーンショット」が後で高くつく理由
キャプチャは数秒で済むので、スクリーンショットのほうが速く感じられます。コストが現れるのはその後です。本格的なデザイン作業が始まると、誰かがすべてのフレームを手作業で作り直さなければなりません。ピクセルからパディングを測り、フォントサイズを推測し、テキストを打ち直し、色を再現する。1ページあたり何時間にもなります。
編集可能なレイヤーに変換すれば、その作業をツールに任せられます。計測されたサイズ、実際のテキスト、そしてProなら、ページそのものから生成されたバリアブル、テキストスタイル、コンポーネントが得られます。リデザイン全体でそれがどう機能するかは HTML to designワークフロー をご覧ください。
プライバシーについて
どちらの方法を選ぶにしても、ページがどこでレンダリングされるかを考えましょう。html2canvasはユーザーのブラウザ内のページで動作します。HTML to Framesは公開ページを 隔離されたサンドボックスのブラウザ でレンダリングし、結果を一度だけ届け、ディスクに書き込むことなくメモリから削除します。Chrome拡張機能はあなた自身のブラウザで動作し、Send to Figmaを使わない限り何も送信しません。詳しくは セキュリティのページ をご覧ください。
まとめ
- HTML to canvas（ビットマップ） はページをピクセルに変換します。共有、テスト、プレビューに最適ですが、編集はできません。
- HTMLをFigmaキャンバスへ 取り込むと、ページは作業できるフレーム、テキスト、ベクターになります。
- WebGL、地図、iframe、ポスター画像のない動画など、本当にcanvasであるコンテンツはその領域の画像としてキャプチャされ、それ以外は編集可能なまま残ります。
ご自身のページでレイヤーベースの方法を試すには、プラグインを入手して ドキュメント から始めるか、Auto Layoutエンジン がページ構造をどのようにフレームに変換するかをお読みください。
よくある質問
- html2canvasとは何ですか？
- html2canvasは、DOMをたどって計算済みスタイルを読み取り、ページをHTMLのcanvas要素に描き直すJavaScriptライブラリです。結果はPNGやJPEGとして書き出せるビットマップです。画像として共有する機能、プレビュー、バグ報告には便利ですが、出力は平坦なピクセルなので、テキスト、余白、レイアウト構造を後から編集することはできません。
- HTML to Framesはスクリーンショットツールですか？
- いいえ。HTML to Framesは、レンダリングされたページをFigmaネイティブのオブジェクトに変換します。入れ子のフレーム、実際のテキストレイヤー、編集可能なSVGベクター、画像の塗りで、検証できた箇所にはAuto Layoutが適用されます。WebGLキャンバス、iframe、地図、ポスター画像のない動画など、レイヤーで表現できないコンテンツだけが、その領域のスクリーンショットとしてキャプチャされます。
- WebGLや3Dのcanvasを編集可能なレイヤーにできますか？
- ブラウザはWebGLシーンをピクセルとして描画するため、どんな変換ツールでも意味のあるベクターにはできません。HTML to Framesは、その領域のスクリーンショット画像を正しい位置とサイズで配置し、描画内容が出揃うようWebGLを数フレーム後に停止します。見出し、ボタン、カードなど、周囲のものはすべて編集可能なままです。
- 編集可能なレイヤーではなくビットマップを使うべきなのはどんなときですか？
- 画像そのものが成果物で、誰も編集しない場合はビットマップを使いましょう。画像として共有するボタン、SNSのプレビュー、サムネイル、ビジュアルリグレッションテスト、バグ報告、アーカイブなどです。リデザイン、監査、デザインシステムの抽出、ハンドオフのレビューなど、ページがデザイン作業の出発点になる場合は、編集可能なレイヤーを使いましょう。
- インポートしたレイヤーを公開中のページと比較できますか？
- はい。Proでは、Reference screenshotオプションにより、キャプチャしたページの非表示でロックされた画像レイヤーがフレーム内に追加されます。表示を切り替えれば、編集可能なレイヤーを元のレンダリングとピクセル単位で比較でき、作業中は再び非表示にできます。HTML to canvasの2つの意味を1つのファイルで組み合わせた機能です。
Webをなぞって描き直すのは、もう終わりにしましょう。
リンクを貼るだけで、編集可能でレスポンシブな本物のFigmaレイヤーが数秒で手に入ります。無料で始められ、毎月10回インポートできます。