BLOGスタッフブログ

2020.10.22 コーディング

【Google Chrome】Web制作者向け!便利な拡張機能9選

こんにちは。口内の粘膜に脆弱性が確認されているWebクリエイター、矢口です。

今回は私が日々の業務の中でよく使っているGoogle Chromeの拡張機能(プラグイン)を紹介していこうと思います。
まずは、制作業務に携わらないという人でも、入れておいて損はしない拡張機能の紹介です。

GoFullPage – Full Page Screen Capture

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
Gofullpage

ページ全体のスクリーンショットを撮ってくれる拡張機能です。
キャプチャ系の拡張機能の中には、上手くキャプチャできるページとできないページがあったりしますが、GoFullPageはほぼ失敗せず撮れると思います。
パックマンがかわいいです。

SearchPreview

https://chrome.google.com/webstore/detail/searchpreview/hcjdanpjacpeeppdjkppebobilhaglfo

SearchPreview

Google と Yahoo! の検索結果にウェブサイトのプレビューを挿入します。
通常の検索時はテキストしか出ませんが、この拡張機能を入れると検索結果に出たサイトのプレビューが表示されます。

SearchPreview_01

遷移しなくてもサイトの雰囲気がわかるため、目的のサイトにたどり着きやすいです。

OneTab

https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall

OneTab

散らかったタブを一つにまとめてくれます。
調べもの、探しものなんかをしているとどんどんタブが溜まっていきますよね…

OneTab_01

そんな時にこの拡張機能を使うと、OneTabのページの中にタブをまとめてくれます。

グループ 7

通常は開いたらブロックが消えてしまいますが、ロックしておけば別タブで展開&繰り返し使えます。
OneTab_04

Pasty

https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf

Pasty

コピーしたURLをワンクリックで開いてくれます。

グループ 4

大量のリンク先をちまちま開く手間が大きく省けます!
ちなみに、上記で紹介したOneTabと合わせて使うと効率化無双できます。おすすめです。

The QR Code Extension

https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb

The QR Code Extension

閲覧中のページのQRコードを表示してくれます。

The QR Code Extension_01

スマートフォンでこのページが見たい!という時に便利な機能です。
制作側としても現在はレスポンシブ対応がほぼ必須になるので、大変助かっています。

ここからは制作者向けの拡張機能を紹介していきます。

テキストエンコーディング

https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae

テキストエンコーディング

右クリックでエンコードしてくれます。

グループ 9

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

ColorPick Eyedropper

カーソルを当てた位置の色を取得してくれます。

ColorPick Eyedropper_01

こちらはデザイナーさんにも有用な機能かと思います。

CSSViewer

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

CSSViewer

カーソルを当てた位置のCSSを取得してくれます。

CSSViewer_01

検証ツールで確認することの方が多いですが、こちらはワンタッチで確認できるため、
手軽に確認したい時などにおすすめです。

Page Ruler Redux

https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal

Page Ruler Redux

ページ上の要素のサイズを計測できます。

Page Ruler Redux_01

フリーハンドで計測・要素ごとに計測の2パターンが可能で、
左上オレンジ色の<>を押すと、要素ごとの計測に切り替わります。

Page Ruler Redux_02

いかがでしたでしょうか。完全に個人のチョイスですが、参考になれば幸いです。
いつか誰かに口内炎が一瞬で治る拡張機能を開発してほしいですね。

それでは。

矢口 奈果が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します