Web制作に役立つおススメのChromeブラウザ向け拡張機能

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

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

仕事の効率化に欠かせないおすすめのChromeブラウザ向け拡張機能
Google Chromeの拡張機能の中には便利な拡張機能がたくさんありますが、その中には利用することで仕事の効率化に大きく貢献してくれ...

おススメの拡張機能

Window Resizer

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Window Resizer - Chrome ウェブストア

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

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

Image Size Info

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Image Size Info - Chrome ウェブストア

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

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

Page Ruler

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Page Ruler Redux - Chrome ウェブストア

「Page Ruler」は、Webサイトの指定した部分の「幅」「高さ」「ページ上での位置」をピクセル単位で確認できる拡張機能です。マウスオーバーした部分の構成要素を自動で選択し、サイズを計測することもできます。

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Webサイトの構成要素の位置やサイズを計測したいときにとても便利です。

WhatFont

Web制作に役立つおススメのChromeブラウザ向け拡張機能

WhatFont - Chrome ウェブストア

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

そんな願いをカンタンにかなえてくれるのが「WhatFont」です。

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

ColorZilla

Web制作に役立つおススメのChromeブラウザ向け拡張機能

ColorZilla - Chrome ウェブストア

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

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

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

Link to Text Fragment

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

Webページの特定の箇所にリンクを張れる

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

「Link to Text Fragment」の使い方はとても簡単で、リンクしたいテキスト部分を選択し、右クリックで表示されるメニューで「Copy link to Selected Text」を選択します。

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

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

Create Link

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Create Link - Chrome ウェブストア

Webページのリンクを好きなフォーマットで出力

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

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Page load time

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Page load time - Chrome ウェブストア

Webページの表示スピードを計測し、アイコン上に表示

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

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Clear Cache

Web制作に役立つおススメのChromeブラウザ向け拡張機能

Clear Cache - Chrome ウェブストア

ワンクリックでブラウザのキャッシュを削除

一般的なWebブラウザは、閲覧したWebページのキャッシュを保存しています。Chromeもそうですが、キャッシュが残っていることが原因で、Webページの表示うまくできないことがあります。そんなときは、キャッシュを削除することで意外と治ることがあります。

Chromeのキャッシュは通常設定画面から削除しますが、毎回設定画面を開いて削除するは面倒です。この拡張機能を入れておけばワンクリックで消せるのがとても便利です。

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

Web制作に役立つおススメのChromeブラウザ向け拡張機能

あとがき

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

ご活用あれ。

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

あなたにおすすめのコンテンツ