WEBZINNE

website-buildingのサムネイル

ウェブサイト構築

Webサイトをリリース前に最低限チェックしたい・チェックツールまとめ

WEBZINNEトピックス編集部のアイコンWEBZINNEトピックス編集部

公開日:2020年3月24日

Webサイトをリリース前に、最低限チェックしておきたい・サイトチェックツールをまとめました。基本的なものが多いですが、逆に外せないチェックツールに厳選してリストアップしています。

必ずテストしておきたいチェックツール

Webサイトをリリースする前のチェックとして必須なツールをリストアップ。この3つに関しては必ずチェックするようにしましょう。

Webページのトータルチェック「Google Lighthouse」

WebサイトのHTMLチェック、SEOチェック、スピードテストなど、Webサイトに関するトータルチェックは、「Google Lighthouse」でほぼほぼ完結できます。

Google Lighthouseは、Chrome拡張機能かChromeの開発者ツールから起動することができます。

Google Lighthouseでは、開いているページに関して下記の項目でチェックをします。

  • パフォーマンス(表示速度)
  • アクセシビリティ(HTMLチェック)
  • ベストプラクティス(通信・スクリプトチェック)
  • SEO (SEOチェック)
  • PWA (PWAに対応しているか)

計測タグや広告タグなどが大量に入るWebサイトでは、本番環境で全ての項目で100点を取るのは厳しいかもしれませんが、Google Lighthouseで提案された修正項目は、リリース前には極力減らすようにした方が良いでしょう。

Google Lighthouse

サイトマップテスト「Google Search Console」

サイトマップは、検索エンジンなどにWebサイトの構造やページを知らせる大事な情報です。検索エンジンにサイトマップを登録することで、Webサイトのインデックスを促進することができます。

サイトマップは文法がいくつかあるため、それらが正しく配信されているか「Google Search Console」でチェックしておきましょう。

サイトマップ | Google Search Console

構造化データをテスト「構造化データ テストツール」

検索エンジンなどにページに関する情報を使える「構造化データ」が正しく設定されているかをチェックするには、Googleの「構造化データ テストツール」でチェックします。

構造化データの文法チェックだけでなく、足りない項目や推奨項目なども教えてくれるため、より正確に構造化データを設定できます。

構造化データ テストツール | Google

できればテストしておきたいチェックツール

必須なツールよりはプライオリティは下がりますが、サイトの構造によってはチェックしておきたいチェックツールをリストアップ。ここのチェックができれば、より良い状態でWebサイトをリリースできるでしょう。

AMP文章が正しいかをチェック「AMP Validator」

AMPに対応しているWebサイトであれば、AMP文法に適しているかを「AMP Validator」でチェックしましょう。

AMPはほぼ通常のHTML・CSSで構築できますが、独自の制限があり、それらの一つ一つに適合しているかをチェックするのは手間になるので、AMP Validatorでテンプレートごとにチェックするのが簡単でスピーディです。

AMP Validator

AMP ValidatorはChrome拡張機能が用意されているので、ブラウザに入れて常にチェックするようにしておけば、AMPエラーをすぐに探すことができます。

AMP Validator | Chromeストア

Facebook シェアデバッガー / Twitter Card validator

SNSなどでのシェアされる時にページ情報を伝えるOPGに関するチェックは、Facebookとtwitterのチェックツールを使えばOK。

どちらも実際にどのように表示されるのかまで出してくれるので、テンプレートごとにチェックをして、ページが正しく表示されることをチェックしましょう。

Facebook シェアデバッガー

Card validator | Twitter

レスポンシブデザインチェック

モバイルファーストが当たり前になり、Webサイトはレスポンシブデザインで作られることが多くなりましたが、端末ごとにチェックするのは手間がかかります。

responsinatorは、URLを入力するだけで複数iOS端末での表示を一括でチェックできるツール。厳密にはiOS Safariと全く同じ挙動にはなりませんが、概ねどのように表示されるかのチェックは簡単にできます。

responsinator


Webサイトをリリース前にチェックしておきたい・チェックツールをみてきました。

リストアップしたチェックツールは、どれもWebサイト運営者なら定番&初歩的なツールではありますが、リリース前のバタバタなどで意外とチェックを忘れがちになるので、これらのツールでWebサイトのリリース前にチェックするのをルーティン化するようにしましょう。

「ウェブサイト構築」の記事