Webデザイナー必見！作業を格段に効率化してくれるChrome拡張機能11選

更新日: 2018年01月31日

デバイス・ブラウザ

マイページにお気に入り

Web制作において、Chromeは欠かせないツールのひとつです。
作業効率を上げるChrome拡張機能は、Webデザイン時にも役立つ機能が揃っています。

今回は、Webデザイナーの方に特にオススメのChrome拡張機能11選をご紹介します。
どれもデザインを行う際に非常に便利なものばかりですので、本記事を参考に利用してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

作業効率がアップ！オススメのChrome拡張機能20選
 【ライター必見】記事を書くときに便利なクロームの拡張機能15選

作業を格段に効率化してくれるChrome拡張機能11選

1.Web Developer Checklist

https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=ja

開発を行う際にやるべきことのチェックリストを作成することができる拡張機能です。
チェックすべき項目がカテゴリごとにまとまっていて、チェックボックスがありますので完了した項目にチェックを入れていきます。
シンプルな作りですが、特に開発の際はやらなければならないことが多いため、意外と重宝します。

2.ColorZilla

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

ホームページ上の要素のカラーコードをスポイトで取得することができる拡張機能です。
取得したカラーコードは履歴に残るので、後から確認することも可能です。
デザインの参考にしたいホームページなどでどのような色を使用しているのか簡単に調べられますので、特にホームページ制作時には重宝します。

3.WhatFont

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

開いているホームページで使用されているフォントを調べることができる拡張機能です。
調べたいテキストの上にカーソルを合わせるだけで、フォントやサイズをすぐに確認できます。
さらに、CSSではどのように指定しているのかも教えてくれますので、使い始めると重宝します。

4.Image Downloader

https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja

ホームページ上にある画像を簡単にダウンロードすることができる拡張機能です。
ページ上の画像をひとつだけダウンロードするならドラッグ＆ドロップでも保存可能ですが、この拡張機能を利用すれば複数の画像を一度にダウンロードすることができますので、知っているといざという時に便利です。

5.Window Resizer

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

ブラウザの画面サイズを特定の大きさに変更してくれる拡張機能です。
パソコン上での表示だけではなく、スマートフォンやタブレットなどでの表示を確認することができますので、レスポンシブレイアウトのテストを行う際に便利です。

6.Check My Links

https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf

ページ内にリンク切れがないかをチェックすることができる拡張機能です。
正常にリンクが作動しているものは緑色になり、リンク切れの場合は赤色で表示されます。
チェックする際にすべてのURLをクリックする必要がなくなるので、作業時間が大幅に短縮できます。

7.Clear Cache

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja

ブラウザのキャッシュを、ワンクリックで削除することができる拡張機能です。
例えば、サーバでブラウザキャッシュが効く設定にしている場合、CSSや画像の変更が反映されない場合があります。
このような場合にClear Cacheを使用すると、アイコンが緑色になってキャッシュがクリアされ、すぐに反映されるようになります。

8.Awesome Screenshot

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

いわずと知れた、スクリーンショットを撮影することができる拡張機能です。
Macユーザーの方はショートカットキーで簡単にスクリーンショットを撮影することができますが、Windowsユーザーの方は設定を行ったりアプリをインストールしたりする必要があるため少し手間がかかってしまいます。
この拡張機能をインストールしておけば、選択したエリアのスクリーンショットを撮影できるだけではなく、自動スクロールしてページ全体を撮影することができます。
さらに、保存前に枠線を入れたりテキストを挿入したりなどの画像編集も可能です。