【2023年】ウェブ制作に役立つオススメのChrome拡張機能15選

普段ウェブサイトを閲覧するときに使っているブラウザ。その中でも特にシェア率が高いのがGoogle Chromeです。

Google Chromeには「拡張機能（Chrome Extension）」という機能があり、インストールするとさまざまな便利機能が使えるようになります。

今回はウェブ制作に役立つChrome拡張機能を「調査」「制作」「確認」の3つの観点から5個ずつ、合計15個紹介します。
地道に一生懸命やっていた作業がラクになるので、ウェブ制作をしている方はぜひ参考にしてください。

Chrome拡張機能のインストール方法

Chrome拡張機能は「Chrome ウェブストア」でインストールできます。
ここで追加したい拡張機能を探して、詳細ページの「Chrome に追加」→「拡張機能を追加」ボタンをクリックするとインストールされて使えるようになります。

拡張機能の管理

インストール後はGoogle Chrome右上の「ジグソーパズル」アイコンをクリックすると、すべての拡張機能がパネル内に一覧表示されます。

ピンアイコンをクリックしてアクティブにしておくと、ブラウザ右上にアイコンを固定表示できます。

拡張機能には「インストールしているだけで機能するもの」「使いたいタイミングで実行して機能させるもの」があります。
使いたいタイミングで実行したい場合は、拡張機能のアイコンをクリックすると実行できます。

そのため、よく使う拡張機能はピンしてクリックしやすくしておきましょう。

ローカルファイルやシークレットモードでも拡張機能を使えるようにする

ウェブ制作をしていると、ローカルのHTMLファイルを直接ブラウザで開いたり、キャッシュの影響を受けないためにシークレットモードでページを開くことがあります。

デフォルトの状態では、これらの場合に拡張機能が使えないため、別途設定をしておく必要があります。

まず、「ジグソーパズル」アイコンをクリックして一番下の［拡張機能を管理］をクリックします。
拡張機能の一覧画面が表示されるので、設定したい拡張機能の「詳細」をクリックして詳細画面へ移動します。

ここに「シークレット モードでの実行を許可する」という項目があるので、チェックをオンにするとシークレットモードでも拡張機能が使えるようになります。

また、ローカルファイルでも使えるタイプの拡張機能の場合は「ファイルの URL へのアクセスを許可する」という項目が表示されるので、それを有効にすればローカルファイルでも使えるようになります。

他端末との同期

いろいろ拡張機能をインストールしていると、あとで別端末に移行するときに移行が大変だと思うかもしれません。
しかし、Google Chromeはログインするユーザーが同じであれば、他PCのGoogle Chromeにログインしたタイミングで、拡張機能が自動でインストールされて同期するようになっています。

そのため、拡張機能は1度インストールしておけばPCの移行時などに、同じGoogleアカウントでログインするだけで移行が完了します。

もちろん移行だけでなく複数端末持っている場合にも便利で、片方に拡張機能をインストールすれば、同期されてもう片方にも拡張機能がインストールされます。

「調査」に便利な拡張機能

Wappalyzer

「Wappalyzer」は現在開いているページで使われているサーバーやCMS、プログラミング言語やライブラリ・フレームワークなどの情報が一覧で表示されるようになる拡張機能です。

拡張機能のアイコンをクリックするとポップアップが表示されます。

下記は表示される項目の一部です。
「そんなことまで分かるの？」という情報が一覧で表示されます。

• CMS
• CDN
• アナリティクス
• データベース
• ブログ（ブログシステム）
• タグマネージャー
• JavaScriptフレームワーク
• JavaScriptライブラリ
• Webサーバー
• リバースプロキシ
• フォント
• プログラミング言語

ウェブサイトやウェブサービスがどんな技術を使って作られているのか簡単に調べられるので、技術調査をするときに非常に役立ちます。
また、見たことのない名前が出てきたら、その名前をGoogle検索して回るだけでも知識が広がります。

定期的に情報が更新されて表示される項目もどんどん増えているので「最新の技術だから検出されない！」のようなことが少ないのもポイントです。

CSS Peeper

「CSS Peeper」は現在開いているページの「基本的な情報」「フォント設定」「配色」「画像情報」などを確認できる拡張機能です。

拡張機能のアイコンをクリックするとパネルが表示されて、そこで情報を確認できます。

パネル下のタブでそれぞれ「General（基本情報とフォント設定）」「Colors（配色）」「Assets（画像情報）」を切り替えて確認できます。

また、パネルが表示されている状態でページ内の要素をクリックすると、パネルが「Inspector」に切り替わって、その要素の情報が表示されます。

これらは開発者ツールでも確認できますが、UIが見やすくシンプルなので「非エンジニアの人でも使いやすい開発者ツール」だとイメージすると分かりやすいです。

単に見やすいだけではなく、開発者ツールはあくまで開発が目的のツールなのに対して、CSS Peeperはデザイン要素の抽出をメインにしているので、機能が絞られていますしコードが一切表示されません。

また、［Assets］タブの左上にある「Export All」をクリックすると、ページ内で使っている画像を一括でダウンロードできたりなど、開発者ツールにはない機能もあります。

What Font?

「What Font?」は選択した要素のフォントに関する情報を表示する拡張機能です。

フォントに関する情報は開発者ツールを見れば分かります。
しかし、開発者ツールだと1箇所だけ見るなら早いですが、複数箇所の情報を見るとなると少し面倒です。

What Font?を使えば一瞬でフォント関連の指定をポップアップで表示できますし、複数箇所の情報を同時に出せます。

使い方は拡張機能のアイコンをクリックした状態で、画面内の要素をクリックするだけです。
これで、クリックした箇所に設定されているフォント情報がポップアップで表示されます。

サイト内でどのように文字関連の指定がされているかざっくり調べたいときに、片っ端から要素をクリックして確認できます。

OneTab

「OneTab」は大量に開いてしまったタブを1つにまとめる拡張機能です。

調べ物をしていて、いつの間にかタブが大量に開いてしまっていることはありませんか？
「OneTab」を使うと、アイコンをクリックしたタイミングで、現在開いているタブを一覧にして1つのタブにまとめてくれます。

1度まとまったリストはGoogle Chromeを閉じて再度開いても残っているので、保存としての役割も兼ねています。

また、保存したページ一覧は「Webページとしてシェアする」をクリックすればURLでシェアできます。

調べた参考サイトを、1つ1つサイト名とURLをまとめて一覧にして共有するのは地味に面倒ですが、OneTabにまとめてそのURL1つを共有するみたいな使い方もできます。

ato-ichinen

「ato-ichinen」はGoogleの検索結果を1年以内のものに限定できる拡張機能です。
調べ物をしていると「古い情報が出てきて、試してみたけど現在はもう変わっていた」なんてことがあります。

それを防ぐためには、検索結果を1年以内に絞り込むなどして新しい情報だけを表示させる方法が一般的です。
標準のGoogle検索でも、検索ボックス下の［ツール］→ 「期間指定なし」を「1年以内」に切り替えると絞り込めます。

しかし、また別のキーワードで検索すると条件がリセットされてしまうのと、絞り込むためには2回クリックする必要があります。

「ato-ichinen」なら、機能の有効・無効はアイコンをクリックするだけで切り替えられますし、検索キーワードが変わっても常に絞り込まれます。

いろんなキーワードで調べて回る場合には非常に便利です。
ただし、無効にし忘れていると常に1年以内の結果しか出てこなくなるので注意が必要です。

「制作」に便利な拡張機能

GoFullPage – Full Page Screen Capture

「GoFullPage」はフルスクリーンキャプチャ（ウェブページ全体の画像撮影）をして、ダウンロードできる拡張機能です。

実は開発者ツールでもフルスクリーンキャプチャはできます。
方法は開発者ツール上でshift + command + Pを押してコマンドの実行画面を表示したあと、「フルサイズのスクリーンショットをキャプチャ（Capture full size screenshot）」と入力してenterで実行します。

これでもフルスクリーンキャプチャはできるので、わざわざ拡張機能を使う必要はなさそうに見えます。
しかし2023年現在、この開発者ツールで撮影した画像だと、下記の問題が発生する場合があります。

• CSSで「position: fixed;」が指定されて固定されている部分の表示がおかしくなる場合がある
• 右側にスクロールバーが映ってしまっている場合がある
• スマホサイズにした場合に1部の画面が切れてしまって、フルスクリーンで撮れていない場合がある

このように開発者ツールや他の拡張機能でおかしな表示になる場合でも、「GoFullPage」を使えば過去の経験上、大抵キレイに撮影できます。

拡張機能のアイコンをクリックすれば撮影が開始して、完了すると別タブが開くのでそこから「PNG」か「PDF」を選択してすぐにダウンロードできます。

開発者ツールに比べて手間が少ないので、複数のページを一気にキャプチャしたいときにも便利です。

溜まった履歴画像をクリアする

「GoFullPage」は一度キャプチャした画像は履歴として残っていきます。 画像枚数が増えていけばそれなりのサイズになってしまいます。

キャプチャ後に表示されるページの歯車アイコンの1つ左にある「リストアイコン」をクリックして、過去のキャプチャ画像を選択して「Delete」すれば削除できます。

Awesome Screenshot

また、似たような拡張機能に「Awesome Screenshot」というものがあります。

これもフルスクリーンキャプチャができますが、キャプチャ後に線や文字を入れてダウンロードできたり、動画撮影にも対応しています。

これもたまに表示がおかしくなる場合がありますが、文字を入れたい場合や動きを共有したい場合はこちらを使ってみるといいかもしれません。

TeamSync Bookmarks

「TeamSync Bookmarks」はブラウザのブックマークを他のGoogle Chrome（正確には他のGoogleアカウント）と同期できる拡張機能です。

チーム共通のブックマークフォルダを作成して、関連するリンクはすべてそこに入れるようにして使えます。
他にも自分1人で複数のGoogleアカウントを所持していてChromeのプロファイルを使い分けている場合にもブックマークの同期として使えます。

アカウント登録が必要だったり、少し設定に手間がかかりますが、ブックマークをよく使う人にとっては使って損のない拡張機能です。

svg-grabber - get all the svg's from a site

「svg-grabber」はサイト上にあるSVGをダウンロードできる拡張機能です。

PNGやJPGなど他の画像形式と違って、SVGは右クリックから保存ができません。
拡張機能のアイコンをクリックすると、別タブが開いてそこにページ上で使われているSVGの一覧が表示されます。

「Download all SVGs」をクリックすればすべてのSVG画像を一括ダウンロードできますし、画像下にある「Copy」を押せばSVGコードをコピーできて、「Download」を押せば個別にダウンロードできます。

ColorZilla

「ColorZilla」はサイト上でカラーピッカー（スポイトツール）が使えるようになる拡張機能です。

サイト上で使われている色や、画像内の特定箇所の色を調べたいときに、色コードを抽出できます。
使い方は拡張機能のアイコンをクリックして「Pick Color From Page」を選択します。

マウスポインタ部分の色が抽出されて、画面上部に色の情報が表示されるようになります。
この状態で抽出したい部分をクリックすると、クリップボードに色コードがコピーされます。

色を調べたいときに便利ですが、実は開発者ツールでもカラーピッカーは使えて、色を指定しているCSS箇所で色のプレビュー部分をクリックすると使えます。
そのため、たまにしかカラーピッカーを使わないのであれば、開発者ツールでも十分使えます。

Talend API Tester

「Talend API Tester（旧名：Restlet Client）」はブラウザ上で簡単にAPIを叩ける拡張機能です。

APIに対していくつかのパラメーターをPOST送信した場合のレスポンスが知りたいとき、通常はPOST送信用のスクリプトを作成して実行する必要があります。
しかし毎回それを行うのは面倒です。

Talend API Testerを使えば、APIをとりあえず動くかどうか試せますし、うまくPOST送信用のスクリプトが動作しない場合に、API側の 問題なのかスクリプト側の問題なのか、問題の切り分けをするときにも使えます。

拡張機能のアイコンをクリックすると、Talend API Testerのページが開きます。
ここでAPIのURLを入力したり「HTTPメソッド」の指定や、「header」「body」を指定してAPIを叩けます。

とりあえずAPIを試したいときにライトに使えるので便利です。

「確認」に便利な拡張機能

Responsive Viewer

「Responsive Viewer」はレスポンシブデザインのチェックができる拡張機能です。

開発者ツールでも各端末のプレビューはできますが、Responsive Viewerの場合は1つの画面で複数の端末サイズを横並びで一気に確認できます。

画面幅は用意されている端末サイズを選択したり、自分で指定することもできます。

最終的には実機確認も必要ですが、とりあえずGoogle Chrome上で各画面サイズでの表示をざっくり確認したいときに使えます。

Google Analytics オプトアウト アドオン (by Google)

「Google Analytics オプトアウト アドオン」はインストールすると、Google Analyticsにアクセスが計測されなくなる拡張機能です。

ウェブサイトの確認時点にすでにGoogle Analyticsを導入している場合は、確認時の余計なアクセスや動きがすべて計測されてしまう恐れがあります。
Google Analytics側からIPで除外することもできますが、わざわざ設定するのは面倒です。

インストールしておくだけで計測されなくなるので、念のためにインストールしておいた方が余計なデータが計測されなくて済みます。

注意点として、スマホの実機テスト時には結局計測されてしまったり、複数ブラウザでチェックする場合はブラウザすべてにインストールが必要な点があります。

Charset

「Charset」はブラウザ上で文字コードを変更できる拡張機能です。

拡張機能のアイコンをクリックすると、文字コードが一覧で表示されます。
この中から文字コードを選択するとページ内の文字コードが切り替わって、［Reset］で元に戻ります。

一見すると使いどころがなさそうに思えますが、JavaScriptファイルを直接ブラウザで開くと、コメントに日本語を使っている場合は「日本語 (Shift_JIS)」となり、文字化けしてしまいます。

これを「Unicode (UTF-8)」で明示的に指定してあげると、日本語のコメントが表示されます。

ブラウザで直接サーバーに上がっているファイルを確認してスクショを撮ってやり取りをするときなど、文字化けでも問題はありませんが、ひと手間かけて日本語のコメントも表示しておいてあげると親切です。

Pasty

「Pasty」は複数のURLをコピーした状態で拡張機能のアイコンをクリックすると、一気に複数URLを開く拡張機能です。

確認用のURL一覧をExcelやGoogle Spreadsheetで管理している場合に、一気に選択してコピー後、アイコンをクリックして一気に開けば確認作業もラクになります。

コピーして開いてを繰り返すような作業は意外と面倒ですし、ページの確認作業をするときはかなり大量のページを開くことになるので、一気に開いてしまった方がラクです。

Alt & Meta viewer

「Alt & Meta viewer」は画像のalt属性やページのmeta情報を確認できる拡張機能です。

alt属性やmeta情報を確認するためには、開発者ツールやソース表示にして該当タグを1つずつ確認して回る必要があります。
それが拡張機能のアイコンをクリックすれば見やすく表示されるので、見落としも少なくなります。

拡張機能のアイコンをクリックすると、右上に［画像の Alt 表示］と［Title Meta 表示］の2つのメニューが表示されます。

［画像の Alt 表示］を選択すればページ上の画像にポップアップでalt属性と画像サイズが表示されます。

［Title Meta 表示］をクリックすれば、ページのtitleタグとmeta情報が一覧で表示されます。

開発者ツールやソースコード表示だと余計な情報も多く、見て回るのは面倒です。
この拡張機能を使って見やすく抽出してもらいましょう。

デフォルトに存在する機能

拡張機能の中には、昔はよく使っていたものの、現在はGoogle Chromeのデフォルト機能として同じものが存在するため使わなくなったものもあります。

これらはわざわざ拡張機能をインストールして使うよりも、デフォルト機能を使った方が便利です。

The QR Code Extension

「The QR Code Extension」は現在開いているウェブページをQRコードにして表示してくれる拡張機能です。

現在は検索バーの「共有アイコン」をクリックして表示されるメニューの中に［QR コードを作成］があります。

［QR コードを作成］をクリックするとQRコードが表示されます。

実機検証をするときなどに、いろんなスマホ端末からQRコードを読み込んでページを表示させられます。
各端末へのURLの共有方法を考えなくて済むので便利です。

ClearCache

「ClearCache」はサイトのキャッシュをクリアする拡張機能です。
サイトの確認をするときにキャッシュが残っていると、ページの修正がうまく反映されていない場合があります。

そんなときにキャッシュのクリアが必要になりますが、この拡張機能なら1クリックで可能です。

しかし、実は開発者ツールを開いた状態で「再読み込みアイコン」を右クリックすると［通常の再読み込み］［ハード再読み込み］［キャッシュの消去とハード再読み込み］の3つの項目が表示されます。

ここで［キャッシュの消去とハード再読み込み］をクリックすれば、キャッシュクリアされて再読み込みされます。
開発者ツールを開いた状態でないと右クリックしても何も表示されないので、忘れないように注意が必要です。

拡張機能を使って便利に制作を進めましょう

今回紹介した拡張機能以外にも、Google Chromeにはさまざまな拡張機能があります。
「もしかしてこういう拡張機能ないかな？」と思って探してみると、意外と見つかったりします。

不便に感じることをそのままにせず、なにか良い方法はないか探ってみることもウェブ制作において重要ではないでしょうか。

地道な作業を短縮して、もっと考えたり時間をかけるべき場所にリソースを割けるように、このような拡張機能はうまく活用していきたいものです。