サイトの模写制作時にとっても便利なGoogle拡張機能5選！

Webサイトの模写制作時や、オリジナルサイトの制作にあたって他のサイトを参考にする時に、検証ツールを開いて要素のmarginやpaddingの情報、カラーコード等をいちいち調べるのは面倒で時間の掛かる作業だと思います。

この記事ではそんな無駄な作業を無くし、効率的にサイト制作ができるようになるGoogle拡張機能を5つご紹介していきます。

どれも無料で使えて、実際に僕が使っていて便利だと感じているものなので、ぜひ参考にしてみて下さい。

サイト制作時に使えるGoogle拡張機能5選

1. ColorPick Eyedropper

まず最初にご紹介するのは「ColorPick Eyedropper」です。

ColorPick Eyedropperは、サイト上で調べたい色をクリックするだけで、クリックした要素の色を16進数のカラーコードで表示してくれる拡張機能です。

色の検出方法もとても簡単で、いちいち検証ツールを開いて調べたり似ている色を調べる必要はなくなります。

2. Site Palette

2つ目にご紹介するのは「Site Palette」です。

Site Paletteは、ColorPick Eyedropperと同様に色を検出するツールですが、こちらはページ全体で使われている色を一気に検出してくれる拡張機能です。

僕は、サイトのベースになっているカラーコードを調べる時にはSite Palette。

細かい要素のカラーコードを調べる時にはColorPick Eyedropperというように使い分けています。

3. Page Ruler Redux

3つ目にご紹介するのは「Page Ruler Redux」です。

Page Ruler Reduxは要素のwidth、height、ｍargin、padding等を調べることができる拡張機能です。

また、その要素がページのどの位置にあるのかをleft、right、top、bottomで確認することもできるので、positionプロパティを使用する際はとても便利に活用することができます。

使い方ですが、調べたい要素をドラッグ&ドロップで囲ってあげるとwidth、height、positionが上のバーに数値として現れ確認することができます。

4. WhatFont

4つ目にご紹介するのは「WhatFont」です。

WhatFontはフォントの情報を検出してくれる拡張機能です。

調べたい文字をクリックするだけで、その文字のfont-family、font-style、font-weight、font-size、line-height、colorの情報を見ることができます。

5. Emmet Re:view

最後にご紹介するのは「Emmet Re:view」です。

Emmet Re:viewはサイトのレスポンシブ確認をする時に使える拡張機能です。

拡張機能を追加後、Emmet Re:viewのアイコンをクリックするだけでスマホやタブレットでの表示を同時に確認することができます。

また、新たに好きなサイズでデバイスを追加したり、プリセットを自由に作ることもできます。

ちなみに、GIF動画の始めに出てくるプリセットは僕が新たに作ったもので、PC、iPad、iPhoneXで構成されています。

まとめ

今回ご紹介したGoogle拡張機能は以下の5つです。

• ColorPick Eyedropper・・・クリックした要素の色を16進数のカラーコードで表示
• Site Palette・・・ページ全体で使われている色を一気に検出
• Page Ruler Redux・・・要素のwidth、height、ｍargin、paddingを調べる
• WhatFont・・・フォントの情報を検出
• Emmet Re:view・・・サイトのレスポンシブ確認