HTML to Design：デザイナーと制作会社のためのリデザイン手順

デザインは通常、一方向に流れます。Figmaのモックアップが、ブラウザ上のHTMLになります。しかし実際の仕事の多くは逆方向に進みます。クライアントから公開中のサイトを渡されてリデザインを頼まれる。3年間のリリースを経て、プロダクトが当初のモックアップからずれてしまった。開発者がコードで直接機能を作り、デザインチームがそれを引き取る必要がある。

この逆方向の流れ、つまり HTML to design とは、ブラウザに存在するものを編集可能なデザインファイルに戻すことです。うまくやれば、何日もかかる手作業の作り直しを省けるうえ、スクリーンショットを並べたムードボードよりも優れたもの、つまり実際のフレーム、テキスト、スタイル、コンポーネントを備えた使えるファイルが手に入ります。

この記事では、HTML to Frames を使って、最初の監査からクリックできるプロトタイプまで、デザイナーと制作会社のための実践的なワークフローを紹介します。

「HTML to design」が実際に意味すること

この言葉は、公開中のコードやWebサイトを編集可能なデザインファイルに変換する あらゆるプロセスを指します。方法は大きく分けて3つあります。

1. 手作業での作り直し — サイトを開き、DevToolsで計測し、すべてのフレームを手で再現します。
2. スクリーンショット — 各ページの画像を撮り、参考としてFigmaに貼り付けます。
3. 編集可能なレイヤー — レンダリングされたページを、実際のFigmaのフレーム、テキスト、ベクター、画像に変換します。

それぞれに使いどころはありますが、コストと、その後にできることが大きく異なります。

参考資料ならスクリーンショットで十分です。ゼロから構成し直したい小さなページ1枚なら、手作業での作り直しも理にかなっています。それより大きな案件では、編集可能なレイヤー こそがスケールする出発点です。

このワークフローが向いている人

• リデザイン、監査、参考サイトの分析を行う UI/UXデザイナーやWebデザイナー。
• リデザイン提案の準備のため、クライアントのサイトを数分でFigmaに取り込む必要がある デザイン制作会社。Teamプランでは、1つのライセンスキーで5シートを共有できます。
• 本番環境でばらついた色、文字、コンポーネントを統合する デザインシステムチーム。
• localhost のビルドをFigmaファイルとしてデザイナーに渡したい フロントエンド開発者。
• 企画のためにログイン後のダッシュボードや特定の状態をFigmaに取り込みたい プロダクトマネージャーやマーケター。

ステップ・バイ・ステップのワークフロー

おすすめの手順は次のとおりです。ステップを飛ばすこともできますが、順序が重要です。各ステップは前のステップの上に成り立っています。

ステップ1：現状を監査する

何かをインポートする前に、どのページが重要か を決めましょう。ほとんどのサイトでは、短いリストになります。

• ホームページ、
• 主要なランディングページや製品ページを1〜2枚、
• 料金ページやチェックアウト、
• ブログ記事などのコンテンツテンプレート、
• リデザインの範囲に含まれるログイン後の画面。

必要な 状態 も書き出しておきましょう。開いたナビゲーションメニュー、バリデーションエラーが出たフォーム、商品が入ったカートなどです。これらはURLだけでは再現できないため、Chrome拡張機能 でキャプチャします。

ステップ2：レスポンシブセットをインポートする

いよいよページを取り込みます。公開ページの場合は次のとおりです。

1. HTML to Framesを開き、Multiple（複数）を選びます。
2. 最大 10件のリンク を貼り付けます。リンクは順番に処理され、各ページがキャンバス上の1行になります。
3. Responsive set（レスポンシブセット）を選びます。ワンクリックでDesktop、Tablet、Mobileです（ProとTeamでは1回のインポートあたり最大4画面）。
4. オーバーレイがコンテンツを覆わないよう、Hide cookie banners & popups（Cookieバナーとポップアップを非表示）をオンにします。
5. 次のステップでデザインシステムを抽出する予定なら、Styles & variables（スタイルとバリアブル、Pro）をオンにします。

Desktop 画面には Site width（サイト幅）が使われます。プラグインは推測ではなく、ページの実際のデザイン幅を計測します。全幅デザインのサイトはコンテンツを中央に置いた1920、ボックス型のサイトはそのボックス幅、可変幅のサイトは1440で取り込まれます。1つのサイトには、すべてのページで1つの幅が使われます。

カウントのルールを覚えておきましょう。1回のインポート＝1ページとそのすべての画面 です。5ページのレスポンシブセットは15回ではなく5回のインポートです。

最初のインポート後は、Import linked pages（リンク先ページをインポート）で、同じサイトの他のページを一覧から選べます。ログイン後のページや localhost には、Chrome拡張機能と Send to Figma を使います。ファイルとしてしか存在しないページには、Local file でHTMLファイル、サイトフォルダ全体、.zip をインポートします。すべてのソースの詳細は HTML to Figmaガイド で解説しています。

ステップ3：デザインシステムを抽出する

ここで、インポートはサイトの写真ではなく、実際に使える土台になります。Styles & variables（Pro）をオンにすると、プラグインは次のものを作成します。

• 2回以上使われている色と、サイトのCSSカスタムプロパティから作る カラーバリアブル（--brand-primary は brand/primary になります）。Colors · <domain> コレクションに最大96個。
• テキストスタイル（最大48個）。
• シャドウスタイル（sm、md、lg、xl）。

実際のプロジェクトで役立つポイントが2つあります。

• 再利用。 ファイル内に値が一致するバリアブルやスタイルがすでにあれば、プラグインはそれを再利用します。同じサイトを2回インポートしても、新しいものは何も作られません。
• Snap to my file's styles（ファイルのスタイルにスナップ、Pro）。すでにデザインシステムがある場合、完全一致がなければ、取り込んだ色やテキストを あなたの ファイル内の最も近いスタイルにスナップできます。知覚的なOKLab色差と、同じフォントファミリー・ウェイト、10％以内のサイズで照合します。

サイトがダークモードに対応している場合は、Light + Dark（Pro）を選びましょう。ページが両方のカラースキームでキャプチャされ、LightとDarkのモード を持つ1つのバリアブルコレクションと、各画面のダークコピーが作られます。なお、FigmaのFreeファイルでは1コレクションにつき1モードしか使えないため、その場合はダークモードが注記付きでスキップされます。

その出力は、サイトが 実際に 使っているものの正直な一覧であり、多くの場合、監査全体で最も役立つ成果物になります。ほぼ同じグレーが1つのコレクションにずらりと並んでいるのを見れば、どんなスライドよりも統合の必要性が伝わります。

ステップ4：繰り返しをコンポーネントにする

Components & hover states（コンポーネントとホバー状態、Pro）を使うと、カード、ボタン、メニュー項目などの繰り返し構造が、テキストと画像のオーバーライドを保ったまま コンポーネントとインスタンス になります。ホバー時の見た目を持つ要素は、DefaultとHoverのバリアントを持つコンポーネントセット になり、ホバー時のプロトタイプインタラクションも付きます。メインコンポーネントは Components · <site> フレームにまとめられます。

これにより、整理すべきコンポーネントの一覧が手に入ります。よくある次の作業は次のとおりです。

• ほぼ重複したボタンコンポーネントを、バリアント付きの1つのセットに統合する、
• コンポーネント名を自社の命名規則に合わせて変更する、
• 既存のライブラリコンポーネントがある箇所では、インスタンスを差し替える。

ステップ5：実際の構造の上で反復する

いよいよデザインです。レイアウトは、プラグインが検証できた箇所では Auto Layout付きの入れ子のフレーム として取り込まれるため、変更はご自身で作ったファイルと同じように振る舞います。

• 見出しを編集すると、スタックが再配置されます。
• 1つのセクションの間隔やパディングを変えられます。
• カラーバリアブルを差し替えると、すべての使用箇所が更新されます。
• フレームをリサイズすると、FillとCenterが機能します。

実際のサイトでの私たちのテストでは、およそ86〜97％のフレームでAuto Layoutが推定されました。絶対位置のまま残ったフレームには適切な コンストレイント が設定され、結果画面にはフレームが絶対位置のまま残った 理由 が表示されます。詳しくは Auto Layoutの解説 をご覧ください。

おすすめの習慣は、元のインポートを 「ビフォー」 として専用のページに残し、それを複製してリデザインに使うことです。公開中のページと並べて比較するための、非表示でロックされた画像レイヤーが欲しい場合は、インポート時に Reference screenshot（参照スクリーンショット、Pro）をオンにしましょう。

ステップ6：プロトタイプを作る

インポートしたページは、すでに一部が接続済みです。

• リンクはクリックできるまま です（Open link）。
• インポートしたページ間のリンクはNavigateインタラクションになる ため、複数ページのインポートはそのままクリックできるフローになります。
• 固定ヘッダーやstickyヘッダー、横スクロール領域 はプレゼンテーションモードで動作します。
• ステップ4のホバーバリアントには、ホバー時のインタラクションが付いています。

つまり、クライアントへのプレゼンテーションで、どちらもゼロから接続することなく、「ビフォー」のプロトタイプと「アフター」のプロトタイプを並べられます。

ステップ7：同期を保つ

サイトは変わり続けます。インポートした各フレームにはソースURLが保存されているため、公開中のページが変わったら Re-import（再インポート）がワンクリックでできます。既存のバリアブルとスタイルが再利用されるので、再インポートしてもファイルが重複だらけになることはありません。

実践でのユースケース

制作会社のリデザイン提案

リデザインを提案する制作会社は、クライアントの現在のサイトをすぐにFigmaに取り込む必要があります。主要なページをレスポンシブセットとしてインポートし、デザインシステムを抽出すれば、新しいアイデアを1つも見せる前に、実際の色と文字の一覧を含む事実ベースの「現状」セクションが用意できます。Teamプランでは5シートを共有できるため、複数のデザイナーが同じライセンスで作業できます。Website to Figma と リデザインガイド をご覧ください。

デザインとコードのずれの監査

本番のページをインポートし、元のモックアップの隣に置きます。余白、色、文字の違いがレイヤーごとに浮かび上がり、生成されたバリアブルから、パレット外の色がどれだけ紛れ込んだかがわかります。

開発者が作った機能

開発者が localhost で機能のプロトタイプを作ったとします。Chrome拡張機能でキャプチャしてFigmaに送れば、デザイナーはプロダクトの他の部分と同じファイルでそれを仕上げられます。

AIが生成したページ

出発点がClaudeやCursorが書いたHTMLなら、アシスタントをMCPで接続すれば、ページが開いているプラグインに届きます。AI to Figma をご覧ください。

学習と分析

学生は、よく作られたサイトをインポートし、セクションの構成、文字サイズの段階、余白の繰り返しを、レイヤーごとに学べます。

クライアントワークでのプライバシーへの配慮

制作会社はクライアントのサイトをインポートすることが多いため、データがどう扱われるかは重要です。ページは 隔離されたサンドボックスのブラウザ でレンダリングされ、結果は一度だけ届けられた後メモリから削除され、ディスクに書き込まれることはありません。アップロードされたローカルファイルは、インポートが完了するとすぐに削除されます。プラグインはFigmaファイルの内容を読み取りません。ポリシーの全文は セキュリティのページ をご覧ください。

はじめに

このワークフローが合うかどうかを確かめる最速の方法は、今取り組んでいる実際のページ1枚で試してみることです。Freeには月10回のインポートが含まれ、Proでは上で紹介したデザインシステムとコンポーネントの機能が追加されます。プランの比較は 料金 で、詳しい使い方は ドキュメント で、他のツールとの比較は 代替ツールのページ でご覧いただけます。