助かる!はかどる!Web制作に便利なChrome拡張機能14選

Web制作に便利なChrome拡張機能14選

こんにちは!サボちゃんです。

Web制作でよく使用するChrome、拡張機能は何を使っていますか?

今回は、業務の際に「あったら助かるなー!」というChrome拡張機能のうち、私が実際によく使っているものを紹介していこうと思います。

もし「こんなのもいいよ!」という機能がありましたらぜひ教えてください(笑)

FireShot

FireShotのChromeウェブストア

「FireShot」 Chromeウェブストア

Webページをスクリーンショット撮影してくれる拡張機能です。

デベロッパーツールからページ全体のキャプチャーを保存することはできますが、毎回はちょっと面倒ですよね。

そこで役に立つのがこの機能。PNGやJPEGなど複数のファイル形式で保存できたり、メールや印刷などが選択できたりと、保存の選択肢が豊富なところがいいですね!

FireShotの保存画面

スクリーンショットを行うと、新しいタブで上のような保存画面が開きます。

ヒストリー機能が欲しいなら、Full Page Screen Captureがオススメです。実行中に出てくる、口をパクパクさせる丸いやつが可愛いので、たまにこちらも使用しています(笑)

The QR Code Extension

The QR Code ExtensionのChromeウェブストア

「The QR Code Extension」 Chromeウェブストア

現在開いているページのQRコードを生成してくれる拡張機能。

クリックひとつでURLをサクッとQRコードに変換してくれて、読み取るだけでいいので、スマートフォンでチェックしたいときにかなり便利な機能です。

「Edit this QR Code」をクリックすると、URLを短縮したりQRコードをPNG画像として保存したりすることができます。そのほか、電話番号やテキストのQRコードを生成することも可能です。

Session Buddy

Session BuddyのChromeウェブストア

「Session Buddy」 Chromeウェブストア

開いているタブをリスト化して保存できる拡張機能です。

まずリスト化されたサイトタイトルとURLが表示されますので、必要に応じて「SAVE」ボタンを押してください。そのままでも一定期間はSessionとして保存されています。

名前をつけて保存が可能なため、ブックマークのように使うこともできるという優れもの。

保存する前でも後でも、リストの左に出てくる×ボタンから調整が可能です。タイトルやURLをabc順に並べ替えることはできますが、自由に動かすことはできません。Session Buddyを使う前に並べ替えておくしかなさそうです。「OPEN」でそのSessionの全てのタブを開くことができます。

現在開いているタブを確認しながら整理したいときや、次の制作に必要なリンクをまとめておきたいときに便利ですね!

OneTab

OneTabのChromeウェブストア

「OneTab」 Chromeウェブストア

タブをひとまとめにして整理できる拡張機能。タブ整理という面では先ほどのSession Buddyと似ていますが、少し機能が違います。

Session Buddyでは、元のタブはそのまま、新規タブにリストを作り一覧表示してくれていました。こちらのOneTabでは、何個も開いていたタブを全て消して、リストを掲載した1つのタブだけが開いている状態に。

その名の通り本当に1タブだけになりますので注意してください(笑)

まとめられたタブたちは復元や削除、URLまとめて書き出し、Webページとしてシェアすることができます。QRコードまでついた共有ページが生成され、スマートフォンやタブレットへの共有も一瞬なので、ストレスフリー。

共有やリストの順序入れ替え、URLの書き出しができるのはOneTabのみです。

OneTab共有ページをスマホで開いた画像

こちらは共有用WebページのQRコードを読み込んで、スマートフォンで開いた様子。「PCで気になるサイトたちを一旦まとめておいて、あとでゴロゴロしながらスマホで見よう!」なんてときにも使えますね!

共有機能の存在は控えめに言って最高です。ありがとうございます。

スポンサーリンク

SearchPreview

SearchPreviewのChromeウェブストア

「SearchPreview」 Chromeウェブストア

この拡張機能を入れると、GoogleとYahoo!の検索画面でサイトをチラ見できるようになります。

なんとなく既視感あるのですが、昔はデフォルトでこうだったのでしょうか?

SearchPreviewが適用されている様子

いちいち開かなくていいので、開いてから「あれ、違った(笑)」という状況を減らすことができますね。

リニューアルされたばかりのサイトだと、前のデザインが表示されることがあります。

User-Agent Switcher for Chrome

User-Agent Switcher for ChromeのChromeウェブストア

「User-Agent Switcher for Chrome」 Chromeウェブストア

Chrome上でIEやSafariの確認ができる拡張機能です。

わざわざ他のブラウザを立ち上げることなくチェックできるので、時間短縮になりそう!

User-Agent Switcher for Chromeで偽装できるデバイス一覧

Window Resizer

Window ResizerのChromeウェブストア

「Window Resizer」 Chromeウェブストア

この拡張機能を使えば、ウィンドウサイズをサクッと変更することができます。

ウィンドウの淵にカーソルを移動して横にピィーっと伸び縮みさせればいいだけなのですが、拡張機能なら一瞬で指定幅に固定してくれるので便利です。

CSS Peeper

CSS PeeperのChromeウェブストア

「CSS Peeper」 Chromeウェブストア

CSSで設定されているものを抽出し、一覧で可視化してくれる拡張機能。

そのサイトで使用している色やフォント、埋め込んである画像からロードタイムまでをも一覧で確認することができます。

CSS Peeper使用例

こちらはサルワカさんのサイトをCSS Peeperで見てみた様子。好きなサイトのフォントや色合いを保存するときにも重宝しそうですね!

CSS Peeper使用例

要素単体のCSSもワンクリックで分かります。便利〜!青枠点線が現在選択しているところ、赤枠点線がマウスオーバー時です。

ColorPick Eyedropper

ColorPick EyedropperのChromeウェブストア

「ColorPick Eyedropper」 Chromeウェブストア

ColorPick Eyedropperとは、Webページから色の値を調べることができるスポイト&カラーピッカーツールです。

#カラーコードの他に、RGBHSLの数値も分かります。

ColorPick Eyedropperを使用した様子

「この色好きだなー」と思ったらすかさずこれで抽出し、Photoshopで作成した色置き場に貼り付けています(笑)

ColorZillaも同じ機能を持っていますが、ColorPick Eyedropperのほうがシンプルです。

WhatFont

WhatFontのChromeウェブストア

「WhatFont」 Chromeウェブストア

フォントを調べることができる拡張機能です。

CSS Peeperでも分かりますが、カーソルを上に乗せるだけで表示してくれるので、時と場合によってこちらを使うことも多いですね。

下はFont AwesomeのサイトでWhatFontを使用した例。フォントの上でクリックすることで、下の画像のような詳細が表示されます。

WhatFontでフォントを調べている様子

Page Ruler

Page RulerのChromeウェブストア

「Page Ruler」 Chromeウェブストア

この拡張機能を使うと、ページ上の要素を四角形の定規で測定することができます。

Page Rulerを使用している様子

先ほどのFont Awesomeの検索窓を、Page Rulerで測ってみた様子。同時に上下左右の位置も教えてくれますが、自分の手で四角形を作るため何ピクセルかずれる可能性はあります。

上から下まで好きな範囲を自由に計測できるのが、CSS Peeperにはない利便ポイントですね。

Dimensions

DimensionsのChromeウェブストア

「Dimensions」 Chromeウェブストア

こちらもサイズを調べてくれる拡張機能。

私は主に、要素と要素の間の余白などをざっくり知りたいときに利用しています。

Dimensionsでボタン要素を測っている様子

こんな風にボタンの内側も測定することができますが、背景や影などすべてに反応してしまうので、若干ずれることが多い気がします。

要素単体のサイズを知るには、やっぱりCSS Peeperがオススメです。

スポンサーリンク

Wappalyzer

WappalyzerのChromeウェブストア

「Wappalyzer」 Chromeウェブストア

WappalyzerはそのWebサイトがどんなサーバー、CMS、言語などを使っているのか一目で分かるようにしてくれる拡張機能です。

サイトごとに全く内容が違うので、見るのが楽しくて毎回チェックしています。知りたがりの私には非常に面白い機能ですね(笑)

Wappalyzerを使ってこのブログを見てみるとこんな感じになります。

Wappalyzer使用例

何もしていないとバージョンまで見えてしまいますので、セキュリティの面からもWordPressやPHPなどはバージョン非表示の設定をしておいたほうがいいそうです。

下はバージョンが見えている例。キャー、丸見えっ!(笑)

Wappalyzer使用例

似たような拡張機能にWhatRunsがありますが、WappalyzerのほうがUIが好きですね。どちらもバージョンまで見ることができます。

WPSNIFFER

WPSNIFFERのChromeウェブストア

「WPSNIFFER」 Chromeウェブストア

WPSNIFFER – WordPress Themes Snifferは、そのWebサイトやブログが何のWordPressテーマを使用しているのかを調べることができる拡張機能です。テーマ名のリンク先は、Googleの検索結果に飛ぶようになっています。

私は、先述のWappalyzerでWordPressが使われていることが分かったら、必ずこのWPSNIFFERでテーマを調べるようにしています。素敵だなと思ったらすぐに調べることができる点、どのテーマがどんなサイトやブログに使用されていることが多いのか徐々に分かってくる点が、勉強にもなり良いかなと感じています。

「No Theme Detected.(テーマは検出されませんでした。)」となる場合や、独自のテーマ名だとリンク先が存在しない場合もあります。

まとめ

いかがでしたか?

今回は、Web制作に便利なChrome拡張機能を14個ご紹介いたしました。ここで取り上げたもの以外にもたくさんの種類がありますが、あれこれ入れすぎると重たくなってしまうそう。

不要であれば「Chromeから削除」をすればいいだけなので、まずは使ってみて、自分が本当に使う拡張機能だけに絞るようにしましょう!

入れることで作業効率化してくれますが、もちろん入れなくてもWeb制作は可能です。でも、この「面倒だな」「あったらいいな」を解決していくのがモノやサービス、機能の充実だと私は思います。

というわけで、便利なChrome拡張機能、ぜひ使ってみてくださいね!