Website to Figma：WebサイトをFigmaに取り込むリデザイン提案ガイド

どのリデザインも、同じ地味な作業から始まります。クライアントの現行サイトをデザインツールに取り込む作業です。スクリーンショットは手早いものの、取り込んだ時点で編集できない死んだ素材です。手作業でページを作り直せば正確ですが、本来のリデザインに使いたい何日もの時間が消えてしまいます。

このガイドでは、HTML to Framesを使ってWebサイトをFigmaに本物の編集可能なレイヤーとして取り込む方法と、そのインポート結果をクライアントがひと目で理解できるリデザイン提案に仕上げる方法を紹介します。エージェンシーやフリーランスのデザイナー向けに書いていますが、自社のプロダクトサイトを監査するインハウスチームにも同じワークフローが使えます。

そもそも、なぜ現行のWebサイトをFigmaに取り込むのか？

リデザイン提案とは、ひとつの主張です。「現状はこうで、本来はこうあるべきで、その理由はこれです」とクライアントに伝えるものです。「現状」の部分が正確で編集可能であれば、その主張ははるかに説得力を増します。

• 本物を監査できる。 余白、文字サイズの体系、色の使い方、コンポーネントのばらつきが、スクリーンショットからの推測ではなく、レイヤーパネルで目に見えます。
• 既存の構造の上でリデザインできる。 ヒーローを変え、カードのスタイルを差し替え、ナビゲーションを作り直す間も、ページの残りは文脈としてそのまま残ります。
• ビフォーとアフターを並べて見せられる。 同じフレームサイズ、同じコンテンツで、デザインだけが違う。クライアントはすぐに理解します。
• 作り直しの時間を節約できる。 現行サイトを描き直すはずだった時間を、選択肢の検討に回せます。

HTML to Framesは、ページを平らな画像ではなく、本物のFigmaのフレーム、テキスト、ベクター、画像に変換します。この違いの背景については、HTML to canvasと編集可能なレイヤーの比較をお読みください。

Website to FigmaとURL to Figmaの違いは？

どちらもよく検索される言葉ですが、実際には同じワークフローを指しています。URL to Figmaは通常、仕組みを表します。リンクを1つ貼れば、デザインが1つ手に入る、ということです。Website to Figmaは範囲を表します。1つのサイトの複数ページを、多くの場合は複数の画面サイズで取り込むことです。HTML to Framesは、単一のURL to Figmaインポートから、リンク先ページまで含めたWebsite to Figmaの取り込みまで、両方に対応しています。

ステップ1：取り込むページを計画する

Figmaを開く前に、リデザインのストーリーを担うページを書き出しましょう。ほとんどのマーケティングサイトでは、次のとおりです：

1. ホームページ
2. 重要なランディングページまたは製品ページを1つ
3. 料金
4. 会社概要またはチーム紹介
5. ブログ一覧と記事1本
6. お問い合わせ、または重要なフォームのページ

サイトマップ全体が必要になることはまれです。必要なのはテンプレートごとに1ページです。リデザインする対象はテンプレートだからです。通常は6〜10ページで十分で、1回のMultipleインポートにちょうど収まります。

ステップ2：複数ページを一括でインポートする

プラグインを開き、Multipleソースを使います。最大10件のリンクを貼り付けると、順番に処理され、各ページがキャンバス上の1行になります。MultipleインポートはFreeを含むすべてのプランで利用できます。

エージェンシーの仕事では、いくつかの点が重要です：

• 1サイト＝1つの幅。 DesktopはSite widthを使います。プラグインはインポート時にページの実際のデザイン幅を測定します。全幅のデザインはコンテンツボックスを中央に置いた1920で、ボックス型サイトはそのボックス幅（例：1200、1280、1440）で、フルードなサイトは1440で取り込まれます。複数ページのインポートでは、サイトのすべてのページがその幅を共有するので、行がきれいに揃います。
• フレーム名が読みやすい。 フレームはプロトコルやwwwを除いた domain/path — Desktop (1920) のような名前になるので、レイヤーパネルでページを見分けられます。
• Cookieバナーやポップアップは必要に応じて非表示にでき、アニメーションはきれいなフレームのために静止されます。サイトは通常の訪問者が見るとおりにキャプチャされます。

URLを探し回る代わりにリンク先ページをインポートする

まだページリストがない場合は、まずホームページをインポートしましょう。インポート後にImport linked pagesを使えば、同じサイトの他のページを一覧から選び、Multipleインポートとして取り込めます。ブラウザからURLをコピーすることなく、主要なナビゲーション先を取り込む最速の方法です。

ステップ3：レスポンシブセットをキャプチャする

クライアントは何よりもまず「スマホではどう見えるの？」と聞くことが増えています。その質問には本物のフレームで答えましょう。

Responsive setをオンにすると、Desktop + Tablet + Mobileをワンクリックでキャプチャできます。Tabletは768、Mobileは390で、Laptopの1280もあります。ProとTeamでは1回のインポートにつき最大4画面をキャプチャでき、クライアントのアナリティクスで珍しいブレークポイントが見つかった場合はCustom width（カスタム幅）も設定できます。1ページの画面は並列でキャプチャされます。

課金はシンプルです：1インポート＝すべての画面を含む1ページ。ホームページのDesktop、Tablet、Mobileは1回のインポートとして数えられます。

ステップ4：サイトが対応していればライト + ダークを追加する

クライアントのサイトが prefers-color-scheme に反応する場合、Light + Darkオプション（Pro）でページを両方のモードでキャプチャできます。LightとDarkのモードを持つ1つの変数コレクションと、各画面のダーク版コピーが得られます。ダークモードがリデザインの要件に含まれているなら強力な出発点になり、ダーク背景を想定して作られていなかったコンポーネントもすぐにわかります。

なお、Figma Freeのファイルでは1コレクションにつき1モードしか使えないため、Freeのファイルではダークモードがスキップされ、その旨が表示されます。

ステップ5：インポート結果を監査に変える

ここからインポート結果は作業ファイルになります。何かをリデザインする前に、1時間ほど監査に充てましょう。

すでに存在するデザインシステムを読み取る

Styles & variables（Pro）を使うと、プラグインは2回以上使われている色と、サイトのCSSカスタムプロパティからカラー変数を作成します。たとえば --brand-primary は brand/primary になります。テキストスタイルとシャドウスタイルも作成されます。同じサイトを2回インポートしても、値が一致する既存の変数とスタイルが再利用されるため、新しいものは何も作られません。

そのコレクションは、ありのままの棚卸しです。ほぼ同じグレーが30色、本文の文字サイズが11種類あれば、それ自体が提案の中で多くを語ります。

繰り返されるコンポーネントを見つける

Components & hover states（Pro）を使うと、カード、ボタン、メニュー項目などの繰り返し構造がコンポーネントとインスタンスになり、ホバー時の見た目を持つ要素はDefaultとHoverのバリアントを持つコンポーネントセットになります。メインコンポーネントは「Components · site」フレームに配置されます。監査においては、このフレームが現行サイトで実際に使われているもののすぐ使える一覧になります。

レイアウト構造を確認する

ほとんどのフレームはAuto Layout付きで取り込まれるので、リサイズや並べ替えができます。プラグインはまずページをピクセル単位で正確に組み立て、次にスタック、間隔、パディング、配置を推定し、結果を確定する前にすべての子要素の位置を検証します。きれいに表現できないフレームは適切な制約付きで絶対配置のまま残り、その理由が結果画面に表示されます。仕組みの全体はAuto Layoutの解説で説明しています。

参照用レイヤーを残しておく

Reference screenshotをオンにすると、表示を切り替えてインポート結果と公開中のページを比較できる、非表示でロックされたレイヤーが追加されます。クライアントから「これが本当に今のうちのサイト？」と聞かれたときに役立ちます。

ステップ6：リデザイン提案を組み立てる

正確で編集可能な「ビフォー」があれば、提案はほとんど自然にまとまります。

複製してからリデザインする

インポートした各行を複製します。元の行をBefore、コピーをAfterとラベル付けし、コピーの上でリデザインを始めます。コンテンツは本物のテキストと画像なので、ダミーテキストではなく、クライアント自身の文章と写真でリデザインできます。

ビフォー/アフターのボードで見せる

BeforeとAfterのフレームを同じ幅で横に並べます。テンプレートごとに、変更点を説明する注釈を2〜3個追加しましょう。たとえば、より明確な階層、より短いフォーム、より良いコントラスト、統合されたコンポーネントなどです。

フローをプロトタイプにする

インポートしたページ間のリンクはNavigateインタラクションになり、固定ヘッダーやスティッキーヘッダーはプレゼンテーションモードでも機能します。つまり、同じプロトタイプの中で現行サイトをクリックして回り、続けて提案も見せられるので、オンライン会議での説得力のあるウォークスルーになります。

ビフォーとアフター：ワークフローで何が変わるか

エージェンシー向けのTeamプランとライセンス

エージェンシーでは、通常1つのリデザインに複数のデザイナーが関わります。各プランの対応は次のとおりです：

• Free： $0、毎月10回のインポート、1回のインポートにつき1画面、10件のリンクでのMultipleインポート。小規模なサイトでワークフローを試すのに適しています。
• Pro： リリース記念価格で月額$7（通常$9）、フェアユースの範囲で無制限のインポート、1回のインポートにつき最大4画面。さらにスタイルと変数、Snap、コンポーネントとホバー、ライト + ダーク、Custom width、Detailed layers、Reference screenshot、Extra waitが使えます。Figma独自の決済でFigma内から購入します。
• Team： リリース記念価格で月額$22（通常$29）、Proと同じ機能を、共有のライセンスキーで5席利用できます。

月に数件のリデザインを手がけるエージェンシーなら、Teamを使えばデザイナーが個別に購入しなくても全員が同じ機能を使えます。詳しくは料金をご覧ください。

タイムライン例：2週間のリデザインスプリント

インポートをプラグインに任せた場合の、典型的なスプリントの例です。ご自身のプロセスに合わせて調整してください。

かつて作り直しに1〜2日かかっていたインポート作業が、初日の午前中だけで終わります。

クライアントサイトで時間を節約するヒント

• スライダーや遅延読み込みのセクションなど、コンテンツの読み込みが遅いサイトにはExtra wait（Pro）を使う。
• 多言語サイトではページの言語を選ぶ。プラグインは15言語に対応しています。
• まずフォントを解決する。 Missing fonts画面は構築前に代替フォントを提案し、選択をサイトごとに記憶します。
• プロジェクトの途中でクライアントが変更を公開したら、ワンクリックでRe-import。ソースURLはフレームに保存されています。
• 埋め込みコンテンツに注意する。 地図、ポスター画像のない動画、WebGLのcanvasはレイヤーにできないため、そのボックスのスクリーンショット画像として取り込まれます。
• ログインが必要なページはブラウザ経由で。 ログインが必要なクライアントポータルやダッシュボードにはChrome拡張機能を使ってください。localhostとログイン後のページに関するガイドもご覧ください。

クライアントのデータとプライバシー

エージェンシーは、クライアントの素材がどのように扱われるかをよく尋ねられます。ページは隔離されたサンドボックスのブラウザでレンダリングされ、一度だけ届けられた後にメモリから削除され、ディスクに書き込まれることはありません。プラグインはFigmaファイルの内容を読み取らず、レイヤーを書き込むだけです。クライアントに転送できる詳細はセキュリティページにあります。

まとめ

クライアントのWebサイトをFigmaに編集可能なレイヤーとして取り込めば、リデザインの最初の、最も退屈なステップが短いインポートに変わります。正確な「ビフォー」、サイトの実際のCSSから作られた監査、そして元のデザインの隣で提案が自然に育っていくファイルが手に入ります。まずテンプレートを1つ取り込んで結果を確認し、その後MultipleとImport linked pagesでサイトの残りを取り込みましょう。

試してみませんか？ すべての機能を見る、ドキュメントを読む、あるいはプラグインを入手して最初のインポートを実行してみてください。