読者です 読者をやめる 読者になる 読者になる

Webサイトを調べるためのチェックツールまとめ Part1

こんちには! アドウェイズデザイナーの宮下といいます。
なんでデザイナーがエンジニアブログ書いてるんだというツッコミが聞こえますが細かいことは置いておきます。

さて、タイトルにもありますが今回の記事ではWebサイトを徹底的に調べる時に使うチェック系Webサービスを紹介します。
今回紹介するサービスはすべて無料で問題なく使えますのでご安心を。
チェックといってもいろいろありますが開発者よりのものを詳しく解説し、それ以外のものは簡単に紹介したいと思います。

いろいろ書いていたら結構長くなってしまったので、2回に分けて紹介します!
今回はPart1として4つのWebサービスを紹介します!

もくじ

サイトで使われているテクノロジーをチェック!

Builtwithではサイトで使っているテクノロジーを調べられます。
テクノロジーと言っても様々なものがあるのでとりあえず実際に調べてみましょう!

サイトにアクセスすると右上に検索ボックスがあるので調べてみたいサイトを入力します。
例えば最近お世話になっているQiitaを調べてみた結果がこちらなんですが
鯖はnginx、SSLはGeoTrustでDNSAmazon Route53、フレームワークRails、パフォーマンス監視はNew Relic、ふむふむ。
と、調べようと思うと結構めんどくさいことがざくざくと出てきて面白いです。

また、トレンドのページがすごく面白くてどんなテクノロジーのシェアが伸びているかということが見れて三杯くらい飯が食えます!
しかも各テクノロジーごとにしっかりカテゴライズされていて、無料で見ちゃっていいのかなってレベルです。

単にあのイケてるサイトはどんな感じで出来ているのか調べるという側面だけでなく、競合サイトはどんな技術を取り入れているのかといったことや実際に大規模なサイトで運用されている最近の技術トレンドを知ることもすごく重要ですよね。

ざくざくと調べたい方は有料のAPIもあります。
というわけで気になるサイトの中身を知りたい人はぜひ使ってみてください!

サイトのスピードをチェック!

PageSpeed InshgtsはGoogleが提供しているWebサイトのスピードチェックツールです!
とにかくスピードにこだわるGoogleだけあって結構辛口です。

サイトのURLを入力して分析ボタンを押すとサーバーサイトの設定(主にApache周り)だったりフロントエンドでのスピードアップに繋がる項目をアドバイしてくれます。

よくあるツッコミは…
サーバーサイド
gzipでファイル圧縮するんや!
・KeepAlive効いてないで!
・ブラウザキャッシュ使おうや!
・画像はCSSスプライトにしたらHTTPリクエストへらせんで!

フロントエンド
CSSでちっちゃ見えてるけど元画像でかいから意味ないで!
・HTML/CSS/JavaScriptは圧縮するとええで!
・画像圧縮したら〜%も軽くなるで!

みたいな感じです。
「ここをこうしたら速くなる」を優先度をつけて丁寧に解説してくれるので助かります。
Chrome拡張も提供されていて、自分は普段はChrome DevTools上でNetworkパネル等と合わせてボトルネックがどこにあるのか探すようにしてます。

ちなみにPageSpeed InsightsはAPIが無料で提供されていまして、趣味ですがGoogleAppsScriptでスクリプトを書いて
主要サイトHTML/CSS/js/画像のバイト数、リソース数、ホスト数、リクエストバイト数なんかを出してうはうはしたりしていました(:D)┓

さて、若干話がそれましたが最近ではRailsのAsset PipelineやGruntのような便利なツールが浸透してきつつあり
HTML/CSS/jsのminify、concat、CSSスプライト作成なんかも大分楽になりました。
昔に比べて大分めぐまれた環境になったなぁとしみじみ思います。
サイトは速いにこしたことはない!! ということでおすすめです。

サイトの安全性をチェック!

3つ目は知っている人も多いかと思われるaguseです!
このサービスではサイトの安全性をチェックすることが出来ます。
使いどころはいろいろありますが
・友達やクライアント等に紹介するサイトにマルウェアが入っていないかチェック
・自社サイトがフィッシングサイトやブラックリスト判定されていないかチェック
また別の使い方として同一鯖上の他のウェブサイトを調査出来るため、レンタル鯖等の一つの鯖を複数のウェブサイトで共有している場合に自分のサイトや調査サイトと同じ鯖にどんなサイトが入っているか確認できます。

他にも各種ドメイン情報、IPアドレス管理者情報、サーバーの位置情報等も調べられて便利です。
またaguse gatewayという機能を使えばもしサイト自体にマルウェアが含まれていても画像として閲覧することで安全に遷移を確認出来る機能もあります。

このサイト、ちょっと怪しいけど見てみたい! そんなのaguse! おすすめです。

サイトの安全性をチェック!

最後は最近一番よく見るサイト! SimilarWebです。
このサイト自体は開発者よりというよりどちらかというとマーケッターよりのサイトなんですが結構いろいろなことが調べられて面白いです。
自分は主にどの程度のアクセスがあるかといったことや関連サイト・競合サイト探しに使っています。
出てくるデータが多すぎるのである程度の部分以外は割愛しますが、主にトラフィック周りのデータを調べることができます。

調べられること
・サイトのアクセスランキング(世界・日本)
・直近のアクセス推移
リファラーやトラフィックソース
サブドメイン
・平均滞在時間や平均ページビュー
・地域別アクセスシェア
・検索キーワード
・そのソーシャルメディアからのアクセスが多いか
・ユーザーの趣味趣向
・関連サイト
などなど。 これ系統のサイトではAlexaが有名ですが  SimilarWebの方が調べられることが多く、何よりデザインが良いので最近はSimilarWebの方をよく見るようになりました。

 データの信憑性等々を考えるとしっかりと調べたいサイトはAlexaや他のサイトも同時に見るべきかと思いますがざっくりとサービスを把握したいのであればSimilarWebで十分なんじゃないかと思います。
このサイトってどのくらいのアクセスあるんだろう?とかこのサイトに似たサイトを探したいって時があったらぜひ思い出して使ってみてください!

最後に…

というわけでちょっと長くなってしまいましたが、サイトをチェックするWebサービス4つ紹介しました!
次回はおまけがメイン的な感じでざくざく紹介してくかと思います。
あと普段使っているサイトチェック用ブックマークレットも合わせて公開しますのでお楽しみにー!(:D)┓ペコ