【保存版】これだけは最低限チェック！Webサイト最終確認リスト

Webサイトが完成したら、確認しなくてはいけないことがたくさんあります。

確認すべきことはWebサイトによって異なりますが、この記事ではほぼ全てのWebサイトで要確認の項目をまとめてみました。

それぞれの確認項目に解説をつけましたが、Web制作知識がある方は飛ばしてOKです。

デザインや誤字脱字など見た目に関するものは省きましたが、ユーザビリティやアクセス数などSEOに直結するものを最低限リストアップしてみましたので、ぜひ参考にしてみてくださいね。

Table of Contents

noindexになっていないか

【解説】noindexとは？

headタグ内に以下のコードがあると、検索結果に表示されなくなります。

<meta name="robots" content="noindex">

Webページを閲覧されないようにするためにこちらのコードを入れるのは構いませんが、そうでない場合はnoindexを外しておきましょう。

【確認方法】noindexになっていないか

まずはこちらでサイトの全てのページのURLを取得します。
ページ一覧取得(外部リンク)

取得したURLのリストを、こちらのnoindexありなしチェッカーに貼り付けて確認します。
noindexありなしチェッカー(外部リンク)

メニューやスライドなどスクリプトの動作確認

【解説】スクリプトの動作確認とは？

ヘッダーの開閉メニューやスライドの動作など、javascriptやjQuery等で作成した要素が正常に動くかどうかを確認します。

【確認方法】スクリプトの動作確認

まずは実際にWebページでメニューやスライドが正常に動くか確認します。

次に、ブラウザの開発者ツールでエラーメッセージなどがないか確認します。

Google Chromeを使用している場合は、キーボードショートカット
Windows：F12 (Ctrl+Shift+I)
Mac：fn + F12 (Cmd+Option+I )
を押して開発者ツールを開き、コンソールを確認します。

リンク切れはないか

【解説】リンク切れとは？

aタグもしくはimgタグのリンクが空になっていることです。
リンクが切れているWebサイトはSEOへの悪影響や、コンテンツの信頼性の低下などを招きますので確認しておきましょう。

【確認方法】リンク切れはないか

こちらのサイトでリンク切れを確認します。
リンクチェッカー（外部リンク）

実際のサイトも見てテキストや画像のリンク切れがないか確認してみましょう。

問合せフォーム送信／受信の動作確認

【解説】問合せフォームの動作確認とは

Webサイトに問合せフォームを設置している場合は、正常にフォームの送信と受信（通知）が行われるかどうか確認しておきましょう。

予約や購入など売り上げにつながる部分になるので、ここの確認は非常に重要な部分ですね。

【確認方法】問合せフォームの動作確認

まずは実際に問合せフォームを送信して、メールが正常に送信／受信されるか確認します。

この時に、メールの送信元、件名、本文が正しいかどうかも確認しておきましょう。

また、問合せフォームはスパム送信に悪用されてしまうリスクもありますので、

Google reCAPTCHA（外部リンクへ）の設置など、スパム対策も施しておきましょう。

万が一、不審なフォーム送信があった場合に、送られてきたURLをクリックしないようサイト管理・運営する方達に周知しておきましょう。

セキュリティ対策はされているか

【解説】セキュリティ対策とは？

先ほどの問い合わせフォームのスパム対策もセキュリティ対策の一つです。

大企業で情報漏洩のニュースが度々話題になりますが、中小企業や個人のサイトも毎日世界中から攻撃の対象として狙われています。

どの項目も重要度の高い対策ではありますが、最低限”重要“の対策だけでも取り入れておきましょう。

【確認方法】セキュリティ対策はされているか

重要 HTTPSの導入:
サイトのURLが”https”で始まっているかどうかを確認。
もし、”http”の場合はサーバーの設定でSSL/TLS証明書を使用して、WebサイトをHTTPSに対応させる。
これにより、データの送受信が暗号化され、盗聴や改ざんを防止できる。
また、コード内のリンクが”http://”になっていたら”https://”に直しておきましょう。

重要ソフトウェアアップデート:
CMS、プラグイン、テーマ、サーバーなどWebサイトに関わるソフトウェアを定期的にアップデートする体制を作り、常に最新の状態に保つ。
これにより、セキュリティパッチが適用され、既知の脆弱性が修正される。

重要強力なパスワード設定:
自分の名前や誕生日などの推測されやすいパスワードは危険。
ユーザーアカウントに強力なパスワードを使用し、パスワード管理ツールを推奨する。
また、二要素認証（2FA）の導入も推奨。

重要定期的なバックアップ:
Webサイトのデータとシステムの定期的なバックアップを行い、バックアップを安全な場所に保管する。

Webアプリケーションファイアウォール（WAF）の導入:
WAFを導入して、悪意のあるトラフィックを検出・ブロックし、攻撃からWebサイトを保護する。

セキュリティプラグインの利用:
WordPressなどのCMSを使用している場合、セキュリティプラグインをインストールして、追加のセキュリティ対策を講じる。

ログイン試行回数の制限:
WordPressなどの管理画面にログインの際、パスワードを任意の回数以上間違えたユーザーをロックアウトする。

入力検証とエスケープ:
検索フォームやコメント送信など、ユーザーが自由に入力できる機能に適切な処理がされていない場合、これらは悪用される可能性がある。
ユーザーからの入力を適切に検証・エスケープして、SQLインジェクションやクロスサイトスクリプティング（XSS）攻撃を防ぐ。

クロスサイトスクリプティング（XSS）攻撃対策の確認方法はこちらをご参照ください。
https://specially198.com/how-to-test-cross-site-scripting

SQLインジェクション対策の確認方法はこちらをご参照ください。
https://www.softbanktech.co.jp/special/blog/it-keyword/2022/0029/#content05

セキュリティヘッダーの設定:
セキュリティヘッダーがない場合、さまざま攻撃に対してサイトが脆弱になる。

セキュリティヘッダーが入っているかどうかは以下でご確認ください。
https://securityheaders.com/

セキュリティヘッダーを入れる方法は、.htaccessファイルの一番下に以下コードを追加することです。

# Security Headers
Header always set Strict-Transport-Security "max-age=31536000" env=HTTPS
Header always set Content-Security-Policy "upgrade-insecure-requests"
Header always set X-Content-Type-Options "nosniff"
Header always set X-XSS-Protection "1; mode=block"
Header always set Expect-CT "max-age=7776000, enforce"
Header always set Referrer-Policy "no-referrer-when-downgrade"
Header always set X-Frame-Options "SAMEORIGIN"
# End Security Headers
<IfModule mod_headers.c> Header always set Permissions-Policy "geolocation=(), midi=(), sync-xhr=(), accelerometer=(), gyroscope=(), magnetometer=(), payment=(), camera=(), microphone=(), usb=(), fullscreen=(self)"
</IfModule>

参考・引用元はこちら
https://calma.work/consultant/220125_01/

ファイルアップロードの安全対策:
悪意のあるファイルがアップロードされるのを防ぐ。
ファイルタイプの制限、ファイル名のサニタイズ、ファイルサイズの制限、ファイルスキャン、ファイルの保存場所をWebルート外に設定などの対策をする。

アクセス制御と権限管理:
管理者やユーザーのアクセス権限を適切に設定し、必要以上の権限を与えない。
また、不要なデフォルトアカウントを削除する。

ログ監視と分析:
サーバーログやアプリケーションログを定期的に監視・分析し、不審な活動や攻撃の兆候を早期に発見する。

管理者やユーザーに周知する:
Webサイトを管理もしくは利用する人々にセキュリティの重要性を周知する。
フィッシング攻撃の事例紹介や、疑わしいメールやリンクを開かないように注意喚起する。

スマホ実機で動作確認

【解説】スマホ実機で動作確認すべき理由

ブラウザの開発者向けツールでスマホ画面サイズの確認もできますが、実際にスマホでWebサイトを閲覧することで発見できることがあります。

できれば現在最も売れているスマートフォンの機種など、シェア率の高いもので確認できるとなお良いです。

OSや端末によって対応していないCSSコードなどもありますので確認しておきましょう。

住所は合っているか

【解説】住所を確認すべき理由

サイトによっては住所が必要ないものもありますが、店舗やオフィスなどの公式サイトで住所が間違えていると売上の機会の損失や、信用度の低下を招く恐れもありますので確認しておきましょう。

タップしてGoogle Mapなどを別タブで開けるようにしておくと尚良いです。

電話番号は合っているか

【解説】電話番号を確認すべき理由

こちらも先ほどの住所と理由は同じく、間違っていると売上の機会損失や信用度の低下を招く恐れがあるからです。

電話のボタンまたはテキストを以下コードのように編集し、スマホで閲覧している場合タップすればそのまま電話をかけられるようにしておきましょう。

<a href="tel:09012345678">TEL</a>

SNSは合っているか

【解説】SNSを確認すべき理由

X(旧Twitter)、Instagram、Facebookなど、今ではSNSも重要なマーケティングツールの一つです。

広報・認知度の向上のためにSNSを始めた方が良いですし、フォロワーを増やすためWebサイトにもリンクを載せておくことをおすすめします。

リンクが外れてないか、間違っていないかどうかもしっかり確認しておきましょう。

HTMLエラーはないか

【解説】HTMLエラーとは

HTMLコードが間違っていることです。

例えば閉じタグを書き忘れている、タグの記述順序が間違えている、などです。

Webページの表示が崩れるといった見た目の問題も起こりうるのでチェックしておきましょう。

【確認方法】HTMLエラーはないか

こちらのサイトにURLを入力して確認します。
HTML5バリデーター｜ラッコツールズ

もっと厳密にチェックしたい方はこちらもおすすめ。
The W3C Validation Service(外部リンク)

時間がない場合は重要度が高いエラーだけでも修正しておきましょう。

404ページはあるか

【解説】404ページとは

404ページとは、サイトに存在しないURLにユーザーがアクセスした時に表示されるページのことです。

404ページがあることで、ユーザーのWebサイトの回遊率の向上や離脱率の低下に繋がります。

【確認方法】404ページはあるか

Webサイトのドメインの後ろに、例のように存在しないページのURLを入力してください。

例）https://domain.com/test

404ページがない場合、白い背景に黒文字で”404 Not Found”と表示されます。

404ページの設置方法はWebサイトによって異なります。

TOPや他のページへのリンク、検索フォームなどを設置してユーザーが離脱しないような404ページを作成してみましょう。

メタ情報はあるか

【解説】メタ情報とは

headタグ内のmetaタグに記述する情報のことで、ページの内容やタイトル、キーワードなどの項目があります。

メタ情報がある方がSEOに有利と言われています。

【確認方法】メタ情報はあるか

まずはこちらでサイトの全てのページのURLを取得します。
ページ一覧取得(外部リンク)

取得した全てのページのURLをこちらに入力して確認しましょう。
ラッコツールズTITLE&META情報抽出(外部リンク)

重たいデータがないか

【解説】重たいデータを確認すべき理由

重たいデータを表示しているWebページは、表示速度が遅くなってしまいます。

現代では外出先でスマホでWebサイトを閲覧するユーザーも多く、表示速度が遅いWebサイトは離脱されやすくなってしまいます。

“重たいデータ”に最もなりがちなのは画像です。

Webサイトに載せる画像１枚あたりの理想的なデータサイズは50KB以下。

スマホで撮影した写真のデータサイズは3MBを上回るものばかりですので、そのままアップせずに軽量化しましょう。

webpやavifなど、次世代の画像ファイル形式に変換すると大幅に軽量化することができます。

【確認方法】重たいデータがないか

方法はいくつかあります。

サーバーからファイル一覧を見る、GoogleのPageSpeed Insightsを利用する、ブラウザの開発者ツールを利用する、といった方法で確認できます。

Google Chromeを使用している場合は、キーボードショートカット
Windows：F12 (Ctrl+Shift+I)
Mac：fn + F12 (Cmd+Option+I )
を押して開発者ツールを開き、”ネットワーク”を開いて、”キャッシュを無効化”にチェックをつけて再読み込み。

“サイズ”をクリックするとデータサイズの降順もしくは昇順でデータの一覧を確認することができます。

サイト表示速度は遅くないか

【解説】サイト表示速度を確認すべき理由

こちらも理由は先ほどの”重たいデータ”とほぼ同じです。

サイト表示速度が遅いとユーザーに離脱されがちです。

先ほどは画像について解説しましたが、他にも動画や不要なコード・スクリプトなど軽量化できるものがないか確認しておきましょう。

【確認方法】サイト表示速度は遅くないか

GoogleのPageSpeed Insightsを開き、WebサイトのURLを入力しましょう。

診断結果で指摘された項目を改善し、パフォーマンスの数値を向上させましょう。

分析ツールは設定したか

【解説】分析ツールが必要な理由

分析ツールとは、Webサイトのアクセス数や離脱率などを分析するためのものです。

代表的なものにGoogle Analytics、Google Search Consoleがあります。

この二つはGoogleアカウントがあれば無料で使用できるので入れておきましょう。
（導入方法はサイトによって異なります）

OGP設定はされているか

【解説】OGPとは

OGPは「Open Graph Protocol」の略で、ソーシャルメディアで共有された際に、ページの内容（タイトル、説明文、画像、URL）を正しく表示するための仕組みです。

XやLINEなどのSNSでWebページをシェアした際に、画像やタイトル・説明がきれいに表示されるのはこのOGP設定がされているからです。

ユーザーへ視覚的に興味を持たせる効果もありますし、検索結果に表示されやすくなる効果もあります。

【確認方法】OGP設定はされているか

以下サイトにURLを入力し、OGPを確認します。
ラッコツールズOGP確認(外部リンク)

OGPの設定方法はサイトにより異なります。

WordPressの場合はテーマのドキュメントを確認し、OGP設定機能がない場合はプラグインで設定することも可能です。

CMSを使用していない場合は以下コードを参考にしてください。

<head> <title>ページタイトル</title> <meta property="og:title" content="ページタイトル"> <meta property="og:description" content="ページの説明文"> <meta property="og:image" content="画像のURL"> <meta property="og:url" content="ページのURL">
</head>

オープングラフプロトコル公式(外部リンク)