MENU
カテゴリー
アーカイブ
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

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

Web制作に使えるchrome拡張機能おすすめ

どうも、ダイチです。

今回は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=20

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

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

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

ColorPick Eyedropper

ColorPick Eyedropper

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

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

Page Ruler Redux

Page Ruler Redux

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

また、タグ毎にクリックしながら要素を選択していくことも可能です。

ウェブページ全体をスクリーンショット – FireShot

FireShot

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

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

Awesome Screenshot

Awesome Screenshot

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

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

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

Image Downloader

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

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

WhatFont

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

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

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

UI Build Assistant

UI Build Assistant

ワンクリックでページ内の要素にbackground-colorとoutlineがつけられる拡張機能です。

コーディング時にCSSが上手く効かない時などの対策として、background-colorをつけるなどは僕もやっていましたが、この機能を使えばいちいちCSSに記述しなくてもよくなりコーディングの効率化が図れます。

サイト模写する時なんかはこの機能でレイアウト構造を把握しつつ、Awesome Screenshotなどで撮影したキャプチャを見てclass名をつけていく、というやり方で効率化が図れると思います。

PixelParallel by htmlBurger

PerfectPixel by WellDoneCode (pixel perfect)

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

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

この拡張機能では、透過画像を白黒反転させて要素のずれを視認させやすくしたり、仮想のグリッドラインを引いて微妙なズレを認識させやすくできたりと、かゆいところに手が届く多機能ツールとなっています。

あわせて読みたい
PixelParallel by htmlBurger
PixelParallel by htmlBurgerPixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers

ちなみに、ピクセルパーフェクトのための拡張機能だと、こちらよりも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」でしておきましょう。

Clear Cache

Clear Cache設定画面

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

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

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

こちらも、コーディング中にも使います。

HTMLチェッカー

HTMLチェッカー

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

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

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

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

Quick source viewer

Quick source viewer画面

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

ブラウザのページソース表示機能にCSSとJavaScriptが加わったようなもので、ソース確認するだけならデベロッパーツールよりも見やすいかと思います!

Window Resizer

Window Resizer

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

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

Wappalyzer

Window Resizer

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

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

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

Web制作関係なく個人的にオススメな拡張機能

The QR Code Extension

The QR Code Extension

ワンクリックでWebページのQRコードが生成できる拡張機能です。

PCで見ているページをスマホからも見たいという時、これでさっとかざせば一発です。あとはクライアントにスマホ表示を確認してもらう時、これでさっと表示させて読み取ってもらうやり方なんかもスムーズですね。

「The QR Code Extension」をchromeに追加

→現在Chromeのデフォルト機能でQRコードが生成できるようになったので、こちらの拡張機能は不要になりそうです!

アドレスバーをクリックすると画像のようなアイコンが表示されるので、そこをクリックするとQRコードが生成されます!

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

※ブログカードだと文字化けするためテキストリンクにしています。

「ato-ichinen」をchromeに追加

SearchPreview

検索結果画面にサイトのキャプチャを表示させることができる拡張機能です。

直感的に見たいサイトがどうかを判断するには役立ちますし、検索結果に同じサイトが複数並んでる場合に重複してクリックしてしまうことも防ぎやすくなるので、ブラウジングの効率化を図れます。

SearchPreview」をChromeに追加

OneTab

Image from Gyazo

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

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

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

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

※ブログカードだと文字化けするためテキストリンクにしています。

「OneTab」をchromeに追加

Create Link

Image from Gyazo

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

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

いちいちサイタイトルをチェックして、URLとそれぞれコピーする必要が無くなりますね!

まとめ

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

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

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

あわせて読みたい
【2021年】Web制作で使えるVSCodeオススメ拡張機能16選!
【2021年】Web制作で使えるVSCodeオススメ拡張機能16選!どうも、ダイチです。今回はVSCodeで使っている拡張機能を紹介します。他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能...

また、サイト模写やデザインカンプコーディングに行き詰まっている方は一度基礎から体系的におさらいすることをお勧めしています。

あわせて読みたい
Web制作学習でおすすめの本を紹介!(コーディング・Webデザイン)
Web制作学習でおすすめの本を紹介!(コーディング・Webデザイン)どうもダイチです!今回はWeb制作関連のオススメ書籍を紹介します!オンライン学習サービスなどは多くありますが、知識を体系的に学ぶんだったら本が一番確実です。とは...

あとは動画教材のUdemyもオススメが沢山あるので、こちらの記事でまとめています。

あわせて読みたい
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】当記事では動画学習教材「Udemy」について、Webデザイン・Web制作に関連する優良講座を紹介します!世の中には学習教材が数多くあるので、特に独学の方はどれを選んだら...

それでは今回はこのへんで!

Web制作に使えるchrome拡張機能おすすめ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる