system
矢口 奈果

2020.10.22HTML/CSS その他 デザイン 

Webクリエイター

矢口 奈果

【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

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

それでは。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ