こんにちは。ディレクターのかなざわです。
皆さんはWebサイトをどのブラウザで見ていますか？
Web制作の現場では、Google Chrome（以下Chrome）を使っている人が多いのではないでしょうか。
ご存知の方も多いと思いますが、Chromeでは拡張機能がとても充実していて、自分好みにカスタマイズして便利に使うことができます。
今回は、ネクストページのスタッフに協力してもらい、Chromeで使っている拡張機能についてアンケートを行いました。
Web制作の現場で使われているオススメChrome拡張機能を、活用シーンと合わせてご紹介します！
人気定番ツールランキングから、Chromeマスターによるオススメツールまで色々あるので、ぜひ参考にしてみてください。
ネクストページ Google Chrome 拡張機能ランキング2017
まずはランキングから！ ネクストページで人気の拡張機能はこちらです！
第3位（6票）
6票集めた拡張機能が2つランクイン！
利用シーン
コーディングチェック
用途とコメント
画像（デザイン）とサイトを重ねて見比べる事ができます。セルフチェック時に利用してます。（エンジニア：はまちゃん）
OneTab
利用シーン
開いているブラウザのタブを１つにまとめてくれる。
用途とコメント
案件ごとに参考サイトをまとめておくと、お客さんの前で一気に出せて便利（ディレクター：金澤）
デザインを色々見ていて、開きすぎたときに一旦しまっておくのに使います（デザイナー：iuchi）
第2位（8票）
制作スタッフからの圧倒的支持を獲得したのがこちら。
利用シーン
altテキストの確認
用途とコメント
altテキストの確認に利用。コーダー、デザイナーからの支持が高かったです。
一方で、ディレクターが利用しているaltテキスト確認ツールは、Penduleでした。こちらは２票獲得。
第1位（11票）
栄えある第1位はこちら！ こちらが圧倒的に利用率の高かったツールです。
利用シーン
スマホでのサイトチェック
用途とコメント
QRコード生成ツール。Web制作の現場でなく、日常生活でも使えるツールです！（ディレクター：金澤）
ランキング番外編 〜どれを選ぶかはアナタ次第〜
定番のスクリーンショットツールがランクインしていない？！
実は、定番ツールゆえ、最も票が分かれたのがスクリーンショットツールでした。
それぞれ機能が違うので、シーンごとに使い分けると良さそうです！
5票
用途とコメント
スクリーンキャプチャが撮れる。何個か使いましたがこれに落ち着いた。読み込み中にブラウザ動かすとFIXできないのがちょっと不便（ディレクター：金澤）
構成資料などに、参考サイトとしてページ全体を載せるために使っています（ディレクター：青田）
3票
用途とコメント
Webサイトのスクリーンショットが撮れる。
スクリーンショットだけでなく、キャプチャや文字を書くことができます（デザイナー：ゆきじ）
1票
用途とコメント
キャプチャを撮る範囲や保存形式を選べたり、画面上でメールを送れたりするので便利。（ディレクター：やまもっちゃん）
職種別オススメ
ここからは、獲得数が少なかったものの、ネクストページのスタッフが実際に制作時に利用している拡張機能を職種別（ディレクター、デザイナー、コーダー、その他）にご紹介します。
★ディレクター向け
Quick Login for Google Accounts
用途とコメント
Googleアカウントの切り替えが可能です。複数のアカウントを管理するのに便利です。（ディレクター：金澤）
用途とコメント
Google Analyticsとの合わせ技で使えるヒートマップです。アクセスレポートに貼り付けたりして使っています。（ディレクター：金澤）
数回しか使っていませんが、初めて操作しても分かりやすかったです。（エンジニア：きっしー）
★デザイナー向け
用途とコメント
マートフォンなどのデバイスをワイヤレス接続し、ブラウズ、検査、デバッグなどをPCから操作できます。デザイン確認に利用。（デザイナー：こばやし）
同上、主にFireworksで使います（Photoshopはブラウザ側からの設定は特にしなくても見れます）。（デザイナー：iuchi）
用途とコメント
Webサイト上からカラーコードを抽出する際に使っています。（デザイナー：まっつん）
★コーダー向け
用途とコメント
用途とコメント：表示されているフォントを確認。要素検証だと設定されているフォントが表示されるが、これは今見えているフォントが表示されるのが便利（エンジニア：はまちゃん）
用途とコメント
html上のtableを選んで、エクセルに貼れる形でクリップボードにコピーできます。（デザイナー：iuchi）
CSSViewer
用途とコメント
htmlの詳しい検証は要素の検証を使用しますが、フォントファミリーやサイズや色、行間を知りたいぐらいなら、このツールを使用すると、カーソルを合わせるだけで分かって便利です。（デザイナー：iuchi）
Wappalyzer
用途とコメント
サイトで利用されているCMS・サーバー・フレームワークなどがわかります。（エンジニア：ひろし）
Whatruns
用途とコメント
ページ内で使われているスクリプトが分かります。「Wappalyzer」と同じような機能ですが、こちらのほうが、もう少し詳しく見ることができます（デザイナー：まっつん）
★その他
用途とコメント
http://で始まる文字列に自動的にリンクが張られます。（デザイナー：iuchi）
用途とコメント
URLを複数コピーしたとき（エクセルでセルをまたいでもOK）ワンクリックで全てのページをブラウザで開くことができる。（ディレクター：やまもっちゃん）
用途とコメント
urlらしき文字列に自動でリンクが貼られます。（エンジニア：ひろし）
Chromeマスター iuchiのオススメ８選
今回、社内で利用している拡張機能のアンケートを実施したところ、圧倒的に回答数の多いスタッフが1人いました。
デザイナーiuchiです。
iuchi先輩、Chrome使いこなしてる…と驚愕しました。せっかくなのでiuchi先輩が使っている拡張機能をご紹介します。
普段の何気ない動作がこれでかなり楽になると思います！ 先輩、さすがです。
用途とコメント
backspaceキーで戻れるようになります。（デザイナー：iuchi）
用途とコメント
Macでは「delete」キーで前のページへ戻れる。iuchiさんに教えてもらった（ディレクター：藤木）
用途とコメント
テキストを選択してちょっとドラッグ→離すと検索してくれます。（デザイナー：iuchi）
用途とコメント
タブを閉じる操作を連続で行うとき、間違えてChromeを閉じないよう、常に1つタブが残るようなります。（デザイナー：iuchi）
用途とコメント
IFRAME内のページを右クリックメニューから別タブで開けるようになります。（デザイナー：iuchi）
用途とコメント
ダウンロードマネージャー、ポップアップで表示されるのでデフォルトより少し使いやすいです。（デザイナー：iuchi）
用途とコメント
Googleカレンダーで、今日、日曜、土曜など、曜日の文字色や背景色を好きな色に変更できます。（デザイナー：iuchi）
用途とコメント
拡張機能管理。有効化・無効化・削除などを簡単にできます。（デザイナー：iuchi）
まとめ
今までも、chromeは便利なブラウザだな〜という印象が強かったのですが、今回のアンケートを取ったことで、ネクストページのスタッフが自分の作業の効率化を図る上で、拡張機能を有効に使っていることが分かりました。
意外と知らない機能もあり、また、これまでChromeの便利機能を共有する機会も無かったので良かったです。
今回紹介した中で利用していないものは、これからバンバン使ってみて、chromeをより使いやすく便利な”私専用ブラウザ”にカスタマイズして、もっと使い倒していきたいと思います！
皆さんも、Chromeを使う際には参考にしてみてください。
