WEBデザインを便利にする！Chromeのおすすめ拡張機能7選
みなさんは、GoogleChromeで機能を追加して、もっと便利にできることを知っていますか？
Chromeの拡張機能を使うことで、WEB制作を行うときに作業効率がアップしたり、ボタン一つでいろいろなことができるようになります！
- この参考サイトのフォントなんだろう？
- このサイトの色を使いたい！
- 色覚障害者のための検証を気軽に行いたい！
- クライアントのPCを遠隔で操作して説明したい！
などなど、WEB制作にありがちなことを解決してくれる拡張機能を7つ紹介します。
Google Chrome拡張機能の使い方
Chromeの拡張機能は一部有料のものもありますが、基本的には無料で利用することができます。
Chrome ウェブストアからダウンロードすることができ、拡張機能を追加するとブラウザの右上のあたりにアイコンが表示されます。
拡張機能によって、入れるだけで機能したり、クリックすることで機能が有効化されるものもあります。
WEBデザインに使えるおすすめ拡張機能7選
01.参考サイトのカラーコードをコピー「ColorZilla」
WEBページの色を抽出できるカラーピッカーです。
参考サイトの配色を簡単に知ることができます。
拡張機能を追加したら、スポイトマークをクリック＆抽出したい色の部分をクリックでカラーコードをコピーすることができます！
02.参考サイトのフォント・文字サイズを調べる「Fonts Ninja」
WEBページで使用しているフォントの詳細が分かるツールです。
参考サイトのフォントを簡単に知ることができます。
拡張機能を追加したら、忍者マークをクリック＆フォントにカーソルを合わせるだけで「フォント名」「文字サイズ」「行間」「文字間」「色」が分かります！
03.WEBページ全体のスクリーンショットが撮れる「FireShot」
WEBページ全体のスクリーンショットをjpgやpdfで保存できるツールです。
参考サイトを集めたい時、消えるかもしれない技術ブログなどを残しておきたい時などに便利です。
拡張機能を追加してあげて、Sマークをクリック＆キャプチャを撮る範囲を選びます。
スクリーンショットを撮ってくれるので、あとは保存形式を選べばダウンロードできます！
04.参考サイトで使われているCMSやライブラリを知ることができる「Wappalyzer」
サイトを見ていると、このサイトはどのCMS使っているんだろう？とかどの言語・フレームワークを使っているんだろう？と気になることがあると思います。
Wappalyzerを入れるとまとめて教えてくれます。
拡張機能を追加したら、紫色の箱をクリックするだけで情報が出てきます！
05.色覚バリアフリーのチェックをボタン一つでできる「Spectrum」
近年、WEBページにも色覚バリアフリーが重要だという動きが強まっています。
Spectrum を使えば、表示しているページに対して1クリックでシミュレートできます。
拡張機能を追加して、色相環のマークをクリックすると、10のケースから選ぶことができます。
normal 通常 protanopia 1型2色覚 protanomaly 1型3色覚 deuteranopia 2型2色覚 deuteranomaly 2型3色覚 tritanopia 3型2色覚 tritanomaly 3型3色覚 achromatopsia 1色覚 achromatomaly 色素沈着 lowcontrast 低コントラスト
- 1型2色覚 赤が見えない
- 1型3色覚 赤が見えづらい
- 2型2色覚 緑が見えない
- 2型3色覚 緑が見えづらい
- 3型2色覚 青が見えない
- 3型3色覚 青が見えづらい
- 1色覚 3色とも見えない
06.サイトの画像を一括ダウンロード「Image Downloader」
WEBサイトリニューアルなどで、サイトの画像ファイルを一括してダウンロードしたい時があります。
Image Downloaderを使えば、1つ1つ保存せずに一括でダウンロードしてくれます。
拡張機能を追加したら、水色のダウンロードのアイコンをクリックします。
そのページで使われている画像が一覧で出てきますので、「すべて選択」をしてダウンロードボタンを押すだけです！
07.家にいながらお客様のPCを触れる「Chrome Remote Desktop」
リモートでパソコンを操作したい場面、例えば「営業先から会社のパソコンを操作したい」「お客様の簡単なサポート対応を出向かずにしたい」というときに便利なのがChrome Remote Desktopです。
操作する側のパソコン・操作される側のパソコン両方に拡張機能を追加しておき、「操作されるパソコンで発行したアクセスコード」を操作するパソコンで入力することで遠隔操作が可能になります。
まとめ
以上、Chromeの便利な拡張機能7つでした！
WEB制作者側はもちろん、一方踏み込みたいWEB担当者の方にもお勧めできる機能です。
一度、試してみてはいかがでしょうか？
