サイドスリーブログ

WEBデザイナーにおすすめ!Google Chrome の拡張機能 20選


                WEBデザイナーにおすすめ!Google Chrome の拡張機能 20選

webデザイナーのちぃさんです。
Google chromeの拡張機能みなさんはどんなものを使用していますか?
今回は実際に私が使っていてWEBデザイナー、HTMLコーダーにおすすめの拡張機能20選をご紹介したいと思います。
どれも作業効率化にお役立ちなアイテムです。ぜひご覧ください!

デザイン制作に使える拡張機能

WhatFont

WhatFont

気になったサイトのページ内テキストにマウスオーバーすると、font-familyが表示されます。
開発ツールでももちろんわかりますが、ちょっとした手間が省けるので便利です。

WhatFont

WhatFont

ColorZilla

ColorZilla

Web上で使用されている色をワンクリックで簡単に取得できるツールです。
これを知る前はわざわざスクリーンショットを取ってからphotoshopのスポイトツールで抽出していました。

ColorZilla

ColorZilla

Site Palette

Site Palette

開いているWebページに使用しているカラーを一覧にして展開してくれます。
カラーバリエーションやバランスをお手本にしたいサイトに対して行います。

Site Palette

Site Palette

CSS Peeper

CSS Peeper

選択した箇所のCSSを解析してくれるツールです。
開発ツールでも充分ですが、参考サイトを沢山開いていてサクッと調べたいときに使えます。

CSS Peeper

CSS Peeper

Wappalyzer

Wappalyzer

サイトが利用しているサーバー、CMS、言語などの情報を表示してくれるツールです。
使用頻度は高くありませんが、他社サイトの設計情報を調べたいときに何度か利用しました。

Wappalyzer

Wappalyzer

GoFullPage - Full Page Screen Capture

GoFullPage

Webページ全体のスクリーンショットを取得することができます。
アイコンをクリックするだけ。とっても操作が簡単です。
参考サイトを画像として保存したいときや様々な場面で活用しています。

GoFullPage - Full Page Screen Capture

GoFullPage

Awesome Screenshot

Awesome Screenshot

こちらもWebページのスクリーンショット取得ツールですが「Full Page Screen Capture」以上に、細かい範囲選択や動画も撮影できます。
また有料登録するとスクショをフォルダ分けして保存できるので、気になったデザインを集めたライブラリを作ることも可能です。

Awesome Screenshot

Awesome Screenshot

Wordmark Extension

Wordmark Extension

自分のPCで使えるフォントを一覧表示してくれます。
バナーなどの画像化するテキスト選びにとても重宝します。

Wordmark Extension

Wordmark Extension

サイト構築に使える拡張機能

Web Maker

Web Maker

HTML, CSS, JSのライブコーディングができるツールです。
思い描いたデザインを実際にコーディングで再現したいときに便利です。
特にTips系で得たCSSやJSを自身のデザインに適用可能かをチェックするために使います。

Web Maker

Web Maker

Design Mode

Design Mode

「on」に設定すると、ページ内テキストをダイレクトに編集できます。
カードデザインなど文章量の変化による見え方の違いを見たいときに使っています。

Design Mode

Design Mode

Page Ruler Redux

Page Ruler Redux

Webページ上のサイズをピクセル単位で測定してくれます。
主に構築確認後に開発者へチェックバックを返す際のpx計測に使用することが多いです。

Page Ruler Redux

Page Ruler Redux

HTMLエラーチェッカー

HTML

ワンクリックでソースをチェックしてくれます。
新人さんや後輩の方のコーディングチェックを行う際、まずはじめにこちらでエラーが起きていないかチェックします。

HTMLエラーチェッカー

HTML

Pix to pix (Pixel perfect by Ymatuhin)

Pix to pix

任意の画像をワンクリックで背景にひけるので、デザインカンプを背景にすることで実際のページとの差異が確認できます。
ピクセルパーフェクトを目指している人には必須のアイテムではないでしょうか。

Pix to pix (Pixel perfect by Ymatuhin)

Pix to pix

Window Resizer

Window Resizer

ブラウザの画面サイズを変更できます。制作者のディスプレイ環境は、大きなモニターが主流ですが実際に閲覧されるユーザーやお客様はノートパソコンが大半だったりするので、構築チェックには画面サイズをいろいろ変化させて確認を行います。

Window Resizer

Window Resizer

isear

isear

検索語を色分けし、ハイライト表示してくれます。
優れている点は、検索語を入力すると開いている全ページでハイライト表示してくれるところです。

isear

isear

Image Downloader

Image Downloader

WEBサイト上の画像ファイルを一括ダウンロードできます。
使用頻度は高くありませんが、リニューアル案件で、本画像をいただく前に仮で旧サイトの画像を配置しておくなどに使用することがありました。

Image Downloader

Image Downloader

TabCopy

TabCopy

開いている全てのタブのタイトルとURLを取得できます。
メールにURL一覧を記述する際や、コンテンツリストを作成する際に使用しています。

TabCopy

TabCopy

Copy All Urls

Copy All Urls

今開いているすべてタブのURLをコピーできます。
「TabCopy」と機能としてはそれほど違いはありませんが、URLだけ取得したい時にはこちらを使用します。

Copy All Urls

Copy All Urls

Pasty

Pasty

コピーした複数のURLをまとめてタブで開くことができます。
サイトの表示チェックをする際に、コンテンツリストからまるっとコピーしたURLで一括アクセスを行います。
私はいつも大胆に50ページくらい一気に開いたりするので、結果いっこうにローディングが終わらない時があります。

Pasty

Pasty

Lighthouse

Lighthouse

SEOチェックを行いたいページでアイコンをクリックするとパフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA(プログレッシブウェブアプリ)をそれぞれ採点してくれます。

Lighthouse

Lighthouse

まとめ

いかがでしたでしょうか?WEB制作って、デザインやコーディングやチェック作業、そのひとつひとつは手のかかるアナログな工程が多いですよね。
それはそれで職人ぽくて好きなんですが、効率化やヒューマンエラーを防ぐという意味で拡張機能はとても便利だと思います。
今回の記事が、みなさまの日々の業務の助けに少しでもなれば嬉しいです。