Webデザイナー向けに厳選！作業効率を上げるChromeのおすすめ拡張機能8選

こんにちは、制作部の青木です。皆さんはパソコンでインターネットを見る時に、どのブラウザを使用しているでしょうか。Internet Explorer（IE）やGoogle Chrome（以下:Chrome）、Firefox、Edge、Safariなどとたくさんのブラウザがあります。その中でも私が使用しているブラウザはChromeです。Chromeにはホームページ制作をする際に、かなり重宝される拡張機能（アドオン）があります。

そこで今回は、実際にChromeの拡張機能を使ってみて、作業効率が上がるプラグインをWebデザイナーやディレクター、コーダーの方に向けてご紹介させていただきます。

1.WhatFont

WhatFontは、ホームページ上で使用されているフォントを知ることができるだけでなく、フォントの種類やサイズ、ウェイト、カラーなど知りたいテキストにクリックをするだけで、フォント情報を知ることができます。Webフォントも読み取ってくれる点もポイントです！

2.FireShot

FireShotは、ホームページをスクリーンショットできるプラグインです。ただのスクリーンショットだけではなく、ヘッダーからフッターまでページ全体をスクリーンショットができ、PNGやPDFなど様々な拡張子で保存をすることができます。また、表示部分だけや自分で選択した範囲だけをスクリーンショットができる点は痒い所に手が届くので良いです。

3.Page Ruler

Page Rulerは、サイト上にある要素の幅や高さなどの幅を測ることができます。画像の幅や余白の幅を視覚的に分かります。また、任意の数字を入力することができるので、大まかにこのサイズの要素のサイズだと、どれくらいの余白ができるのかと、視覚的に分かるので、コーディングの際に時間短縮をすることができます。

4.The QR Code Extension

The QR Code Extensionは、パソコンで見ているサイトのURLを1クリックでQRコードに生成することができます。スマホで実機確認をしたい時に、URLをコピーして共有ツールにURLを貼るなど…。このような作業をすることなく、素早くスマホでサイトを確認することができます。これはかなり便利です。

5.ColorZilla

ColorZillaは、ホームページのある文字や画像等様々な色情報を拾うことができます。ピンポイントで色を取得するだけではなく、ホームページ全体がどのような色を使っているのか、全体の配色も知ることができます。

6.文字数カウンタ

文字数カウンタは、プラグイン名から分かるように、文字数をカウントしてくれるプラグインです。文字数を数える際に、Wordを立ち上げて文字数を計っている方はいるのではないでしょうか。ホームページ上にあるテキストをコピーして、Wordを起動してコピペすることなく文字数をカウントできるのは時間短縮にもなり、手間も省くことができます。

7.Linkclump

Linkclumpは、選択したリンクを別タブで一気に開けることができます。右クリックを押しながら、開きたいリンクの個所を選択して、右クリックを離すと選択してあるリンク先が別タブ一気に開くので、いろいろなページを見たい時に便利です。検索して、調べものをする際によく使用しています。

8.WhatRuns

WhatRunsは、見ているサイトがどのような構成で作られているのか見ることができます。例えば、WordPressのサイトであればバージョンやテーマや解析ツールのGoogle Analyticsが入っているのか、PHPのバージョンなどワンクリックで見ることができます。WordPressの組み込んであるサイトではWordPressとは表示されないと、すべてが見られるわけではありませんが、良いなと思うサイトがどのように作られているのを知ることができるのは、参考になるのではないかと思います。

まとめ

私がホームページ制作をする際に使用しているプラグインを厳選して8つご紹介させていただきました。今回ご紹介させていただいたプラグインはデザイナーやディレクター、コーダーにかなり便利な機能となっています。プラグインは実際に使ってみないと分からないこともありますので、一度入れてみてはいかがでしょうか。