Webディレクターが選ぶ。今年利用して本当によかったGoogle Chrome拡張機能まとめ【2013年版】
2013/11/27
今回はディレクターやウェブ担当者の方に必ず入れておいていただきたいGoogle Chromeの拡張機能を厳選！
数えきれないほどのChrome拡張機能から、特にGoogleアナリティクスの機能拡張とサイト解析・分析などの運用フェーズで便利なものにフォーカスしてお届けします。
競合＆自社サイトを流入からPVまで一発分析
言わずと知れた競合分析サイト「SimilarWeb」の提供している拡張機能。今見ているサイトのおおよそのPVやUU、流入経路からソーシャル上でのパワーまで一瞬で把握してしまえる強烈なツールです。
「Full Analytics」をクリックするとトンデモ詳細データが！
HTML5文章構造をサックリ解析＆アウトライン化
HTML5でマークアップされているサイトであれば、その文章構造やマークアップの構造をアウトライン化して見せてくれる拡張機能。
競合がどんな構造で作っているのか？の解析はもちろん、開発途中の自サイトで構造チェックなどに使うことも可能です。
表示中のサイトで使われている技術を丸裸に
他社のサイトを見ている時に「コレどうやって作られてるのかなー」と思うこと、ありますよね？そんなときにこの「Chrome Sniffer」を入れておくと、アドレスバーにそのサイトで使われている技術的な情報（の一部）を表示してくれます。
WordpressやMTのようなCMS系、Twitter Bootstrapなどのフレームワーク情報から、PHPのバージョン、サーバーにnginx使ってるかどうか？などなど。サラッと調べたい時にオススメです。
ピクセル単位で閲覧中のサイトから色コードを取得
このサイトのここの色って何色なんだろう？という時にサッと起動できる便利な拡張機能。デフォルトで拡大機能とピクセル選択機能が搭載されているので、「ここ！」というピンポイントでカラーコードを取得できます。
検索エンジンのアップデートをGoogle Analyticsに表示
パンダ・ペンギンアップデートが起こった日をGoogleアナリティクス上に表示してくれるナイスな拡張機能。
インストールするとGoogleアナリティクスのいつものレポート上に専用のボタンが現れるので、これをクリックして表示したい情報やアップデートを選択すればOK。検索エンジンアップデートの他に各国の休日情報なども表示可能。
いつでもサッと見られる 小さな本格アナリティクス
― そういえば自社サイトのブラウザ比率ってどれくらいだっけ？
― このサイトって月間どのくらいUUあったっけ？
いちいちGoogleアナリティクスのアカウント開くのが面倒くさい！複数のアカウントをまたいでサクサクデータを見たい！という忙しい人用、超軽量高速アナリティクス。
とりあえずサラッと数値確認するだけならこれでほとんど事足りてしまいます。
Googleアナリティクスのタグ設定専用デバッガー
アナリティクスのタグがちゃんと設定されているかどうか？を、スグに解析できる。ただそれだけなんですが非常に重宝する拡張機能。
通常のトラッキングタグだけでなく、イベントタグやカスタム系のタグの挙動についても調べられるので、リリース後しばらくたってからの「あああああぁああ！」を、防ぐことができます。
GA上での新しいプロパティ作成を超高速・快適化
新しいプロパティを作るたびに毎回毎回設定しなければいけなかった「目標設定」や、「フィルター」、他セグメントなどの各カスタム項目を複数プロパティ間で共有できるという嬉しすぎる拡張機能。
もうこれで設定を確認しながら何回もプロパティ間を移動する手間は不要になります。
GAの数字データを見やすくヒートマップ表示
大量の数字の中でプラスな変化をした箇所、あるいはマイナスの変化をした箇所を一瞬で見分けられたら…！
そんな時はこれ。インストールするとアナリティクス画面内の各表に特殊なアイコンが出現。クリックすると各数値がヒートマップのように表示され、注意するべき数字データが一瞬で確認できるようになります。
自分のアクセスをGoogle Analyticsにカウントさせない
超地味。だけど多分全員が入れたほうが幸せになれるツール。
アナリティクスで自分のアクセスをカットしようとすると、ログインして管理画面から設定いってビュー設定からフィルタを設定して自分のIPアドレスを・・・・面倒ですよね？
ブラウザベースでセッションの受け渡しをカットしてくれるので、変動IPなどの環境でも使える便利な拡張機能です。
直感的なディレクター向けデベロッパーツール
Chromeの標準デベロッパーツールは確かに高機能。信じられないほどの高機能だから、何をどうすればいいのかよくわからない。という方、多いはず。
そんな方に使って欲しい「もう少し直感的で使いやすい」デベロッパーツール。
スタイルシートの表示といった基本機能はもちろん、「そのページで使われている色全部」をカラーコード付きで表示してくれたり、Divなどの階層構造を直感的に描画してくれたり、ブラウザのサイズを自在に変えられたり、ピクセル単位で「ここからここまで何ピクセル？」を教えてくれたりなどなど。
いじり倒すだけでも楽しい機能が満載です。
おまけ：持っていると便利なブックマークレット
正規の拡張機能では無いけれど、ボタンのようにブックマークバーに仕込んでおくと便利なマークレットを紹介します。【おまけ1】ページ編集ブックマークレット
以下の「ページ編集」というテキストリンクをブラウザのブックマークバーにドラッグ・アンド・ドロップして、編集したいページ上でクリックすればOK。画像を消したりテキストを書き換えたり色々できます。
「ここのテキストは何文字までなら改行されないんだ？」とか「この画像消したらどうなるんだろう？」なんていうちょっとした疑問を抱えた時に直接いじって試せます。
ブックマークバーへドラッグ ⇒ 「ページ編集」
【おまけ2】Alt全部出しブックマークレット
こちらも同じくブックマークバーにドラッグ・アンド・ドロップしてクリックすると稼働するタイプのブックマークレット。ページ上でクリックすると、表示中のページ内画像のAltを文字通り全部出ししてくれます。公開前のページチェックで大活躍します。
ブックマークバーへドラッグ ⇒ 「Alt全部出し」
【おまけ3】タグの閉じ忘れチェックブックマークレット
ブックマークバーへドラッグ ⇒ 「タグチェック」
とっくりばーさんで配布されていた「タグの閉じ忘れ」を指摘してくれるありがたいブックマークレット。
ブログやCMSで原稿を入れたらプレビューでれいあうとがががが…。という時に、デザイナーやプログラマーにお願いせずともワンクリックで「ここだよ」と教えてくれます。
【おまけ4】勝手にワイヤー化ブックマークレット
ブックマークバーへドラッグ ⇒ 「ワイヤー化」
最後はクリックするとページの構成を洗い出してワイヤーフレーム化してくれるブックマークレット。「いいなー」と思ったサイトのレイアウト構成を分析してみたい！というクレイジーなディレクターさんにオススメです。
（編集/執筆 中村健太）
