Google Chromeは、Googleが開発しているWebブラウザで、2016年5月にはPC版のブラウザシェアで1位を獲得しました。人気の秘密は、軽量かつ高速なブラウジング、マルチプラットフォーム対応に加えて、*「拡張機能」*と呼ばれる便利な機能を追加できる点です。

「拡張機能」には、メモ帳から画像編集ツール、バグ修正ツールまで本当に様々なジャンルの機能があります。そこで今回は、Webデザイナーこそ入れておきたい、デザインやコーディングに便利なChromeの拡張機能をご紹介します。

より業務効率を高めたい方にオススメです。ぜひ一読ください。
　　

Webデザイナーこそ入れておきたいChrome拡張機能10選

1. Page Ruler

pageruler.png

Page Rulerは、ホームページ上のあらゆる要素のサイズを測ることができるChrome拡張機能です。
Width(横幅)やHeight(縦幅)だけではなく、Top(上からの距離)・Bottom(下からの距離)・Left(左からの距離)・Right(右からの距離)を測ることもできます。

また、「Element Mode」をオンにすると、ページ上にある要素をマウスオーバーするだけで、その要素のサイズや距離を測ることができます。

Webデザイナーは相対距離や絶対距離でデザインをすることが多いと思うので、このようなツールを入れておくと何かと役に立ちます。
　　

2. Pic Monkey

picmonkey.png

Pic Monkeyは、ホームページ上の写真をダウンロードして、さらにその場で加工することができるChrome拡張機能です。

便利なのはホームページ上の写真を一括でダウンロードできるだけではなく、スクリーンショットもキャプチャして保存することができる点です。画像の明るさやコントラストも瞬時に編集して保存することができます。

インターネットから画像素材を探してくる時には、画像編集ソフトいらずになるので便利です。
　　

3. ColorZilla

colorzilla.png
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

ColorZillaは配色に関するGoogle拡張機能です。
単なるカラーピッカーは他にもいろいろありますが、ColorZillaではスポイトで採取した色を使ってグラデーションを作成したり、作成したグラデーションのCSSのソースコードを生成してくれる機能もあります。

インターネット上をブラウジングしながら「あっ、これいいな」と思った配色は、すぐにColorZillaに保存しておきましょう。
　　

4. Window Resizer

windowresizer.png
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

Window Resizerは、その名のとおりウィンドウサイズを自動で変更してくれるGoogle拡張機能です。
Webデザイナーにとって面倒に感じることの一つは、レスポンシブ対応のホームページを作った時の見栄えの確認作業です。このプラグインを使うことで、どのデバイスでどのように見えるかがワンクリックで確認できます。

デスクトップでインターネットブラウザの横幅を手動で変えて見た目を確認しているなら、このプラグインを活用してみましょう。
　　

5. 45to75

45to75.png
https://chrome.google.com/webstore/detail/45to75/efmppndinjbljeellfdkpghgblenbcdd

1つの段落の最適文字数を知っていますか？
一般的に、1つの段落の文字数は欧米文字で45字から75字が最適だと言われています。

45to75は、45字から75字になるように、ハイライトした部分を文字カウントしてくれるGoogle拡張機能です。ハイライトした部分に右クリックするだけで、文字数を確認することができます。
　　

6. DomFlags

domflags.png
http://domflags.com/

DomFlagsはDOM操作をショートカットキーなどを使って簡単に操作し、デバッグすることができるGoogle拡張機能です。

「Option/Alt + Shift + D」でDOMの属性を追加したり取り除いたりすることができ、「Option/Alt + Shift + 1 (～ 3)」であらかじめフラグを立てておいたDOM属性を表示したり非表示にしたりすることが可能です。

インターネットブラウザを使ってデバッグを行っているWebデザイナーにオススメです。
　　

7. Write Well

writewell.png

Write WellはGoogle Docs用のChrome拡張機能です。
Google DocsにはWordやPagesほどテンプレートが揃っていないので、ゼロから文章を組み立てるのに向いていないと感じている人もいるでしょう。
この拡張機能を使うと、Google Docs用のテンプレートを検索して利用することができます。テンプレートは穴埋め式になっているものもあるので、履歴書や大学のレポートなども時短で作成することが可能です。
　　

8. Marmoset

marmoset.png
https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb

Marmosetはプログラミングのソースコードをサムネイル画像にしてくれるGoogle拡張機能です。
よくサムネイル画像でプログラミングのソースコードを斜めから撮ったようなキャプチャが採用されていますが、この拡張機能を使うことでクールなソースコードのサムネイル画像を作ることができます。

ソースコードのシンタックスハイライトは設定により変更することも可能です。
　　

9. Fontface Ninja

fontfaceninja.png
https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh

Fontface Ninjaは、様々なホームページで利用されているフォントにどんなフォントが使われているのかを特定することができるChrome拡張機能です。
対応しているのは欧米フォントのみですが、特定の精度は非常に良好です。また、フォントサイズや字間、行間などを特定することもできます。

最近では絶対音感に倣い「絶対フォント感」を身に付けたいと思っている人も増えています。
どんなフォントが使われているかを、Fontface Ninjaで確認するのにも最適です。
　　

10. Highly Highlighter

highlyhighlighter.png

Highly Highlighterは、テキストを反転させハイライトした部分を、すぐにSNSでシェアしたりクラウドストレージに保存する機能を追加するChrome拡張機能です。

気になるフレーズは簡単に保存することができ、その場でツイートやFacebookへのシェアも行えます。
　　
　　

まとめ

今回は、Webデザイナーこそ入れておきたい、デザインやコーディングに便利なChromeの拡張機能をご紹介しました。

Webデザイナーにとって、インターネットブラウザは毎日扱うもの。ブラウザ１つであらゆる機能が使えるGoogle Chromeの拡張機能は、Webデザイナーの労働生産性を上げてくれる手助けとなるでしょう。気になる拡張機能があれば、ぜひ使ってみてください。

きっと日々の業務をよりスピーディに、かつ品質向上に一役買ってくれるはずです。