ウェブ

Web製作をする上でコーダーに超おすすめGoogle拡張機能13選【無料まとめ】

Google拡張機能

Web製作において、少しでも効率的に作業ができるGoogle拡張機能を紹介。

拡張機能上手く使いこなすことによって作業工数の削減することで、別の作業ができたり、クリエイティブな取り組みに時間を使うことができるようになります。

便利なGoogle拡張機能直感で使用できるものとなっています。

Chrome ウェブストア

Chrome ウェブストアで拡張機能をダウンロードすることができるので下記URLからストアに飛びます。

➡ Chrome ウェブストア

Chrome ウェブストア
Chrome ウェブストア

Lighthouse(コーダー用)

拡張機能名:Lighthouse

提供元:developers.google.com/web

➡ Lighthouse

Lighthouse
Lighthouse

LighthouseはパフォーマンスアクセシビリティベストプラクティスSEOとWEBサイト全体の最適化を確認しどこに問題があるのか知ることができます。

対応デバイスをスマホかデスクトップかも分けて確認することが可能。

デバイス分け
デバイス分け
使用例
使用例

▪ブラウザ版は下記URLから確認できます⇩

▶ PageSpeed Insightshttps://pagespeed.web.dev/

UI Build Assistant (コーダー用)

拡張機能名:UI Build Assistant

提供元:しまぶーのIT大学

➡ ダウンロードサイト

UI Build Assistant
UI Build Assistant

UIを構築するときWeb上の要素の余白をアウトラインで表示されるので「検証」で毎回確認する手間が省けます。

HTML要素にbackground-coloroutlineのCSSを付与し、要素同士の境目を明確にすることでレイアウト崩れを防ぐ拡張機能になります。

使用例
使用例

Image Downloader (画像ダウンロード用)

拡張機能名:Image Downloader

提供元:Pact Interactive

➡ ダウンロードサイト

Webサイトに掲載されている画像をまとめてダウンロードすることができる拡張機能になります。

Image Downloader
Image Downloader

元画像を選択でき、小さな画像を除外できるなど目的にあった画像をダウンロードできる拡張機能です。

使用例
使用例

GoFullPage – Full Page Screen Capture (キャプチャ用)

拡張機能名:GoFullPage – Full Page Screen Capture

提供元:gofullpage.com

➡ ダウンロードサイト

GoFullPage - Full Page Screen Capture
GoFullPage – Full Page Screen Capture

ページ全体をスクリーンショットする時に使用し、途切れなく綺麗に一枚の画像で拡張子をPNG・JPEG・PDFと選択することができます。

使用例
使用例
使用例
使用例

素晴らしいスクリーンショットとスクリーンレコーダー (キャプチャ用)

拡張機能名:素晴らしいスクリーンショットとスクリーンレコーダー

提供元:www.awesomescreenshot.com

➡ ダウンロードサイト

素晴らしいスクリーンショットとスクリーンレコーダー
素晴らしいスクリーンショットとスクリーンレコーダー

Webページ全体のスクリーンショットと選択範囲と表示部分の画面キャプチャを分けて使うことができる拡張機能です。

使用例
使用例

ColorPick Eyedropper (コーダー用)

拡張機能名:ColorPick Eyedropper

提供元:vidsbee.com

➡ ダウンロードサイト

ColorPick Eyedropper
ColorPick Eyedropper

Webサイトに表示されている箇所をクリックすると、そこのカラーコードが表示されます。CSSコードとRGBと表示されるので、コーダーとデザイナー両方使えますね。

使用例
使用例

CSS Peeper (コーダー用)

拡張機能名:CSS Peeper

提供元:CSS Peeper

➡ ダウンロードサイト

CSS Peeper
CSS Peeper

「開発ツール」を使って調べる内容を、サイト上で拡張機能を使用することで、サイトのOGP画像・タイトル・フォント・CSS情報・ロード時間を簡単に確認することができます。

使用例
使用例

CSSViewer (コーダー用)

拡張機能名:CSSViewer

提供元:M.ed

➡ ダウンロードサイト

CSSViewer
CSSViewer

マウスホバーのみで、フォントの種類・余白・フォントサイズ・カラーコードが一発で確認することができます。

使用例
使用例

Designer Tools (コーダー用)

拡張機能名:Designer Tools

提供元:baars.design

➡ ダウンロードサイト

Designer Tools
Designer Tools

サイトに記述されている文字や添付されている画像の正確なサイズを知りたい場合に便利な機能です。ピクセル単位で表示されるのでデザイナーも活用できますね。

使用例
使用例

Dimensions (コーダー用)

拡張機能名:Dimensions

提供元:www.felixniklas.com

➡ ダウンロードサイト

Dimensions
Dimensions

要素と要素の幅と高さをマウスホバーのみで測ることができます。

使用例
使用例

Page Ruler (コーダー用)

拡張機能名:Page Ruler

提供元:leocompson

➡ ダウンロードサイト

Page Ruler
Page Ruler

ブラウザ上で測定したい箇所を囲って幅・高さ・X軸・Y軸と細かく測ることができます。

使用例
使用例

PerfectPixel by WellDoneCode (コーダー用)

拡張機能名:PerfectPixel by WellDoneCode

提供元:welldonecode.com

➡ ダウンロードサイト

PerfectPixel by WellDoneCode
PerfectPixel by WellDoneCode

ブラウザ上に選択した画像を配置する機能が備わっています。なのでデザイナーがコーダーに対してこのように配置してほしいなどの提案もブラウザ上で表現することができます。

使用例
使用例

QRコード作成器 (コーダー用)

拡張機能名:QRコード作成器

提供元:high-qr-code-generator.com

➡ ダウンロードサイト

QRコード作成器
QRコード作成器

ワンクリックでページをそのままQPコードに。どんな文章でもURLでも自分の好きなのもをQRコードにすることができます。

使用例
使用例

Web Developer (コーダー・エンジニア用)

拡張機能名:Web Developer

提供元:chrispederick.com

➡ ダウンロードサイト

Web Developer
Web Developer

HTML・CSSなどの階層コードが問題なく記述されているか、どのようなエラーがあるのかとWeb上の表示ではなく、コード構造がしっかりなっているか、確認することができる機能です。

使用例
使用例
使用例
使用例

まとめ

Google拡張機能の使い方に関してあまり説明を行いませんでしたが、実際に使ってみると直感で理解できる機能ばかりなので、まずは導入してみてご自身で操作してみてください。

その時にいるものといらないものと分けて整理するのがGoogle拡張機能のいい活用方法だと思います。

下記の記事では、作業効率を劇的にアップすることができる機能があるWebサイトを紹介しているので、合わせて使いこなしてくださいね。

▪WEB上便利ツールまとめ⇩

作業効率UP爆速
作業効率UP爆速!!画像圧縮&変換&URL短縮&Code比較サイト一覧※利便性と引換に危険性も。【WEB上便利ツールまとめ】 Web製作をしていく中で、「画像の拡張子を変えたい」「動画のデータ量を減らしたい」といった悩みがつきものです。 そこでデータの「...