GoogleChrome(以下、Chrome)をメインブラウザとして使用しているWeb制作者の方は多いのではないでしょうか。
Chromeは標準のままでもじゅうぶんに快適なのですが、拡張機能(アドオン or エクステンションともいいます。)と呼ばれる機能があり、自分の好きなようにブラウザをカスタマイズすることができます。
この拡張機能によって、毎日のブラウジングがより快適になるだけでなく、Web制作を行うにあたっても非常に便利な機能を追加することができるのです。
しかし、非常に多くの種類があり、どれを選んでいいかわからない、という方もいるのではないでしょうか。
今回は、数あるChrome拡張機能の中から、特にWeb制作に携わっている人へ「最低限これだけは入れておきたい!」というものを厳選してご紹介します。
拡張機能をインストールする際の注意点
拡張機能は便利であるため、ついついインストールしてしまいますが、いれすぎてしまうとブラウザが重くなってきます。
せっかく軽いブラウザを利用しているのにも関わらず、便利機能であるはずの拡張機能のいれすぎで重くなってしまうと本末転倒です。
Chrome拡張機能をインストールする際は、本当に必要なものを厳選する必要があります。
Web制作者が最低限入れておきたいおすすめ拡張機能
ato-ichinen
Googleの検索結果に表示される情報を、直近1年に更新された情報のみにソートすることができる拡張機能です。
デザインやプログラミングの情報は、次から次へと新しい情報が更新されるので、できれば常に最新の情報を追いたいところです。
検索結果は、古い記事もすべてインデックスされているため、必ずしも最新の情報が上位表示されているわけではありません。
そんなとき、ato-ichinenを使えば、直近1年の結果のみが表示されるので、古い情報に惑わされることもありません。
オン/オフがカンタンにできるので、ソートする必要がない時はオフにしておきましょう。
【ダウンロード】ato-ichinen – Chrome ウェブストア
webページショット – Webpage Screenshot
今表示しているページのスクリーンショットをワンクリックで保存できる拡張機能です。
見たままの状態でのキャプチャの他に、1ページすべてをキャプチャすることもできます。
それだけでなく、保存する前にテキストや簡単な図、矢印などを書き込むことができるので、誰かに伝える時にもスムーズにコミュニケーションがとれます。
【ダウンロード】webページショット – Webpage Screenshot – Chrome ウェブストア
User-Agent Switcher
表示しているページを手軽にユーザーエージェント切り替えができる拡張機能です。
Web制作において、スマホ対応だったり、クロスブラウザ対応は無視できない存在です。
そんな時に、いちいちデバイスやブラウザを替えなくても、この拡張機能からすぐに切り替えることができます。
また他のサイトなどでちょっとスマホ表示が見てみたい時などにも非常に便利です。
【ダウンロード】User-Agent Switcher – Chrome ウェブストア
Create Link
記事を自分のブログで紹介したり、ツイートしたりする時に、一発で任意の形式でコピーできる拡張機能です。
例えば、紹介したい記事のタイトルタグとリンクを好きな形式で登録しておけば、HTMLやテキストを一緒にコピーすることができます。
デフォルトでPlain textやmarkdownなどが登録されていますが、用意されているタグを使用して自由にフォーマットを作ることもできます。
使い方などについては下記の記事などを参考にどうぞ。
プログ記事の作成支援Chrome拡張「Create Link」の設定例まとめ
【ダウンロード】Create Link – Chrome ウェブストア
ColorPick Eyedropper
ページ上の気になる部分のカラーを簡単に調べることができる拡張機能です。
アイコンをクリックして、ページ上で調べたい色の部分にマウスオンすると、その部分のカラーコードが表示されます。
表示されたカラーコードはもちろんそのままコピー可能。
すぐにカラーを調べたい時などに非常に役立ちます。
【ダウンロード】ColorPick Eyedropper – Chrome ウェブストア
MeasureIt
ページ上でドラッグするだけで、気になる要素の縦横のサイズを簡単に調べることができる拡張機能です。
サイト制作時などに、「このページのボタンサイズを調べたい」と思ったことはありませんか?
そんな時に、MeasureItのアイコンをクリックして、ボタンに合わせてドラッグするだけでサイズを知ることができます。
【ダウンロード】MeasureIt – Chrome ウェブストア
Appspector
閲覧しているWebサイトがどんな技術を使っているかを簡単に知ることができる拡張機能です。
ダウンロードするだけで、WordPressだったりjQeryだったりとアイコンで表示されるので、気になったサイトが何でできているのか参考にすることができます。
【ダウンロード】Appspector – Chrome ウェブストア
Social Analytics
FacebookやTwitterなど、各種SNSでどのくらいシェアされたのかが簡単にわかる拡張機能です。
例えば、自分の書いた記事のシェア数やいいね数、ツイート数を知りたい時などに、アイコンをクリックするだけでデータが表示されるので、現在の状況を手軽に知れて便利です。
他にもバズっている記事がどのくらいシェアされているのかも知れるので、色々と参考になったりします。
【ダウンロード】Social Analytics – Chrome ウェブストア
はてなブックマーク Google Chrome 拡張
Social Analyticsは海外製のため、日本でメジャーな「はてなブックマーク」などのサービスは入っていません。
はてなブックマークの数値を手軽に知りたい場合は、はてなが公式で提供している拡張機能を使いましょう。
閲覧中のページを簡単にブックマークできるだけでなく、現在のブックマーク数がバッジで表示されたり、ブックマークコメントが読みやすいなど、はてなブックマークをよく使う人にとって非常に便利な機能が提供されています。
【ダウンロード】はてなブックマーク GoogleChrome 拡張 – Chrome ウェブストア
SimilarWeb Extension
訪問数や流入キーワード、滞在時間など、競合サイトの様々な数値やデータを閲覧することができるSimilarWebの拡張機能です。
SimilarWebのサイトに行ってURLで検索しなくても、この拡張機能があればほとんどのデータを手軽に閲覧することができます。
日頃から競合サイトの状況などをよくチェックするWebデェレクターなどにおすすめです。
【ダウンロード】SimilarWeb – Chrome ウェブストア
RSS Subscription Extension
簡単にRSSフィードを登録できる拡張機能。Googleが公式で提供しています。
更新情報が知りたいサイトがあっても、RSSボタンがない場合があります。そんな時にこの拡張機能が使えば任意のRSSリーダーに簡単に登録することができます。
【ダウンロード】RSS Subscription Extension(by Google) – Chrome ウェブストア
Evernote Web Clipper
閲覧中のページをEvernoteへ簡単に保存することができる拡張機能。
最新情報や、気になった記事をEvernoteに保存しているWeb制作者は多いかと思います。Evernote Web Clipperを使えば、ただ単に記事を保存できるだけでなく、注釈をつけたり、タグを設定したりなどがまとめてできるので、あとから探すのに困る必要はありません。
【ダウンロード】SimilarWeb – Chrome ウェブストア
AutoPagerize
ブラウザやニュースサイトでの複数ページにまたがる記事の2ページ目以降を自動的に繋ぎ合わせてくれる便利な拡張機能です。
特にボリュームの多いニュース記事などでは記事内でのページ遷移があったりなどで、少し読みづらかったりします。
そんな時に、この拡張機能があれば、自動的に1ページの記事のように読めるので、快適に読むことが出来ます。
【ダウンロード】AutoPagerize – Chrome ウェブストア
まとめ
有名なGoogleChrome拡張機能も多いので、すでに使っている機能もある人もいるかと思いますが、今回紹介した拡張機能はどれもWeb制作にあたってGoogleChromeを使いやすくしてくれるので、知らない機能は是非試してみてください
ひとつ注意点として、あまり拡張機能をインストールしすぎるとブラウザが重くなる可能性があります。本当に必要なものを厳選しましょう。