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

2016年5月24日

ニュース

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

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

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

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

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

1.Web Developer Checklist

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

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

2.Page Ruler

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=ja

ホームページ内の任意の場所の幅と高さを、ドラッグ&ドロップで計測することができる拡張機能です。
レイアウトを調整したり、画像を掲載する際のサイズを検討する際などに便利です。

3.ColorZilla

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

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

4.WhatFont

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

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

5.Firebug Lite for Google Chrome

https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench?hl=ja

コード修正の補助をしてくれる拡張機能です。
画面の下半分に HTML と CSS が表示されますのでコードを修正すると、リアルタイムで画面上半分に表示されているページを確認することができます。
ただし、ホームページの改ざん防止のために、確認ができるだけで変更内容がそのまま適応されるわけではありません。
この拡張機能を利用して変更箇所と変更内容が決まったら、自社のホームページのコード部分で HTML ・ CSS を変更してください。

6.Image Downloader

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

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

7.Window Resizer

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

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

8.Adobe Edge Inspect CC

https://chrome.google.com/webstore/detail/adobe-edge-inspect-cc/ijoeapleklopieoejahbpdnhkjjgddem?hl=ja

こちらも、スマートフォンやタブレットでの表示確認ができる拡張機能です。
Adobe Edge Inspect CCでは、現在表示しているページを自分が使用しているスマートフォンと同期し、ライブプレビューすることができます。

拡張機能をインストールするとIPアドレスが表示されるので、メモしておいてください。
続いて、App Storeまたは Google playでもアプリをインストールします。
アプリを起動すると接続するパソコンの名称が表示されますのでタップしてください。
万が一表示されない場合は、画面右上の「＋」アイコンをクリックしてIPアドレスを入力してください。
続いて、スマートフォン側に表示されたパスコードを、Chrome側に表示されたスマートフォンの名称部分に入力すれば設定完了です。

9.Check My Links

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

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

10.Clear Cache

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

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

11.Awesome Screenshot

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

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

12.BuiltWith Technology Profiler

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

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

13.The QR Code Extension

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

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

14.Search by Images

https://chrome.google.com/webstore/detail/search-by-image-by-google/dajedkncpodkggklbegccjpmnglmnflm?gl=JP&hl=ja

Google 内での画像検索を、素早く行ってくれる拡張機能です。
例えば、ホームページデザインの参考にするためにさまざまなホームページを閲覧している際に、イメージに合う写真があって二次利用したい場合などに便利です。
二次利用するためにはクレジット表記を入れる必要がありますが、わざわざ Google 画像検索メニューから検索するのは面倒です。
この拡張機能を利用すればすぐに検索可能ですので、すぐに画像に関する情報を把握できます。

15. CSS Viewer

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

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

まとめ

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

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

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

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

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

URL:https://ferret-plus.com/2013

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