Web制作に便利なGoogle Chromeおすすめ拡張機能を紹介します。
紹介する拡張機能は、私を含め実際に制作現場でも使用している方が多いので、ぜひ参考にしてみてください。
Awesome Screenshot
『Awesome Screenshot』は、スクショ撮影用の拡張機能です。
Webページ全体のスクショを撮影することができ、その場でトリミングやテキストの追加、四角形・矢印などの図形追加、モザイク処理等の簡単な加工が可能です。
レスポンシブサイトの場合、デベロッパーツールでスマホモードにすればスマホ表示時のスクショも撮影可能です。
主にクライアントに製作途中のWebページを確認してもらう際や、不具合やエラー発生時の情報共有の際などに使用しています。
使い方は簡単で、拡張機能のアイコンをクリックすると表示されるメニューからスクショを撮影することができます。ショートカットキーにも対応しており、Ctrl + Shift + V キーで表示部分、Ctrl + Shift + E キーでフルページ、Ctrl + Shift + S キーで選択範囲の撮影を行うことができます。
Domain Switcher
『Domain Switcher』はあらかじめ登録しておいた複数のドメインを一瞬で切り替えることができる拡張機能です。
主にテスト機と本番機を切り替えて確認する際などに使用します。
特に大規模なWebサイトになってくると検証環境が複数あることも珍しくなく、現在私が開発に携わっているWebサイトでは本番環境を含めて8つもの環境があります。これをいちいち手動でドメインを切り替えていては効率が悪いので、便利な拡張機能を利用して工数を削減しています。
Pasty
『Pasty』は、クリップボードにある複数のURLを一気に開いてくれる拡張機能です。
主に公開後の確認作業や連携された作業箇所を確認する際などに使用しています。
何かとチェックや確認等の作業が多いWebディレクターの方にもおすすめです。
The QR Code Extension
『The QR Code Extension』は、現在開いているページのURLをQRコードで表示してくれる拡張機能です。
スマホ等の実機確認をする際に便利で、重宝しています。
WhatFont
『WhatFont』は、現在開いているページで使用しているフォントの種類やサイズなどを表示してくれる拡張機能です。
デベロッパーツールで確認してもいいのですが、こちらのほうが手っ取り早いケースもあるので導入しています。
em等の相対単位で指定している際にも、実際に何pxで表示されているのかを簡単に確認することができます。
ColorZilla
『ColorZilla』は、開いているページの色を取得できる拡張機能です。
デベロッパーツールで確認した場合と比べると、画像内の色も取得できるので、コーディング時に画像内の色に合わせたいときなどに便利です。
Alt & Meta viewer
『Alt & Meta viewer』は、開いているページのaltやmeta情報を表示してくれる拡張機能です。
主にtitleやdescription、keyword等のmeta情報やaltをチェックする際に使用します。
これも何かとチェックや確認等の作業が多いWebディレクターの方にもおすすめです。
まとめ
いかがでしたでしょうか。
便利な拡張機能を使いこなせば、Web制作の効率もアップすること間違いなしです！
他にも「これ便利だよ！」というものがあればぜひご教授ください。
