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

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

9.BuiltWith Technology Profiler

https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=ja

現在開いているホームページが、どのような技術やサービスが使用されているのかを確認することができる拡張機能です。
バックエンドの技術はもちろん、使用されているプラグイン名などのフロントエンドの技術も知ることができますので、ホームページを制作する際に役立ちます。

10.The QR Code Extension

https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb?hl=ja

ホームページのURLをQRコードに変換してくれる拡張機能です。
デザインする中でQRコードをつけたい場合に作成ツールをわざわざ開く必要がなくなりますので、作業時間の短縮になります。

11.CSSViewer

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=ja

画像やフォントなどにマウスオーバーをするだけで、その箇所に使用されているCSSプロパティをリアルタイムで表示することができます。
フォントサイズや余白、画像の幅、高さなどをすべて丸裸になりますので、余程複雑な箇所でない限りはデペロッパーツールを起動する必要がなくなり、手間を省くことができます。

まとめ

Webデザイナーの作業量は膨大になるケースが多く作業時間も長引きがちなので、ツールを活用していかに効率化できるかということは重要なポイントです。
Chrome拡張機能は無料で使用できるものがほとんどですので、まず試しに使用してみて必要なものだけを残しておきましょう。

これらのツールを使用して、少しでも作業効率アップを図りましょう。

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

WordPressのデザインテーマを変えてみよう
作業効率がアップ！オススメのChrome拡張機能20選
【ライター必見】記事を書くときに便利なクロームの拡張機能15選

このニュースに関連するカリキュラム

WordPressのデザインテーマを変えてみよう

有料・無料問わず多くのでデザインテーマが公開されています。WordPressテーマファイルをダウンロードし、FTPを活用しアップロードする。もしくは、WordPressの管理画面から新規テーマを追加することができます。追加したテーマを有効化し、色やヘッダー画像、ウィジェットなどをカスタマイズすることで独自のページデザインができます。