販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

ウェブ担当者必須!Google Chrome拡張機能7選

皆さん、こんにちは。
バズーカ運営チームのキムです。

普段どういうウェブブラウザを使っていますか?
もちろんウェブ担当者なら1種類以上のブラウザを使うことも珍しくないですが、「これがメイン」というようなブラウザは一つあると思います。

キムの場合は、大昔「Netscape」からスタートして、「Internet Explorer」時代を(大体6までですかね)経て、「Firefox」と恋に落ちた時期を過ぎ、今は「Google Chrome」をメインブラウザで使っています。Google Chromeは発表された当時は「シンプル・早い」ということが売りだったのですが、今は数々の「拡張機能」や「アプリケーション」でウェブブラウザを超えるような機能まで果たしています。いつの間にかブラウザシェアも1位の座を獲得していますね。

この記事では、Chromeの「拡張機能」の中でも、特に様々な業界での「ウェブ担当者」の方の仕事に役立つ便利なものを紹介したいと思います!

ウェブページ確認用Google Chrome拡張機能4選

まず、実際できあがったウェブページのデザイン・作りをチェックする時に便利な拡張機能紹介します。いちいちソースを見なくてもマウスクリックだけで必要な情報を得られるという利便性が魅力的な拡張機能です!

① このフォント、何だろう?「What Font」

 

一つ目は、マウスカーソルをの
せるだけでそこに使われたフォントを教えてくれる「What Font」です。

拡張機能を「ON」にして、フォントを調べたいウェブページ区域の上にのせるだけで、今のフォントがわかります!(メイリオを使っています)

さらに、もう一度マウスボタンをクリックするとCSS(スタイルシート)に指定されている「Font Family(指定したフォントの種類)」と「Font Size(フォントの大きさ)」「Line Height(行間)」、色まで表示してくれます!(*画像のフォントは確認できません)この拡張機能、実は自分が管理するサイトよりも、他社のサイトでに珍しい書体を使っている時にさっと調べられるので、有用に使っています。

ダウンロードリンク:
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

② この色、何だろう?「Color Zilla」


この拡張機能は、先の「What Font」と似ている拡張機能で、フォントの代わりに「色」を教えてくれる拡張機能です。

拡張機能を「ON」にして、色を調べたいところの上にマウスカーソルをのせると、そこに使われている色がRGB・HEX値で表示されます!(CSSで指定したクラスやIDも表示)

色が表示された状態でマウスボタンをクリックすると、色のHEX値をクリップボードにコピーしてくれます!これはCSSやPhotoshopなどの色選びの時にそのまま貼り付けたら、今調べた色を使えるので便利ですね。

CSSで指定された色だけではなく、こういうふうに、イメージの上に乗せたら今カーソルがのっている部分の色もわかります!Photoshopなどの「スポイトツール」機能と似ていますね。

ダウンロードリンク:
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?

③ スクリーンショットをワンクリックでとる!「Awesome Screen Capture」

ウェブの仕事をしていると、修正を依頼したりプリントアウトをしたりでウェブページのスクリーンショットを頻繁にとりますね。(キムの場合大体1日15回ほどはとっていると思います)その時にとても便利な拡張機能が、「Awesome Screen Capture」です。

アイコンをクリックして、どういう方法でスクリーンショットとるかを選べます。

「Awesome Screen Capture」のメニュー説明

・Capture Visible part of page
:現在Chromeで見えている範囲のページをそのままとります。
・Delayed capture
:「Capture Visible part of page」と同じ範囲をとりますが、クリックした瞬間から
3秒後の画面をとります。アニメーションなどの変化後をとりたい時に使います。
(Optionで3秒か5秒で、時間を選べます)
・Capture Selected Area
:とりたい場所をドラックして、そこの範囲だけをスクリーンショットでとります。
・Capture entire page
:現在の画面位置から一番下まで自動でスクロール、1枚のスクリーンショットをとります。
縦で長く、一つの画面に収まらないページでも一気にスクリーンショットをとることが
できます。
・Select a local image
:PCに保存されているPNGかJPG画像を編集できます。
・Option
:保存するファイルの形式(PNG・JPG)、ショートカットなどの設定変更ができます。

スクリーンショットの編集機能も便利

一度スクリーンショットを取ったら、Chromeの新しいタブでその画像が開きます。ここでスクリーンショットの上にテキストを入れたり、クロップしたりできるので簡単な編集もそのまま済ませて保存できるので便利ですね!

ダウンロードリンク:
https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj

④ Width、Heightをすぐ図れる「Page Ruller」!

こちらは名前通りに、自分が選択した範囲の横と縦の大きさをPixel単位で教えてくれる拡張機能です。

拡張機能をクリックしてON、ドラッグした範囲の大きさとページの開始時点(左上基準)からの距離もPixel単位で教えてくれます。

ダウンロードリンク:
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

競合サイト調査用 Google Chrome拡張機能3選

これから紹介する拡張機能は、他社のサイト(特に競合会社のサイト)はどういう状況か、どういうところが良くできていて何が問題かを調べる時に有用なものです。

① SEO対策状況を確認!「Admatrix Analytics」

こちらの拡張機能は、現在見ているウェブページのSEO対策・挿入タグがクリックを教えてくれる、便利で見やすいツールです!

サイトのSEO状況がわかる

まず拡張機能を「ON」にすると、現在ページのMETA タグ(TITLE、KEYWORD、DESCRIPTION)・Hタグはどういう内容で使われているか、外部リンク・被リンクは何箇所はられているかがその場でわかります。

「キーワード登場」という入力フィールドにキーワードを入力すると、このページの中にキーワードが何件くらい出現されているかもわかるので便利ですね!

サイトの挿入タグがわかる

「各種タグ」では、DSPなど広告配信用のタグやGoogle Analyticsなど解析ツールのタグが入っているかどうかも教えてくれるので、このサイトはどういう広告手段を使っているかも推測できます!似ている機能を提供してくれるウェブサイトもいくつかありますが、この拡張機能を設置しておけばクリック一回で、今見ているページの情報をすぐ得られることが一番のメリットです。*ウェブサイト全体ではなく、「現在見ているウェブページ1枚」に対しての情報なので誤解ないように注意してください。

ダウンロードリンク:
https://chrome.google.com/webstore/detail/admatrix-analytics/flelcckedladbpaemccaajnnnaobhplb

② このサイトは何で作られているか?「BuiltWith Technology Profiler」

こちらは、ウェブサイトが「何で作られているか?」を教えてくれる拡張機能です。使い方は簡単です。サイトをChromeで開いた状態で拡張機能ボタンをクリックするだけです。

別のウィンドウでこのウェブサイトが使っているミドルウェア、ホスティングサービス、CMSの種類、挿入されている解析ツールや広告サービスのタグ、Java Scriptライブラリなど様々な情報がわかります!更に、表示されているサービスをクリックすると、そのサービスがどういうもので、他のサイトでの利用率など大体の傾向までつかめる「buitwith」のサイトに飛びます。

先の画面から、「dotCMS」をクリックしました。サイトの訪問者規模によって「dotCMS」はどれくらい使われているか、そもそもdotCMSがどういうものかの説明ものっているので聞いたことがないものもこのページを観ればわかりますね。但し、「builtwith」のデータに搭載されていないものは結果として表示されないので、そこは気をつけてください。

ダウンロードリンク:
https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn

③ アクセス状況を覗いてみる!「Similar Web」

とても有名な拡張機能、もう使っている方も多いでしょう。別途トラッキングコードなしでも、今訪問しているウェブサイトのトラフィック状況を把握できるツールです。

トラフィック確認

今見ているウェブサイト(ドメイン単位で区別します)の訪問数、滞在時間、1人あたりPVなどの推定値をクリック1回で教えてくれますー!「Overview」では、この画面のように訪問数のデータがメインですが、他のタブで貴重な情報もいっぱい見られます。

トラフィックソース(流入元)の確認

「Sources」トラフィックの経路(検索から?ダイレクト?外部リンクから?SNSから?)の割合が把握できます。

「Referrals」では、外部リンクから現在のサイトへのアクセス・現在のサイトから外部サイトへのリンクを使った移動経路がURLでわかりますー!訪問者の動線をつかめますね!

「Search」タブでは、このサイトにたどり着く時によく検索されるキーワードと、広告を出していたらどういう広告キーワードからアクセスが発生しているかもわかります。有料版の「SimilarWeb Pro」では、より多くの情報が把握できるようですが、まず無料版でも大体の傾向がわかるので仕事に活用していきましょう!

ダウンロードリンク:
https://chrome.google.com/webstore/detail/similarweb-website-rankin/hoklmmgfnpapgjgcpechhaamimifchmp

とりあえず使ってみましょう。

今回紹介したChromeの拡張機能はいかがでしたか?既に知っている又は使っているものはどれくらいありましたか?もしまだ使ったことがないものがあったら、是非一度試してみてください!今まで確認や調査に使っていた時間が短縮できると思います。これからもウェブ担当者の方に活用して頂ける拡張機能や、設置型アプリケーションがあれば、紹介させて頂きます!
P.S キムが使っているChromeの拡張機能です。ちょっと多すぎて最近URL入力バーが見えなくなってきたので整理しなくては…と思います。

今回紹介できなかったものも幾つかありますが、皆さん、アイコンだけで何かわかりますでしょうか?

The following two tabs change content below.
キム

キム

テクニカルディレクター。 フロントエンドコーディング、スマホ、アプリケーション、IoTなどに興味深いです。 たまに変な日本語が出てしまっても許してください…!
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする