Web制作のプロが実際に使用するサイト公開前チェックリストを公開。基本設定からSEOまで、見落としがちなポイントも網羅した実践的ガイドです。
はじめに
Webサイトを公開する前に、必ず確認すべき20項目をまとめました。動画では要点のみをお伝えしていますが、この記事では具体的な確認手順・使えるツール・よくあるミスまで詳しく解説します。
カテゴリ1: 基本設定(5項目)
サイトの土台となる設定です。公開後に修正すると影響範囲が大きいため、最初に確認してください。
① SSL証明書(HTTPS化)【緊急度:高】
確認方法:
- ブラウザのアドレスバーに鍵マークが表示されているか
- URLが「https://」で始まっているか
- 「http://」でアクセスした場合、自動で「https://」にリダイレクトされるか
確認ツール:
- SSL Server Test - 証明書の詳細をチェック
- Chrome DevTools > Security タブ
よくあるミス:
- 混在コンテンツ(画像やCSSがhttpで読み込まれている)
- 証明書の期限切れ
- www有無でリダイレクトループ
② 独自ドメイン設定【緊急度:高】
確認方法:
- 独自ドメインでサイトにアクセスできるか
- www有無の両方でアクセスできるか
- DNSの設定が正しいか
確認コマンド(ターミナル):
# Aレコードの確認
dig example.com +short
# CNAMEの確認
dig www.example.com +short
よくあるミス:
- DNS浸透に時間がかかる(最大48時間)
- サブドメインの設定漏れ
- 古いIPアドレスがキャッシュされている
③ ファビコン設定【緊急度:中】
確認方法:
- ブラウザのタブにアイコンが表示されるか
- ブックマーク時にアイコンが表示されるか
- スマホのホーム画面追加時のアイコン
必要なファイル:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
推奨サイズ:
- favicon.ico: 32x32px
- apple-touch-icon.png: 180x180px
④ OGP画像設定【緊急度:中】
SNSでシェアされた時の見た目を決める重要な設定です。
確認方法:
- Facebook シェアデバッガーでURLをチェック
- Twitter Card Validatorでプレビュー確認
必要なmetaタグ:
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:url" content="https://example.com/">
<meta name="twitter:card" content="summary_large_image">
推奨画像サイズ:
- 1200 x 630px(横長)
よくあるミス:
- 画像URLが相対パス(絶対URLが必要)
- 画像サイズが小さすぎる
- ページごとにOGPを設定していない
⑤ 404エラーページ【緊急度:低】
確認方法:
- 存在しないURL(例: /asdfghjkl)にアクセス
- カスタム404ページが表示されるか
- トップページへのリンクがあるか
良い404ページの要素:
- 「ページが見つかりません」のメッセージ
- トップページへのリンク
- サイト内検索フォーム
- 人気ページへのリンク
カテゴリ2: コンテンツ確認(5項目)
お客様が最初に目にする部分です。細部の品質が信頼感に直結します。
⑥ 誤字脱字チェック【緊急度:中】
確認方法:
- 声に出して読む(黙読より発見しやすい)
- 時間を置いてから再度確認
- 第三者にチェックしてもらう
確認ツール:
- Word/Googleドキュメントのスペルチェック
- Enno - 日本語校正
重点チェックポイント:
- 会社名・人名
- 電話番号・住所
- 金額・日付
- 専門用語
⑦ 画像の表示確認【緊急度:高】
確認方法:
- 全ページで画像が表示されているか
- alt属性が設定されているか
- 画像サイズが適切か(表示サイズの2倍推奨)
確認ツール:
- Chrome DevTools > Network > Img
- PageSpeed Insights - 画像最適化の提案
よくあるミス:
- パスが相対パスで環境依存
- ファイル名に日本語や空白
- 画像サイズが大きすぎてページが重い
⑧ リンク切れチェック【緊急度:高】
確認方法:
- 全てのリンクをクリックして確認
- リンク切れチェックツールを使用
確認ツール:
- Dead Link Checker
- Screaming Frog SEO Spider(無料版は500URLまで)
- Chrome拡張「Check My Links」
重点チェックポイント:
- 外部サイトへのリンク
- PDFなどのファイルリンク
- メールリンク(mailto:)
- 電話リンク(tel:)
⑨ 電話番号・住所の確認【緊急度:高】
確認方法:
- 表示されている電話番号に実際に電話
- 住所をGoogleマップで検索
- スマホで電話リンクをタップして発信確認
よくあるミス:
- 電話番号の桁違い
- 郵便番号と住所の不一致
- 電話リンクのフォーマットエラー
電話リンクの正しい書き方:
<a href="tel:0123456789">012-345-6789</a>
⑩ 利用規約・プライバシーポリシー【緊急度:中】
確認方法:
- 法的に必要な項目が含まれているか
- 会社名・連絡先が正しいか
- 日付が更新されているか
必須項目(プライバシーポリシー):
- 収集する個人情報の種類
- 利用目的
- 第三者提供の有無
- 問い合わせ窓口
カテゴリ3: フォーム・機能(5項目)
最もトラブルが多いカテゴリです。必ず実際に動作確認してください。
⑪ お問い合わせフォーム送信【緊急度:高】
確認方法:
- 実際にフォームを送信
- 送信完了画面が表示されるか
- メールが届くか
テスト項目:
- 全項目入力して送信
- 必須項目を空欄で送信(エラー表示確認)
- 不正な値を入力(バリデーション確認)
よくあるミス:
- 開発環境のメール設定のまま
- SMTPサーバーの認証エラー
- 送信先メールアドレスの誤り
⑫ 自動返信メール【緊急度:高】
確認方法:
- フォーム送信後、自分のメールに自動返信が届くか
- 件名・本文・差出人が正しいか
- 迷惑メールフォルダに入っていないか
チェックポイント:
- 差出人名・メールアドレス
- 件名
- 本文の内容(会社名、問い合わせ内容の確認)
- 文字化けがないか
⑬ 管理者通知メール【緊急度:高】
確認方法:
- フォーム送信後、管理者にメールが届くか
- 問い合わせ内容が全て含まれているか
- 送信者のメールアドレスに返信できるか
⑭ 予約・購入機能【緊急度:高】
ECサイトや予約システムがある場合は必ず実際にテスト。
テスト項目:
- 商品をカートに追加
- 決済処理(テストモード)
- 在庫管理の連動
- 予約確定メールの送信
⑮ 検索機能【緊急度:低】
確認方法:
- サイト内検索で結果が表示されるか
- 0件の場合の表示
- 検索結果のリンクが正しいか
カテゴリ4: SEO・解析(5項目)
公開後のデータ分析に必要な設定です。後から入れることもできますが、最初から設定しておくのがベストです。
⑯ タイトル・メタディスクリプション【緊急度:中】
確認方法:
- 各ページのtitleタグが設定されているか
- 各ページのmeta descriptionが設定されているか
- 文字数が適切か
推奨文字数:
- title: 30文字前後
- description: 120文字前後
確認ツール:
- Chrome DevTools > Elements
- SEO META in 1 CLICK(Chrome拡張)
⑰ Google Analytics設定【緊急度:高】
確認方法:
- GA4のリアルタイムレポートで自分のアクセスが確認できるか
- 全ページにトラッキングコードが設置されているか
設置確認ツール:
- Tag Assistant
- Chrome拡張「Google Analytics Debugger」
⑱ Google Search Console登録【緊急度:高】
確認方法:
- Search Consoleにプロパティを追加
- 所有権の確認完了
- サイトマップを送信
所有権確認方法:
- HTMLファイルのアップロード
- metaタグの追加
- DNSレコードの追加
⑲ サイトマップ作成・送信【緊急度:中】
確認方法:
- /sitemap.xml にアクセスしてXMLが表示されるか
- 全ページが含まれているか
- Search Consoleに送信済みか
サイトマップ生成ツール:
- WordPressプラグイン(Yoast SEO等)
- XML-Sitemaps.com
⑳ robots.txt確認【緊急度:中】
確認方法:
- /robots.txt にアクセス
- 意図しないブロックがないか
- サイトマップへのリンクがあるか
基本的なrobots.txt:
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
注意:
- 「Disallow: /」になっていると全ページがインデックスされない
- 開発環境の設定をそのまま公開しないよう注意
最終チェック:スマホ実機確認
PCでの確認が完了したら、必ずスマホの実機で確認してください。
チェックポイント:
- レイアウトが崩れていないか
- 文字サイズが読みやすいか
- ボタンがタップしやすいか
- 電話リンクが機能するか
まとめ
この記事では、サイト公開前に確認すべき20項目を4つのカテゴリに分けて解説しました。
緊急度【高】の項目(最優先):
- SSL証明書
- 独自ドメイン
- 画像表示
- リンク切れ
- 電話番号・住所
- フォーム送信
- 自動返信メール
- Google Analytics
- Search Console
チェックリストを活用して、トラブルのないサイト公開を実現しましょう。
ご不明点があれば、お気軽にお問い合わせください。