【2021年版】WEB制作の効率を爆上げ!おすすめGoogleChorome拡張機能10選

WEB制作
この記事は約6分で読めます。

この記事では、WEB制作の効率を爆上げする「Google Chorome 拡張機能」をまとめました。

「そもそもGoogle拡張機能って何?」

「WEB制作に役立つGoogle拡張機能を知りたい…」

こんな感じの悩みを持つ方におすすめです。

この記事を読むとわかること
  • Google Chorome拡張機能とは何か
  • Google Chorome 拡張機能の入れ方・有効化の方法
  • WEB制作に役立つGoogle Chorome拡張機能

Google Chorome拡張機能とは?

今や世界で50%近いシェア率を誇るブラウザの「Google Chorome」ですが、世界中の人たちによって開発されている拡張機能があります。

Google Choromeの拡張機能はとても種類が豊富です。擬似する機能を持つモノもありますが、それぞれに1つずつに便利な機能があります。

うまく使えば、手の届かないあんな作業やこんな作業が効率化できます。多くの拡張機能は無料で公開されているので、Google Choromeを普段使いしている人に使わない手はないです。

是非ご自身のブラウザに導入して便利で効率よく作業のできる環境を作ってみてください。

Google Chorome拡張機能の入れ方・管理の仕方

実際にGoogle Chorome 拡張機能を使うための方法についてまとめます。

拡張機能はChoromeウェブストアからインストールする

まずはGoogle Chorome ウェブストアを開きます。

Google Chorome ウェブストア

追加したい拡張機能を検索し、選択します。

右上の「Choromeに追加」をクリックすれば拡張機能の追加は完了です。

パズルアイコンから拡張機能を管理

ブラウザ右上のパズルアイコンをクリックすると、拡張機能の管理画面が開きます。

追加した拡張機能が表示されますが、名前の右側のピンをクリックすることで検索バーの右側にショートカットアイコンを設置することができます。

WEB制作の役に立つGoogle拡張機能

この記事では主にWEB制作に役に立つGoogle Chorome 拡張機能をご紹介します。僕も実際に使用している便利なものを厳選してまとめました。

WEBページ内の画像を一括ダウンロード「Image Downloader」

出典: Google Chorome ウェブストア “Image Downloader”

WEBページ内の画像を、個別・選択・一括でダウンロードできます。

模写コーディングを行う際や、リニューアルを行う際の現行サイトの画像ダウンロードなど、一括でダウンロードを行いたい時に便利な拡張機能です。

サイトに使われている技術を調べる「Wappalyzer」

出典: Google Chorome ウェブストア “Wappalyzer”

1クリックで閲覧中のWEBページに使われている技術を一覧表示できます。

筆者はこの拡張機能を訪問したほぼ全てのサイトで使用してます!(笑)

「この言語はこんなことができるんだ」と把握できます。

WEBページに使われている色を調べる「ColorZilla」

出典: Google Chorome ウェブストア “Color Zilla”

WEBページにポインターを重ねて使われている色を調べることができる拡張機能です。

画像上にポインターを合わせれば画像の色も取得できます!

好みの色を見つけた際などに重宝します。

WEBページのサイズや要素間の余白を調べる「Page Ruler Redux」

出典: Google Chorome ウェブストア “Page Ruler Redux”

個人的に超お世話になっている拡張機能です。

サイト制作時や模写コーディングをしてる際、1クリックでブラウザ内に定規を出現させます。

測りたい要素を囲むとそれに沿ってガイドが表示されます。

画面全体を撮影・収録して保存できる「Awesome Screenshot」

出典: Google Chorome ウェブストア “Awesome Screen Shot”

WEBページ全体や、選択範囲を撮影・収録できる拡張機能です。

ポートフォリオの作成時や保存したいWEBページがあった時、縦長の1枚画像に保存できます。

また、画面全体やブラウザ内など指定してキャプチャを撮影することが可能です。

開きすぎたタブをひとまとめに整理する「OneTab」

出典: Google Chorome ウェブストア “OneTab”

その名の通り、開きすぎたタブを一つのタブにまとめる拡張機能です。

WEB制作について調べているとあっという間にタブが20個くらいになってしまうのでよく使います。一度ひとまとめにすると履歴に保存されるのでブックマーク的にも使用できます。

もう読めない英語には振り回されない!「Weblioポップアップ英和辞典」

出典: Google Chorome ウェブストア “OneTab”

英語で書かれたリファレンスなどをすぐに日本語に翻訳できる拡張機能です。

長文だと別タブで翻訳した方が速い場合もありますが、ちょっとした英単語などはこの拡張機能が活躍します。

最新のサイトに検索を制限できる「ato-ichinen」

出典: Google Chorome ウェブストア “ato-ichinen”

WEB制作をするのであれば新しい情報をインプットするべきです。

アクティブにすると表示されるページが1年以内のものに限定されます。

一週間や24時間に限定することもできて重宝する拡張機能です。

要素をクリックするだけで情報を取得する「CSS Peeper」

出典: Google Chorome ウェブストア “CSS Peeper”

WEBページ内の要素をクリックするだけで、幅や高さ・余白・使われているフォント・色を調べることのできる拡張機能です。

コーディングをリアルタイムでプレビューできる「Web Maker」

出典: Google Chorome ウェブストア “Web Maker”

コーディングを、リアルタイムでプレビュー表示できる拡張機能です。

学習中の簡単なコーディングの表示確認やテストなどに利用できます。

この記事のまとめ

おさらい
  • Google Chorome拡張機能の概要
  • Google Chorome拡張機能の入れ方・有効化の方法
  • WEB制作の効率を上げるGoogle Chorome拡張機能

今回は、上記の点を紹介しました。

便利な拡張機能は沢山ありますが、大量に入れてしまうとブラウザの動作が遅くなったりとデメリットも多少あります。自分に必要なものを選んで入れてみてください。

タイトルとURLをコピーしました