くるくる日和

色々なことをくるくると紡いでいきます。

これは便利だ!!僕が使用しているchromeの拡張機能

僕が日常的に使用していて、便利だと思うchromeの拡張機能をご紹介いたします。

 


・FireShot

 まずはみなさんも使用しているんじゃないでしょうか。
キャプチャツールのFireShot

chrome.google.com

 

以前はFastStone Captureというフリーソフトを使用していたのですが、これだと固定表示されたヘッダーがある場合、ページ全体のキャプチャーがうまくできないんですね。
少し前までは、ヘッダーの固定表示も少なかったのでこれで問題なかったのですが・・・。

 

でも、こちらのFireShotですとヘッダーが固定されていても問題なしです!!
ありがたや、ありがたや。

 

もちろん表示部分だけのキャプチャも選択範囲のキャプチャも行なえます。
画像ではpngとjpgのどちらかを選べますし、PDFでの保存も可能。
またそのままメールに添付したり、クリップボードにコピーしたり、そのまま印刷も行なえます。
保存時のファイル名もオプションから変更可能です。

 


・Awesome Screenshot

 FireShotと同じキャプチャツールですが、キャプチャ後にそのまま書き込みが行えるんです。

chrome.google.com


テキストも入れられますし、自由な線も、矢印も、枠も簡単に描けます。また、蛍光ペンのようなものでハイライトも付けられます。
指示出しや赤入れなんかに便利ですね。


ただ、こちらは固定表示のヘッダーがあると上手くキャプチャできないので、メインはFireShot、サブでこちらを使用するようにしています。

 


・The QR Code Extension

こちらもかなり重宝しているツールで、表示しているサイトのURLのQRコードを画面上に表示させるツールです。

chrome.google.com

どういうときに使用するかと言うと、制作中のサイトを実機で確認するときに大変便利です。


ポチっとアイコンをクリックすると画面上にQRコードが表示され、スマホのカメラでそれを読み込むだけで、簡単に実機での確認が行えます。
デベロッパーツールでの確認も行ないますが、最終的にはこちらの拡張機能を使用し、実機で確認するようにしています。

 


・ColorPick Eyedropper

こちらは、気になる部分のカラーコードをすぐに調べられるツールです。

chrome.google.com


調べたい部分にカーソルを持っていくのですが、拡大表示もされますのでピンポイント(1ピクセル単位で!!)でカラーコードを調べられます。


サイトのリニューアル時などに、現状のベースカラーがcssを見なくても簡単に分かりますし、バナー作成時に、既存のバナーの色を調べたりするときに使っています。
ただ、ブラウザ上のカラーコードのみなので、jpgやPDF上のカラーコードを調べるときは、別のフリーソフトを使用しています。

 


・Page Ruler

サイト上で画像やバナーのサイズを知りたいときありますよね。
そんなときに使えるのがコチラの拡張機能です。

chrome.google.com


ポチッとアイコンをクリックするとカーソルが十字に切り替わるので、調べたい個所を左クリックしながら動かすだけです。
画像でしたら、保存したり、次にお伝えする拡張機能でサイズは分かるのですが、画像以外も調べられるので重宝しています。
何より、物差しを当てる感じで簡単なのが良いです。

 

・View Image Info


上記で記載した画像関連の拡張機能です。

chrome.google.com


こちらを使用する際はアイコンをクリックするというやり方ではないので要注意です。
アイコンを何度押しても使えないじゃないか、と思ってすぐに削除してしまわないようにして頂きたいです(笑)。


CHROMEに追加後、右クリックで使えます。


調べたい画像の上で右クリックをすると、View Image Infoが表示されているかと思います。
そちらをクリックすると、画像のURL、サイズ、拡張子、容量、altとファイル名が表示されます。
画像やバナーの詳細が知りたい場合によく利用しています。

 


・WhatRuns

こちらはサイトにどのようなツールが導入されているのかが分かるツールです。

chrome.google.com


僕の場合は主にCMSは何を使っているのかな、GAはちゃんと使ってるかな、ぐらいしか使用していませんが、それだけでも結構、使えるなと思っているので、サイト調査により詳しい人なんかは重宝するんじゃないでしょうか。


使用タイミングはだいたい「サイトリニューアルしたいんです」という話があった際に、持って行くプレゼン資料作成時に使っています。wordpressを使用しているかどうかも、簡単に分かります。もちろんhtmlコードを見てもわかりますが、簡単に分かるといのは時短にとても繋がっています。

 


・META SEO inspector

これも実に重宝しています。見ているページのメタタグが簡単に分かるんです。

chrome.google.com


何度も言うようですが、htmlコードを見ればそれらの情報は分かるのですが、こちらもアイコンをクリックするだけで簡単にディスクリプションやキーワードなんかが分かるのでお手軽です。
サイトの下層ページまで全部を調べる際には別のツールを使用していますが、サクっと調べるときにはコチラをよく使っています。

 


 

以上の8個の拡張機能を僕はよく利用しているのですが、改めてこうまとめてみると「便利」以外にも「時短」というのもよく使う拡張機能の一つのキーワードかも知れないですね。

みなさんの参考になれば幸いです。

 

ではでは、また。