みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

【導入必須】サイト制作におすすめのChrome拡張機能 7選

サイト制作に便利なGoogle Chrome拡張機能7選

Google Chromeを使ってサイト制作を行っている人も多いですよね。

今作っているサイトのコードを確認したいとき、Chromeの検証モードがかなり優秀で、わかりやすいのでChromeを愛用しています。

もちろん、Chromeの検証モードだけでも十分ではあるのですが、Chromeに拡張機能を追加することで、より便利にサイト制作をすることができるようになります。

そこで、この記事では私がよく使う拡張機能をまとめています。

開発の環境を整えることで、より楽にサイト制作をすることができるので、ぜひ参考にしてみてくださいね!

miyachi
導入にも時間がかからないよ

【この記事の目次】

Wappalyzer

wappalyzerでわかること

まず何よりもおすすめしたい拡張機能が「Wappalyzer」。

正式な読み方はよくわからないのですが、私は「ワッパライザー」と呼んでいます。

サイト制作をする人であれば、絶対に役に立つ拡張機能です。

これはブラウザに入れておくだけで、サイトに使われている

  • プログラミング言語
  • ウェブツール(Google Analytics、FontAwesomeなど)
  • CMSシステム(WordPressなど)

を一気に調べることができます。

言語やツールによっては、利用中のバージョンまでチェック可能。

サイトのコードを見なくても、いろんな情報がいっきに取得できるのでおすすめです。

サイト制作やるなら入れておけ!Chromeの神・拡張機能「Wappalyzer」

2020.06.23

といわれたとき、サイトでどんなツールを使っているかが一発でわかると楽ですよね。 とわかるだけで、その後の営業・交渉がかなり進めやすくなります。 実際に「どんな…

Clear Cache

clear cache

ワンクリックでブラウザのキャッシュを削除してくれる拡張機能が「Clear Cache」。

サイトを作っているとき、変更したCSSがなかなか反映されず、調べてみるとキャッシュが残っているだけだった……ということが時々ありますよね。

そんなときは、ブラウザのURL右側に表示されたリサイクルマーク(clear cache)をクリックするだけでキャッシュを削除できるのでお手軽です。

Full Page Screen Capture

full page screen capture

閲覧中のページ全体を1つの画像としてキャプチャを取ることできるのが「Full Page Screen Capture」。

ボタンクリック一つで、JPG/PNG/PDFなどの指定した形式で画像が保存できます

ちょっと画面のキャプチャを撮りたいときに重宝します。

画面全体のキャプチャ画像をワンクリックで作成できるFull Page Screen Capture

2020.06.23

と思ったことはありませんか? デザインの参考としてスクショを保存しておきたいイメージの共有のために一つの画像で欲しい というときは、Chromeの拡張機能「Ful…

ColorZilla

colorzilla

サイトを作っているとき、参考にしているサイトで使っている色コードを調べたいときってありますよね。

そんなときに便利なのが「ColorZilla」。

URL欄の右側にあるアイコンをクリックすると、マウスの形がスポイトに変わります。

スポイトの状態で調べたい色のところにカーソルを合わせてクリックすると、16進法の色コード(#0080ffなど)がコピーされるスグレモノです。

Google Tag Assistant

google tag assistant

Google AnalyticsやGoogle Tag Managerが正しく登録され、きちんと動いているかを確認できる拡張機能が「Google Tag Assistant」です。

Googleが公式で配布している拡張機能のため、チェック性能は折り紙付き。

サイトにタグを埋め込んだとき、正しく記述しているつもりで動いていないこともありますので、Google Tag Assistantでチェックする癖をつけるといいですね。

Image Downloader

Image Downloader

いま閲覧しているサイトで使われている画像を、一気にダウンロードしたいときに重宝する「Image Downloader」。

アイコンをクリックすると、使われている画像を洗い出して一覧表示してくれます。

その状態で、欲しい画像にチェックをいれて「Download」をクリックするだけで、指定の場所に画像が一気に保存されるのでおすすめ。

ただし、ダウンロードした写真の著作権などには注意して利用してくださいね。

Window Resizer

window resizer

最後に紹介するのが「Window Resizer」。

ブラウザの幅・高さを指定したサイズに強制的に変更できます。

  • このサイズのPCでサイトを見たときに、どう表示されるのか?
  • スマホで表示した時は?

などを、(擬似的ではありますが)PCブラウザ上で簡単にチェックできるので便利です。

Chromeの拡張機能を使って、快適にサイトが作れる環境を作ろう

サイト制作をするにあたり、環境構築に気を配る癖をつけると良いと思います。

すべて人力で一つ一つチェックすると大変ですが、拡張機能を入れるだけで作業が効率化できることも多いです。

作業をしていて「これ面倒だな」と思ったら、ぜひ「楽にできるようにするツールがあるのでは?」と一度立ち止まって見てください

だいたい調べると、優れた先人が開発したツールがあるので、積極的に利用していきましょう!

miyachi
ツールを使いこなして楽にサイトを作ろう!

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア