今日から効率UP！Web運営の現場で使われているChrome拡張機能30選

ネット関係のマーケター、あるいはWebサイト運営者はブラウザに触れている時間が長い職種の一つと言えるでしょう。Webページやあるデザイン要素の構成要素をチェックすることは、技術的に詳しい方ならディベロッパーツールなどで色々可能です。

一方、一回一回は大した手間でなくても、大量のURLをチェックするなど作業量がある領域では、Chrome拡張機能の助けを得ることが効率化の近道です。ブラウザの拡張機能とは、組み込むことでChromeの機能をアップできる仕組みです。Googleから公式の「Chrome ウェブストア」が提供されていて、選んでインストールするだけで新しい機能が使えるようになります。

今回は作業量を減らせるChrome拡張機能を厳選してご紹介します。もしまだ使っていないのであれば、ぜひ試してみてはいかがでしょうか。

まずご紹介するのは、当メディア「マナミナ」を運営している株式会社ヴァリューズが2022年2月から新たに提供しているChrome拡張機能「Dockpit lite」。

「Dockpit lite」は、Webサイトを閲覧しながらワンクリックでそのサイトの流入数や集客構造が分かる便利な機能。複数サイトの比較をしたりより深堀りたい場合は、「Dockpit」本機能に遷移して詳細分析をすることも可能です。自社・競合サイト分析や情報収集をより迅速かつ効率的に行うことができます。
※「Dockpit lite」を利用するには、「Dockpit」本体の契約とログインが必要です

使い方は、Webサイトを閲覧中にブラウザの「Dockpit lite」ボタンをクリックするだけ。
予めDockpitにログインしておくと、下のサンプル画面のように、すぐにユーザー数やPV数、月次推移グラフなどが出てきます。

「Pasty」は、編集部イチオシのChrome拡張機能。複数のURLを一気にタブで開ける拡張機能です。ExcelやスプレッドシートにまとめたURLを一気に開くのに便利です。

担当しているWebサイトのURLを目視でチェックする作業は、みなさんも経験あるでしょう。1ページ2ページなら良いですが、数十URLになってくると、ブラウザ操作だけで手首を痛めてしまうなど、効率化が求められる分野です。

「Pasty」の使い方は簡単。URL群を含むテキストをコピーして、ブラウザの「Pasty」ボタンをクリックすると、一気にタブで開けます。

一部から熱い推薦があった「Twitter Bookmarks Search」は、その名の通りTwitterのブックマークを検索できるChrome拡張機能。

Twitterのいいねやブックマークには、標準では検索機能がついていません。そのため、これは後で役に立ちそう！とブックマークしたTweetが思い出せない！延々スクロールしないと出てこない！ということが起きがちです。

「Twitter Bookmarks Search」の使い方ですが、インストールするとTwitterのブックマーク画面に検索欄が出てきます。後は、キーワードを入れて検索すれば該当するTweet（複数）だけに絞り込まれます。残念ながらTwitterの「いいね」を検索できるChrome拡張機能は見つかりませんでした。

最近のAmazonやFacebookには計測用の長いパラーメーターが付与されていて、共有する前に手作業で除去している方も多いのではないでしょうか。こうした単純作業も積み重なると馬鹿になりません。

これらのパラメーターを除去するChrome拡張機能は総合的なものから単機能のものまで複数出ていて、ここでは3つご紹介します。

「ClearURLs」は、Amazonなどの計測用URLを自動的に除去してくれるChrome拡張機能。複数のURLパターンに対応しています。

「URL Shortener for Amazon」は、Amazonの商品URLに含まれる長大なパラメーターを除去し、きれいなURLを出力してくれるChrome拡張機能です。

使い方は簡単で、「URL Shortener for Amazon」をインストールして、Amazonの商品ページで右クリックするだけです。「短縮URLを生成」「短縮URLを生成（ページタイトル付き）」というメニューが現れるので、あとはお好きな方をどうぞ。

ある時から、Facebookで開いたURLにfbclid=で始まる長大な計測用パラメーターがつくようになりました。これを毎回手作業で除去するのは大変です。

「Cut fbclid」は、このfbclidを除いたきれいなURLに整形してくれるChrome拡張機能です。使い方は簡単で、インストールすれば特に設定や操作なしにfbclidがないURLでリンクが開きます。

「SEO META in 1 CLICK」は、開いているURLのメタタグや文書構造を出力してくれるChrome拡張機能。SEOの下調べに役立ちます。

SEO対策を行うにあたり、自社や他社のWebページがどのような見出し構造（h2、h3、...）を持っていて、またそれを資料に落とすにはどうしたら良いでしょうか。

もちろん手作業で調べることも可能ですが、ここはChrome拡張機能の出番です。URLを開いてブラウザの「SEO META in 1 CLICK」ボタンをクリックするだけで、必要な情報が出力され、コピーしてほかの資料に展開可能です。

メンバーからは「より本質的な作業に当てられる時間が増える」との評です。

開いているURLを共有する時に、タイトルをコピーして貼り付け、次にURLを貼り付けて整形...としていませんか？あるいはタイトル付きリンクを入力する時に手作業していませんか？

「Create Link」は、開いているURLから任意の書式に整形してコピーしてくれるChrome拡張機能です。タイトル付きURL、HTMLリンク、markdownなど複数パターン用意されていて、好みの使い方ができるので便利です。

「Create Link」の強化版的なChrome拡張機能が「GetTabInfo」です。ブラウザが開いていているタブ情報（タイトルやURL）をテンプレートで指定した書式に整形して一括出力できます。

使い方としては、記事一覧ページのリンクを全部開いて「GetTabInfo」で一括出力してエクセルに貼り付ける、などの応用が考えられます。

「Check My Links」は、開いているURL内のリンクチェックができるChrome拡張機能。

なんらかのリンクミスが発覚した際に、ほかのURLもまとめてチェックしなければいけないことがあります。すべてのURLを一括で検査してくれるツールではありませんが、開いているURLをチェックしてくれるだけでも手作業よりは楽になるはずです。

使い方ですが、ブラウザの「Check My Links」ボタンをクリックすると、URL内のリンクを検出して有効なリンクかチェックしていきます。全てのリンクに実際にアクセスするので、100件以上リクエストが発生する場合もあり、使い方には注意しましょう。

リンクチェックの結果は一覧表に加え、画面上でも有効なリンクは緑、リンク切れには赤のマーカーが引かれるので、視覚的にもわかりやすく便利です。

「HTMLエラーチェッカー」は、ワンクリックでHTMLの文法チェックをしてくれるChrome拡張機能。

HTMLを直書きするシチュエーションは減っていますが、それでもレイアウトが崩れたサイトの原因を調べなければいけない場面もあります。「HTMLエラーチェッカー」では文法エラーの箇所をビジュアルで表示してくれるので、大まかな当たりをつけるのに役立ちます。

「HTMLエラーチェッカー」の使い方ですが、都度実行する実行方法のほか、指定したサイトを開いたら自動的にチェックする設定も可能です。負荷がかかるので、サイト検証時などに一時的に指定すると良いでしょう。

「Google Analytics オプトアウト アドオン 」は、Googleが提供しているChrome拡張機能。アクセス解析から関係者アクセスを除くには、フィルター機能で社内IPなどを省く方法もありますが、出先やリモートワークには柔軟に対応できません。

この「Google Analytics オプトアウト アドオン 」をインストールすると、Google Analyticsからは計測されなくなります。ただし、全サイトから計測されなくなりますので、開発時一時的に使うなど、使い方に注意が必要です。

「Alt & Meta viewer」は、ALTに設定されたテキストを画像に重ね合わせて表示してくれるChrome拡張機能です。

SEO的な目的でページの画像ALTに何が設定されているかチェックしたい場合に、ソースをいちいち見ていくのは大変です。「Alt & Meta viewer」を使えば、WebページにALT文字列をオーバーレイ表示してくれるので楽です。

「Alt & Meta viewer」を使うには、URLごとに都度「Alt & Meta viewer」のON/OFFを操作する必要があります。

「Awesome Screenshot」は、スクリーンキャプチャの定番として知られるChrome拡張機能です。

スクリーンショットを撮ること自体はOS標準の機能でも手間ではありませんが、複雑なことをやろうとするとChrome拡張機能の出番です。

「Awesome Screenshot」では、数秒後の画面を撮りたい、画面全体を撮りたい、操作画面を録画したいな様々なニーズに一つの拡張機能で応えられるツール。画面録画機能がいならければ、「FireShot」という選択肢もあります。

セキュリティが厳しくなった最近のOSで、画面録画するだけでも様々な権限設定が必要です。「Awesome Screenshot」では設定ウィザードが出るので使い方も簡単です。

「GoogleTranslate」は、Googleの翻訳サービス。翻訳機能はWebからも利用できますが、公式のChrome拡張機能も提供されています。

まず、Chromeであれば右クリックメニューの「日本語翻訳」で「GoogleTranslate」による全文翻訳機能を利用できます。一方で、単語や文章レベルで意味を知りたいときに便利なのがChrome拡張機能。単語や文章を選択すると、POPUPで翻訳結果が表示されます。

「DeepL」は、新興の翻訳サービス。機械学習を使った翻訳サービスで、自然な翻訳ができると話題になっています。Webからも利用できますが、公式のChrome拡張機能も提供されています。

「DeepL」のChrome拡張機能を利用するには、インストールした後テキストを選択し、右クリックメニューの「選択したテキストを翻訳する」でPOPUPで翻訳結果が表示されます。

「Resolution Test」は、ブラウザの解像度をワンクリックで調整できるChrome拡張機能。

最近ではブラウザの幅によって動的にレイアウトが変わるレスポンシブデザインが主流になっています。Chrome標準の「デベロッパーツール」が使える人はそれでOKですが、「Resolution Test」を使うと、ワンクリックで任意の解像度に変更できます。

「Resolution Test」では、1024x768などデフォルトで用意されている解像度のほかに、任意の解像度を追加する使い方もできます。

Windows同士、あるいはMac同士で別PCにアクセスする方法は用意されていますが、Chrome同士でもリモートデスクトップできることはご存知でしょうか？

「手元にファイルがない」「出先から自宅のPCにアクセスしたい」「実家のPCをサポートしたい」等、別マシンを操作できれば便利なシーンは色々あります。Googleが提供する「Chrome リモート デスクトップ」を使えば、初期設定は必要なもののVPN接続等の面倒なしに、別OSでもアクセスできる便利さがあります。

ただし、ホスト側のマシンが電源ONであること、操作された側の画面を誰が見ているかわからないことなど、利用上注意すべき点はあります。

集中しないといけないのに、いつの間にかTwitterやWebを見ていたことはないでしょうか。これを避けるには、物理的にアクセスできないようにする方法が有効です。

「Block Site」は、指定したサイトへのアクセスを禁止するChrome拡張機能。hostsファイルを直接編集するよりスマートで、時間帯やインターバル、指定した単語を含むサイトにはアクセスしないなど、多機能なことが特徴です。

スタイルシートを検証するときに、Chrome標準の「デベロッパーツール」を使う方法もありますが、現在のスタイルを見られればOKという場合もあるはずです。

「CSSViewer」は、カーソル位置の計算済スタイルをオーバーレイで表示してくれるChrome拡張機能。使い方は、サイト単位で「CSSViewer」をON/OFFして、マウスを動かすだけ。CSS適用内容のパネルが表示されます。

最近ではユーザーエージェントの出番も減ってきていますが、それでも特定環境でおきるバグの検証等でユーザーエージェントを切り替えたいことがあります。「User-Agent Switcher for Chrome」は、プルダウンから変更できるChrome拡張機能です。


「User-Agent Switcher for Chrome」では、Internet Explorerの各バージョン、iPhone/Android/Firefox/Safariなどのユーザーエージェントを指定できます。オプションから任意のユーザーエージェントを指定する使い方も用意されています。

Googleが検索結果の決定要素にサイトの表示速度も考慮していることはよく知られています。サイトの表示速度の計測にはGoogle公式の「PageSpeed Insights」が使われますが、その中身はLighthouseによる計測結果です。

「Lighthouse」のChrome拡張機能では、表示中のサイトの計測結果を取得できます。ただし、表示内容は英語です。本格的に速度改善するときは日本語化された「PageSpeed Insights」側を使うなど、使い分けるとよいでしょう。

競合サイトがどういうシステム構成なのか知りたいときに便利なChrome拡張機能が「BuiltWith」です。例えば、WordPressで構築されたサイトは、多くのウィジットやプラグイン、JavaScriptライブラリ、CDNやレンタルサーバーなどで構成されています。

Chrome拡張機能「BuiltWith」をクリックするだけで、こうした構成要素の一覧を取得できます。

Google検索で古い情報ばかり出てきて役立たなかった経験がある方は多いでしょう。そんなときは、検索期間を絞り込む設定が有効です。


Chrome拡張機能「ato-ichinen」を有効にすると、検索期間を直近1年に絞り込めます。古い技術情報を予め取り除いたり、直近の動向を調べるのに役立ちます。

大抵のエディタには文字数を数える機能が付いていますが、単機能ならChrome拡張機能を使う方法もあります。「文字数カウント」は、入力した文字列の文字数をカウントしてくれるChrome拡張機能で、「かんたん文字数カウント」は選択したテキストを、右クリックから文字数カウントしてくれるChrome拡張機能です。

YouTubeやNetflixを流しながら作業することもあるでしょう。Picture-in-Pictureとは、動画の小窓をほかのウィンドウの上に抜き出す機能のことです。サイトのメニューやコメント欄など、不要な表示なしに動画のウィンドウだけにできるので、画面がすっきりします。

豊富な海外コンテンツが提供されているNetflixは、語学学習にも役立ちます。「Language learning With Netflix」は、語学学習に役立つ複数の機能を持つChrome拡張機能です。

複数言語の字幕を読み込んだり、右クリックによる単語帳、字幕単位で区切って再生するメディアコントロール機能などがあります。

次の字幕を再生するのに都度画面操作するのは手間ですが、キーボードショートカットにも対応していて、使いやすさも考慮されたChrome拡張機能です。

最近のAmazonは、業者の出品あるいは転売屋の存在によって「Amazonだから安心」「Amazonだから確実に買える」とは言えなくなってきています。「Keepa」は、Amazonの商品画面に価格推移のグラフを表示してくれるChrome拡張機能です。

転売屋によって価格が釣り上げられていたり、あるいはセールと言ってもそれほど安くなかったり、同じ商品でも価格の上下が常にあって、「Keepa」を使うことで、損をしないお買い物ができるようになります。

価格推移のグラフだけ注目されがちですが、Keepaには在庫復活時や設定価格以下での通知など多くの機能を備えています。

ブラウザを使う作業は、一個一個は単純作業でも繰り返すと膨大な作業量になります。大量のURLを処理する場合は、Chrome拡張機能を使うかどうかで数百クリックあるいは数時間から半日の節約になることも珍しくありません。

今回ご紹介したChrome拡張機能が、みなさまの生産性向上に役立つことを期待しています。