Webサイトの制作や運営において、コーディング後のチェックやタグの実装確認は時間がかかる作業ですよね。そんな「確認時間」を大幅に短縮し、業務を効率化してくれる便利なGoogle Chrome拡張機能（アドオン）を8つ厳選してご紹介します。Web制作者やサイト運営初心者の方は、ぜひ導入を検討してみてください。
Web制作・確認作業を効率化するChrome拡張機能8選
Alt & Meta viewer
コーディング後のALTやMeta情報のチェックに便利な拡張機能です。
チェックしたいページでアドオンのアイコンをクリックすると、下記のように「画像の Alt 表示」と「Title Meta 表示」のメニューが表示されます。
「画像の Alt 表示」をクリックすると、ページ内の画像に設定されているAltが表示されます。Altが設定されていない画像数も表示されるので、修正漏れを防げます。
画像の数が多くてAltが見づらい時は、該当の画像にマウスを乗せると、その画像のみのAltを表示できます。
「Alt なし」をクリックすれば、ページ内のAltが設定されていない画像を一覧で確認できます。
「Title Meta 表示」では、ページに設定されているメタ情報（Title, Description, Keywordsなど）を確認できます。
JavaScript Errors Notifier
閲覧中のページでJavaScriptエラーが発生していると、分かりやすく通知してくれるため、ケアレスミスのチェックに役立ちます。
JavaScriptエラーがあるときは、アドオンのアイコンが赤くなり、ブラウザの右下に赤い「！」マークが表示されます。
右下の「！」をクリックするとエラーの詳細が表示されます。エラーが出ていたら、ブラウザ標準のコンソール（開発者ツール）で詳細を確認しましょう。あくまで簡易チェック用として使うのがおすすめです。
Tag Assistant (by Google)
Google Analytics や Google タグマネージャーなどのGoogle系タグが正常に実装されているか、IDが重複していないか、IDは合っているかなどのチェックができます。
「Record」をクリックすることでユーザーの行動を記録できるため、アナリティクスの管理画面を開かなくても、値が取得できているかリアルタイムで確認できます。
例えば、HOTEL NEMU のサイトで一部のリンククリックでカウントをとっている場合、下記の「予約はこちら」ボタンをクリックしたとします。
すると、以下の画像のようにイベントクリックのカウントが取得できていることが分かります。実装後のチェックを管理画面を開かずにブラウザから確認できます。
Debugger for Adobe Analytics
Google Analytics と同様に、Adobe Analytics（旧称：サイトカタリスト）の実装状況も確認できます。
Adobe Analytics が実装されていると、コンソール画面にデバッグ情報が表示されるようになります。
以下のように、コンソールに送信されたデータが表示されます。
User-Agent Switcher for Chrome
Chromeのデベロッパーツールを開かなくても、手軽にユーザーエージェント（ブラウザやデバイスの種類を識別する情報）を切り替えられるツールです。
スマートフォンやタブレットなど、異なるデバイスでの表示崩れや挙動を手早く確認したいときに役立ちます。
The QR Code Extension
閲覧中のWebサイトのURLを、ワンクリックでQRコードに変換できます。
PCで見ているサイトをスマートフォンで素早く確認したい時などに重宝します。
Wappalyzer
閲覧中のWebサイトが、どのような技術（CMS、プログラミング言語、ライブラリ、解析ツールなど）で構築されているかを一覧で確認できます。
競合サイトの分析や、クライアントの既存サイトの技術調査などに役立ちます。
NoFollow
ページ内のリンクに rel="nofollow" 属性が設定されている箇所を、視覚的にハイライト（赤枠で囲むなど）します。
※nofollowとは、検索エンジンのクローラー（ロボット）に「このリンクを辿る（クロールする）必要がない」と指示するための属性です。例えば、ログイン画面へのリンクや、信頼性の低い外部サイトへのリンク、有料広告のリンクなどに使用されます。
SEO施策の一環として、内部リンクや外部リンクのnofollow設定をチェックする際に便利です。
各拡張機能のダウンロード先
- Alt & Meta viewer
- JavaScript Errors Notifier
- Tag Assistant (by Google)
- Debugger for Adobe Analytics
- User-Agent Switcher for Chrome
- The QR Code Extension
- Wappalyzer
- NoFollow
まとめ
今回は、Web制作やサイト運営の確認作業を効率化するChrome拡張機能8選をご紹介しました。すべてを一度に導入する必要はありませんが、ご自身の業務内容に合わせて「これは便利そうだ」と感じたものから試してみてはいかがでしょうか。便利なツールを活用して、作業時間を賢く短縮していきましょう。
よくある質問（FAQ）
Q1. 拡張機能を入れすぎるとChromeが重くなりませんか？
A1. はい、多くの拡張機能を有効にすると、メモリ使用量が増加しChromeの動作が遅くなる可能性があります。使用頻度の低いものは無効化（オフ）にしておき、必要な時だけ有効にするのがおすすめです。
Q2. これらの拡張機能は安全ですか？
A2. 本記事で紹介したものは、多くのユーザーに利用されている定番の拡張機能です。ただし、拡張機能は（特に無名なものは）閲覧情報や入力情報を抜き取るリスクもゼロではありません。信頼できる提供元のものか、レビューを確認してからインストールするようにしましょう。
Q3. スマートフォン（スマホ）版のChromeでも使えますか？
A3. 残念ながら、基本的にPC版Chrome向けの拡張機能は、スマートフォン版（iOS/Android）のChromeアプリでは利用できません。PCでの作業時にお使いください。