Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。

1. FireShot

ダウンロードURL：FireShot

ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。

2. PerfectPixel by WellDoneCode

ダウンロードURL：PerfectPixel by WellDoneCode

ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコーディングなしでデザインを確認することができます。

3. Window Resizer

ダウンロードURL：Window Resizer

PC、スマートフォン、タブレットなど指定したサイズにブラウザのウィンドウを変更することができます。レスポンシブのデザインを確認するときに便利です。オプションで任意のウィンドウサイズのテンプレートも作成することもできます。

4. WhatFont

ダウンロードURL：WhatFont

テキストにマウスオーバーすることでフォントの情報を簡単に取得することができます。

5. ColorZilla

ダウンロードURL：ColorZilla

サイト上のオブジェクトのカラーコードをスポイドで抽出することができます。スポイドで取得したカラーコードは履歴に残るので、後からでも参照することができます。

6. Page Ruler

ダウンロードURL：Page Ruler

Webページ内の任意の場所の幅と高さを計測することができます。サイトのレイアウトを調整するときや、画像を掲載するときのサイズを考えるときなどに重宝します。

7. Yet Another Lorem Ipsum Generator

ダウンロードURL：Yet Another Lorem Ipsum Generator

ダミーテキストを簡単にクリップボード上にコピーしてくれます。また、フォームにフォーカスを当てた状態で拡張機能のボタンを押すことで自動的にフォームにダミーテキストを入力できます。メールアドレスや日付のテキストも用意されています。設定でコピーするダミーテキストのテンプレートを変更することも可能です。

8. Clear Cache

ダウンロードURL：Clear Cache

ブラウザのキャッシュをワンクリックで削除することができるようになります。サーバーでブラウザキャッシュが効くような設定になっていると、CSSや画像の変更が反映されない場合があります。そういった場合この拡張機能を使うと簡単に反映させることができます。

9. META SEO inspector

ダウンロードURL：META SEO inspector

開いているサイトのmeta情報を確認することができます。SEOをきちんと考慮したサイトを制作する場合は、SEO的に良くない箇所を指摘してくれるので非常に便利です。

10. Check My Links

ダウンロードURL：Check My Links

ページ内にリンク切れがないかチェックする機能です。拡張機能のボタンを押すことで正常にリンクが貼られているものは緑色になり、リンク切れの場合は赤色で表現されます。わざわざリンク切れのチェックの際にクリックして調べなくてもいいので、作業時間の短縮になります。

11. User-Agent Switcher for Google Chrome

ダウンロードURL：User-Agent Switcher for Google Chrome

ブラウザのユーザーエージェントを簡単に切り替えることができます。モバイル表示とPC表示をユーザーエージェントの判定で切り替えているサイトの場合は、表示の確認を素早くすることができます。

12. Image Size Info

ダウンロードURL：Image Size Info

右クリックで画像のプロパティをすぐに確認できる拡張機能です。本来のサイズ、表示しているサイズ、解像度、ファイルサイズを簡単にチェックすることができます。

まとめ

Chromeの拡張機能をうまく利用すれば、時間のかかる作業も短時間でこなすことできます。無駄な時間を減らして効率よくWebデザインをするために、ぜひ紹介した拡張機能を使ってみてください！