これは便利！
1クリックでサイトのデザイン要素を丸ごと抽出する方法！
Web制作のアイデア出しやリニューアル設計のとき、他社サイトのデザインや構造をざっくり把握したい…そんな場面、ありませんか？
もちろん 丸ごとコピーしてそのまま使うのはNGですが、デザイン構造を理解したり、デザイン資産の傾向を掴むのはとても有効です。
今回は、そんな時に役立つツールChrome拡張の「MiroMiro」を紹介します！
MiroMiroは他サイトのカラーパレット・フォント・画像・CSSなどを1クリックで一覧化・抽出することができます。
優れたデザインを「真似る」のではなく、その構造を理解し、次のアイデアへとつなげていく。
MiroMiroは、そんなWeb制作の思考プロセスを支えてくれるツールです。
MiroMiroって何？
MiroMiroは、Chromeブラウザに追加できる拡張機能です。
見るだけのサイトから、以下のようなデザイン要素を自動で抽出してくれます：
- カラー（ブランドカラー・背景・テキストカラー）
- フォントファミリ・サイズ
- 画像・動画・SVG
- CSSスタイル（レイアウト・マージン・パディングなど）
これらを1クリックするだけで、すべてを見ることができ、必要なものだけダウンロードすることもできます。
つまり、
「このサイトはどんな色・フォントを使っているの？」
「実際に利用している画像素材ってどんなもの？」
といった デザインの“中身”を把握したいときにとても便利なツールです！
利用方法
MiroMiroはChromeウェブストアからインストールできます。
MiroMiroには無料版と有料版がありますが、今回は無料版を試してみました！利用するにはログインが必要で、Google or GitHubのアカウントで利用できます。
ログインが完了すると、このようにすぐにサイトのデザインが抽出されました。
画面下のアイコンがメニューになっており、左から
Overview / Images & Videos / SVGs / Colors / Inspector
となっています。
Overviewではタイポグラフィやカラーパレット、コンラストスキャナ、葉景色、テキストのカラーなどが一覧できます。
続いてmages & Videos では使用されているビデオや画像が一覧で表示されます。必要であればそのままダウンロードすることも可能です。
SVGsもmages & Videos 同様、使用されているSVGが一覧で表示されます。ダウンロードも可能なので、役に立ちそうです！
Colorは項目ごとに背景・テキスト・ボーダー・アクセントカラー・ブランドカラーに分かれており、各項目ごとにダウンロードできます。
また、最後にはオールカラーが一覧できます。
そしてInspectorを選択すると、デザイン要素ごとにカラー、タイポグラフィ、コントラスト、レイアウトなどの情報が表示されます。
表示させるには左上のInspect modeをONにする必要があります。
ページ上のデザイン要素をクリックするだけで、すべての情報を抽出できます！
注意すべきポイント
もちろん、このようなツールは他者サイトの著作物を丸ごと流用するためのものではありません。
Web制作の設計やデザイン理解の補助として
- 色・フォント・レイアウト傾向をつかむ
- どんな構造になっているか構造を理解する
というリサーチ目的で使うことが重要です。
実際の制作に転用する際は、必ずオリジナルで作り直すか、クライアントの意図に合うものへアレンジして使いましょう。
まとめ
MiroMiroのようなツールを活用することで、従来のDevToolsを使った確認作業に比べ、
デザイン要素をよりスピーディーに、直感的に把握することができます。
参考サイトの色使いを比較したり、競合サイトのUIやレイアウトの傾向を掴んだり、
さらには使用されている素材のテイストをビジュアルとして整理したい場合にも、
1クリックで情報を一覧化できる点は大きな魅力です。
デザインを「感覚」だけで捉えるのではなく、構造や傾向を整理しながら設計に落とし込んでいく。
1クリックでデザイン分析できるツールは、リサーチを効率化し、設計精度を高めるための心強い味方と言えるでしょう。
