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

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

こにんちは! 先週に引き続きアドウェイズデザイナーの宮下といいます。
ごめんなさい!『(:D)┻┓

今回も前回に引き続きWebサイトを徹底的に調べる時に使うチェック系Webサービスを紹介していきたいと思います!

Part2として4つ+おまけで8つのWebサービスを紹介、チェック系ツールを簡単に利用出来るブックマークレットを公開します!

もくじ

サイトのアーカイブをチェック!

老舗のWebサイトアーカイブサービス、Internet Archive
Weyback Machineというサービスは先週触れたAlexaの1996年頃からのデータを利用して、サイトのアーカイブ(その当時のサイト)を閲覧できるサービスです。
調べたいサイトのURLを入力して検索すると過去のアーカイブがカレンダー形式で表示されます。
※もちろんすべてのサイトのアーカイブを保存しているわけではありません

このサイトは本当にいろんな使い方があります。
・米Yahooがフラット化された → 前のデザインはどんな感じだったっけ
 → WeybackMachine!
・見たいサイトがリンク切れてて(サイト落ちてて)サイトが表示されない… (愛生会病院がご臨終等)
 → WeybackMachine! (ザオリク!)
・ネット黎明期のあの感じを思い出したい…
 → WeybackMachine!
 ・サイトのUIやIAの変化を調べたい
 → WeybackMachine!
などなど、使い方は様々です。
ロゴの変化やデザインチェックだけでなく幅広く使えるので覚えておいて損はないかと思います!

サイトや記事についたツイートをチェック!

自分のサイトやブログに対するユーザーの反応を知りたい時、一番楽なのが「サイトや記事のURL付きツイートを見る」だと思っているんですがtopsyはURLで検索するとそのURLを含んだツイートを検索することが出来ます。
イムリーな記事などはFacebookの反応も見れるYahooリアルタイム検索が便利ですが、リアルタイム検索というだけあって少し前の記事の反応を見ることは出来ません。
topsyではURLはもちろん普通のキーワードでも検索できて、インフルエンサーのツイートだけを絞り込むといったフィルタリングの機能も充実しています。
ちなみにすごくタイムリーなんですがこのtopsy、12月初めくらいにAppleに買収されたそうです。
ニュース記事に対する反応や、Webサービスに対するユーザーの反応をチェックしたいという時はtopsyがおすすめです!

Microsoft製ツールでIE対応チェック!

Web開発者なら一度はつまづくIE対応。 どうしてIEだけ…と頭を悩ませた人も多いかと思います。
modern.IEMicrosoft製のIE対応チェックツールで、URLを入力してサイトをチェックすることが出来ます。
具体的には
CSSのベンダープレフィックスがついていない
・ドキュメントモードや互換モード指定が適切ではない
jQueryのバージョンが古い
・プリフェッチやプリレンダーの改善点
など、IE対応でよくぶつかる問題点の検出やその対処法、改善法などを教えてくれます。
(※ところどころまだ翻訳が終わってないのか英語でコメントが出てきます)
IE対応でつまづいた時はmodern.IEでチェックしてみるのもいいかもしれないですね!

実ブラウザでデザインや挙動をチェック!(基本有料)

「作ったWebサイトをiPadで確認したいけどiPadがない…」 「IE対応しないといけないけどWindows環境がない」
などなどネット環境が多様化して対応しないといけないデバイスが増えてデザインの確認や挙動チェック、テストが大変になってきてますよね。
このBrowserStackというサービス、有料でちょっとお高い(1ヶ月4000円〜)ので個人で使うのはちょっときついサービスではあるんですが なんと軽く数百を越えるプラットフォーム・ブラウザをブラウザ上で実際に操作することが出来ます!! →一覧はこちら
イメージ的にはあらかじめ様々なパターンのプラットフォーム・ブラウザ・バージョンの環境をBrowserStackが用意していて
ブラウザからリモートデスクトップのようなノリで実際に画面を操作出来るという感じです。
デスクトップ環境だけでなく、例えばiPhone5Sを指定するとMacの画面にiOSシミュレーターで任意のURLを開いた状態まで自動でいってくれます!(初めてみた時は感動しましたw)
もちろんiPhoneだけでなくAndroidのシミュレーターも多数用意されています。
BROWSER SHOTSみたいなスクショ取ってくれるサービスでも十分!という方もいるかもしれません。
ただ、スクショ取ってくれるサービスだとデザインの確認は出来ますが例えばjQueryで実装したチェックボタンがIEでちゃんと動くかなどといったJavaScriptの挙動確認やある端末でCSSのアニメーションがちゃんと動いているか等、インタラクションに関するチェックを行うことが出来ません
もちろん、実際にその環境を用意するにこしたことはないんですその環境を用意するのにも結構工数がかかるものもあります。
BrowserStackでは必要な時に、すぐチェックが出来るので非常に便利でおすすめです!
(※上で紹介したmodern.IE経由で利用すると1月10日まで無料でお試し出来るので今のうちに試してみてください)
ちなみにちょっと裏技的な使い方として、「海外でしかローンチしてないサービスをちょっと覗いてみたい」という時にBrowserStackを使うと普通に使えたりします。

おまけ(ブックマークレット+α)

最後に普段自分が使っているブックマークレットをご紹介。
ちょっとでも気になったらすぐ検索出来るようによく使うチェックツールはまとめてブックマークレットにしてるんですがたまに友達に紹介すると割と好評だったので公開します!笑

使い方は簡単で↑にあるCheck!と書かれた赤いリンクをブックマークバーにドロップしてください。
チェックしたいと思ったサイトでこのブックマークレットをクリックするとメニューが出てくるのでチェックしたいものをクリックするとサイトが新しいタブで開きます。
一番下のメニューに個別にカスタマイズするためのリンクも載せておいたのでご自由にお使いください。
何が出てくるかは使ってのお楽しみです(:D)┓


さて、ちょっと8つ紹介しただけでは右手の疼きがなくならないので他に紹介したいツールをさくさく紹介したいと思います!
(もう少しお付き合いください(:D)┓ペコ)

ドメインチェック
 DOMAINTOOLS
 → 中古ドメイン判定や指定したIPアドレスでホストされているドメイン一覧などがチェック出来て便利。

・PC環境チェック
Support Details
→ PCのOSからブラウザ、Flashのバージョン、Cookieやjsが有効かどうかなどを確認出来ます。
 主にPCに詳しくない人にヘルプを頼まれた時に環境把握するためにスクショとって送ってもらうために使ってます。

HTML5の機能チェック
HTML5 TEST
→ 今使っているブラウザがどのくらいHTML5の機能に対応しているかチェック出来ます。
 HTML5の仕様もちょくちょく変わるmicrodataが廃止されたりとか)のでちょっと挙動がおかしい?と思ったときに見ると便利。

・気になるサイトのデザイン変更をチェック
 VisulaPing
 → 少し珍しいタイプのチェックツールで、サイトの「見た目」が変わった時に通知を送ってくれるツールです。
  サイトのスクリーンショットを撮影して指定した箇所、例えばUIが変わった、バナーが変わった等をチェックできます。

・サイトで使われている色をチェック
 ColrGrabr
 → サイトのCSS内に含まれる色を一覧でチェックすることが出来ます。

・レスポンシブデザインチェック(ブックマークレット
 Viewport Resizer
 ツールというよりブックマークレットではあるんですが、レスポンシブのチェック時に様々なサイズにブラウザサイズを変更してくれるので便利です。

・ちょっと変わったドメインの空きチェック
 Domainr
 → instagramと検索すると instagr.amみたいなちょっと変わったドメインまで検索出来ます。

ソーシャルメディアアカウントの空きチェック
 NameChk
 → 海外のサイトが多いですが、新規サービスを始めるにあたってFacebooktwitter等のいいアカウント名が空いているかは重要です。
  その辺りを横断的にチェックしてくれます。

以上です! HTML/CSS/JS周りのバリデートチェックやLintなんかは話すと長くなるのでまたいつかということで。
他にもおすすめのチェックツールがあったらぜひ教えてください!

*1:window.innerWidth-b.offsetWidth)/2)+%22px%22;b.style.top=Math.round((window.innerHeight-b.offsetHeight)/2)+%22px%22%7D%7Dif(c)%7Bs.onclick=(function()%7Br();if(typeof%20l==%22function%22)%7Bl()%7D%7D);b.onclick=(function(i)%7Bi.stopPropagation()%7D)%7Dj()%7D)(%5B%7Btitle:%22%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%20%E2%86%93%20%E5%85%A8%E8%88%AC%20%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%22,url:%22#%22%7D,%7Btitle:%22%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%AE%89%E5%85%A8%E6%80%A7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF(aguse)%22,url:%22javascript:void(window.open(%5Cx22http://www.aguse.jp/?url=%5Cx22+encodeURIComponent(location.href)+%5Cx22%5Cx22