サイトをFigmaにデザインとして書き出す方法

Webサイトをリニューアルするときや、既存サイトを参考にデザインを作りたいとき、

「今あるサイトを、そのままFigmaに取り込めないかな」

と思ったことはないでしょうか。

Webサイトの画面を見ながら、Figma上で一から作り直すこともできますが、ページ数が多かったり、レイアウトが複雑だったりすると、かなり時間がかかります。

そこで今回は、既存のWebサイトをFigmaにデザインとして取り込む方法について紹介します。

サイトをFigmaに書き出すことはできる？

結論から言うと、WebサイトをFigmaに取り込むことは可能です。

ただし、HTMLやCSSの構造を完全に維持したまま、きれいなFigmaデータに変換できるわけではありません。

専用のプラグインや外部サービスを使用することで、Webサイトの見た目をFigma上のレイヤーとして取り込めます。

取り込んだ後は、文字や画像、ボタン、背景などをFigma上で編集できます。

一方で、オートレイアウトやコンポーネントまできれいに整理されるとは限らないため、最終的には手作業での調整が必要です。

方法1：html.to.designを使う

WebサイトをFigmaに取り込む方法として、よく使われているのが「html.to.design」というFigmaプラグインです。

URLを入力することで、表示されているWebページをFigma上のデザインデータとして取り込めます。

基本的な手順

まず、Figmaを開きます。

次に、Figmaのプラグイン検索から「html.to.design」を探してインストールします。

プラグインを起動したら、取り込みたいWebサイトのURLを入力します。

PC版やスマートフォン版など、取り込みたい画面サイズを設定し、実行するとFigma上にページが生成されます。

サイト内のテキストや画像、背景、ボタンなどが、それぞれレイヤーとして配置されます。

スクリーンショットを貼り付けるだけではないため、取り込んだ後に文章や色を変更できる点が大きなメリットです。

方法2：Webサイトのスクリーンショットを配置する

細かく編集する必要がなく、デザインの参考として使うだけであれば、スクリーンショットをFigmaに配置する方法もあります。

Chromeの開発者ツールやブラウザ拡張機能を使えば、Webページ全体のスクリーンショットを取得できます。

取得した画像をFigmaに貼り付けて、その上からデザインをトレースしていきます。

この方法はレイヤーとして編集できませんが、元サイトのレイアウトを確認しながら作業できるため、再現デザインやリニューアル案の作成には便利です。

ただし、スクリーンショットをそのままデザインデータとして納品することはできません。

あくまでも下書きや参考資料として使う方法です。

方法3：Chrome拡張機能を使用する

WebサイトをFigmaに取り込めるChrome拡張機能もあります。

拡張機能を使って表示中のページ情報を取得し、Figmaプラグインと連携してデザインを生成する仕組みです。

URLだけでは取り込めない会員ページや、ログイン後の画面を取り込みたい場合に使われることがあります。

ただし、外部サービスにページ情報を送信する場合があるため、取り扱うサイトには注意が必要です。

クライアントの管理画面や個人情報を含むページを、許可なく外部ツールへ取り込むべきではありません。

取り込んだデザインはそのまま使える？

サイトをFigmaに取り込んでも、そのまま実務で使える状態になるとは限りません。

実際には、次のような修正が必要になることがあります。

文字の位置がずれている、画像サイズが合っていない、フォントが別のものになっている、余白が細かく分割されている、レイヤー名が整理されていない、といった問題です。

また、CSSで複雑に表現されている装飾やアニメーション、疑似要素などは、正確に再現されないことがあります。

そのため、取り込み機能は「完成したデザインを自動生成する機能」というよりも、「デザイン制作の下地を作る機能」と考えたほうがよいでしょう。

オートレイアウトは自分で組み直したほうがよい

Webサイトを取り込んだ直後のFigmaデータは、見た目が再現されていても、内部構造が扱いにくいことがあります。

例えば、すべての要素が絶対位置で配置されていたり、不要なフレームが大量に作られていたりします。

そのまま文字を変更すると、ボタンからはみ出したり、セクション全体の高さが崩れたりする可能性があります。

今後もデザインを修正するのであれば、ヘッダー、ボタン、カード、各セクションなどをオートレイアウトで組み直したほうが効率的です。

繰り返し使用するパーツは、コンポーネント化しておくと管理しやすくなります。

スマートフォン版も別に取り込む

PC版のWebサイトをFigmaに取り込んだだけでは、スマートフォン版のデザインは確認できません。

レスポンシブ対応しているサイトであれば、PC幅とスマートフォン幅をそれぞれ指定して取り込む必要があります。

一般的には、PC版は1440px前後、スマートフォン版は375px前後で確認することが多いです。

ただし、サイトによってブレークポイントは異なります。

取り込んだ後は、実際のブラウザ表示と見比べながら、レイアウトや文字サイズ、余白を調整しましょう。

他社サイトを取り込むときの注意点

技術的に取り込めるからといって、他社サイトのデザインをそのまま使用してよいわけではありません。

他社サイトを丸ごとコピーし、文章や画像だけを変更して公開すると、著作権や不正競争の問題につながる可能性があります。

デザインの参考として取り込む場合でも、構成、配色、画像、文章などをそのまま流用するのは避けましょう。

参考サイトは、余白の使い方、情報の順番、ボタンの配置、見出しの見せ方などを分析するために使うのが適切です。

特に、他社のロゴ、写真、イラスト、文章を無断で使用してはいけません。

自分が管理しているサイトでも注意が必要

自社サイトやクライアントサイトであっても、素材の権利関係は確認しておく必要があります。

有料素材サイトの画像や、制作会社が作成したイラストなどは、利用範囲が決められている場合があります。

Figmaへの取り込み自体に問題がなくても、そのデータを別のサイトへ再利用できるとは限りません。

サイトをリニューアルする際は、画像やフォント、イラストなどを引き続き使用できるか確認しましょう。

取り込み機能が向いているケース

WebサイトからFigmaへの取り込みは、特に次のような場面で役立ちます。

既存サイトのリニューアル案を作るとき、Figmaデータが残っていないサイトを修正するとき、競合サイトの構成を分析するとき、コーディング済みのサイトからデザインデータを作り直すときです。

特に、元のデザインデータが存在しない案件では、最初からすべて再現するより、取り込み機能を使ったほうが作業時間を短縮できます。

取り込み機能が向いていないケース

一方で、長期間運用するデザインシステムを作る場合や、大規模なWebサイトを一括で整理したい場合には、取り込んだデータをそのまま使うのはおすすめできません。

ページごとにレイヤー構造がバラバラになり、修正のたびに時間がかかる可能性があるためです。

今後も継続的に更新するサイトでは、取り込んだデザインを参考にしつつ、Figma上で構造を組み直したほうが結果的に効率がよくなります。

まとめ

既存のWebサイトは、Figmaプラグインや外部サービスを使うことで、編集可能なデザインとして取り込めます。

特に「html.to.design」のようなツールを使えば、URLからテキストや画像、ボタンなどをレイヤーとして生成できます。

ただし、取り込んだデータがそのまま完成品になるわけではありません。

レイヤー整理、オートレイアウト、コンポーネント化、フォントや余白の修正などは、基本的に人の手で行う必要があります。

WebサイトからFigmaへの取り込みは、デザイン制作を完全に自動化する方法ではなく、最初の作業時間を短縮するための方法です。

便利な機能ではありますが、最終的な使いやすさや品質は、取り込んだ後にどれだけ整理できるかで決まります。