最近のWebブラウザは、拡張機能やアドオンを追加することで、いろいろな便利機能を追加することができます。
そこでここでは、WebブラウザとしてメジャーなGoogle Chromeの拡張機能の中から、Web制作に役立つおススメの拡張機能を紹介します。
目次
Window Resizer
Window Resizer - Chrome ウェブストア
Webサイトの製作時などに、さまざまなデバイスでサイトの表示を確認したいときがあります。そんなときに便利なのが「Window Resizer」です。
「Window Resizer」は、Chromeのウィンドウサイズを様々なデバイスに合わせたサイズに変更できる拡張機能です。いろんなウィンドウサイズで表示をテストしたり、ウィンドウサイズを決まったサイズに変更するのに役立ちます。（以下が表示されるメニューです）
ウィンドウサイズは、上の画像のようにあらかじめ用意されているプリセット（iPhone, iPadなど）から選択したり、自分でサイズを指定することもできます。
Image Size Info
Image Size Info - Chrome ウェブストア
「Image Size Info」は、Webサイトに掲載している画像の情報を調べることができる拡張機能です。無駄に大きな画像を使っていないかや、最適な画像サイズを知りたいときに便利です。
使い方は、Webページ上の調べたい画像の上で右クリックし、メニューから「View Image Info」をクリックします。
すると、次のようなウィンドウがブラウザの中央に表示され、画像のURL、画像の⼤きさ、ファイルサイズなどが確認できます。
Dimensions : 元画像の大きさ
Displayed : 表示画像の大きさ
File Size : 画像のファイルサイズ
WhatFont
Webサイトを閲覧していて、かっこいい書体を使っているサイトを発見したときに、そのサイトで使用されているフォントを知りたくなりますよね。
そんなときに便利な拡張機能が「WhatFont」です。
使い方は、拡張機能アイコンをクリックしてから、フォントを知りたい箇所にマウスカーソルを合わせると、そこで使われているフォントを表示してくれます。
さらにもう一度クリックすると「Font Family」「Font Weight」「Font Size」「Line Height」「Font Clolor」など、フォントについてのさまざまな情報を確認することができます。
ColorZilla
Webサイトを閲覧していて、かっこいいサイトで参考にしたいところといえば、フォント以外では「色」ではないでしょうか。
そんな時は「ColorZilla」が便利です。
使い方は、拡張機能アイコンをクリックしてから、色を知りたい箇所にマウスカーソルを合わせると、そこで使われている色がRGB値やHEX値で表示されます。
さらにもう一度クリックすると、色のHEX値をクリップボードにコピーしてくれます。
Link to Text Fragment
Link to Text Fragment - Chrome ウェブストア
「Link to Text Fragment」は、Webページ上の特定のテキストへのリンクを生成できるGoogle製の拡張機能です。
使い方は、リンクしたいテキスト部分を選択し、右クリックメニューから「Copy link to Selected Text」を選択します。
すると、リンクURLがクリップボードにコピーされるので、あとは記事などに貼り付けるだけです。
「Link to Text Fragment」で作成したリンクをクリックすると、リンク先のページの選択したテキストの場所に簡単に移動でき、選択したテキスト部分は黄色く表示されるのも分かりやすいです。
なお、この拡張機能で作成したリンクは、Chromeブラウザや新Edgeブラウザでしか機能しません。
Create Link
ブログ記事にリンクや引用などを貼り付けるとき、URLやアンカーテキストからリンクを作成しますが、この拡張機能を使うと、好みのフォーマットであっという間にリンクを作成してくれます。
以下の設定画面を見ていただくとわかりますが、デフォルトではテキスト・HTML・MarkDownなどでリンクを出力できます。また、自分で好きなフォーマットを追加することもできます。
Page load time
Page load time - Chrome ウェブストア
Webサイトなどを運営していると自分のサイトの表示スピードが気になります。スピード計測サイトやツールを使って計測することもできますが、この拡張機能を入れておけば、ページ表示時間を計測してアイコン上に表示してくれるので、いちいち計測サイトやツールを使わなくても、すぐに見れるのがうれしいです。
実際の表示スピードは、こんな感じで表示されます。
Clear Cache
Chromeブラウザをはじめとする一般的なWebブラウザは、閲覧したWebページのキャッシュを保存していますが、このキャッシュが原因で、Webページが正常に表示されないことがあります。
そんなときに便利なのが「Clear Cache」です。
Chromeブラウザのキャッシュは、通常設定画面から削除しますが、「Clear Cache」ならワンクリックで消せるのがとても便利です。
ちなみに、設定画面では、削除するデータや削除する期間を設定できます。
あとがき
上で紹介した拡張機能を利用することで、Web制作が効率よく行えると思いますよ。
ご活用あれ。