Webサイトの制作が完了し、いよいよクライアントへ納品する瞬間は誰もが緊張するものです。
「テスト環境のBasic認証を外し忘れてクライアントが見られなかった…」
「noindexを外すのを忘れていて、いつまで経ってもGoogleに検索されない…」
現場では、どれだけ素晴らしいデザインやコーディングをしても、こうしたたった1つのチェック漏れがクライアントからの信頼を大きく損ねる原因になります。
そこで本記事では、Web制作の現場で実際に使われている「Webサイト納品前に絶対やるべき10のチェックリスト」をまとめました。納品作業に入る前に、必ず上から順に確認していきましょう！
納品前チェックリスト一覧（サクッと確認用）
まずは10項目の一覧です。案件完了前にチェックボックスとしてご活用ください。
- [ ] 1. Basic認証が外れているか
- [ ] 2. noindexタグ・検索回避設定が外れているか
- [ ] 3. リンク切れ・不要なテストページが残っていないか
- [ ] 4. OGP（SNSシェア時の画像・説明文）の設定
- [ ] 5. Favicon（ファビコン）・アップルタッチアイコンの設定
- [ ] 6. 多様なデバイス・ブラウザでの表示確認（レスポンシブ）
- [ ] 7. フォームの送受信テスト
- [ ] 8. 404エラーページの制作・確認
- [ ] 9. サイトの表示速度・画像最適化
- [ ] 10. 外部アクセス解析・計測ツールの導入確認
チェックリストはこちら👇（自分用として使うために編集する場合は、必ず「ファイル」→「コピーを作成」を選択して、自分用のコピーを作成してから行うようにお願いします。）
エクセル版(.xlsx)で欲しい人は、「ファイル」→「ダウンロード」→「Microsoft Excel(.xlsx)」を選択して、自分用のコピーを作成してから行うようにお願いします。
各チェック項目の詳細と確認手順
1. Basic認証が外れているか
テスト環境（検証用サーバー）で閲覧制限をかけるために設定したBasic認証の解除は、納品前の最重要チェック項目です。
- 静的サイト（
.htaccess）の場合：.htaccessファイル内のBasic認証に関する記述を削除するか、設定を解除します。
ただし、これは難易度が高いです。
お使いのレンタルサーバーから、Basic認証を簡単に行うこともできます。 - 確認方法： ブラウザのシークレットウィンドウ（プライベートモード）を立ち上げ、サイトのURLにアクセスした際にユーザー名とパスワードの入力ポップアップが出ないことを確認します。
2. noindexタグ・検索回避設定が外れているか
開発中に検索エンジンへインデックスされるのを防ぐために設定した「noindex」の外し忘れは、SEO上非常に危険です。
- 静的サイトの場合：
<head>タグ内に<meta name="robots" content="noindex">が残っていないか確認・削除します。 - WordPressサイトの場合： 管理画面の 「設定 > 表示設定」 にある 「検索エンジンがサイトをインデックスしないようにする」 のチェックを外して保存します。
詳しくは、下の記事に書いてあります。
3. リンク切れ・不要なテストページが残っていないか
ページ遷移時のリンクミスや、開発用に使用したダミーページが残っていないかチェックします。
- チェック内容：
- ヘッダー・フッター・本文内のテキストリンクや画像リンクが正しく機能しているか。
href="#"やhref="javascript:void(0)"などの仮リンクが残っていないか。- 「test.html」「page-demo.php」といった不要なテストファイルがサーバー上に残っていないか。
- 効率化ツール： 「Dead Link Checker」などの外部Webツールや、VSCodeの拡張機能を使って一括判定すると漏れが防げます。
4. OGP（SNSシェア時の画像・説明文）の設定
X（旧Twitter）やLINE、FacebookなどでサイトURLがシェアされた際に、正しいアイキャッチ画像と説明文が表示されるように設定します。
- 確認するタグ：
og:title（サイトタイトル）og:description（説明文）og:image（アイキャッチ画像の絶対パス）og:url（サイトの正規URL）
- 確認手順： 「ラッコOGP確認」やXの「Card Validator」などの確認ツールに本番URLを入力し、画像が表示されるかテストします。
5. Favicon（ファビコン）・アップルタッチアイコンの設定
ブラウザのタブやブックマーク一覧に表示される「Favicon」と、スマホのホーム画面に追加した際に表示される「アップルタッチアイコン」を設定します。
- 推奨フォーマット：
- Favicon：
.icoまたは.png（32x32px、64x64pxなどマルチサイズ対応が推奨） - Apple Touch Icon：
.png（180x180px）
- Favicon：
- 確認手順： スマホやPCの複数ブラウザでタブを開き、デフォルトの地球儀マークやWordpressアイコンになっていないか確認します。
6. 多様なデバイス・ブラウザでの表示確認（レスポンシブ）
コーダーの環境（MacのChrome等）ではきれいに見えていても、他OSや他ブラウザではレイアウトが崩れていることがあります。
- 実機・ブラウザのチェックリスト：
- PC： Google Chrome / Safari / Microsoft Edge
- スマホ： iPhone（Safari）/ Android（Chrome）
- ポイント： 特にiOS（Safari）独特のフォーム装飾や、
position: fixedのスクロール挙動、フォントのレンダリング差異に注意して確認しましょう。
検証ツールで確認する癖をつけましょう！
7. フォームの送受信テスト
お問い合わせフォームが設置されている場合、実際にテスト送信を行って運用に支障がないか確認します。
- 確認ポイント：
- ユーザー宛の「自動返信メール」が届くか。
- クライアント宛の「管理者通知メール」が正しいメールアドレスに届くか。
- 必須項目を入力せずに送信しようとした際、バリデーションエラーが表示されるか。
- 送信完了後に「サンクスページ（完了画面）」へ正しく遷移するか。
8. 404エラーページの制作・確認
存在しないURL（例：[y-programing.com/404test](https://y-programing.com/404test)）にアクセスした際、サーバーデフォルトの無機質なエラー画面ではなく、デザインされたオリジナルの404ページが表示されるか確認します。
- ポイント： トップページへのリンクや検索窓を配置し、迷い込んだユーザーをサイト内に戻す導線を作っておくことが大切です。
9. サイトの表示速度・画像最適化
ページの読み込み速度が遅いと、ユーザーの離脱率が高まりSEOにも悪影響を与えます。
- 確認・対策手順：
- 「PageSpeed Insights」でサイトのパフォーマンススコアを計測する。
- 撮影素材やメガバイト級の巨大なJPEG/PNG画像がそのままアップロードされていないか確認し、WebP形式への変換や圧縮（TinyPNG等の活用）を行う。
10. 外部アクセス解析・計測ツールの導入確認
クライアントが納品後に効果測定できるよう、指定された解析ツールが正しく設置されているか確認します。
- 設置確認項目：
- Google アナリティクス（GA4）のタグが埋め込まれているか（Google Tag Assistantなどで動作確認）。
- Google Search Console（サチコ）の所有権確認・サイトマップ（
sitemap.xml）の送信が完了しているか。
これらのツールを使うことによって、特定のページ、あるいはサイト全体が公開されているか、だけでなく
どのようなキーワードで検索されているか、なども確かめることができて便利です！
まとめ：チェックリストを活用してプロの品質で納品しよう！
Webサイトの納品作業は、制作の「ゴール」であると同時に、クライアントにとっては「スタート」です。
- Basic認証の解除
- noindexの解除
- リンク切れ・テストファイルの削除
- OGP設定
- Favicon設定
- マルチデバイス表示確認
- フォーム送受信テスト
- 404ページ確認
- 画像圧縮・速度最適化
- GA4・GSC設定
納品前のわずか10分〜15分のチェックで、余計なトラブルや修正コストを大幅に減らすことができます。
仕事を請け負った瞬間から、あなたはWebのプロです。
納品前には必ず本記事のリストを上から順に読み合わせし、万全の状態で納品を完了させましょう！
コメント