Web製作において、少しでも効率的に作業ができるGoogle拡張機能を紹介。
拡張機能上手く使いこなすことによって作業工数の削減することで、別の作業ができたり、クリエイティブな取り組みに時間を使うことができるようになります。
便利なGoogle拡張機能は直感で使用できるものとなっています。
Chrome ウェブストア
Chrome ウェブストアで拡張機能をダウンロードすることができるので下記URLからストアに飛びます。
![Chrome ウェブストア](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-13-33-27-064-1024x633.jpg)
Lighthouse(コーダー用)
拡張機能名:Lighthouse
提供元:developers.google.com/web
![Lighthouse](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-10-39-09-421-1024x576.jpg)
Lighthouseはパフォーマンス・アクセシビリティ・ベストプラクティス・SEOとWEBサイト全体の最適化を確認しどこに問題があるのか知ることができます。
対応デバイスをスマホかデスクトップかも分けて確認することが可能。
![デバイス分け](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-10-45-14-214-1024x576.jpg)
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-10-53-55-617-1024x576.jpg)
▪ブラウザ版は下記URLから確認できます⇩
▶ PageSpeed Insightshttps://pagespeed.web.dev/
UI Build Assistant (コーダー用)
拡張機能名:UI Build Assistant
提供元:しまぶーのIT大学
![UI Build Assistant](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-13-37-59-657-1024x518.jpg)
UIを構築するときWeb上の要素の余白をアウトラインで表示されるので「検証」で毎回確認する手間が省けます。
HTML要素にbackground-colorとoutlineのCSSを付与し、要素同士の境目を明確にすることでレイアウト崩れを防ぐ拡張機能になります。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-13-52-39-498-1024x563.jpg)
Image Downloader (画像ダウンロード用)
拡張機能名:Image Downloader
提供元:Pact Interactive
Webサイトに掲載されている画像をまとめてダウンロードすることができる拡張機能になります。
![Image Downloader](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-14-18-40-363-1024x511.jpg)
元画像を選択でき、小さな画像を除外できるなど目的にあった画像をダウンロードできる拡張機能です。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-14-16-23-551-1024x511.jpg)
GoFullPage – Full Page Screen Capture (キャプチャ用)
拡張機能名:GoFullPage – Full Page Screen Capture
提供元:gofullpage.com
![GoFullPage - Full Page Screen Capture](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-14-28-41-687-1024x511.jpg)
ページ全体をスクリーンショットする時に使用し、途切れなく綺麗に一枚の画像で拡張子をPNG・JPEG・PDFと選択することができます。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-11-38-13-376-1024x515.jpg)
![使用例](https://design-pull.com/wp-content/uploads/2022/10/screencapture-design-pull-2022-10-03-13_43_41-346x1024.jpg)
素晴らしいスクリーンショットとスクリーンレコーダー (キャプチャ用)
拡張機能名:素晴らしいスクリーンショットとスクリーンレコーダー
提供元:www.awesomescreenshot.com
![素晴らしいスクリーンショットとスクリーンレコーダー](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-14-47-03-633-1024x492.jpg)
Webページ全体のスクリーンショットと選択範囲と表示部分の画面キャプチャを分けて使うことができる拡張機能です。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-14-39-40-116-1024x368.jpg)
ColorPick Eyedropper (コーダー用)
拡張機能名:ColorPick Eyedropper
提供元:vidsbee.com
![ColorPick Eyedropper](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-15-35-04-607-1024x492.jpg)
Webサイトに表示されている箇所をクリックすると、そこのカラーコードが表示されます。CSSコードとRGBと表示されるので、コーダーとデザイナー両方使えますね。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-04-15-34-43-214-1024x492.jpg)
CSS Peeper (コーダー用)
拡張機能名:CSS Peeper
提供元:CSS Peeper
![CSS Peeper](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-10-30-35-871-1024x487.jpg)
「開発ツール」を使って調べる内容を、サイト上で拡張機能を使用することで、サイトのOGP画像・タイトル・フォント・CSS情報・ロード時間を簡単に確認することができます。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-09-50-04-609-1024x554.jpg)
CSSViewer (コーダー用)
拡張機能名:CSSViewer
提供元:M.ed
![CSSViewer](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-10-40-24-396-1024x487.jpg)
マウスホバーのみで、フォントの種類・余白・フォントサイズ・カラーコードが一発で確認することができます。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-10-45-18-886-1024x487.jpg)
Designer Tools (コーダー用)
拡張機能名:Designer Tools
提供元:baars.design
![Designer Tools](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-10-49-52-732-1024x487.jpg)
サイトに記述されている文字や添付されている画像の正確なサイズを知りたい場合に便利な機能です。ピクセル単位で表示されるのでデザイナーも活用できますね。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-10-52-09-654-1024x584.jpg)
Dimensions (コーダー用)
拡張機能名:Dimensions
提供元:www.felixniklas.com
![Dimensions](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-11-28-59-125-1024x515.jpg)
要素と要素の幅と高さをマウスホバーのみで測ることができます。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-11-32-47-780-1024x515.jpg)
Page Ruler (コーダー用)
拡張機能名:Page Ruler
提供元:leocompson
![Page Ruler](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-11-44-12-433-1024x515.jpg)
ブラウザ上で測定したい箇所を囲って幅・高さ・X軸・Y軸と細かく測ることができます。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-11-49-09-018-1024x552.jpg)
PerfectPixel by WellDoneCode (コーダー用)
拡張機能名:PerfectPixel by WellDoneCode
提供元:welldonecode.com
![PerfectPixel by WellDoneCode](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-14-06-56-898-1024x485.jpg)
ブラウザ上に選択した画像を配置する機能が備わっています。なのでデザイナーがコーダーに対してこのように配置してほしいなどの提案もブラウザ上で表現することができます。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-11-58-52-474-1024x517.jpg)
QRコード作成器 (コーダー用)
拡張機能名:QRコード作成器
提供元:high-qr-code-generator.com
![QRコード作成器](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-14-43-34-857-1024x485.jpg)
ワンクリックでページをそのままQPコードに。どんな文章でもURLでも自分の好きなのもをQRコードにすることができます。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-14-42-55-733-1024x485.jpg)
Web Developer (コーダー・エンジニア用)
拡張機能名:Web Developer
提供元:chrispederick.com
![Web Developer](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-15-23-16-773-1024x485.jpg)
HTML・CSSなどの階層コードが問題なく記述されているか、どのようなエラーがあるのかとWeb上の表示ではなく、コード構造がしっかりなっているか、確認することができる機能です。
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-15-35-41-216-1024x358.jpg)
![使用例](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-05-15-43-07-271-1024x401.jpg)
まとめ
Google拡張機能の使い方に関してあまり説明を行いませんでしたが、実際に使ってみると直感で理解できる機能ばかりなので、まずは導入してみてご自身で操作してみてください。
その時にいるものといらないものと分けて整理するのがGoogle拡張機能のいい活用方法だと思います。
下記の記事では、作業効率を劇的にアップすることができる機能があるWebサイトを紹介しているので、合わせて使いこなしてくださいね。
▪WEB上便利ツールまとめ⇩