Webサイト作成を便利にしてくれるChrome拡張機能

Webサイト作成を便利にしてくれるChrome拡張機能

最近のWebブラウザは、拡張機能やアドオンを追加することで、いろいろな便利機能を追加することができます。ここでは、Google Chromeの拡張機能の中で、Webサイトの製作時におすすめしたい拡張機能を紹介します。

Webサイト作成を便利にしてくれるChrome拡張機能(その2)
Webサイトを運営していると、記事作ったり、サイトのパフォーマンスを気にしたりと以外に手間がかかりますが。そんな手間を少しでも減らせるか...

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値をクリップボードにコピーしてくれます。

あとがき

どれもちょっとした便利機能ですが、使い出すと以外に手放せなくなります。

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

あなたにおすすめのコンテンツ
トップへ戻る