はじめまして！昨年12月に入社したWebディレクターの「わっち」です。

今回は、前職でもWebディレクターとして日々業務をしていた僕が、アダプターに入社してからも愛用しているChromeの拡張機能をおすすめさせていただきます！

Chrome拡張機能はGoogle Chromeブラウザで使える便利機能のことで、設定すると右上にアイコンで表示されます。

Chromeウェブストアから検索して追加したり、「〇〇 chrome拡張」などで検索したりできます。

ディレクターだけでなく、Web制作に関わる色んな方の様々な業務できっと役に立ちますよ。

Webページ内で使用されているカラーコードを取得できる「ColorPick Eyedropper」

Webページ内のカラーコードを取得してコピーできるツールです。

拡張機能のアイコンをクリックするとカラーピッカーが起動するので、調べたい箇所にピッカーを移動させてクリックすることでカラーコードを取得することができます。

Webページ内のカラーコードの一覧を取得できる「ColorZilla」

こちらもカラーピッカーツールで、カラーコードを取得できます。

先ほど紹介した「ColorPick Eyedropper」は、ある1点をピックアップしてカラーコードを取得できましたが、この「ColorZilla」ではWebページのカラーコードを一気に取得できます。

CSSを分析してカラーパレットを生成するので、そのカラーコードが使われているパーツまで知ることができます。

Webページで使用されているフォント名を確認できる「What Font」

マウスカーソルを当てた箇所のフォントを分析してくれるツールです。

ツールバーのWhat FontアイコンをクリックしてからWebページ上のテキストにカーソルを合わせるだけでフォント名が表示されます。

さらにクリックすると詳細ウィンドウが表示されます。font-family、font-weight、style、weight、size、line-height、colorなども確認できてとても便利です。

Webページのキャプチャを撮れる「Awesome Screenshot」

表示されている画面だけではなく、ページ全体のキャプチャを撮ることができるツールです。

動画のキャプチャも撮れるので、動きのあるページを共有するのにも役立ちます。

Webページ上に存在する全ての画像を一括でダウンロードできる「Image Downloader」

いま見ているWebページ上に存在する全ての画像を一括でスキャンしてダウンロードできるツールです。

「指定したサイズ以上の画像だけをダウンロード」など、サイズで画像を絞り込んで狙った画像だけをダウンロードすることができます。

開いているタブのURLを一括コピー・展開できる「Copy All Urls」

参考サイトなどのリンクをたくさん開いて、最後にURLを一括でコピーという使い方ができるツールです。

逆にコピーしたURLを一括で展開することもできるので、制作したテストページのURLを全てコピーして送ったり、一括で展開して検証することもできます。

ワンクリックでQRコードを発行できる「The QR Code Extension」

開いているWebページのQRコードをワンクリックで発行できるツールです。

パソコンで閲覧しているページをスマホでも確認したいとき、このツールで発行したQRコードをスキャンすれば一発で見たいページを開けます。

キャッシュクリアをワンクリックで行える「Clear Cache」

ツールバーのアイコンをワンクリックするだけでキャッシュを削除することができます。

Cookieや閲覧履歴などを同時に削除したり、キャッシュ削除後に表示されているページを自動で再読み込みする設定もできます。

一度に複数のデバイスサイズで表示確認できる「Emmet Re:view」

ブラウザ幅を変更したりデベロッパーツールを使用したりしなくても、PCやスマホ、タブレットなど複数デバイスでの表示確認を一度にできます。

このツールを使用すればスクロールやクリックした場合でも各デバイスの表示が連動するので全てまとめて確認できます。

開いているWebページのパフォーマンスを計測してくれる「Lighthouse」

LighthouseはGoogleが提供しているフリーのパフォーマンス分析ツールです。

クリックするだけで開いているWebページの表示スピードやSEO評価、アクセシビリティなどを点数で評価してくれます。

開いているWebページのSEO情報をまとめて教えてくれる「SEO META in 1 CLICK」

ワンクリックで開いているWebページのSEO情報をまとめて教えてくれるツールです。

titleやdescription、Canonical、OG系データの確認や、noindexのチェック、h1・h2などの見出し構造、画像のaltチェックなど、SEOに関する項目を網羅して調べてくれます。

複数ページのmeta情報を一括で取得できる「Meta Getty」

複数ページのmeta情報を一括で取得してくれるツールで、取得データはExcelなどに貼り付けることもできます。

制作したページの一覧を用意してこのツールを使えばmeta情報の一括チェックができます。ページリストを作ることも可能です。

Chrome拡張機能の注意点

拡張機能は便利なのですが、注意点もあります。

まず、便利だからと沢山インストールするとメモリの消費が激しいのでChromeが動作不安定になってしまうことがあります。不要なものは定期的に無効にするか削除するようにしましょう。

また、拡張機能はプログラムの一種なので個人情報を抜き取る「マルウェア」「スパイウェア」の混入もあり得ます。

新しい拡張機能を試す時は、出所不明のものは注意して事前にしっかり調べてからインストールしてください。

まとめ

以上、僕が日頃から愛用している拡張機能を紹介しました。

他にも紹介しきれないほど色々な拡張機能があるので、みなさんの業務で活用できそうなものがあればぜひ試してみてくださいね！