Web制作は、労働集約型のビジネスであるため、利益を増やしていく一つの手段として、業務効率化を図りコストを削減する必要があります。
そこで今回は、業務効率化を行うための、Chrome拡張機能を紹介します。
実際にWeb制作の現場で働く、弊社のスタッフ21人に導入しているChrome拡張機能を聞いてみました！
Chrome拡張機能の導入ランキング
早速ですが、Chrome拡張機能の導入ランキングTOP10を発表します！
| ランキング | 拡張機能名 | 概要 | 導入人数 |
|---|---|---|---|
| 1位 | ウェブページ全体をスクリーンショット – FireShot | Webページのスクリーンショットを撮るための拡張機能 | 15人 |
| 2位 | HTMLエラーチェッカー | HTMLのタグの記述ミスなどをエラー表示する拡張機能 | 13人 |
| 2位 | Pasty | コピーしたURLを一括で開く拡張機能 | 13人 |
| 4位 | Checkbot: SEO, Web Speed & Security Tester 🚀 | SEOガイドラインや読み込みスピード、 セキュリティの面からのチェックを行う拡張機能 | 10人 |
| 5位 | DeepL翻訳 | DeepL翻訳の拡張機能 | 9人 |
| 6位 | Image Downloader | Webページ上の画像を一括保存する拡張機能 | 7人 |
| 6位 | Wappalyzer | Webサイトで使用されている技術を見ることのできる拡張機能 | 7人 |
| 8位 | Alt & Meta viewer | 画像のAlt情報やページのMeta情報を確認できる拡張機能 | 6人 |
| 8位 | OneTab | 開いているタブをリスト化し、メモリの使用量を減少できる拡張機能 | 6人 |
| 8位 | Web Developer | 様々な状況下でのWebページ表示確認や動作テストを行える拡張機能 | 6人 |
それぞれの拡張機能について詳しく解説します！
1位：ウェブページ全体をスクリーンショット – FireShot
1位は、スクリーンショットが撮れる拡張機能「FireShot」！
総ユーザー数は、300万人超。弊社では、21人中、15人が導入していました。
FireShotでは、下記3種類のスクリーンショットをたった3クリック（アイコンをクリック、キャプチャ方法を選択、保存）で保存することができる拡張機能です。
- ページ全体をキャプチャ
- 表示部分をキャプチャ
- 選択範囲をキャプチャ
また、保存方法には、画像（PNG／JPG）とPDFの2種類があり、クリップボードへのコピーが行えるのも便利です。
FireShotは、下記から拡張機能に追加できます。
2位：HTMLエラーチェッカー
2位は、Webサイトコーディング時に役立つ「HTMLエラーチェッカー」！
総ユーザー数は、7万人超。弊社では、21人中、13人が導入していました。
HTMLエラーチェッカーは、Webページの表示崩れの原因になる、開始タグ・閉じタグの閉じ忘れを検知してくれる拡張機能です。
タグの閉じ忘れがある場合、下記のようなエラーが表示されます。
また、オリジナルの警告ルールを追加することも可能です。
フィルタリング用のキーワードを設定することで、ソースコード内にそのキーワードが含まれるときに警告が表示されます。
例えば、SSL対応時に「http://」が含まれていないか調査したいときには、「http://」をキーワードに追加することで、含まれる場合に下記のような警告を表示できます。
また、上記のエラー表示と警告について、オプション設定で「自動チェックを有効にする」ことが可能です。
自動チェックを有効にした場合、拡張機能のアイコンを押す必要が無くなります。
ページ読み込み時にエラーがある場合、拡張機能のアイコンにエラー数のバッジが表示され、エラーがあるかどうか一目でわかるようになります。
HTMLエラーチェッカーは、下記から拡張機能に追加できます。
2位：Pasty
HTMLエラーチェッカーと同率で2位は、複数URLを一気に開ける「Pasty」！
総ユーザー数は、10万人超。弊社では、21人中、13人が導入していました。
Pastyは、コピーした複数URLをブラウザで一気に開くことのできる拡張機能です。
例えば、下記のようにExcelでURLをまとめており、全てのページを確認したい場合があるとします。
この時、通常の方法では、一つ一つのURLをコピーしてアドレスバーに入力するか、Excelからリンクを一つ一つクリックしてページに飛ぶ必要があります。
数ページであれば、その方法でも問題ありませんが、20ページや30ページの場合は、とても時間がかかり非効率です。
拡張機能のPastyを使用すれば、エクセルのURLのセルをコピーして、拡張機能アイコンを1クリックするだけで、コピーしたURLを一括で開くことが可能です。
Pastyは、下記から拡張機能に追加できます。
4位：Checkbot: SEO, Web Speed & Security Tester 🚀
4位は、Webサイト改善に役立つ「Checkbot: SEO, Web Speed & Security Tester 🚀」！
総ユーザー数は、7万人超。弊社では、21人中、10人が導入していました。
「Checkbot: SEO, Web Speed & Security Tester 🚀」は、WebサイトのSEO、表示スピード、セキュリティを簡単に検証できる拡張機能です。
SEO、表示スピード、セキュリティについてエラーや改善点を表示されるため、Webサイトの改善に役立ちます。
Webサイト内のリンク切れURLなどの調査も行ってくれるのも便利です。
Checkbot: SEO, Web Speed & Security Tester 🚀は、下記から拡張機能に追加できます。
5位：DeepL翻訳
5位は、頻繁に翻訳を行う場合には必須「DeepL翻訳」！
総ユーザー数は、100万人超。弊社では、21人中、9人が導入していました。
DeepL翻訳は、翻訳精度の高さと翻訳文の自然さで人気が高まっている翻訳サービスであり、Chrome拡張機能も提供しています。
拡張機能を有効にした状態で、Webページ上のテキストをドラッグし、アイコンをクリックすると、下記のようにその場で翻訳が可能です。
DeepL翻訳の拡張機能が活躍するのは、文章を読むときだけではありません。
文章を書く時にも大活躍です。
TwitterなどのSNSやWordPressなどのCMS、Slackなどのチャットツールなど、ウェブ上でテキストを入力するときに瞬時に翻訳することが可能です。
下記は、Twitterの例ですが、テキストを入力すると右側にDeepL翻訳のアイコンが表示され、クリックすると入力していたテキストが翻訳されます。
DeepL翻訳は、下記から拡張機能に追加できます。
6位：Image Downloader
6位は、ページ内の画像を一括ダウンロードできる「Image Downloader」！
総ユーザー数は、100万人超。弊社では、21人中、7人が導入していました。
Image Downloaderは、画像をダウンロードしたいWebページで、拡張機能アイコンをクリックすることで、画像を一括ダウンロードできます。
特に便利なのが、フィルタリング機能です。画像の最小サイズ、最大サイズを指定して絞り込んだり、画像URLに含まれるテキストで絞り込むことが可能です。
Image Downloaderは、下記から拡張機能に追加できます。
6位：Wappalyzer
Image Downloaderと同率6位は、Webページで使われている技術を調査できる「Wappalyzer」！
総ユーザー数は、200万人超。弊社では、21人中、9人が導入していました。
Wappalyzerは、Webページで使われている技術やフレームワーク、サービスを一覧で表示してくれる拡張機能です。
例えば、Twitterで試してみると下記のように結果が表示されます。
このようにWebサービスやWebサイトで使用されている技術がわかるため、競合調査にも活用することができます。
Wappalyzerは、下記から拡張機能に追加できます。
8位：Alt & Meta viewer
8位は、WebページのAlt／Meta情報をチェックできる「Alt & Meta viewer」！
総ユーザー数は、4万人超。弊社では、21人中、6人が導入していました。
Alt & Meta viewerは、Webページ内に設置されている画像のAltタグとWebページのMeta情報（タイトル、ディスクリプション、OGP）などをチェックするのに便利な拡張機能です。
特に便利なのが、Altタグをチェックできる機能です。
該当のWebページで拡張機能アイコンをクリックし「画像のAlt表示」を選択すると、下記のように各画像上にAltに記載しているテキストと画像サイズが表示されるため、一気に確認することが可能です。
Alt & Meta viewerは、下記から拡張機能に追加できます。
8位：OneTab
Alt & Meta viewerと同率8位は、ブラウザのタブを整理できる「OneTab」！
総ユーザー数は、200万人超。弊社では、21人中、6人が導入していました。
調べごとをしていたら気付かないうちに、タブが増えすぎてとんでもないことに…でも後で見返したい…
OneTabは、増えすぎたタブを整理できる拡張機能です。
複数のタブを開いているChromeウインドウで、OneTabの拡張機能アイコンをクリックすると、開いていたタブが閉じ、下記のような画面が立ち上がります。
この画面で「すべて復元する」をクリックするとタブが開いた元の状態に戻ります。
また、タブのリストに名前を付けて保存することも可能です。
Chromeでタブをたくさん開いた状態にすると、メモリ使用量が増えてしまい、PCの動作が遅くなることがあります。
そういったことを防げるという面でも、OneTabは業務効率化に便利な拡張機能です。
OneTabは、下記から拡張機能に追加できます。
8位：Web Developer
Alt & Meta viewerやOneTabと同率8位は、Web開発者向けツール「Web Developer」！
総ユーザー数は、100万人超。弊社では、21人中、6人が導入していました。
Web Developerは、様々な状況下でのWebページの表示確認や動作テストが行える拡張機能です。
かなり多機能で、例えば下記のようなことが行えます。（全機能の内のほんの一部です）
- JavaScriptの無効化
- CSSの無効化
- 画像表示の無効化
- 背景画像の非表示
- Altタグの表示
- リンク先パスの表示
- ページ内のリンク一覧表示
- 外部リンクに枠線をつける
- レスポンシブ表示チェック
例えば、画像の読み込みに時間がかかる環境で、ページを閲覧される可能性を考慮すると、画像が読み込まない状態でもページ崩れが起きないようにする必要があります。
そのようなときには、画像表示を無効化した状態で表示確認を行いコーディングを行う必要があります。
このような特殊な環境時のテスト確認などにも活用できます。
Web Developerは、下記から拡張機能に追加できます。
以上、弊社社員21人に聞いた、拡張機能の導入数ランキングTOP10でした！
ここからは、TOP10にはランクインしなかったものの、便利な拡張機能を紹介します！
Webデザインに便利なChrome拡張機能
弊社社員が使用している拡張機能の中から、Webデザイナーが活用するのに便利なものを紹介します！
カラーピッカー
ColorZilla
Colorzillaは、Webページ上のカラーコードを取得できる拡張機能です。
ピンポイントで色を取得する機能と、ページ全体の配色を取得する機能があります。
ColorPick Eyedropper
ColorPick Eyedropperもカラーコードを取得するための拡張機能です。
Colorzillaと異なり、下記のように拡大鏡を活用してよりピンポイントのカラーコードを取得できるのが特徴です。
フォント調査
WhatFont
WhatFontは、Webページ上で使用されているフォント情報を表示する拡張機能です。
拡張機能アイコンをクリックした状態で、テキストにマウスオーバーすると、下記のようにフォント名が表示されます。
さらに、クリックすると詳細情報が表示され、CSSで指定されている太さやサイズ、色などの書式設定を確認することができます。
Fonts Ninja
Fonts NinjaもWhatFontと同様にWebページ上で使用されているフォント情報を表示する拡張機能です。
拡張機能アイコンをクリックして、テキストをマウスオーバーすると下記のように情報が表示されます。
WhatFontとの違いは、マウスオーバーするのみで、太さ、サイズ、行間、色などが確認できることです。
さらに、Fonts Ninjaでは、ページ内で使用しているフォントの一覧も表示されます。
Pinterest保存ボタン
Pinterestは、インターネット上にある画像を集めてブックマークできるサービスです。
Pinterest保存ボタンの拡張機能を追加すると、Webページ上の画像にマウスオーバーした時に、画像左上に「Pinterest保存ボタン」が表示されます。
このボタンをクリックすることで、簡単にPinterest上に画像を保存することができます。
偶然見つけた素敵なバナーやデザインなどを瞬時に保存することができるので、おすすめです。
Webサイトコーディングに便利な拡張機能
弊社社員が使用している拡張機能の中から、Webサイトコーディング時に便利なものを紹介します！
ピクセル計測
Page Ruler
Page Rulerは、Webページ上で要素のサイズをピクセル単位で測定できる拡張機能です。
デザイン通りにコーディングができているかを確認するときなどに活用できます。
リンクコピー
Copy Selected Links
Copy Selected Linksは、ドラッグで選択した範囲内にあるリンクのURLを一括コピーできるようにする拡張機能です。
テキストリンクやバナーなどリンク先URLをコピーしたい対象を選択して、右クリックし「Copy selected links」をクリックするとURLが一括でコピーできます。
開発環境切り替え
Server Switcher for Google Chrome™
Server Switcher for Google Chrome™は、テスト環境と本番環境をワンクリックで切り替えることのできる拡張機能です。
本番環境URLと対応するテスト環境のURLを事前に設定することで、本番環境からテスト環境、テスト環境から本番環境へワンクリックで切り替えられるようになります。
レスポンシブチェック
モバイルシミュレーター-レスポンシブテストツール
モバイルシミュレーター-レスポンシブテストツールは、iPhoneやiPad、Androidなど各デバイスのサイズでWebページを確認できる拡張機能です。
スクロールすると、画面下部のメニューバーが非表示になるなど、実際のデバイスと同様の動きをするほか、横向きのランドスケイプモードにも対応していることが特徴です。
また、シミュレータ内で、ページ遷移も可能で、下記のようなgifでの動画撮影にも対応しています。
Responsive Viewer
Responsive Viewerは、モバイルシミュレーターと同様に様々なデバイスサイズでWebサイトを確認できる拡張機能です。
複数サイズのデバイスを一つの画面で一括で確認できるのが特徴です。
確認するデバイスサイズが事前に決まっている場合は、新しいタブを作成して、該当デバイスを登録しておくことで、画面サイズを切り替えて確認するという手間が無くなります。
ユーザーエージェント変更
User-Agent Switcher for Chrome
User-Agent Switcher for Chromeは、ユーザーエージェントを変更することができる拡張機能です。
例えば、スマホ対応サイトの表示を確認する場合、画面サイズではなく、ユーザーエージェントでスマホ版に見た目が切り替わるようなWebサイトの場合、通常の方法では表示確認を行うことができません。
また、スマホからアクセスした場合に、「PC専用コンテンツのためスマートフォンからアクセスしてください」のような表示に切り替えるようなプログラムを書いている場合も、PCからでは確認を行うことができません。
そういったときに、ユーザーエージェントを切り替えることで、テストがおこなえるようになります。
User-Agent Switcher for Chromeでは、下記のユーザーエージェントに切り替え可能です。
- Chrome
- Internet Explorer
- iOS
- Android
- Windows Phone
- Firefox
- Opera
- Safari
- 独自に定義したユーザー エージェント文字列
修正指示
AUN[あうん]
AUNは、ふせん紙の感覚でWebサイトや画像にメモを貼って共有できるデザインの修正指示ツールで、弊社が開発・提供しています。
AUNにもChrome拡張機能があります。修正指示を出したいWebページにアクセスして、拡張機能アイコンをクリックすると自動でWebページのスクリーンショットを撮影し、修正指示の編集画面が立ち上がります。
この画面から下記のように修正指示を追加することができます。
保存するとURLが発行され、そのURLを共有することで修正指示を行うことができます。
テキストや口頭での指示よりも的確でミスが少なくなり、またExcelで作成するより何倍も効率的です。
Webサイト分析に便利な拡張機能
弊社社員が使用している拡張機能の中から、Webサイト分析に役立つものを紹介します！
サイト分析
Similarweb – トラフィックランク & ウェブサイト分析
Similarwebは、競合サイトの分析に利用できるツールで、Chromeの拡張機能を追加することで、ワンクリックで分析が行えるようになります。
調査したいWebサイトにアクセスして、拡張機能アイコンをクリックすると下記のような画面が表示されます。
あくまで推計値ではありますが、下記のようなデータを閲覧することが可能です。
- 訪問者数
- 直帰率
- 平均ページビュー
- 平均滞在時間
- 流入元ソース
その他の業務効率化に便利な拡張機能
最後に、弊社社員が使用している拡張機能の中から、その他の業務効率化に役立つものを紹介します！
文字数カウント
かんたん文字数カウント
かんたん文字数カウントは、Webページ上のテキストの文字数をカウントする拡張機能です。
文字数を知りたいテキストを選択し、右クリックし「選択したテキストをカウント」を選択すると、下記のようにポップアップで文字数が表示されます。
マウスジェスチャー
crxMouse Chrome™ Gestures
crxMouse Chrome™ Gesturesは、Webページ上でマウスジェスチャーを使えるようにするための拡張機能です。
マウスの右ボタンを押したままドラッグすることで様々な機能を実行できることができます。
例えば、右ボタンを押したまま「→」「↑」のようにドラッグすると、ページトップまでスクロールするなどです。
自分の使いやすように、マウス操作を設定し機能を割り当てることも可能です。
他にも「スーパードラッグ」という機能を活用すると、例えば、テキストを選択した状態で、左ボタンを押したまま「→」にドラッグするとGoogleでそのテキストを検索することもできます。
この機能もカスタマイズ可能で、GoogleではなくAmazonで検索するように設定することも可能です。
操作を覚えるまでに時間はかかりますが、覚えてからは作業スピードが格段にあがります。
動画再生速度変更
Video Speed Controller
Video Speed Controllerは、動画の再生速度を自由に変更できるようにする拡張機能です。
例えば、YouTubeの場合、最大2倍速までにしか変更できませんが、Video Speed Controllerを活用すると最大16倍速で再生することができるようになります。
下記は、YouTubeの例ですが、動画があるWebページにアクセスすると動画左上にボタンが表示され再生速度を変更できるようになります。
tableデータ取り込み
Table Capture
Table Captureは、Webページ上のtableデータを取り込むための拡張機能です。
Webページ上のtableデータをコピーして、Excelなどに貼りつける場合、下記のような問題にぶつかることがあります。
- データをコピーしてExcelに貼りつけたときに見出しと内容がずれてしまう
- データをコピーしてExcelに貼りつけたときになぜか全てのデータが1列に貼りつけられてしまう
- コピーするデータが多すぎでスクロールに一苦労
こういった問題を解決してくれる拡張機能です。
拡張機能アイコンをクリックすると、ページ内にあるtableデータを読み取り、一覧が表示されます。
そこからデータをコピーしたり、スプレッドシートに出力することができます。
スクレイピング
Scraper
Scraperは、Webページ上の規則性のあるデータを取得することができる拡張機能です。
記事一覧ページなどで、タイトルやURLのみ一括で取得してExcelに貼りつけたいなどの時に活用できます。
下記は、お知らせのタイトル文のみ取得してみた例です。ここでは、お知らせタイトルに使用されているCSSクラス名をもとに情報を取得しています。
Webサイト保守・運用業務を効率化するなら「トコトン」
ここまでWeb制作を効率化するChrome拡張機能について紹介してきましたが、
Webサイト保守・管理・運用業務を効率化するには、依頼管理ツール「トコトン」がおすすめです！
「トコトン」は、小規模案件に特化したプロジェクト管理ツールで、日々の細かい更新依頼の情報を一元化することができます。
下記のように、Webサイトの保守・管理・運用に特化した様々な機能を搭載しています。
- クライアント情報／契約内容登録機能
- プラン／サービス登録機能
- ステータス管理機能
- カレンダー型タスク管理機能
- ポイント機能
無料デモ体験の申し込みも受け付け中です。
詳しいサービス内容については、依頼管理ツール「トコトン」サービスサイトからご確認ください。
