WordPress中級者

【Web制作者必見】作業効率・生産性UP!Google Chrome拡張機能8選

Atsuya
公開
2024年7月2日
目次
ここのURLをクリップボードにコピー(copied!)

はじめに

Google Chromeではさまざまな拡張機能を追加することで、便利な機能が使えるようになります。
そこで本記事では、Web制作で役立つおすすめのChrome拡張機能を8個ご紹介します。
作業の効率化や生産性が向上すること間違いなしです。

WhatFont

Webサイトで使用されているフォントを簡単に確認できる拡張機能です。
確認したい文字にカーソルを合わせるだけでフォントの種類が表示されます。
また、文字をクリックすることでフォントの種類はもちろん、太さ、色、サイズ、行間などの情報がポップアップで表示されます。
さらに、複数選択することで別の箇所のフォント情報を同時に表示することができます。
簡易的にフォント情報をさっと確認する場合は役に立ちますが、より確実な情報が必要な場合はデベロッパーツールで確認することをおすすめします。

WhatFont

ColorZilla

Webサイトで使用されているカラーを抽出できる拡張機能です。
選択した要素のカラーコードはクリップボードに自動でコピーされるほか、現在開いているページの配色をカラーパレットで確認できます。

ColorZilla

GoFullPage – Full Page Screen Capture

Webサイトのページ全体をワンクリックでスクリーンショットできる拡張機能です。
ダウンロード形式は、PDF / JPG / PNGを選択できます。(デフォルトはPNGですが、設定からJPGに変更可能です)

GoFullPage – Full Page Screen Capture

Image Downloader

ページ内の画像を一括または選択してダウンロードできる拡張機能です。
画像サイズでの絞り込みや、ダウンロードする画像ファイル名のリネーム、ダウンロードする画像を入れるフォルダの作成ができます。

Image Downloader

 

Designer Tools

Webサイト内の要素のサイズや要素同士の間隔が確認できる拡張機能です。
確認したい要素にカーソルを合わせるだけで縦と横の幅が表示されます。
また、要素同士の間隔を確認したい場合は、基準とする要素をクリックし、他の要素にカーソルを合わせることで測定できます。

Designer Tools

Wappalyzer – Technology profiler

Webサイトで使用されている技術をワンクリックで確認できる拡張機能です。
フレームワーク、ライブラリ、CMSなどが一覧で表示されます。
好きなサイトや気になるサイトがどのような技術を使用しているかを知りたいときに便利です。
注意点として、システムのバージョンなども可視化されるため、Webサイトの管理者は適切なセキュリティ対策を行うことをおすすめします。

Wappalyzer – Technology profiler

 

Responsive Viewer

複数の画面サイズを1つの画面で確認できる拡張機能です。
レスポンシブの表示確認をする際に、デベロッパーツールで様々なサイズを確認するよりも効率が良いです。

Responsive Viewer

Pasty

クリップボードにコピーしている複数のURLをワンクリックで一気に開くことができる拡張機能です。
コピーした内容にURL以外のテキストが含まれていても、URLのみを自動抽出して開かれます。
例えば、GoogleのスプレッドシートなどにURLがまとめられており、一気にURLを開きたい場合などに便利です。

Pasty

まとめ

今回は、作業効率・生産性をUPできるGoogle Chrome拡張機能を8個ご紹介しました。
気になったものがあれば、ぜひ日々の業務で活用してみてください。

【Web制作者必見】作業効率・生産性UP!Google Chrome拡張機能8選
Atsuya(WordPress見習い)