【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

最近のWebブラウザは、拡張機能やアドオンを追加することで、いろいろな便利機能を追加することができます。

そこでここでは、WebブラウザとしてメジャーなGoogle Chromeの拡張機能の中から、Web制作に役立つおススメの拡張機能を紹介します。

【2022年】仕事の効率化におすすめのChromeブラウザ拡張機能13選
ここでは、仕事の効率化に欠かせないおすすめのChromeブラウザ向けの拡張機能を紹介します。

Window Resizer

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Window Resizer - Chrome ウェブストア

Webサイトの製作時などに、さまざまなデバイスでサイトの表示を確認したいときがあります。そんなときに便利なのが「Window Resizer」です。

「Window Resizer」は、Chromeのウィンドウサイズを様々なデバイスに合わせたサイズに変更できる拡張機能です。いろんなウィンドウサイズで表示をテストしたり、ウィンドウサイズを決まったサイズに変更するのに役立ちます。(以下が表示されるメニューです)

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

ウィンドウサイズは、上の画像のようにあらかじめ用意されているプリセット(iPhone, iPadなど)から選択したり、自分でサイズを指定することもできます。

Image Size Info

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Image Size Info - Chrome ウェブストア

「Image Size Info」は、Webサイトに掲載している画像の情報を調べることができる拡張機能です。無駄に大きな画像を使っていないかや、最適な画像サイズを知りたいときに便利です。

使い方は、Webページ上の調べたい画像の上で右クリックし、メニューから「View Image Info」をクリックします。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

すると、次のようなウィンドウがブラウザの中央に表示され、画像のURL、画像の⼤きさ、ファイルサイズなどが確認できます。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Dimensions  : 元画像の大きさ
Displayed     : 表示画像の大きさ
File Size       : 画像のファイルサイズ

WhatFont

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

WhatFont - Chrome ウェブストア

Webサイトを閲覧していて、かっこいい書体を使っているサイトを発見したときに、そのサイトで使用されているフォントを知りたくなりますよね。

そんなときに便利な拡張機能が「WhatFont」です。

使い方は、拡張機能アイコンをクリックしてから、フォントを知りたい箇所にマウスカーソルを合わせると、そこで使われているフォントを表示してくれます。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

さらにもう一度クリックすると「Font Family」「Font Weight」「Font Size」「Line Height」「Font Clolor」など、フォントについてのさまざまな情報を確認することができます。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

ColorZilla

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

ColorZilla - Chrome ウェブストア

Webサイトを閲覧していて、かっこいいサイトで参考にしたいところといえば、フォント以外では「色」ではないでしょうか。

そんな時は「ColorZilla」が便利です。

使い方は、拡張機能アイコンをクリックしてから、色を知りたい箇所にマウスカーソルを合わせると、そこで使われている色がRGB値やHEX値で表示されます。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

さらにもう一度クリックすると、色のHEX値をクリップボードにコピーしてくれます。

Link to Text Fragment

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Link to Text Fragment - Chrome ウェブストア

「Link to Text Fragment」は、Webページ上の特定のテキストへのリンクを生成できるGoogle製の拡張機能です。

使い方は、リンクしたいテキスト部分を選択し、右クリックメニューから「Copy link to Selected Text」を選択します。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

すると、リンクURLがクリップボードにコピーされるので、あとは記事などに貼り付けるだけです。

「Link to Text Fragment」で作成したリンクをクリックすると、リンク先のページの選択したテキストの場所に簡単に移動でき、選択したテキスト部分は黄色く表示されるのも分かりやすいです。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

なお、この拡張機能で作成したリンクは、Chromeブラウザや新Edgeブラウザでしか機能しません。

Create Link

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Create Link - Chrome ウェブストア

ブログ記事にリンクや引用などを貼り付けるとき、URLやアンカーテキストからリンクを作成しますが、この拡張機能を使うと、好みのフォーマットであっという間にリンクを作成してくれます。

以下の設定画面を見ていただくとわかりますが、デフォルトではテキスト・HTML・MarkDownなどでリンクを出力できます。また、自分で好きなフォーマットを追加することもできます。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Page load time

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Page load time - Chrome ウェブストア

Webサイトなどを運営していると自分のサイトの表示スピードが気になります。スピード計測サイトやツールを使って計測することもできますが、この拡張機能を入れておけば、ページ表示時間を計測してアイコン上に表示してくれるので、いちいち計測サイトやツールを使わなくても、すぐに見れるのがうれしいです。

実際の表示スピードは、こんな感じで表示されます。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Clear Cache

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

Clear Cache - Chrome ウェブストア

Chromeブラウザをはじめとする一般的なWebブラウザは、閲覧したWebページのキャッシュを保存していますが、このキャッシュが原因で、Webページが正常に表示されないことがあります。

そんなときに便利なのが「Clear Cache」です。

Chromeブラウザのキャッシュは、通常設定画面から削除しますが、「Clear Cache」ならワンクリックで消せるのがとても便利です。

ちなみに、設定画面では、削除するデータや削除する期間を設定できます。

【2022年】Web制作におすすめのChromeブラウザ拡張機能8選

あとがき

上で紹介した拡張機能を利用することで、Web制作が効率よく行えると思いますよ。

ご活用あれ。

記事が役立ったらシェアしてくれるとうれしいです。