2015/5/20ソフト・ツール

【Webディレクター必見!】仕事で使えるオススメChrome拡張機能takahiro

  • このエントリーをはてなブックマークに追加
extension_eye

かなり久々の更新ですが、今回はWebディレクターの方にオススメのGoogleChromeの拡張機能をご紹介します。

 

web制作のディレクションやサイトの改善点などを調べるときにサイトのソースコードをいちいち調べるのってめんどくさいですよね?

僕もめんどくさかったので、いろいろなChrome拡張機能を試してみました!今でも使っているオススメの拡張機能をご紹介します。

 

1.SEO関連のChrome拡張機能

まずは、サイト構造などの理解ができる拡張機能から紹介します。ディレクションの際に現在のサイトの状態や競合他社のサイトの情報を収集しますよね?

以下の拡張機能はSEOの改善案やお手本となるサイトのサイト構造を調べたりするときに便利です。

また、適切にコーディングされているかなども確認できますので拡張機能を入れてない方は是非入れて試してみてください!

 

AdMatrix Analytics

AdMatrix Analytics

 

AdMatrix Analyticsはサイト内の個々のページの内部SEOの施策を確認することが出来ます。

基本的な項目である「titleタグ」「metaタグ」の内容から、それぞれのページで設定されているh1やh2などの「見出しタグ」まで確認することが出来ます。

そのページでのテキスト量やテキスト内に含まれるキーワードの比率まで見れるのでかなり役立ちます!

 

あとAdMatrix Analytics使ってて便利だったのが、【サイトマッピング機能】です!サイトマッピング機能を使うと見出しタグがサイトのどこに使われているか、サイト上に表示してくれます!

視覚的に見出しタグの場所が分かるので、サイトの改善提案などをする際に役立ちます。

 

ただ、AdMatrix Analyticsを常に有効にしておくとChromeで開かれている別のタグでも全てで表示されて鬱陶しいので普段はクローズしてます。

Chromeの右上のアイコンをクリックでon/offできます。

 

NoFollow

NoFollow

 

NoFollowはそのページはindexされているのかいないのか、followされているかいないのかなどを瞬時に見極める事ができます。

拡張機能を有効化していた場合、ブラウザの右下に「META-Robots NoFollow : ture or false」「META-Robots NoIndex : ture or false」と表示されます。

ちなみに、そのページがindex/followだった場合は何も表示されません。

 

またNoFollowの拡張機能はサイト上のリンクがNoFollowかどうかも視覚的に分かります。そのリンクがNoFollowだった場合は赤い点線でリンクが囲まれます。拡張機能をオンにしてFacebookなどを見てみるとすぐわかります。外部リンクは全てNoFollowなので…。

 

HTML5 Outliner

HTML5 Outliner

 

HTML5 OutlinerはHTML5の見出しタグが正しく使われているかを見ることが出来ます。

HTML5で作成されているサイトが多くなってきていますが、HTML5で作成する際のsectionタグの使い方を間違った場合、h1タグをただしくh1として読み込めていない場合があります。

 

ちょっとSEOの話しになるのですが、ただしく見出しタグが認識されないことはサイトのSEO上でかなりの痛手を負います。

sectionタグやarticleタグなどを使用した場合は、見出しのレベルが1つ下がることを意識してコーディングするようにしましょう。

 

例えばsectionタグの中でh1タグを使っていた場合、このh1タグはh1として認識されるのではなくh2のランクで認識されています。ソースコードのみを読んでいると見落としがちな点なので、HTML5 Outlinerを使用して適切にコーディングされているか必ず確認しましょう。

 

ここはけっこう見落としがちな人も多いと思います。

 

Wappalyzer

Wappalyzer

 

Wappalyzerは表示中のサイトがどのようなワークフレームで書かれたかなどを見ることが出来ます。

WordPressで作られたサイトなのかRubyなのかなどなど・・・。

 

気になったサイトにどのようなシステムが使われているか調べたいときに便利です。

 

 

2.競合調査関連のChrome拡張機能

僕がサイトの調査で使っている拡張機能は1つだけです。これがあればだいたいのことは分かるので他の拡張機能を使う必要が僕的にはあまり感じれないので。

 

SimilarWeb

SimilarWeb

 

恐らくみなさんもご存知のSimilarWeb(拡張機能のリンクはこちら)です!SimilarWebのサイトに訪問して、調べたいサイトのURLを入力して調べている人も多いんじゃないでしょうか?

 

実はSimilarWebは拡張機能としても提供されています。内容もサイトと同じものが見れるので、わざわざサイトを訪問してURLを入力して・・・という手間が省けます。

SimilarWebについては詳細な説明は不要ですね!笑

 

 

3.解析関連のChrome拡張機能

解析と言ってもそこまで期待しないでください。ここでも使っている拡張機能は1つだけです。

使用頻度はそこまで高くないですが…。

 

Page Analytics (by Google)

Page Analytics (by Google)

 

Page AnalyticsはChromeで表示されているサイトが自分がGoogleAnalyticsで管理されているサイトだった場合、そのページのアクセス状況を表示してくれます。

また、どこがクリックされているのかもパーセント表記で表示してくれるので視覚的にも分かりやすいです。

 

ただ注意しないといけないのが、個々でのパーセント表記は次のページへのパーセント表記であり、実際にその場所をクリックしたかどうかは分かりません。実際にクリックされたか分かるならもう少し使用頻度は上がるのですが・・・。しょうがないですね。

オススメの拡張機能あったら教えてください!

 

 

4.デザイン関連のChrome拡張機能

サイトのディレクションをしていると、デザイナーに指示を出すためにもいろんなサイトをみていると思います。ここではデザイン関連としていますが、主に参考サイトを保存しておくためのオススメの拡張機能を紹介していこうと思います。

 

clipular

clipular

 

clipularはサイトの一部分や表示部分を簡単にキャプチャしてクラウド上に保存できます。

使用するには、まずclipularのサイト上での登録が必要です。登録後にChromeの拡張機能としてインストールしますか?と聞かれるのでインストールすると使えるようになります。

 

クリップしたサイトはタイトルやリンクが自動的にサイト上のMY CLIPに保存されます。数が多くなってくるとグループ分けなどもできるので、バナーやボタン・メニューなどでカテゴリ分けをしてもいいですね。

気に入ったり、気になったものはどんどんクリップしてデザイナーに指示を出す時などに使いましょう!

 

ちなみに僕がいつもお世話になっているWEBギャラリーはmuuuuu.orgです。見やすくて参考になるサイトが盛りだくさんです!

 

 

5.広告関連のChrome拡張機能

サイトを閲覧しているとかなりの数の広告が表示されますね。リタゲやバナーデザインの参考にするのにはいいんですが、ちょっとうざい。

ってことで、僕は広告をカットしてくれるエクステンションを入れています。

 

うざいから紹介するだけでは、Webディレクターに必要だとは言えません。

広告をカットしてもデザイン上で問題ないか?を見てみるのにも一役買いますよね!笑

 

Adblock Plus

Adblock Plus

 

Adblock Plusは広告と思われるものを表示しないようにしてくれます。

youtubeなどの広告もカットしてくれますし、そこまで厳しくなくて程よい感じです。

 

昔はAdBlockを使っていましたが「ad」が入ったパスのCSSなどまで読み込まないなど、対策が過剰だったので乗り換えました。

「ad」が入ったCSSを読み込まないなどは、このサイトを更新してて知ったことですが…。

 

 

まとめ

今回紹介したのは、WEBディレクターがサイトのディレクション時に役立つChromeの拡張機能でした。

僕が使ってみての主観なのでなんとも言えないですが、便利なので是非使って見てください。

 

ちなみに、ディレクションとは離れてしまうので記載はしませんでしたがChromeのディベロッパーツールで役立つ「Emmet LiveStyle」や「Save to Pocket」なんかも入れてます。

Emmet LiveStyleなんかは、コーディングとかしない人には関係ありませんが…。

 

あと、画面キャプチャ用に「Awesome Screenshot: キャプチャーと注釈」も入れてるんですが、Chromeウェブストアでリンクが削除されてました。

サイトをキャプチャするのに便利な拡張機能なので紹介したかったのですが断念。

「Awesome Screenshot: キャプチャーと注釈」はSimilarWebのアクセス解析に情報を提供しているという噂もあるみたいですね。真相は分かりませんが。

 

またディレクションが使えそうな拡張機能を見つけたら、更新しようと思います!

  • このエントリーをはてなブックマークに追加

この記事の著者

takahiro

takahiroWebデザイナー/ディレクター

Skill:HTML,CSS,PHP,WordPress,Photoshop

WEBサイト制作/運用/コンサルティング
たまにカメラとかもやってます。

この著者の最新の記事