「コピーするだけ」でUIモックを生成　ブラウザ拡張型の新デザインツール

フロントエンド開発者やデザイナーのあいだで、Webページを“そのまま”デザイン素材として扱える新ツールが注目を集めています。ブラウザ拡張として動作するこのサービスは、表示中のページからレイアウト情報やスタイル（フォント、色、余白など）を解析し、FigmaやSketchなどのUIデザインツールに取り込めるモックアップ（試作UI）として出力できるのが特徴です。

従来、参考にしたいサイトがあっても、スクリーンショットを撮り、手作業でボックスやテキストを再配置する必要がありました。この拡張は、HTMLとCSS（Webページの見た目を定義する記述言語）を直接読み取り、ボタンやカード、ナビゲーションバーなどをコンポーネント単位で抽出。自分のデザインシステム用にラベルを付け直したり、レイアウトだけを流用して色やフォントを差し替えたりといった“設計ベース”として活用できます。

著作権やブランドルールへの配慮が必要なため、開発元は「商用案件では、あくまでワイヤーフレーム（構造の参考）として使うこと」を強調。海外の記事では「競合サイトのUIを一晩で研究できるリバースデザイン顕微鏡」「デザインの“写経”を高速化する学習ツール」といった評価もあり、プロだけでなくUIを学び始めた学生にも役立つとされています。