サイトチェックを自動化するには？Webサイト運用で確認したい項目と課題の解決方法

サイトチェックを自動化したいと思っても、何を確認すればよいのか、それらを確認できるツールがあるのかはわかりにくいものです。UXデザインの設計力と、ブランド構築支援の表現力の高さを強みにするWeb制作会社株式会社デパートがまとめました。必要な確認項目と自動化する方法を紹介します。

サイトチェックの自動化は確認項目の整理から始める

サイトチェックの自動化を検討するとき、最初にツールを選ぼうとすると、自社に必要な機能を判断しにくくなります。

サイトチェックと呼ばれるものには、ページが表示できるかを確認する監視から、リンク切れ、表示速度、SEO、アクセシビリティ、フォームの動作まで、さまざまな項目が含まれます。

ツールによって対応範囲も異なり、ひとつのツールですべてを判断できるとは限りません。まずはWebサイトの運用で何を確認する必要があるのかを把握し、そのうえで実現方法を選びます。

必要なチェック項目が明確になれば、診断ツールで確認できることと、継続的な自動化が必要なことを分けやすくなります。

Webサイト運用で確認したい主なチェック項目

Webサイトは、公開時に問題がなくても、その後の更新や外部サービスの変更によって状態が変化します。

運用中に確認したい主な項目は、次のとおりです。

Webサイトが正常に表示されているか

まず確認したいのは、ユーザーがWebサイトへアクセスでき、主要なページが正常に表示されているかです。

サーバーや配信サービスに問題が発生すると、ページ全体が表示できなくなることがあります。また、HTMLは表示されていても、CSSやJavaScript、画像が読み込めず、正しい状態になっていない場合もあります。

主に確認する項目は次のとおりです。

• ページへアクセスできるか

• エラーページが表示されていないか

• 画像や動画が読み込まれているか

• CSSやJavaScriptが正常に動作しているか

• PCとスマートフォンの両方で表示できるか

サイト全体を毎回確認するのが難しい場合は、トップページ、サービスページ、問い合わせページなど、停止したときの影響が大きいページを優先します。

リンク切れが発生していないか

リンク切れは、リンク先のページやファイルが存在しなくなり、ユーザーが必要な情報へ移動できない状態です。

サイト内のページを削除した場合だけでなく、外部サイトのURL変更、PDFや画像の差し替え、CMSへのURL入力ミスなどでも発生します。

特に記事や事例を継続的に追加するサイトでは、ページ数の増加に伴い、すべてのリンクを目視で確認することが難しくなります。

リンクチェックでは、次のような問題を確認します。

• 存在しないページへのリンク

• 削除された画像やPDFへのリンク

• 応答しない外部リンク

• URLの入力間違い

• 不要なリダイレクト

リンク切れは機械的に判定しやすいため、サイトチェックの中でも自動化に適した項目です。

更新による表示崩れがないか

Webサイトの一部を変更しただけでも、共通のテンプレートやスタイルが影響し、別のページで表示崩れが起こる場合があります。

たとえば、次のような変化です。

• 文字やボタンの位置がずれる

• 画像が表示されなくなる

• 文章が枠からはみ出す

• 余白や文字サイズが変わる

• スマートフォンだけレイアウトが崩れる

• メニューやフッターが正しく表示されない

更新したページだけを確認していると、影響を受けた別のページを見落とす可能性があります。

このような表示の変化は、変更前後の画面を画像で比較するVRTによって検出できます。

表示速度が低下していないか

画像や動画、外部サービス、計測タグなどが追加されると、公開時よりもページの表示が遅くなる場合があります。

表示速度の確認では、単にページが表示できるかだけでなく、ユーザーが内容を確認したり、操作したりできるまでにどれくらい時間がかかるかを見ます。

主な確認項目は次のとおりです。

• 大きすぎる画像が追加されていないか

• 読み込みに時間がかかる処理がないか

• レイアウトの大きなずれが発生していないか

• ページごとの表示速度に大きな差がないか

表示速度は計測環境によって数値が変動するため、小さな変化だけで問題と判断するのではなく、継続的な低下や大きな変化を確認することがポイントです。

SEOの基本設定に問題がないか

SEOのサイトチェックでは、検索順位そのものではなく、検索エンジンへページの情報を伝えるための基本設定を確認します。

• title

• meta description

• 見出し構造

• canonical

• robots

• OGP

• 構造化データ

• sitemap.xml

• ページのステータスコード

共通テンプレートの変更によって、複数ページのtitleが同じになったり、canonicalが誤ったURLを示したりすることがあります。

こうした設定の有無や形式は自動で確認できます。ただし、タイトルが検索ユーザーの意図に合っているか、本文に必要な情報があるかといった内容の評価には、人による判断が必要です。

アクセシビリティ上の問題がないか

ウェブアクセシビリティは、年齢や障害、利用環境にかかわらず、必要な情報や機能を利用しやすくするための考え方です。

自動チェックでは、次のような問題を検出できます。

• 文字と背景のコントラスト不足

• 画像の代替テキスト不足

• フォーム部品のラベル不足

• 見出し構造の問題

• HTMLやARIA属性の一部の誤り

ただし、アクセシビリティのすべてを自動で判断できるわけではありません。W3Cも、評価ツールだけではすべての項目を確認できず、人による判断が必要だと説明しています。

W3C「Selecting Web Accessibility Evaluation Tools」

キーボードだけで操作できるか、リンクの文言がわかりやすいか、代替テキストが画像の内容を適切に表しているかなどは、目視や実際の操作で確認します。

フォームや主要な機能が動作しているか

問い合わせフォーム、資料請求、検索、ログインなど、サイト内の主要な機能も確認が必要です。

画面が表示されていても、ボタンを押した後に進めない、入力内容が正しく送信されないといった問題が起こる場合があります。

• 必須項目のエラーが表示されるか

• 入力画面から確認画面へ進めるか

• 完了画面まで正常に進めるか

• 検索結果が表示されるか

• メニューやボタンから目的のページへ移動できるか

すべての操作を自動化すると、構築や保守の負担が大きくなります。問い合わせや資料請求など、停止した場合に事業への影響が大きい機能から確認するのが現実的です。

サイトチェックで自動化できることと目視確認が必要なこと

サイトチェックの自動化は、人による確認をすべてなくすためのものではありません。

機械的に判定できる項目を自動化し、人は内容や使いやすさの判断に集中できるようにします。

基準を決められる項目は自動化できる

正常・異常の基準を決められる項目は、自動チェックに向いています。

同じ条件で繰り返し確認できるため、担当者によるチェック範囲の違いや確認漏れを減らせます。

Webサイトの内容やUXは人による確認が必要になる

自動チェックで問題が検出されなかったとしても、Webサイトの品質が十分とは限りません。

自動チェックは問題の候補を見つける仕組みであり、最終的な品質を判断する仕組みではありません。

ツールの結果を誰が確認し、どのように改善するかまで決めることで、運用に活用できるようになります。

サイトチェックを自動化する方法

必要なチェック項目がわかったら、それらをどのように確認するかを考えます。

現在の状態を手軽に調べる場合は診断ツール、更新に合わせて継続的に確認する場合はCIを利用できます。

診断ツールで現在のサイト状態を確認する

診断ツールは、WebサイトのURLを入力し、その時点の状態を確認する方法です。

専門的な設定を行わずに利用できるため、次のような場合に適しています。

• 現在のサイトに問題がないか確認したい

• 何から改善すべきかわからない

• リニューアル前に課題を把握したい

• 制作会社へ相談する前に状態を確認したい

• SEOや表示速度などをまとめて調べたい

ただし、診断結果は基本的に実行時点の状態です。Webサイトが更新されるたびに自動で確認したい場合は、CIなどの継続的な仕組みが必要になります。

CIで継続的なチェックを運用に組み込む

CI（Continuous Integration）とは、日本語では「継続的インテグレーション」といい、Webサイトの変更や公開に合わせて、決められた確認処理を自動で実行する仕組みです。

たとえば、更新内容を本番環境へ公開する前に、リンク切れや表示崩れがないかを自動で確認できます。毎日や毎週など、決まった日時に実行することも可能です。

GitHubでWebサイトのデータを管理している場合は、GitHub Actionsなどを利用できます。GitHub Actionsは、コードの更新、手動操作、指定したスケジュールなどをきっかけに処理を実行できるサービスです。

GitHub Actions公式ドキュメント

CIを導入すると、担当者が更新のたびに複数のツールを開かなくても、必要なチェックを更新フローの中で自動実行できるようになります。

【診断ツール】WebSite健康診断でWebサイトの課題を確認する

株式会社デパートでは、Webサイトの状態を無料で確認できるWebSite健康診断を提供しています。

診断したいURLを入力するだけで、登録せずに利用できます。

SEO・セキュリティ・表示速度などを無料で診断できる

WebSite健康診断では、全6項目・40以上の指標からWebサイトを診断します。

ひとつずつ別のツールで確認しなくても、Webサイトの状態を複数の観点から把握できます。

まず現在のサイトにどのような課題があるのか知りたい場合の入口として利用できます。

診断結果から詳しく確認すべき項目を判断する

診断結果で評価が低かった項目は、さらに詳しく確認します。

たとえば、パフォーマンスに問題がある場合でも、画像、外部サービス、プログラムなど、原因はサイトによって異なります。SEOやアクセシビリティも、設定の不足だけでなく、サイト構造やコンテンツの作り方が関係する場合があります。

診断結果は、問題の原因や改善方法をすべて確定するものではありません。詳しい調査が必要な項目と、改善の優先順位を考えるための情報として活用します。

診断結果を見ても改善方法を判断できない場合は、制作会社へ相談することで、サイトの構造や運用方法まで含めて確認できます。

【CI自動化】サイトチェックを運用フローに組み込み、継続的に自動化する

診断ツールは、実行した時点のWebサイトを確認する方法です。一方、更新のたびにリンク切れや表示崩れを確認する場合、担当者が毎回ツールを操作するだけでは確認漏れが起こる可能性があります。

そこで、Webサイトの更新や公開、決められた日時に合わせて、必要なチェックが自動で実行される仕組みを構築します。

この仕組みには、**CI（Continuous Integration）、日本語では「継続的インテグレーション」**と呼ばれる開発手法を活用できます。Webサイトの変更を反映する流れに、リンク切れや表示差分などのチェックを組み込み、問題がないかを自動で確認する方法です。

GitHubでWebサイトを管理している場合は、GitHub Actionsなどを利用し、チェックの実行から結果の通知まで自動化できます。担当者が更新のたびに複数のツールを操作しなくても、決められた確認を継続して実行できることが大きな利点です。

Webサイト内のリンク切れを自動で確認する

Webサイト内のページを巡回し、リンク先が正常に表示できるかを自動で確認できます。

CMSで追加された記事や事例も、サイトマップなどからURLを取得することで確認対象に含められます。サイトの更新時だけでなく、毎日や毎週などの定期的なチェックも可能です。

主に次のような問題を検出します。

• 削除されたページへのリンク

• 表示できない画像やPDF

• URLの入力間違い

• 正常に応答しない外部リンク

• 意図しないリダイレクト

検出したリンク切れを担当者へ通知したり、対応事項として自動で登録したりすることもできます。

ただし、外部サイトは一時的に応答しなかったり、自動的なアクセスを制限していたりする場合があります。外部リンクのエラーは、再確認したうえで修正の要否を判断する運用が必要です。

表示速度やコアウェブバイタル・SEOの基本設定を自動で確認する

Webサイトの更新やリニューアル時、ページ追加などによって、表示速度が低下したり、コアウェブバイタルの悪化や、SEOに必要な設定が失われたりすることがあります。こうした変化も自動で確認できます。

公開前にはLighthouseなどを使い、表示速度やSEOの基本項目を簡易的に確認します。SEOでは、titleやcanonicalなど、必要な情報が正しく出力されているかをチェックできます。

ただし、公開前の計測環境と、実際に公開されているWebサイトの環境は同じではありません。最終的な表示速度は、公開後のページをPageSpeed Insightsで確認するのが適切です。

PageSpeed Insightsによる確認も別途自動化できます。公開後に主要ページを定期的に計測し、スコアや各指標が大きく低下した場合に通知するなど、公開前後を分けた確認が可能です。

フォームや主要な導線が動作するか確認する

問い合わせや資料請求など、事業上重要な機能も自動で確認できます。

あらかじめ決めた操作をブラウザ上で再現し、次のような動作を確認します。

• ページが正常に表示される

• フォームへ入力できる

• 必須項目のエラーが表示される

• 確認画面へ進める

• 完了画面まで正常に移動できる

• 検索やメニューが正しく動作する

本番環境でフォームを自動送信すると、実際の問い合わせとして登録される場合があります。そのため、確認環境やテスト用の送信先を用意し、通常の問い合わせと区別できるようにします。

すべての機能を自動化するのではなく、問い合わせや資料請求など、止まると事業への影響が大きい導線から確認するのが現実的です。

アクセシビリティ上の問題を自動で確認する

Webサイトの更新によって、フォームのラベルが失われたり、文字と背景のコントラストが不足したりすることがあります。こうしたアクセシビリティ上の問題も、更新時に自動で確認できます。

確認には、アクセシビリティの自動テストに利用されるaxe-coreなどを使用します。主に次のような項目を検出できます。

• 文字と背景のコントラスト不足

• フォーム部品のラベル不足

• 画像の代替テキストの有無

• ページの言語設定

• HTMLやARIA属性の一部の誤り

• 同じIDの重複

ただし、axe-coreによる確認は、**機械的に判断できる部分に限られる場合があります。**画像の代替テキストが内容を適切に説明しているか、キーボードで迷わず操作できるか、読み上げ順序が理解しやすいかといった点は、人による確認が必要です。

自動チェックで基本的な問題を継続して検出し、目視や実際の操作による確認を組み合わせることで、アクセシビリティ上の問題を把握しやすくなります。

株式会社デパートでは、より詳しい診断や改善を支援するウェブアクセシビリティ支援サービスも提供しています。自動チェックだけでは判断できない項目を含めて対応を進めたい場合にご相談いただけます。

更新前後の表示差分を目視比較に近いカタチで確認する

更新前後の画面を目視比較に近い形で確認する方法として、VRT（Visual Regression Testing）という手法があります。変更前後のスクリーンショットを撮影し、表示に違いがある箇所を自動で検出します。

VRTサービスを利用すると、更新前の画面、更新後の画面、差分が発生した箇所を並べて確認できます。複数のページを一つずつ開いて見比べなくても、次のような変化を把握できます。

• 文字やボタンの位置のずれ

• 画像の欠落

• 余白やサイズの変化

• 文章のはみ出し

• PCとスマートフォンでの表示崩れ

代表的なVRTサービスには、Argos、Chromatic、Percyなどがあります。サービスによって対象ページ数、画面サイズ、差分の確認方法、料金が異なるため、サイトの規模や更新頻度に合わせて選びます。

VRTは表示の違いを検出できますが、その変更が正しいかどうかまでは判断しません。担当者が差分を確認し、意図した変更は承認、意図しない変更は公開前に修正するという運用が必要です。

検出結果を確認・修正につなげる

自動チェックは、問題を見つけるだけでは十分ではありません。検出結果を担当者へ通知し、修正が必要かどうかを判断できる流れまで整えます。

たとえば、公開できないページや主要機能の停止は早急に対応し、外部リンクの一時的なエラーや表示速度の変動は、内容を確認してから対応します。

確認結果は、メールやチャットへの通知、対応事項の自動登録など、既存の運用に合わせた形で共有できます。

何を自動で確認するかだけでなく、誰が結果を確認し、誰が修正するかまで決めることで、サイトチェックを継続的な運用保守へ組み込めます。

【ポイント】自動化する範囲はサイトの重要度と運用負担から決める

自動化する項目は、多ければよいわけではありません。

対象ページや確認項目を増やすほど、初期設定や結果確認、テスト内容の更新にかかる工数も増えます。サイトにとって重要な箇所と、現在負担になっている作業から優先順位を決めます。

主要ページと重要な機能から始める

最初からサイト全体の表示やすべての機能を確認するのではなく、問題が発生した場合の影響が大きい箇所から始めます。

• トップページ

• 主要なサービスページ

• 問い合わせフォーム

• 資料請求ページ

• 採用エントリーページ

• CMSで頻繁に更新するページ

• 広告や検索からの流入が多いページ

リンク切れはサイト全体、VRTは主要ページ、機能テストは問い合わせフォームなど、項目ごとに対象範囲を変える方法もあります。

費用や工数は、ページ数だけでなく、画面サイズ、機能数、認証の有無、CMSの更新方法、実行頻度によって変わります。

問題を見逃した場合の影響と、現在の目視確認にかかっている時間を比べて、自動化する範囲を決めます。

自動チェックの結果を誰が確認するか決める

自動チェックで問題が見つかっても、通知を受け取るだけでは改善につながりません。

導入時には、次の役割を決めます。

• 誰が通知を受け取るか

• 誰が問題かどうかを判断するか

• 誰が修正するか

• 緊急対応と通常対応をどう分けるか

• 制作会社へ連絡する基準は何か

• VRTの表示差分を誰が承認するか

技術的な問題は制作会社、コンテンツの問題は社内担当者など、内容に応じて対応先を分けることもできます。

自動化の目的は、チェック結果を増やすことではありません。Webサイトのチェックを効率化して問題を早く発見し、必要な対応へつなげることです。

株式会社デパートが提供できるサイトチェックと運用での自動化

株式会社デパートでは、Webサイトの状態を確認する診断ツールだけでなく、サイトごとの運用に合わせた自動チェックの構築と運用保守を支援しています。

Webサイトに必要なチェック項目を整理する

自動化を始める前に、Webサイトの構造、更新方法、主要なユーザー導線を確認します。

• どのページを優先するか

• どのような問題を防ぎたいか

• 現在どのように確認しているか

• 自動化できる作業は何か

• 人による確認を残す項目は何か

• 問題が見つかった後に誰が対応するか

サイトの目的や運用体制によって、必要なチェックは異なります。既存の確認作業を整理することで、過剰な自動化を避け、必要な範囲を決めやすくなります。

GitHub Actionsを利用した自動チェックを構築する

GitHubで管理されているWebサイトでは、GitHub Actions（CI/CD）などを利用し、次のようなチェックを自動化できます。

• サイト内のリンク切れ確認

• VRTによる表示差分の確認

• 表示速度の確認

• SEOに関係する基本設定の確認

• アクセシビリティの機械的なチェック

• フォームや主要機能の動作確認

• 検出結果の通知や対応事項の登録

技術的な仕組みを導入するだけでなく、運用担当者が結果を確認しやすい形まで含めて設計します。

問題の確認と改善を運用保守に組み込む

サイトチェックは、問題を検出した後の対応まで含めて考える必要があります。

株式会社デパートでは、自動チェックで見つかった問題の調査、修正、表示確認などを運用保守へ組み込むことができます。

また、サイトの更新や機能追加に合わせて、チェック対象や判定基準を見直します。サイトが変化しているにもかかわらず、チェック内容が公開時のままでは、必要な問題を検出できなくなるためです。

自社で結果を確認できる範囲と、制作会社が対応する範囲を分けることで、無理のない運用体制を構築できます。

よくある質問

Q. サイトチェックツールとは何ですか？

A. Webサイトを調べ、リンク切れ、表示速度、SEO設定、アクセシビリティなどの問題を検出するツールです。URLを入力して現在の状態を診断するものや、公開中のサイトを定期的に確認するものがあります。必要な確認項目によって、適したツールや仕組みは異なります。

Q. Webサイトを無料でチェックできますか？

A. 株式会社デパートのWebSite健康診断では、URLを入力するだけで、SEO、セキュリティ、パフォーマンス、アクセシビリティ、デザイン・UX、コンテンツ品質を無料で診断できます。登録も不要で、現在の課題を把握する入口として利用できます。

Q. サイト全体のリンク切れを自動で確認できますか？

A. サイト内を自動で巡回し、正常に表示できないページやファイルを検出できます。GitHub Actionsなどを利用すれば、Webサイトの更新時や決まった日時にリンクチェックを実行することも可能です。外部リンクは一時的に応答しない場合があるため、再確認を含めて運用します。

Q. 更新による表示崩れも自動で検出できますか？

A. VRTを利用すると、変更前後のスクリーンショットを比較し、文字位置、余白、画像、レイアウトなどの変化を検出できます。ただし、その変化が意図したものかどうかは人が確認します。まずはトップページや問い合わせページなど、影響の大きいページから設定します。

Q. サイトチェックを自動化すれば目視確認は不要ですか？

A. 目視確認を完全になくすことはできません。ツールはリンクの応答や表示差分、設定の有無などを確認できますが、文章のわかりやすさや導線の使いやすさまでは判断できません。機械的な確認を自動化し、人は内容やユーザー体験を確認する役割分担が適しています。

Q. サイトチェックの自動化には専門知識が必要ですか？

A. URLを入力する診断ツールは、専門知識がなくても利用できます。一方、リンクチェックやVRTを更新フローへ組み込む場合は、サイトに合わせた初期設定が必要です。導入後は、担当者が結果を確認できる通知やレポートを用意することで、日常的な操作を減らせます。

サイトチェックは必要な項目を整理して自動化する

サイトチェックを自動化するには、ツールを探す前に、Webサイトの運用で何を確認する必要があるのかを整理します。

現在のサイト状態を知りたい場合は、WebSite健康診断を使って、SEO、表示速度、アクセシビリティなどの課題を確認できます。

一方、更新によるリンク切れや表示崩れを継続的に防ぐ場合は、GitHub Actionsなどを利用し、必要なチェックをCIとして運用フローへ組み込みます。

株式会社デパートでは、サイトに必要なチェック項目の整理から、自動チェックの構築、検出後の調査・修正まで支援しています。自社で対応できる範囲と制作会社へ依頼する範囲を分けることで、確認負担を抑えながらWebサイトの品質を継続的に管理できます。

株式会社デパートのサービスをご紹介

Webサイトの運用・保守リスクを簡易チェックしませんか？

現在の更新体制や保守状況にどのようなリスクがあるのかを確認したい方はこちらからチェック。
簡単な質問に答えるだけで診断できます。