専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選

セイト

2014.11.28

こんにちは！　LIGフィリピン支社代表のせいと(@seito_horiguchi)です。

非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。

Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。
しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。

そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！　これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝えるくらいはできるようになると思います。

専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選

HTML/CSSのバリデートチェッカー×3

HTML上ソースコードに問題がないかどうかチェックできるツールはいくつかありますが、おすすめなのが以下の3つです。
これらを使うとエラーとその内容を表示してくれるので、一目でソースの確認をおこなうことができます。

W3C Markup Validation Service

http://validator.w3.org/

W3Cが提供するHTMLのバリデートチェッカーです。

W3C CSS Validation Service

http://jigsaw.w3.org/css-validator/

こちらもW3Cが提供するCSSのバリデートチェッカーです。

Another HTML lint5

http://www.htmllint.net/html-lint/htmllint.html

株式会社ジゾンが提供するHTMLのバリデートチェッカー。
判定が厳しいmpで、エンジニア泣かせです……。

デザイン画像とコーディングされたサイトを比較「PerfectPixel」

d_tools_c

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

コーディングされたサイトがデザイン通りに組まれているのか、ぱっと見ならデザイナーでなくとも判断できるかとは思います。しかし1px単位となると難しいんじゃないでしょうか。

そんなときはGoogle chrome extensionのPerfectPixelを使うといいでしょう。
.pngや.jpgのデザインデータがあれば、それと重ねてサイトを確認することができます。

alt情報を一目で確認「Alt＆Meta viewer」

d_tools_a

https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja

重要な画像要素にはalt属性にテキストを入れるというのは基本的なことですが、けっこうミスをしやすい部分でもあります。とはいえソースコードを見て確認するのは辛い……。

そんなときはGoogle chrome extensionのAlt＆Meta viewerを使うといいでしょう。
これを使うと、altに入っているテキストをブラウザ上で表示してくれるので、サイトを閲覧しながら確認することができます！

パフォーマンスを計測「GTmetrix」

d_tools_d

http://gtmetrix.com/

GTmetrixを使えば、URLを入力するだけでサイトの読み込み時間を計測し、その評価と問題点を指摘してくれます。
内部的にはGoogleのPage Speed,Yahoo!のYSlowという計測サービスを用いて判定しています。
ページの読み込みが遅いと感じたときは、これを使えば原因をある程度特定できます。