BLOG ブログ

ホームページ制作
BLOG
【厳選10個】サイト制作の現場から厳選！すぐに活躍するchromeプラグインまとめ【全部無料】

【厳選10個】サイト制作の現場から厳選！すぐに活躍するchromeプラグインまとめ【全部無料】

更新日：2021/01/15

みなさんはブラウザのプラグインを使っていますか？YouTubeの広告をブロックしてくれるものや、YouTubeの再生速度を変えてくれるプラグインなどは便利ですよね。
今回はYouTubeのプラグインの話ではなく、「Webサイト制作で役に立つ」Google Chromeプラグインについてご紹介していきます。
どれも実際のサイト制作会社の現場で使われているものばかりを厳選し、しかも職種別でお役立ち度を分けているので、あなたの仕事にぴったりのプラグインが見つかることうけあいです！

Contents

ページのキャプチャをとるならAwesome Screenshot
ブラウザのキャッシュを簡単確実にクリアするならClear Cache
レイアウトを確認するならGrid Ruler
文字化けに対応するならテキストエンコーディング
サイト上の色を簡単にチェックするならColorPick Eyedropper
サイト上のフォントを簡単にチェックするならWhatFont
ページの速度を確認するならPageSpeed Insights
ブラウザ内の動きを記録するならScreencastify
フォームの自動入力ならAutofill
（ネタ系）新規タブで差をつけるなら
拡張機能を使うデメリットも意識しよう
まとめ：拡張機能と正しく付き合って快適ライフ！

ページのキャプチャをとるならAwesome Screenshot

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

「このページのこの部分を修正してほしい」「ここのボタンってどういう動きになるの」なんてときに、言葉で説明するのは面倒ですし、うまく伝わらないことが往々にしてあります。そんなときに、画面キャプチャをサクッと撮って、サクッと印をつけてサクッと相手に送れる便利な拡張機能。それがAwesome Screenshotです。

Awesome Screenshotでキャプチャを撮ってみる

ブラウザのキャッシュを簡単確実にクリアするならClear Cache

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

CSSやJSの修正をして、よくあるキャッシュが残っている問題。これをワンクリックで解決してくれるのがClear Cacheです。

Chromeなら[Shift］＋［Ctrl］＋［R］キーまたは［Ctrl］＋［F5］キーで、
macOS：［shift］＋［command］＋［R］キーを押すと一応クリアできることになっていますが、それでもクリアされない手ごわいキャッシュも怖くありません。

そう、Clear Cacheならね。

レイアウトを確認するならGrid Ruler

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

コーディングでレイアウトの微調整をするときに便利なのがGrid Rulerです。
アイコンをクリックすると画面の上と左端に目盛り（グリッド）が現れて、グリッド部分をクリックしてドラッグすると、線が引けます。
これがあれば「ボタンに対して文字がずれていないか」だとか「リストがきれいに並んでいるか」だとかを確認しやすくなります。

また、かっこいいサイトがどんなレイアウトになっているかをチェックするのにも使えますね。

Grid Rulerでレイアウトを確認してみる

文字化けに対応するならテキストエンコーディング

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

案件によってはあらかじめ文字コードが指定されていて、普段の環境とは違う文字コードでコーディングしないといけないときがあります。そんなときに便利なのがテキストエンコーディングです。

ワンクリックで指定した文字コードに変換してくれます。

テキストエンコーディングで文字化けに対処する

サイト上の色を簡単にチェックするならColorPick Eyedropper

弊社採用情報にいるあの人のニットの色だってわかるんです

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

Webサイトを見ていて、「この背景色かっこいい」「ここの文字色はなんだっけ」というときに便利なのがColorPick Eyedropperです。

アイコンをクリックするとスポイトが出てきて、クリックしたところの色をカラーコードで表示してくれます。

カラーコードで出るのが何がいいって言いますと、グラデーションや透明度を変えることで色を表現しているところでも、それに近いカラーコードで出してくれるので、コーディングやデザインをするときにやりやすいということでございます。

しかもクリックした部分周辺を拡大してくれるので、狙った部分を逃しません。

ColorPick Eyedropperであの人のニットの色をチェックする

サイト上のフォントを簡単にチェックするならWhatFont

Chromeウェブストアより引用

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

ColorPick Eyedropperのフォント版がWhatFontです。

ワンクリックで使われているフォントの種類が丸わかり。
さらに文字の大きさや色、line-heightなど、フォントに関するプロパティだって丸裸でございます。

コーディングよりはデザインを検討する段階で役立つ拡張機能かもしれません。

WhatFontでWeb上のフォントを調べてみる

ページの速度を確認するならPageSpeed Insights

秘密にしたくなる結果でした…。

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

コーディングして、システム組んで、ハイ完璧☆彡！と思いきやサイトがめちゃくちゃ重い・・・なんてこと、ありませんか？

そんな悲劇を救ってくれるのがPageSpeed Insightsです。拡張機能をクリックして調べたいURL（ローカルはダメですよ！）を入力すると、

項目ごとに分析してくれます。

最適化されていない部分で重要なものから順に表示してくれるので、効率よくサイトのパフォーマンスを修正することができます。

PageSpeed Insightsでサイトのパフォーマンスを確かめてみる

ブラウザ内の動きを記録するならScreencastify

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

「ホバーしたときの動きが見たい」「ヘッダーが追従したときの様子は？」なんてときに便利なのがScreencastifyです。

ワンクリックで動画キャプチャが記録できて、タブ内の音声を入れる/入れないなど細かい設定もできるので、解説動画などでも重宝しそうですね。
使用する際にGoogleアカウントへのログインが必要になりますが、シェアも簡単にできて、こうしてサイトに貼り付けるのも簡単なので入れておいて損はしないはずです…！

Screencastifyでブラウザの動きを記録してみる

フォームの自動入力ならAutofill

これはもっと早く知っておきたかった・・・・。

お役立ち度

ディレクター：
デザイナー　：
エンジニア　：

フォームのテストで名前やらメールアドレスやら入力しないといけないときがありますよね。何度も何度も同じ項目を入れるのって面倒です。
そんなときに便利なのがこのAutofillです。URLを指定し、そこで入力しないといけない項目を一度設定しておけば、フォーム入力の手間が省けちゃいます。

使い方は簡単で、①まず普通にフォームに項目を入力します。②次にAutofillのアイコンをクリックするとメニューが出てくるので、③「Generate Autofill Rules」をクリックすれば完了です。テストで何パターンも入力項目が必要な場合は「Choose a Profile」で名前を設定して、呼び出すこともできますよ！

Autofillでフォームのテストを楽にする