これはかなり便利！ 1クリックであらゆるWebサイトのデザインやアセットを抽出できるChromeの拡張機能 -MiroMiro
Post on:2026年1月20日
sponsorsr
昨年末にリリースされたばかり、Chromeの便利な拡張機能を紹介します。
MiroMiroは1クリックするだけで、表示しているサイトを分析、デザイン要素を抽出、本番環境で使えるアセットに変換するオールインワンの拡張機能です。
デベロッパーツールや似た拡張機能よりも直感的に操作でき、かなり便利です。
まずはさっそく、MiroMiroの入手方法から。
Chromeウェブストアからインストールできます。
この拡張機能は年末にリリースされたばかりで、まだユーザー数は多くありませんが、これから伸びてくると思います。
MiroMiroの主な機能は、下記の通り。
- 使用されているカラー・フルパレットを抽出
- 使用されているフォントを抽出
- 画像ファイル、アイコン、SVGを抽出
- Lottieアニメーションを抽出
- CSSスタイルを抽出
これらを1クリックするだけで、すべてを見ることができ、必要なものだけダウンロードすることもできます。
ということで、MiroMiroをさっそく使用してみました。
無料版と有料版があり、無料版でもけっこうできることが多いので、無料版で試してみました。
まずは、ChromeでWebサイトを開き、MiroMiroを起動します。利用するにはログインが必要で、Google or GitHubのアカウントで利用できます。
MiroMiroのログイン
ログインが完了すると、すぐにサイトのデザインが抽出されました。
下のタブから項目を選択でき、まずは左端の「Overview」では、タイポグラフィやカラーパレット、コンラストスキャナ、葉景色、テキストのカラーなどが一覧できます。
テキストは、WCAG 2.0によるコントラスト比もチェックできます。
デザインの抽出
左から2番目は「Image & Videos」では表示しているページに使用されている画像や動画が一覧できます。
画像や動画の抽出
各画像や動画をホバーすると、ダウンロードアイコンが表示されるので、そこから簡単にダウンロードもできます。
画像や動画のダウンロード
左から3番目は「SVG」当ページではファビコンにしかSVGを使用していないので、表示されませんでした。
SVGの抽出
左から4番目は「Color」カラーは項目ごとに背景・テキスト・ボーダー・アクセントカラー・ブランドカラーに分かれており、各項目ごとにダウンロードできます。また、最後にはオールカラーが一覧できます。
カラーの抽出
左から5番目は「Inspector」デザイン要素ごとにカラー、タイポグラフィ、コントラスト、レイアウトなどの情報が表示されます。
デザイン要素の抽出
デザイン要素を抽出するには「Inspect mode」をオンにします。あとはページ上のデザイン要素をクリックするだけで、すべての情報を抽出できます。
デザイン要素の抽出
「Inspect mode」にすると、 カラー、フォントファミリ、サイズ 、パディング、マージン、間隔、配置、境界線、半径、シャドウ、トランジション、インラインSVG、埋め込みアイコンなど、CSSのスタイルや配置の詳細やレイアウト構造を自動的に検出できます。
sponsors
