【Web制作者向け】Google Chromeのおすすめ拡張機能(アドオン)13選

large_5619516786

Google Chromeをメインブラウザとして使用しているWeb制作者の人はどのくらいいるでしょうか。

Google Chromeは標準のままでも快適なのですが、拡張機能(アドオン)と呼ばれる機能があり、自分の好きなようにブラウザをカスタマイズすることができます。
この拡張機能によって、毎日のブラウジングがより快適になるだけでなく、Web制作を行うにあたっても非常に便利な機能をつけることができるのです。

今回は、数あるGoogle Chrome拡張機能の中から、特にWeb制作に携わっている人へ「最低限これだけは入れておきたい!」というものを厳選してご紹介します。

Web制作者が最低限入れておきたいおすすめ拡張機能

ato-ichinen

ato-ichinen

Googleの検索結果に表示される情報を、直近1年に更新された情報のみにソートすることができる拡張機能です。

デザインやプログラミングに関する情報や、ニュースなど、常に最新性が求められる場合、できれば古い記事などは検索結果から除外したい時があります。
ato-ichinenを使えば、直近1年の結果のみが表示されるので、古い情報に惑わされることもありません。
オン/オフがカンタンにできるので、ソートする必要がない時はオフにしておきましょう。

【ダウンロード】ato-ichinen – Chrome ウェブストア

webページショット – Webpage Screenshot

今表示しているページのスクリーンショットをワンクリックで保存できる拡張機能です。

見たままの状態でのキャプチャの他に、1ページすべてをキャプチャすることもできます。
それだけでなく、保存する前にテキストや簡単な図、矢印などを書き込むことができるので、誰かに伝える時にもスムーズにコミュニケーションがとれます。

【ダウンロード】webページショット – Webpage Screenshot – Chrome ウェブストア

User-Agent Switcher

User-Agent Switcher

表示しているページを手軽にユーザーエージェント切り替えができる拡張機能です。

Web制作において、スマホ対応だったり、クロスブラウザ対応は無視できない存在です。
そんな時に、いちいちデバイスやブラウザを替えなくても、この拡張機能からすぐに切り替えることができます。

また他のサイトなどでちょっとスマホ表示が見てみたい時などにも非常に便利です。

【ダウンロード】User-Agent Switcher – Chrome ウェブストア

Create Link

create link

記事を自分のブログで紹介したり、ツイートしたりする時に、一発で任意の形式でコピーできる拡張機能です。

例えば、紹介したい記事のタイトルタグとリンクを好きな形式で登録しておけば、HTMLやテキストを一緒にコピーすることができます。
デフォルトでPlain textやmarkdownなどが登録されていますが、用意されているタグを使用して自由にフォーマットを作ることもできます。

使い方などについては下記の記事などを参考にどうぞ。
プログ記事の作成支援Chrome拡張「Create Link」の設定例まとめ

【ダウンロード】Create Link – Chrome ウェブストア

ColorPick Eyedropper

ColorPick Eyedropper

ページ上の気になる部分のカラーを簡単に調べることができる拡張機能です。

アイコンをクリックして、ページ上で調べたい色の部分にマウスオンすると、その部分のカラーコードが表示されます。
表示されたカラーコードはもちろんそのままコピー可能。

すぐにカラーを調べたい時などに非常に役立ちます。

【ダウンロード】ColorPick Eyedropper – Chrome ウェブストア

MeasureIt

MeasureIt

ページ上でドラッグするだけで、気になる要素の縦横のサイズを簡単に調べることができる拡張機能です。

サイト制作時などに、「このページのボタンサイズを調べたい」と思ったことはありませんか?
そんな時に、MeasureItのアイコンをクリックして、ボタンに合わせてドラッグするだけでサイズを知ることができます。

【ダウンロード】MeasureIt – Chrome ウェブストア

Appspector

Appspector

閲覧しているWebサイトがどんな技術を使っているかを簡単に知ることができる拡張機能です。

ダウンロードするだけで、WordPressだったりjQeryだったりとアイコンで表示されるので、気になったサイトが何でできているのか参考にすることができます。

【ダウンロード】Appspector – Chrome ウェブストア

Social Analytics

Social Analytics

FacebookやTwitterなど、各種SNSでどのくらいシェアされたのかが簡単にわかる拡張機能です。

例えば、自分の書いた記事のシェア数やいいね数、ツイート数を知りたい時などに、アイコンをクリックするだけでデータが表示されるので、現在の状況を手軽に知れて便利です。
他にもバズっている記事がどのくらいシェアされているのかも知れるので、色々と参考になったりします。

【ダウンロード】Social Analytics – Chrome ウェブストア

はてなブックマーク Google Chrome 拡張

はてなブックマーク GoogleChrome 拡張

Social Analyticsは海外製のため、日本でメジャーな「はてなブックマーク」などのサービスは入っていません。
はてなブックマークの数値を手軽に知りたい場合は、はてなが公式で提供している拡張機能を使いましょう。

閲覧中のページを簡単にブックマークできるだけでなく、現在のブックマーク数がバッジで表示されたり、ブックマークコメントが読みやすいなど、はてなブックマークをよく使う人にとって非常に便利な機能が提供されています。

【ダウンロード】はてなブックマーク GoogleChrome 拡張 – Chrome ウェブストア

SimilarWeb Extension

SimilarWeb Extension

訪問数や流入キーワード、滞在時間など、競合サイトの様々な数値やデータを閲覧することができるSimilarWebの拡張機能です。

SimilarWebのサイトに行ってURLで検索しなくても、この拡張機能があればほとんどのデータを手軽に閲覧することができます。
日頃から競合サイトの状況などをよくチェックするWebデェレクターなどにおすすめです。

【ダウンロード】SimilarWeb – Chrome ウェブストア

RSS Subscription Extension

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

autopagerize
ブラウザやニュースサイトでの複数ページにまたがる記事の2ページ目以降を自動的に繋ぎ合わせてくれる便利な拡張機能です。

特にボリュームの多いニュース記事などでは記事内でのページ遷移があったりなどで、少し読みづらかったりします。
そんな時に、この拡張機能があれば、自動的に1ページの記事のように読めるので、快適に読むことが出来ます。

【ダウンロード】AutoPagerize – Chrome ウェブストア

まとめ

いかがでしたか?

有名なGoogleChrome拡張機能も多いので、すでに使っている機能もある人もいるかと思いますが、今回紹介した拡張機能はどれもWeb制作にあたってGoogleChromeを非常に使いやすくしてくれるので、知らない機能は是非試してみてください

photo credit: isaacbowen via photopin cc

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

creive編集部
creive(クリーブ)編集部です。世の中に存在する"クリエイティブ"なものごとを、"アーカイブ"していきます。▷ @creivehttp://creive.me