公開中のWebサイトは、無料のFigmaプラグイン「Site Porter for Figma」を使うと、文字・画像・フレームを編集できるFigmaのレイヤーとして組み直せます。
STUDIOのテンプレート7件では、文字の98%以上が編集できるTextになりました。
WordPressなど、HTMLで作った一般のサイトも取り込みの対象です。
Figmaに取り込んだ3サイトでは、すべての要素が元ページから2px以内の位置に収まっています。
取り込みに使う「変換バンドル」は、MOTOKI合同会社が有料で作成します。
なお、Site Porter for Figmaの開発元は、Figmaメソッドの運営元であるMOTOKI合同会社です。
プラグインは、Figma CommunityのSite Porter for Figmaのページから無料で追加できます。
Site Porter for Figmaでできること
公開サイトを「変換バンドル」（レイアウトの情報を書いたJSONと画像）にし、プラグインがそれを読んでFigmaのレイヤーを作ります。
元のデザインデータを復元するのではなく、ブラウザに表示された見た目を測って再構築する方式です。
2026年11月5日時点で公開しているのは、2026年10月18日のバージョン1です。
| Webサイト | Figmaでの形 |
|---|---|
| 文字 | Text（フォント・太さ・サイズ・色・行送り・字間・揃え・改行をそのまま。文字単位の書式も保つ） |
| 画像（背景画像・img） | 差し替えできる独立した画像レイヤー。SVGはベクター |
| セクション | セクションごとのFrame。中の要素はFrameの入れ子 |
| ボタン（CTA） | 枠（グラデーション・角丸・影）と文字を分けたレイヤー |
| 角丸・罫線・影・グラデーション・背景ぼかし・描画モード | Figmaの同じ機能 |
| PC表示とスマホ表示 | 別のフレーム（1440pxと390px。ほかの幅も指定できる） |
| flexで並んだコンテナー | 位置が元ページと合うものだけAuto Layout |
| アイコンフォントの文字 | Figmaに無いので画像（レポートに一覧） |
取り込みが終わると、編集できる文字の割合・画像の数・フォントの置き換え・Auto Layoutの適用数・位置の誤差をまとめたレポート（JSON）と、各幅のPNGを保存できます。
使い方
取り込みの手順
- 公開サイトのURLをもとに、変換バンドル（ZIP）を用意する
- Figmaでプラグインを開き、ZIPをドロップする
- 幅（1440 / 390）と範囲（ページ全体、または冒頭のセクションだけ）を選んで「取り込む」を押す
- 終わったら「レポートを保存」「PNGを書き出す」で結果を保存する
変換バンドルは、公開サイトのURLをお問い合わせフォームから送っていただければ、MOTOKI合同会社が作成します（有料、料金はページ数と規模で決まります）。
STUDIOで作ったサイトに合わせて作っていますが、WordPressやAstro、Next.jsなどで作った一般のサイトも変換の対象です。
取り込みの途中で表示されるもの
ZIPをドロップすると、取得元のサイト名と、幅ごとの文字数・画像数・警告の数が表示されます。
取り込みの途中は、進捗バーにセクション単位の進み具合が出ます。
プラグインは通信をしません。
読み込んだZIPはFigmaの中だけで使われます。
STUDIOのテンプレート7件で確かめた精度
STUDIOストアの人気順で上位のテンプレート7件（Small Company、Brand.、THE NEXT COMPANY、Single page Portfolio、SOREL MARKETING、Power、商品LP）を変換し、変換バンドルから描き直した画像を元ページと画素単位で比べました。
左が元ページ、右が変換結果です。
| テンプレート | 文字（Text） | 画像 | 画像化 | 元ページとの画素差（1440px） |
|---|---|---|---|---|
| Small Company | 71 | 21 | 2 | 0.62% |
| Brand.｜商品ブランディングLP | 64 | 20 | 4 | 0.20% |
| THE NEXT COMPANY | 78 | 10 | 5 | 0.16% |
| Single page Portfolio | 121 | 9 | 0 | 0.64% |
| SOREL MARKETING | 81 | 19 | 6 | 1.37% |
| コーポレートサイト｜Power | 121 | 35 | 26 | 0.43% |
| 商品LP | 168 | 68 | 18 | 0.85% |
画像化はすべてアイコンフォント（Material Icons）の文字で、それ以外の文字はすべて編集できるTextになりました（文字数ベースで98〜100%）。
画素差の残りは、文字のアンチエイリアスと写真のJPEG圧縮の違いです。
Figmaに取り込んだ結果
実際にFigmaデスクトップで3サイト（弊社のSTUDIOサイト、Small Company、Power）を取り込み、Figmaが作った各ノードの位置と大きさを、ブラウザで測った値と比べました。
| サイト | ノード数 | 位置誤差2px以内 | 最大 / 平均 | 文字の編集可能率 | Auto Layout適用 |
|---|---|---|---|---|---|
| motoki-design.studio.site（1440px） | 549 | 549 / 549 | 1.01px / 0.10px | 100% | 218 / 484 |
| Small Company（1440px） | 187 | 187 / 187 | 1.00px / 0.03px | 99.8% | 43 / 172 |
| Power（1440px） | 377 | 377 / 377 | 1.01px / 0.04px | 98.1% | 133 / 370 |
Figmaから書き出したPNGと元ページの画素差は、弊社サイトで1.38%、Small Companyで0.85%、Powerで1.06%（いずれも1440px）でした。
1px前後のずれはボタンの中の文字の縦位置で、ブラウザとFigmaの行内の配置の違いによるものです。
フォントについて
Google Fonts（Noto Sans JP、Poppins、Lato、Zen Kaku Gothic New、Zen Old Mincho、Robotoなど）はFigmaにあるので、そのまま同じフォントになります。
STUDIOが配信している和文フォント（石井ゴシックなど）はFigmaに無いため、同じ太さのNoto Sans JPに置き換えてレポートに記録します。
また、FigmaのNoto Sans JPにはSemiBold・ExtraBold・イタリックが無いので、Medium・Bold・立体に置き換わるのが現状です。
HTMLで作った一般のサイトでも確かめた
STUDIO以外のサイト向けの読み取り方（汎用モード）も用意しています。
WordPressのサイト3件と、Astro、Next.jsで作ったサイトの計5件を変換し、変換バンドルから描き直した画像を元のページと比べました。
| サイト | 作り | 元ページとの画素差（1440px） |
|---|---|---|
| motoki-design.co.jp | WordPress（SWELL）のコーポレートサイト | 0.77% |
| ja.wordpress.org | WordPress | 1.01% |
| astro.build | Astro（静的サイト） | 1.47% |
| tailwindcss.com | Next.js | 1.78% |
| cg-method.com/figma | WordPress（SWELL）のブログ | 2.30% |
5件とも、文字はすべて編集できるTextになりました。
この5件はFigmaへの取り込みまではしておらず、上の値は変換バンドルの段階での比較です。
STUDIOのサイトに比べると、CSSで描いたアイコンや回転した飾りは再現されず、JavaScriptで動くメニューやモーダルは静止した状態で取り込まれます。
うまくいかないときの原因と対処
取り込みで元どおりにならない部分は、レポートに記録されます。
症状から原因を引けるように、表にまとめました。
| 症状 | 原因 | 対処 |
|---|---|---|
| ホバーやアニメーション、カルーセルの動きがない | 静止した状態だけを取り込む | 動きが必要なら、Figmaのプロトタイプで付け直す |
| 縦書きの文字が1文字ずつ縦に積まれている | 縦書きは1文字1行の縦積みで近似する | 文字は編集できるので、必要な所だけ組み直す |
| Auto Layoutになっていないフレームがある | 子の位置が元ページと1px以内で合うコンテナーにだけ適用する（候補の4〜5割） | 残りは絶対配置なので、必要な所だけFigmaでAuto Layoutにする |
| フォントが元のサイトと違う | STUDIOが配信する和文フォント（石井ゴシックなど）はFigmaに無く、同じ太さのNoto Sans JPに置き換える | レポートで置き換えを確かめ、手元にあるフォントに差し替える |
| アイコンが画像になっている | アイコンフォント（Material Icons）の文字はFigmaに無い | レポートの一覧で場所を確かめ、必要ならアイコンを差し替える |
| 一般のサイトでアイコンや飾りが欠ける | CSSで描いたアイコンや、回転した飾りには対応していない | 欠けた所はFigmaで描き足すか、元のサイトの画像を貼る |
プラグインの画面は日本語のみです。
変換バンドルの作成について
変換バンドルは、公開サイトをブラウザで描画して要素ごとの位置と書式を測る処理で作ります。
この処理はFigmaのプラグインの中では動かせないため、MOTOKI合同会社でお作りしています（有料）。
サイトのURLをお問い合わせフォームからお送りください。
PSD・Illustratorの変換には姉妹プラグイン
同じ考え方（できるだけ編集できる形で変換し、できなかったものはレポートに出す）で作った無料プラグインがあります。
PhotoshopのPSDとの相互変換はPSD Porter for Figma、Illustratorの.aiとの相互変換はVector Porter for Figmaをご覧ください。
まとめ
- Site Porter for Figmaは、公開中のサイトの見た目を、文字・画像・フレームを編集できるレイヤーとして組み直す無料のプラグインです。
- STUDIOのテンプレート7件では、アイコンフォント以外の文字がすべて編集できるTextになりました。
- Figmaに取り込んだ3サイトは、すべての要素が元ページから2px以内の位置でした。
- WordPress・Astro・Next.jsで作った一般のサイト5件も、1440pxでの画素差は0.77〜2.30%に収まっています。
- 変換バンドルはプラグインの中では作れないため、MOTOKI合同会社が有料で作成します。
- 動き・縦書き・Figmaに無いフォントは元どおりにならず、レポートに記録されます。