Chromeの”使える便利な拡張機能”。Web制作の現場便利ツールをご紹介。


こんにちは。ディレクターのかなざわです。
皆さんはWebサイトをどのブラウザで見ていますか?
Web制作の現場では、Google Chrome(以下Chrome)を使っている人が多いのではないでしょうか。
ご存知の方も多いと思いますが、Chromeでは拡張機能がとても充実していて、自分好みにカスタマイズして便利に使うことができます。

今回は、ネクストページのスタッフに協力してもらい、Chromeで使っている拡張機能についてアンケートを行いました。
Web制作の現場で使われているオススメChrome拡張機能を、活用シーンと合わせてご紹介します!
人気定番ツールランキングから、Chromeマスターによるオススメツールまで色々あるので、ぜひ参考にしてみてください。

ネクストページ Google Chrome 拡張機能ランキング2017

まずはランキングから! ネクストページで人気の拡張機能はこちらです!

第3位(6票)

6票集めた拡張機能が2つランクイン!

PerfectPixel by WellDoneCode

利用シーン
コーディングチェック
用途とコメント
画像(デザイン)とサイトを重ねて見比べる事ができます。セルフチェック時に利用してます。(エンジニア:はまちゃん)

OneTab

利用シーン
開いているブラウザのタブを1つにまとめてくれる。
用途とコメント
案件ごとに参考サイトをまとめておくと、お客さんの前で一気に出せて便利(ディレクター:金澤)
デザインを色々見ていて、開きすぎたときに一旦しまっておくのに使います(デザイナー:iuchi)

第2位(8票)

制作スタッフからの圧倒的支持を獲得したのがこちら。

Alt & Meta viewer

利用シーン
altテキストの確認
用途とコメント
altテキストの確認に利用。コーダー、デザイナーからの支持が高かったです。

一方で、ディレクターが利用しているaltテキスト確認ツールは、Penduleでした。こちらは2票獲得。

第1位(11票)

栄えある第1位はこちら! こちらが圧倒的に利用率の高かったツールです。

The QR Code Extension

利用シーン
スマホでのサイトチェック
用途とコメント
QRコード生成ツール。Web制作の現場でなく、日常生活でも使えるツールです!(ディレクター:金澤)

ランキング番外編 〜どれを選ぶかはアナタ次第〜

定番のスクリーンショットツールがランクインしていない?!
実は、定番ツールゆえ、最も票が分かれたのがスクリーンショットツールでした。
それぞれ機能が違うので、シーンごとに使い分けると良さそうです!

5票

Full Page Screen Capture

用途とコメント
スクリーンキャプチャが撮れる。何個か使いましたがこれに落ち着いた。読み込み中にブラウザ動かすとFIXできないのがちょっと不便(ディレクター:金澤)
構成資料などに、参考サイトとしてページ全体を載せるために使っています(ディレクター:青田)

3票

Awesome Screenshot

用途とコメント
Webサイトのスクリーンショットが撮れる。
スクリーンショットだけでなく、キャプチャや文字を書くことができます(デザイナー:ゆきじ)

1票

Fire shot

用途とコメント
キャプチャを撮る範囲や保存形式を選べたり、画面上でメールを送れたりするので便利。(ディレクター:やまもっちゃん)

職種別オススメ

ここからは、獲得数が少なかったものの、ネクストページのスタッフが実際に制作時に利用している拡張機能を職種別(ディレクター、デザイナー、コーダー、その他)にご紹介します。

★ディレクター向け

Quick Login for Google Accounts

用途とコメント
Googleアカウントの切り替えが可能です。複数のアカウントを管理するのに便利です。(ディレクター:金澤)

Page Analytics

用途とコメント
Google Analyticsとの合わせ技で使えるヒートマップです。アクセスレポートに貼り付けたりして使っています。(ディレクター:金澤)
数回しか使っていませんが、初めて操作しても分かりやすかったです。(エンジニア:きっしー)

★デザイナー向け

Adobe Edge Inspect CC

用途とコメント
マートフォンなどのデバイスをワイヤレス接続し、ブラウズ、検査、デバッグなどをPCから操作できます。デザイン確認に利用。(デザイナー:こばやし)
同上、主にFireworksで使います(Photoshopはブラウザ側からの設定は特にしなくても見れます)。(デザイナー:iuchi)

ColorPick Eyedropper

用途とコメント
Webサイト上からカラーコードを抽出する際に使っています。(デザイナー:まっつん)

★コーダー向け

WhatFont

用途とコメント
用途とコメント:表示されているフォントを確認。要素検証だと設定されているフォントが表示されるが、これは今見えているフォントが表示されるのが便利(エンジニア:はまちゃん)

Table Capture

用途とコメント
html上のtableを選んで、エクセルに貼れる形でクリップボードにコピーできます。(デザイナー:iuchi)
CSSViewer

用途とコメント
htmlの詳しい検証は要素の検証を使用しますが、フォントファミリーやサイズや色、行間を知りたいぐらいなら、このツールを使用すると、カーソルを合わせるだけで分かって便利です。(デザイナー:iuchi)
Wappalyzer

用途とコメント
サイトで利用されているCMS・サーバー・フレームワークなどがわかります。(エンジニア:ひろし)
Whatruns

用途とコメント
ページ内で使われているスクリプトが分かります。「Wappalyzer」と同じような機能ですが、こちらのほうが、もう少し詳しく見ることができます(デザイナー:まっつん)

★その他

Text URL Linker

用途とコメント
http://で始まる文字列に自動的にリンクが張られます。(デザイナー:iuchi)

Pasty

用途とコメント
URLを複数コピーしたとき(エクセルでセルをまたいでもOK)ワンクリックで全てのページをブラウザで開くことができる。(ディレクター:やまもっちゃん)

Text Link Plus

用途とコメント
urlらしき文字列に自動でリンクが貼られます。(エンジニア:ひろし)

Chromeマスター iuchiのオススメ8選

今回、社内で利用している拡張機能のアンケートを実施したところ、圧倒的に回答数の多いスタッフが1人いました。
デザイナーiuchiです。
iuchi先輩、Chrome使いこなしてる…と驚愕しました。せっかくなのでiuchi先輩が使っている拡張機能をご紹介します。
普段の何気ない動作がこれでかなり楽になると思います! 先輩、さすがです。

Back To Back

用途とコメント
backspaceキーで戻れるようになります。(デザイナー:iuchi)

Go Back With Backspace

用途とコメント
Macでは「delete」キーで前のページへ戻れる。iuchiさんに教えてもらった(ディレクター:藤木)

Drag and Go

用途とコメント
テキストを選択してちょっとドラッグ→離すと検索してくれます。(デザイナー:iuchi)

Last Tab

用途とコメント
タブを閉じる操作を連続で行うとき、間違えてChromeを閉じないよう、常に1つタブが残るようなります。(デザイナー:iuchi)

Open Frame

用途とコメント
IFRAME内のページを右クリックメニューから別タブで開けるようになります。(デザイナー:iuchi)

Fruumo Download Manager

用途とコメント
ダウンロードマネージャー、ポップアップで表示されるのでデフォルトより少し使いやすいです。(デザイナー:iuchi)

G-calize

用途とコメント
Googleカレンダーで、今日、日曜、土曜など、曜日の文字色や背景色を好きな色に変更できます。(デザイナー:iuchi)

SimpleExtManager

用途とコメント
拡張機能管理。有効化・無効化・削除などを簡単にできます。(デザイナー:iuchi)

まとめ

今までも、chromeは便利なブラウザだな〜という印象が強かったのですが、今回のアンケートを取ったことで、ネクストページのスタッフが自分の作業の効率化を図る上で、拡張機能を有効に使っていることが分かりました。
意外と知らない機能もあり、また、これまでChromeの便利機能を共有する機会も無かったので良かったです。
今回紹介した中で利用していないものは、これからバンバン使ってみて、chromeをより使いやすく便利な”私専用ブラウザ”にカスタマイズして、もっと使い倒していきたいと思います!
皆さんも、Chromeを使う際には参考にしてみてください。