ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

WEB担当者のスキルアップにも!サイト調査系Chromeアドオン6選

  • その他

今日は、WEB関係者の多くが愛用しているブラウザ「Google Chrome」で便利に使えるアドオンの中から、サイト調査系のものを6つご紹介したいと思います!

ますます高まっているChrome人気。それを支えている理由のひとつが、ブラウザに追加することで機能を広げていける豊富なアドオンの存在です。以前にも便利なアドオンをいくつかをご紹介していますが、今回は「サイト・チェック」という目的に絞って選んでみました。自社サイトの運用状況はもちろん、気になるサイトやライバルサイトを調べてみることは、WEB担当者のスキルアップにもつながります!ぜひ試してみてください。

WEB運営に欠かせないサイト調査系Chromeアドオン

1、WEBアプリ解析ツール「Wappalyzer」

01
https://chrome.google.com/webstore/detail/wappalyzer/
gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja

そのサイトで使われている技術を簡単チェック!

01-2

気になるサイトなどで、どういった技術が使われているか知りたい時って、ありますよね?それを手軽に行えるようにしてくれるのがこのアドオン。「Wappalyzer」をChromeに追加しておくと、URLの入力枠の右隅に使用技術の一部のアイコンが表示されるようになります。そのアイコンを押すだけで、利用されているすべての技術(アプリ)がずらっと表示されます。

Wappalyzerを役立てるポイント
実制作を行わないWEB担当者の方でも、気になるサイトに使われている技術を知り、どんな使われ方をしているのかを見るのは勉強になります。また、制作会社との打ち合わせでも、「例えばこのサイトでは○○が使われているみたいだけど、それで何とかできませんか?」などといった話もできるようになります。ある程度、技術的な視点を踏まえたコミュニケーションができれば、業務をよりスムーズにしてくれるはずです。

2、オールインワンSEO診断ツール「AdMatrix Analytics」

02
https://chrome.google.com/webstore/detail/admatrix-analytics/flelcckedladbpaemccaajnnnaobhplb?hl=ja

SEO対策状況をまとめてチェック!

SEOのためのフリーツールやWEBサービスはたくさんありますが、この「AdMatrix Analytics」を入れておけば、これひとつでSEO観点での主要なチェックのほとんどが行えます。

アドオンを有効にしておくだけで、ページに接続する度に自動的に情報が表示されるので、使い方も簡単。例えば、“スニーカー 通販”と検索して上位に出て来たZOZOTOWNのページを解析してみるとこのようになりました。

02-2

サマリー情報の他、上のメニュー(赤い破線で囲った部分)を切り替えると、テキスト出現率、メタタグ、見出しタグ、外部リンク、被リンク情報、表示速度のチェックなど、内部要因のほとんどがわかります。ページごとの対策状況の確認のほか、参考サイトやライバルサイトのチェックにも使えます。

3、SNSでの反響チェックツール「Social Analytics」

03
https://chrome.google.com/webstore/detail/social-analytics/pgckigmaefoaemjpijdepakcghjkggmg?hl=ja

ソーシャルでの反響が一目瞭然に!

03-2

ソーシャルメディアは、「話題になってナンボ」の世界。「Social Analytics」を使えば、今見ているサイトが、各ソーシャルメディアでどれくらい話題になっているかがワンクリックでわかります。アイコンをクリックするだけで、右のようなデータを表示。数で表わされるので一目瞭然です。

Facebookでどのくらい「いいね」が付いたか、シェアされたか、コメントが付いたかや、Twitterのツイート数をひと目で確認することができます。Google+やPinterestもあり、一番上に表示されているのは、それらの合計です。自社サイトのチェックはもちろん、競合調査も簡単に行えます

4、Googleアナリティクス用確認ツール「Google Analytics Debugger」

04
https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=ja

Google Analyticsへのデータ送信を確認

04-2

多くのWEBサイトがアクセス解析ツールとしてGoogle Analyticsを使っていると思いますが、それとセットで覚えておきたいツールが、Googleの公式ツール「Google Analytics Debugger」です。

アナリティクス用に記述した変数が正しく取れているか、具体的にどういう情報をサーバーに送っているかなどを詳しく確認したい場合に便利。慣れてくると他社がどういった計測を行っているかもわかるようになります。右は一例として、旅行会社の名鉄観光を調べてみたものです。

使い方
アドオンのボタンがONになっているのを確認。その後にChromeのブラウザ設定メニューからその他のツール>デベロッパーツールと開きます。ウインドウ上部にConsoleというメニューがありますので、ここをクリックするとGoogle Analyticのデータ送信状況がわかります。

5、「SimilarWeb」

05
https://chrome.google.com/webstore/detail/similarweb-site-traffic-s/hoklmmgfnpapgjgcpechhaamimifchmp

競合サイトの状況が詳しくわかる

05-2

「あのサイトって、どれぐらいアクセスがあるのだろう?」そんな疑問に1クリックで答えてくれるのが「SimilarWeb」です。このインバウンドブログでも以前に詳しく紹介していますし、有名なツールなのでご存じの方が多いと思いますが、そのSimilarWebがアドオンでも提供されていることをご存知でしょうか。

そのページに接続した状況でアイコンをクリックするだけ。試しにアサヒビールを解析してみました。右のように別ウインドウで表示され、ます。上部のメニューで項目の切り替えもでき、非常にコンパクトで見やすくなっています(SimilarWebの機能は、こちらの記事でご確認ください)。

6.文章構造のアウトラインを確認「HTML5 Outliner」

06
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

これからの時代に必須のHTML5の構造をチェック

WEBサイトのコーディングは、HTML5が主流になってきています。WEB担当者がソースの中身まで細かくチェックする必要は無いと思いますが、この「HTML5 Outliner」を使って文書構造について確認しておくと役立ちます

06-2

使い方はシンプルで、アドオンを入れておくと、URLの入力枠右にHTML5で作成されたサイトに接続した時にはマークが出ます。ここをクリックすれば、アウトラインが表示されます。

右は日立製作所のトップページです。いろんなWEBサイトを見比べることで、HTML5のアウトラインに対する理解も深めていくと良さそうです。

今回のまとめ

以上、WEBサイトの様々な情報を手軽にチェックできる、サイト調査系のアドオンをご紹介しました。
自サイトの運営だけではなく、日頃から、気になるサイトに出会ったら手軽に調べる習慣をつけておくと、トトレンドもわかりスキルアップにもつながります!ぜひ、これらのアドオンを試してみてください。

<関連記事>
WEB制作に関わる人なら絶対おすすめ!Chrome拡張機能5選
今が導入のタイミング!Googleの三種の神器を使いたおして、大きな成果を手にしよう
アナリティクスやWMTだけじゃない!無料で便利なWebマスター向けGoogle公式サービス

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

  9. 9

    【WEBデザイン10選】効果的に動画を使ったキャンペーン、プロモーションサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」