Webサイトのデザインを調べたり、既存ページのUIを確認したりするときに、Figma上で画面を見ながら整理できると便利です。
通常であれば、ブラウザでWebサイトを開いてスクリーンショットを撮り、その画像をFigmaに貼り付ける方法があります。ただし、スクリーンショットの場合は画像として貼り付けられるため、テキストやボタン、余白などを細かく確認したいときには少し不便です。
そこで便利なのが、Webサイトの見た目をFigmaに取り込めるプラグインです。この記事では、WebサイトをFigmaに貼り込む基本的な流れを、初心者向けに紹介します。
ももっぺ自身も、参考サイトのUIを確認したいときや、ページ構成を整理したいときにFigmaを使うことがあります。ブラウザで見るだけだと流れてしまう情報も、Figma上に置いておくことで、余白・ボタン・見出し・導線などを落ち着いて確認しやすくなります。
- WEBサイトのデザインをFigmaに落とす
- Figmaで自分で微調整・編集してから実装したい
この記事では❶の方法を紹介します
❷については別の記事に書きます
プラグイン(html.to.design など)を使ってデザインをFigmaに取り込む
- HTMLをエクスポート → Figmaプラグイン「html.to.design」「Anima」などに読み込ませる
- レイアウト・カラー・テキストはかなり再現されます
- ただしSVG装飾やアニメーションは落ちる、画像も再配置が必要、という制約あり
- Figma起動
- 新規ファイル作成
- プラグインメニュー → html.to.design 検索 → 実行
- プラグイン画面で「URL」または「HTMLファイル」を選択
- インポート設定(幅・モード)
- Figmaにレイアウトが流し込まれる
サイトを公開済みの場合は、URLで取り込むのが一番ラクです。
URLを指定して取り込みます
設定項目
- Viewport width(幅):
1440を選択(デスクトップ用) - Import mode(取り込みモード): 「Pixel-perfect」または「With Auto Layout」が選択できる場合 → 「With Auto Layout」をおすすめ(Figmaで編集しやすくなる)
- Wait time(待機時間): デフォルトでOK(URL取り込み時のみ)
⭕ ONにするもの(おすすめ)
Options
- ✅ Use Autolayout をON
- レイアウトがFigmaのAuto Layout(自動配置)になります
- 後でテキストや要素を追加した時に、自動で間隔・並びを調整してくれます
- これをONにしないと、すべてが「固定位置」になって編集がしんどくなります
- ✅ Create styles & variables をON
- カラー・テキストスタイルがFigmaの「ローカルスタイル」として自動登録されます
- 後で「ブルーを少し濃くしたい」みたいな時に、一括変更できるようになります
Enhancements
- ✅ HTML layer names をON
- レイヤー名がHTMLのクラス名(
hero-title、about-cardなど)になります - 私が書いたCSSと対応がつくので、後で「ここどこ?」と迷わない
各種設定してProceedボタンを押下
指定したURLの画面を再現できています
- Claudeで以下の2つのファイルを生成
- PakuSite_for_Figma.html(画像base64埋め込み済みの単独HTML)
- paku-design-tokens.md(色・タイポ・コンポーネント仕様書)
- Figmaのhtml.to.designプラグインを起動
- 「Import from File」または「Upload HTML file」を選択
- PakuSite_for_Figma.html をアップロード
- インポート設定(Autolayout / Styles / Layer names をON)
- Figmaに流し込まれる
- paku-design-tokens.md を参照しながら整理
ポイントは「単一ファイル化」
URLで取り込む場合、サーバが画像やCSSを配信してくれるので問題ありません。
でもローカルファイルで取り込む場合、プラグインは単一のHTMLファイルしか受け付けないことが多いです。
| 要素 | 通常 | 取り込み用 |
|---|---|---|
| HTML本体 | index.html | そのまま |
| CSS | style.css（別ファイル） | <style>タグでHTML内に直接記述 |
| 画像 | images/paku-blue.jpg（別ファイル） | base64でHTMLに埋め込み |
| フォント | Google Fontsから読み込み | そのまま（これはURL参照でOK） |
Claudeについてはこちらの記事に書いてます
Claudeを使ってファイルを生成すると便利です
※ファイル名はあくまで参考です
生成したファイルをダウンロードします
サイトの更新状況で差分があるものの、意図したとおりに表示されている
残り ⚫︎FREE imports(無料で⚫︎回使える)
WebサイトをFigmaに取り込むメリットは、ただ画面を保存できるだけではありません。
たとえば、LPやサービスサイトを分析するときに、ファーストビュー、見出し、CTAボタン、画像の配置、フォームの位置などをFigma上で確認できます。気になった部分にコメントを入れたり、横にメモを書いたり、複数ページを並べて比較したりできるため、デザインの参考整理に向いています。
また、チームで画面を確認するときにも便利です。WebサイトのURLを共有するだけだと、どの部分について話しているのかが分かりにくいことがあります。Figma上に画面を貼り込んでおけば、「この見出しの下」「このボタンの配置」「このエリアの余白」など、具体的な場所を指しながら話しやすくなります。
一番簡単な方法は、Webサイトのスクリーンショットを撮ってFigmaに貼ることです。これは手軽で、見た目を残すだけなら十分使えます。
ただし、スクリーンショットはあくまで画像なので、文字やパーツを個別に編集することはできません。あとからテキストをコピーしたり、ボタンだけを移動したり、余白を細かく測ったりするのは難しくなります。
一方で、WebサイトをFigmaに取り込めるプラグインを使うと、サイトの構造に近い形でFigma上に再現できる場合があります。完全に同じ状態で取り込めるわけではありませんが、デザインの構成を確認したり、参考資料として整理したりするにはかなり便利です。
「とりあえず見た目だけ残したい」場合はスクリーンショット、「UIの構造や余白も確認したい」場合はプラグイン、というように使い分けるとよいです。
FigmaにWebサイトを貼り込むときは、まず専用のプラグインを使います。代表的なものとして、WebページをFigmaに変換できるプラグインがあります。
基本的な流れは以下の通りです。
- Figmaを開く
- プラグインを検索する
- WebサイトのURLを入力する
- 取り込みたいページを実行する
- Figma上に生成された画面を確認する
プラグインを起動したら、取り込みたいWebサイトのURLを入力します。しばらく待つと、Figma上にWebページの見た目が配置されます。
取り込み後は、表示が崩れていないか、必要な部分が再現されているかを確認します。サイトによっては、画像がうまく表示されなかったり、フォントや余白が完全に再現されなかったりすることもあります。そのため、取り込んだデータは完成デザインとして使うというより、参考資料や分析用として使うのがおすすめです。
FigmaにWebサイトを取り込んだら、まず全体の構成を確認します。
ファーストビューには何が置かれているか、ユーザーに最初に伝えている情報は何か、CTAボタンはどこに配置されているかを見ていきます。LPの場合は、上から下に読んだときの流れも重要です。
たとえば、以下のような視点で見ると整理しやすくなります。
・最初に何を伝えているか
・見出しは分かりやすいか
・ボタンは目立っているか
・画像とテキストのバランスはよいか
・余白が詰まりすぎていないか
・スマホで見たときに読みやすいか
Figma上で確認すると、画面全体を俯瞰しやすくなります。特に、複数の参考サイトを並べて比較したいときには便利です。
WebサイトをFigmaに取り込める機能は便利ですが、取り込んだデザインをそのまま流用するのは避ける必要があります。
あくまで参考として、構成や見せ方を学ぶために使うのがよいです。色、レイアウト、文言、画像などをそのまま真似してしまうと、著作権やブランド表現の面で問題になる可能性があります。
ももっぺが使う場合も、「このボタンの位置が見やすい」「この導線の作り方が分かりやすい」「この情報整理の順番が参考になる」といった形で、考え方を学ぶために使うのがよいと感じています。
参考サイトをFigmaに貼り込む目的は、コピーすることではなく、良いデザインの理由を観察することです。
Webサイトによっては、プラグインでうまく取り込めない場合があります。たとえば、ログインが必要なページ、動的に表示されるページ、画像やアニメーションが多いページなどは、表示が崩れることがあります。
その場合は、無理にプラグインだけで完結させようとせず、スクリーンショットと併用するとよいです。
たとえば、全体の見た目はスクリーンショットで保存し、必要なパーツや構成だけをプラグインで確認する、という使い方もできます。目的に合わせて方法を切り替えると、作業しやすくなります。
この方法は、Webデザインを勉強している人や、FigmaでUIを整理したい人におすすめです。
特に、次のような場面で使いやすいです。
・参考サイトをまとめたい
・LPの構成を分析したい
・既存サイトの改善点を整理したい
・チーム内でUIの共有をしたい
・Webページの導線を確認したい
・デザインの引き出しを増やしたい
Webサイトをただ眺めるだけでは気づきにくいことも、Figma上に置いて見比べると発見しやすくなります。
WebサイトをFigmaに貼り込む方法を知っておくと、参考サイトの整理やUI分析がしやすくなります。
スクリーンショットだけでも画面の保存はできますが、Figma上で比較したり、メモを追加したり、構成を確認したりするなら、プラグインを使った取り込みも便利です。
ただし、取り込んだデザインはあくまで参考用として扱うことが大切です。そのまま流用するのではなく、なぜ分かりやすいのか、どこが使いやすいのかを観察するために使うと、デザインの学びにもつながります。
ももっぺは、参考サイトをFigmaに貼り込むことで、画面構成や余白、導線の作り方を確認しやすくなると感じました。Webデザインを学びたい人や、Figmaで情報整理をしたい人は、一度試してみると便利だと思います。
