今日はWebディレクターとして日々仕事をしている私が愛用している、Google Chrome 拡張機能をまとめてご紹介します。
全部で14個。特にWebデザイナー・フロントエンジニアなど、Web制作に関わる人にとって役立つものを中心に集めました。
ColorPick Eyedropper
ColorPick Eyedropper
Webページ内で使われているカラーコードを取得するアプリ。
Webページ内のカラーコードを取得・コピーできるツール。
拡張機能のアイコンをクリックすると、カラーピッカーが起動。調べたい箇所にピッカーを移動させて、クリックすれば、その場所のカラーコードを取得できる。
過去に取得したカラーコードを履歴として残してくれる。パレット機能もあるので、取得したカラーコードを一覧にして保存することもできる。
ColorZilla
ColorZilla
そのWebページで使われているカラーコードの一覧を取得し、コードのコピーや、使われている場所を教えてくれるアプリ。
こちらもカラーピッカーアプリ。Webページで使用しているカラーコードを取得できる。
先ほどの「ColorPick Eyedropper」は、ある1点をピックアップして、その場所のカラーコードを取得できた。この「ColorZilla」も同様のことはできるが、本領はそこじゃあない。
「ColorZilla」は、Webページのカラーコードを一気に取得できる。
ページ内のCSSを分析し、カラーパレットを生成。しかも、そのカラーコードが使われているパーツまで教えてくれる。
What Font - find font
What Font - find font
Webページで使用されているフォントを分析するアプリ。
マウスカーソルを当てた箇所のフォントを分析してくれるアプリ。
使われているフォントはもちろん、font-family、style、weight、font-size、line-height、font-color といった情報まで表示してくれる。
サイトで使用されているフォントを調べたいときには、非常に強力なアプリだ。
Awesome Screenshot
Awesome Screenshot
Webページのスクリーンキャプチャを撮れるアプリ。
Webページのスクリーンキャプチャを撮れるアプリ。
表示されている画面ではなく、ページ全体のキャプチャを撮ることができるのが非常に便利。
また、動画のキャプチャも可能なので、動きのあるページを他人と共有するのにも役立つ。
CSSViewer
CSSViewer
選択した箇所のCSSを分析して、表示してくれるアプリ。
選択した箇所のCSSを分析して、表示してくれるアプリ。そのパーツを構成しているあらゆる要素の数値を調べてくれる。
マウスオーバーするだけで、その要素の分析結果をポップアップで表示してくれる。Fを押すとポップアップが固定され、数値などをコピーできるようになる。
Design Mode
Design Mode
Webページ内のテキストが編集できるようになるアプリ。
Webページ内のテキストが編集できるようになるアプリ。制作途中のWebページのチェックに重宝している。
「想定されていたテキストよりも文字数が多くなったとき、周りの要素が表示崩れを起こさないか」などのチェックに
役立つ。
このアプリが無いときは、わざわざ要素検証をして、HTML内のテキストを編集していたが、このアプリのおかげでその手間がなくなった。
Window Resizer
Window Resizer
ウインドウのサイズを変更するためのアプリ。
ウインドウのサイズを変更するためのアプリ。
スマホやパソコンでよく使われるウインドウサイズに、ワンクリックで変更できる。また、ピクセル単位で変更することも可能だ。
ブラウザの要素検証でも同様のことは可能だが、ワンクリックでできる手軽さが良い。
Page Ruler Redux
Page Ruler Redux
Webページ上に「ものさし」が表示され、サイズをピクセル単位で計測できるアプリ。
Webページ上に「ものさし」が表示され、サイズをピクセル単位で計測できるアプリ。
要素のサイズを調べたいなら「CSSViewer」などで十分だが、このアプリは自分の好きな場所でサイズが測れるのが良い。
「こっからここまでの長さは何ピクセルだ？」「この要素の幅を調べたい」といったときに重宝する。
Image Downloader
Image Downloader
いま表示しているWebページ上に存在する、すべての画像を一括でスキャン。そしてダウンロードできるアプリ。
いま表示しているWebページ上に存在する、すべての画像を一括でスキャン。そしてダウンロードできるアプリ。
「横幅300px以上の画像のみをダウンロード」など、画像のサイズによる絞り込みができるので、自分の欲しい画像を狙ってダウンロードできるのが嬉しい。
Copy All Urls
Copy All Urls
いま開いているタブのURLをコピーできる、あるいはコピーしたURLを一括で開くことができるアプリ。
いまChromeで開いてるタブのURLを一括でコピーできるアプリ。「とりあえずリンクを開きまくって、最後にURLを一括でコピー」という使い方が便利。
また、逆に、コピーしたURLをすべていっぺんに開くこともできる。
制作したテストページのURLを全部コピーして、このアプリの「Paste」を使うだけで、すべてのページを一気に開ける。検証をするときに便利だ。
The QR Code Extension
The QR Code Extension
いま開いているページのQRコードを生成してくれるアプリ。
いま開いているページのQRコードを生成してくれるアプリ。「このページをスマホの実機で確認したい」というときに便利。
Lighthouse
Lighthouse
いま開いているページを Lighthouse で計測してくれるアプリ。
クリックするだけで、いま開いているページを Lighthouse で計測してくれるアプリ。
Lighthouse は Google が提供しているフリーのパフォーマンス分析ツール。
ページの表示スピードやSEO評価、アクセシビリティなどを、点数で評価してくれる。サイト改善の指標となる重要案ツールだ。
SEO META in 1 CLICK
SEO META in 1 CLICK
いま開いているページのSEO情報をまとめて教えてくれるアプリ。
ワンクリックで、いま開いているページのSEO情報をまとめて教えてくれるアプリ。
titleやdescriptionなどはもちろん、Canonical、OG系のデータの確認や、noindexのチェック、h1・h2などの見出し構造のチェック、画像の alt チェックなどなど、SEOに関する項目を網羅的に調べてくれる。
Meta Getty
Meta Getty
複数のページの meta 情報を一括で取得できるアプリ。
複数のページの meta 情報を一括で取得できるアプリ。取得したデータはExcelなどに貼り付けることもできる。
制作したページの一覧を用意して、それに Meta Getty を使用すれば、meta 情報の一括チェックができる。
一瞬でページリストを作ることも可能。非常に便利なアプリだ。
あとがき
最後になりましたが、この記事でご紹介したもののいくつかは、以下のTwitterのツイートを参考にさせていただきました。この場を借りてお礼申し上げます！ありがとうございました！
【web制作が捗る！】
おすすめのGoogle Chrome拡張機能についてまとめてみました！
生産性向上にも繋がるので、コーダーやwebデザイナーの方はぜひ！#駆け出しエンジニアと繋がりたい pic.twitter.com/tUQSLbrtue— さくや｜ webデザイナー×図解 (@sakuya_design) August 6, 2021
