アンブログ | WEB制作会社アンのメンバーがお届けする情報メディア

アンブログ/株式会社アンのスタッフブログ

コラム テクノロジー

Web制作者必見!ここまで進化したChromeの拡張機能 3選

2018/07/12

Webプログラマーのモリモリです。
コーディング(プログラミング)やサイトの更新業務を担当しています。
スピーディで的確なWeb運営をサポートし、皆さんのビジネスの発展に貢献します!

------------------------------------------------------------------

みなさん、インターネットを見るときは何のブラウザを使っていますか?
私はGoogleが提供している「Chrome(クローム)」を使っています。
世界ではトップシェア、日本国内でも現在2位の人気ブラウザです。

私が使う理由はWeb制作に役立つ拡張機能がいろいろ揃っているからです!
今回はその中から3つを厳選して紹介します。

よかったら皆さんも使ってみてくださ~い♪

 

【1】Resolution Test
https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal

モニター解像度を自由に変えられる!

自分のPCではきちんと表示されているWebサイトでも
他のモニターで正しく表示できているとは限りません。

かといって、さまざまなサイズのモニターを用意して確認するのは非現実的。

そんなときにこの「ResolutionTest」を使います。
これはChrome上で
ブラウザの解像度を任意のサイズに変えることができる拡張機能です。



この設定からサイズを選べば
一発で解像度を変更することができます。
(もとに戻すのも一瞬!)

また、自分でサイズを入力して登録することもできます。
「options」を押すと上記の画面が出てくるので、widthとheightに任意の数字を入力してください。

この機能を使えば、クライアントのPCや
エンドユーザーがより多く使っているPCの解像度でも
正しく表示されているかをチェックすることができます♪

 

 

【2】MeasureIt!
https://chrome.google.com/webstore/detail/measureit/aonjhmdcgbgikgjapjckfkefpphjpgma

Web上の定規ツールです。
Webページ上の画像の大きさなどを、その場でパパっと測りたいときに便利です。
「Measure It!」を使う前は、画面のキャプチャをとる→PhotoshopやFireworksで開いて大きさを測る・・・
とかなり面倒だったのですが、これならWebページ上でサクッとできるので超楽・・・!

 

 

【3】Awesome Screenshot
https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce

Webページのキャプチャがとれるスクリーンショット機能です。

キャプチャ画像にブラウザ上で図形や文字で注釈をつけることができます
同じスクリーンショット系のツールWebpage Screenshotよりもオススメです。

↑ キャプチャ画像に枠線や矢印、文字などを書き加えてみました。

画像編集系のソフトを持っていないときや、
そもそもそういったソフトを立ち上げるのが面倒!という時に便利です。

ページの一部はもちろんページ全体のスクリーンショットもとれます。

-----------------------------------------------------------------------------------------------------------------------

以上、3つの拡張機能を紹介しました。
ブラウザでここまでできるなんてすごいですよね。

まだまだ、便利な機能があるのでまた紹介したいと思います!

 

 

 


目次