【2024年】Web制作に使えるchrome拡張機能おすすめ19選

【2024年】Web制作に使えるchrome拡張機能おすすめ19選

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

今回はWeb制作、Webデザインで使用すると作業が捗るchrome拡張機能を紹介します。

開発環境がしやくなる拡張機能がたくさんあるChromeですが、たくさんあってどれを選べばいいか分からないと悩んでる方もいるかと思います。

今回紹介するものは僕が実際に使用しているものの中から、自分的に便利だと感じたポイントを絞ってお伝えしているので参考になるのでは無いかと思います!

新しい情報が入り次第どんどん更新していってますので、定期的にチェックしていってもらえると嬉しいです!

chrome拡張機能とは

Chromeの拡張機能を一文で説明するなら、「Chromeの機能を増やしたり強化したりする専用の追加プログラム」と表現できるでしょう。プログラムの実体は、JavaScriptやHTML、CSSといったWebの技術によって記述されています。Chromeにインストールされた拡張機能は、その上で実行され、Chrome提供のAPI(アプリケーションプログラムインタフェース)を使いつつ、本来のChromeにはないさまざまな機能を提供します。

ITmedia アイティメディア 「Chrome拡張機能とは」 より

ということで、ソフトなどインストールせずにブラウザ上で便利な機能が利用できるのが拡張機能です。

こちらのchromeウェブストアから、さまざまな拡張機能を検索してインストールできます。

コーディング・Webデザインの制作時に使える拡張機能

CSS Peeper

CSSクラス名やフォント名、Webサイト内の配色、要素サイズなどが確認できる拡張機能です。

以前Twitterにて動画つきで紹介しています。

https://twitter.com/18__daichi/status/1235516303827292161?s=12&t=48pS5D3ZI3OksxD8w7kqJg

Webページ内のデザイン要素を分析するうえで必要な内容の多くをこれ一つでカバーできます。

UI的にも優れており、個人的にもかなりお気にな拡張機能です。

また、ページ内に使用されている画像を一覧で確認できるうえに、個別・一括それぞれの方法でローカルへダウンロードもできる機能もあります。

ColorPick Eyedropper

ColorPick Eyedropper

カラーコードの抽出に使用する拡張機能です。

ページ内のフォントや画像など、任意の箇所をピンポイントで指定してカラーコードを取得できます。

Designer Tools

Designer Tools

ページ内の要素をクリック、もしくはマウスホバーするだけでwidthやheightを取得できる拡張機能です。

お知らせ

ルーラー系の拡張機能で有名な「Page ruler redux」、当記事でも紹介していましたが、現在公式サイトが404ページになって新規インストールできなくなっています。

GoFullPage – Full Page Screen Capture

Full Page Screen Capture

Webページ全体のキャプチャを撮影し、画像としてダウンロードできる拡張機能です。

僕はサイト模写なんかでコーディング練習する時とかに、全体のレイアウト構成を掴む時に使用していました。

この拡張機能の使い方イメージはこちらの記事で解説してます。

Awesome Screenshot

Awesome Screenshot

撮影や画像取得機能自体はFull Page Screen Captureとほぼ同様ですが、こちらは画像のように撮影したキャプチャに線や文字で書き込みできる機能があります。

日本語対応してない点はネックですが、全体キャプチャ取得だったらAwesome Screenshotの方がいいかもしれません。

全体キャプチャを取得し、レイアウト構成やクラス名をデータ上に書き込むことで、即席のデザインカンプとするような使い方もできると思います。

Image Downloader

Webサイト内の画像を個別、一括でローカルに保存することができる拡張機能です。(CSS Peeperでも代用可)

画像ダウンロードに特化しているので、それだけが目的であれば手軽なのでオススメです。

WhatFont

起動させてページ内の文字をクリックするだけでfont-familyやフォントサイズなどが手軽にチェックできる拡張機能です。

こちらもCSS Peeperで代用できますが、とにかく軽いので扱いやすいです。

フォント情報の確認だけだったらWhatFontで十分でしょう。

PixelParallel by htmlBurger

PerfectPixel by WellDoneCode (pixel perfect)

デザイン画像をサイト上に透過させて表示することができる拡張機能です。

実際にコーディングしたサイトに重ねることでズレをチェックするために使うもので、いわゆる「ピクセルパーフェクト」を実現させるためのツールです。

ピクセルパーフェクトのための拡張機能だと、こちらよりもPerfectPixel by WellDoneCode (pixel perfect)のほうが有名ですが、この拡張機能では、透過画像を白黒反転させて要素のずれを視認させやすくしたり、仮想のグリッドラインを引いて微妙なズレを認識させやすくできたりと、かゆいところに手が届く多機能ツールとなっています。

Responsive Viewer

Responsive Viewer

レスポンシブデザインのチェックをできる拡張機能で、一つの画面でPC・タブレット・SPサイズと一覧で表示状況を確認できます。

画面幅は自身で指定もできますが、用意されている端末サイズを選択することもできます。

複数デバイスの表示をまとめてスクロール確認することもでき、使い勝手もいい拡張機能です。

User-Agent Switcher for Chrome

User-Agent Switcher for Chrome(chrome)
ブラウザ:chrome

コーディングの課題の一つであるクロスブラウザ対応状況を確認するための拡張機能です。

クリック一つで仮想ブラウザを切り替えて表示状況を確認することができます。

コーディング時点でブラウザ対応しているかのチェックは、「Can I Use」でしておきましょう。

また、こちらはあくまで仮想での表示状況を見るものですので、実務をする場合は実機(Win・Mac・iOS端末・Android端末)を揃えて確認するようにしましょう。

Clear Cache

Clear Cache設定画面

1クリックでブラウザキャッシュの削除ができる拡張機能です。

「サーバーアップしてもCSSが反映されてない!?」なんて時はキャッシュが悪さしてる事が多いです。

いちいちブラウザ設定から削除するのメンドウだな、と感じていたのでこれで楽になります。キャッシュだけでなく、設定からCookieや閲覧履歴などもワンクリックの削除対象にできます。

コーディング中やWordPressの操作時に頻繁に使える便利機能です。

HTMLチェッカー

HTMLチェッカー

ワンクリックでサイト内の閉じタグ漏れがないかチェックしてくれるツールです。

エディタから目視しても見落としは起こりますので、サイト納品をする場合などは必須で使用した方がいいです。

漏れがある場合は下写真のように行数とタグまで教えてくれます。

Webサイト分析に便利な拡張機能

Quick source viewer

Quick source viewer画面

ワンクリックでページ内のソースを確認できる拡張機能です。

ブラウザに元からあるページソース表示機能の拡張版といった感じで、CSSとJavaScriptの表示画面が加わり、さらにワンクリックでクリップボードにコードをコピーすることもできます。

Window Resizer

Window Resizer

端末毎に合わせて、Webサイトのレイアウト表示を確認できる拡張機能です。

端末サイズを選択するとブラウザのサイズがパッと切り替わるだけはあるんですが、非常にシンプルでわかりやすいです。

Wappalyzer

Window Resizer

ワンクリックで画像のようにサーバーやCMS、プログラミング言語やライブラリなどの情報が一覧で表示される拡張機能です。

サイトによって表示される情報にばらつきがあります。

気になるWebアプリやサービスのページがどのような構成になっているかを調べることができるので、エンジニア志望の方が何を学ぶべきか知るための指標にも使えるかと思います。

Web制作の調査にオススメな拡張機能

Black Menu for Google

Black Menu for Google

GmailやGoogle翻訳などの各種サービスをワンクリックでアクセスできるように集約された拡張機能です。

Googleサービスを複数使用している僕なんかはこれに出会ってかなり効率化が測れるようになりました。

UI的にも分かりやすく、とりあえず入れておいて損はないと思います。

僕は英語が壊滅的にダメなのでGoogle翻訳使ってcssのclass名を決めたりなんかもしますが、ここからワンタッチでいけるのは地味に便利です。

ato-ichinen

ato-ichinen使用前
ato-ichinen 使用前
ato-ichinen使用後
ato-ichinen 使用後

ワンクリックでGoogle検索結果を1年以内のものに限定させることができる拡張機能です。

機能のActive、非Activeはアイコンをクリックするだけで切り替えられます。

Web関連の情報やエンジニアの技術は日々進化していく訳なので、効率的に最新の情報をキャッチしやすくなるこの機能はオススメできます。

OneTab

Image from Gyazo

複数開いてるタブを一つのタブにまとめることができる拡張機能です。使い方はアイコンをワンクリックするだけです。

まとめたタブは元に戻す(復元)、削除できるのはもちろん、QRコードにしてリンク共有できたり、URLとサイトタイトルを書き出すこともできます。

これのいいところは大量に開いたページを一覧管理できることで検索が効率的になることですが、それに加てメモリ消費量を軽減できるのでブラウザが軽くなります。

僕は調べ物でググった情報をとりあえず開いてタブにしておいて、あとで消してしまう前にこれで一旦まとめて別のメモに残しておくWebクリップような使いかたをしています。

Create Link

Image from Gyazo

こちらは表示しているサイトのタイトルとURLをワンクリックでコピーできる機能です。

HTMLやマークダウンの形式でのコピーもできるため、ブログでの記事紹介リンクやWebページ制作時に捗ります。

まとめ

僕が現在使用しているものから紹介してみましたがいかがでしたでしょうか?

メインブラウザをchromeにしている方も多いと思いますので、まだ拡張機能を使ったことが無い方もまずはオススメされたものから試してみるだけで作業が捗るようになるかと思います!

また、この記事を見てる方の中にはWeb制作初学者の方もいるかと思いますが、エディタの環境構築は済んでいますか?僕がオススメするVSCodeの拡張機能をまとめた記事もあるので良かったらこちらもご覧ください!


また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

オススメ書籍紹介

オススメUdemy講座紹介