サイト公開前チェックリスト完全ガイド【2024年版】

Web制作のプロが実際に使用するサイト公開前チェックリストを公開。基本設定からSEOまで、見落としがちなポイントも網羅した実践的ガイドです。

「サイトを公開したら真っ白になった」そんな悩みありませんか？

私たちFivenine Designには、以下のような相談が毎月のように寄せられます：

「サイトを公開したら画像が表示されなくなった」
「フォームからメールが送信されない」
「スマートフォンで見たらレイアウトが崩れている」
「検索エンジンに全然表示されない」

これらは全て、公開前のチェックが不十分だったことが原因です。せっかく時間をかけて作ったサイトが、チェック漏れで台無しになるのは本当にもったいないですね。

実際に、ある中小企業のお客様では、公開後に問い合わせフォームが機能していないことが発覚し、2週間もビジネス機会を逃してしまったケースがありました。その後、適切なチェックプロセスを導入したところ、公開後のトラブルがゼロになり、安心してサイト運営ができるようになりました。

今回は、私たちが20年以上の制作経験で培った「サイト公開前チェックリスト」を完全公開します。このガイドを実践すれば、公開後のトラブルを未然に防ぎ、ユーザーに最高の体験を提供できるサイトが完成します。

なぜ公開前チェックが重要なのか？

開発環境と本番環境の違いによるトラブル

Web制作では通常、開発環境でサイトを構築し、その後本番環境に移行します。しかし、この2つの環境には以下のような違いがあります：

開発環境と本番環境の主な違い

サーバーの設定やバージョン
ドメイン名とパス構造
SSL証明書の有無
データベースの接続情報
ファイルパーミッション

これらの違いにより、開発環境では正常に動作していた機能が、本番環境では動作しないという問題が頻繁に発生します。

SEOへの致命的な影響

公開直後にGoogleなどの検索エンジンがサイトをクロールすることがあります。この時にエラーページや不完全なコンテンツを発見されると、検索順位に長期的な悪影響を与える可能性があります。

実際に、あるクライアントサイトでは、公開時にnoindexタグが残っていたため、3ヶ月間検索結果に表示されないという事態が発生しました。適切なチェックリストがあれば防げた問題です。

公開前チェック実施による効果比較

出典: Fivenine Design調べ（過去2年間の案件データより）

【基本設定編】技術的な設定チェック

1. サーバー・ドメイン設定の確認

DNS設定の確認

まず、ドメインが正しく設定されているかを確認します。以下のコマンドでDNSの浸透状況をチェックできます：

# DNSの確認
nslookup yourdomain.com

# より詳細な確認
dig yourdomain.com A
dig yourdomain.com MX

SSL証明書の確認

HTTPS接続が正常に機能しているかを確認します。ブラウザのアドレスバーに鍵マークが表示され、証明書が有効期限内であることを確認してください。

# SSL証明書の有効期限確認
openssl s_client -connect yourdomain.com:443 -servername yourdomain.com | openssl x509 -noout -dates

2. ファイルパスとリンクの確認

絶対パスと相対パスの使い分け

開発環境と本番環境でパスが変わる場合があります。WordPressの場合は以下のような書き方を推奨します：

<!-- 悪い例：ハードコーディング -->
<img src="http://localhost/images/logo.png">

<!-- 良い例：動的パス生成 -->
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png">

Laravelの場合：

<!-- 悪い例 -->
<img src="/storage/images/logo.png">

<!-- 良い例 -->
<img src="{{ asset('storage/images/logo.png') }}">

3. データベース接続の確認

本番環境でのデータベース接続情報が正しく設定されているかを確認します。

WordPress（wp-config.php）

// 本番環境用の設定
define('DB_NAME', 'production_db');
define('DB_USER', 'production_user');
define('DB_PASSWORD', 'secure_password');
define('DB_HOST', 'localhost');

// デバッグモードを無効に
define('WP_DEBUG', false);
define('WP_DEBUG_LOG', false);
define('WP_DEBUG_DISPLAY', false);

Laravel（.env）

APP_ENV=production
APP_DEBUG=false
APP_URL=https://yourdomain.com

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=production_db
DB_USERNAME=production_user
DB_PASSWORD=secure_password

4. パフォーマンス設定の確認

画像最適化の確認

画像のファイルサイズが適切かを確認します。以下のツールを使用して一括チェックができます：

# 大きすぎる画像ファイルを検索
find . -name "*.jpg" -o -name "*.png" | xargs ls -lh | awk '$5 > "1M" {print $9, $5}'

キャッシュ設定の確認

.htaccessファイルにキャッシュ設定が含まれているかを確認：

# ブラウザキャッシュの設定
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
</IfModule>

【コンテンツ確認編】ユーザー体験の最終チェック

1. 全ページの表示確認

ページレスポンスの確認

各ページが正常に表示されるかを確認します。404エラーページも含めて、すべてのページをチェックしましょう。

// 全ページのレスポンス確認用JavaScript
const urls = [
    '/',
    '/about',
    '/services',
    '/contact',
    '/404'
];

urls.forEach(async (url) => {
    try {
        const response = await fetch(url);
        console.log(`${url}: ${response.status}`);
    } catch (error) {
        console.error(`${url}: Error - ${error}`);
    }
});

2. レスポンシブデザインの確認

複数デバイスでの表示確認

以下のブレークポイントで表示を確認します：

スマートフォン：320px〜767px
タブレット：768px〜1023px
デスクトップ：1024px以上

Chromeの開発者ツールを使用して効率的にチェックできます：

/* 確認用のメディアクエリ */
@media (max-width: 767px) {
    /* スマートフォン用スタイル */
    .container {
        padding: 10px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* タブレット用スタイル */
    .container {
        padding: 20px;
    }
}

3. 画像・メディアファイルの確認

画像の代替テキスト（alt属性）

SEOとアクセシビリティの観点から、すべての画像にalt属性が設定されているかを確認します：

<!-- 悪い例 -->
<img src="product.jpg">

<!-- 良い例 -->
<img src="product.jpg" alt="高品質なWebサイト制作サービスのイメージ">

読み込み速度の確認

Google PageSpeed Insightsやライトハウスを使用して、ページの読み込み速度を測定します。

【フォームテスト編】重要な機能の動作確認

1. お問い合わせフォームのテスト

送信機能の確認

フォームの送信が正常に動作するかをテストします。実際にテストメールを送信して確認しましょう。

// WordPress用のフォーム送信テスト
function test_contact_form() {
    $to = '[email protected]';
    $subject = 'テスト送信';
    $message = 'フォームテストメッセージ';
    $headers = array('Content-Type: text/html; charset=UTF-8');
    
    $result = wp_mail($to, $subject, $message, $headers);
    
    if($result) {
        echo '送信成功';
    } else {
        echo '送信失敗';
        error_log('Mail sending failed');
    }
}

2. バリデーション機能の確認

入力チェックの動作確認

以下のパターンでバリデーションをテストします：

必須項目の未入力
メールアドレス形式の不正入力
電話番号の不正入力
文字数制限の超過

// フォームバリデーション例
function validateForm() {
    const email = document.getElementById('email').value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (!emailRegex.test(email)) {
        alert('正しいメールアドレスを入力してください');
        return false;
    }
    
    return true;
}

3. セキュリティ設定の確認

CSRF対策の確認

クロスサイトリクエストフォージェリ対策が実装されているかを確認します：

// Laravel CSRF トークン
@csrf
<input type="hidden" name="_token" value="{{ csrf_token() }}">

// WordPress nonce
wp_nonce_field('contact_form_action', 'contact_form_nonce');

【SEO設定編】検索エンジン最適化の最終確認

1. メタタグの確認

titleタグとmeta descriptionの設定

各ページに適切なタイトルと説明文が設定されているかを確認します：

<!-- 良い例 -->
<title>神奈川のWeb制作会社 | Fivenine Design - 20年の実績</title>
<meta name="description" content="神奈川県を拠点とするWeb制作会社Fivenine Designです。Laravel、WordPress、Next.jsを使った高品質なWebサイト制作を20年以上にわたって提供しています。">

2. robots.txtの確認

検索エンジンのクローラーに対する指示が適切かを確認します：

# 本番環境用robots.txt
User-agent: *
Allow: /

# 不要なページの除外
Disallow: /admin/
Disallow: /wp-admin/
Disallow: /wp-includes/

# サイトマップの指定
Sitemap: https://yourdomain.com/sitemap.xml

3. サイトマップの生成と送信

XML サイトマップの確認

Google Search Consoleにサイトマップが正しく送信されているかを確認します。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://yourdomain.com/</loc>
        <lastmod>2024-01-01</lastmod>
        <changefreq>weekly</changefreq>
        <priority>1.0</priority>
    </url>
</urlset>

4. 構造化データの確認

Schema.orgマークアップ

構造化データが正しく実装されているかをGoogleの構造化データテストツールで確認します：

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Fivenine Design",
  "url": "https://fivenine-design.com",
  "address": {
    "@type": "PostalAddress",
    "addressRegion": "神奈川県"
  }
}

よくある失敗パターンと対処法

パターン1：画像パスの間違い

症状：開発環境では画像が表示されるが、本番環境で表示されない

原因：絶対パスでローカル環境のパスが指定されている

対処法：

<!-- 修正前 -->
<img src="file:///Users/developer/project/images/logo.png">

<!-- 修正後 -->
<img src="./images/logo.png">

パターン2：フォームメールが届かない

症状：フォーム送信後、確認メールが管理者に届かない

原因：

メールサーバーの設定不備
スパムフィルターによる自動削除
送信元アドレスの設定ミス

対処法：

// 送信元アドレスを適切に設定
$headers = array(
    'From: [email protected]',
    'Reply-To: [email protected]',
    'Content-Type: text/html; charset=UTF-8'
);

パターン3：スマートフォンでレイアウト崩れ

症状：PC では正常だが、スマートフォンで表示が崩れる

原因：viewportの設定不備、固定幅の使用

対処法：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 固定幅から可変幅へ */
.container {
    width: 100%; /* width: 1200px; から変更 */
    max-width: 1200px;
    margin: 0 auto;
}

公開後によく発生するトラブルの割合

出典: Fivenine Design 過去案件分析データ

無料相談受付中

お気軽にご相談ください（初回無料）

詳しく見る

まとめ：安心してサイト公開するために

サイト公開前のチェックは、単なる作業ではなくユーザー体験の品質を保証する重要なプロセスです。チェックリストを活用することで、公開後のトラブルを大幅に減らし、ビジネス目標の達成につながるWebサイトを完成させることができます。

私たちの経験では、このチェックリストを実践したクライアントは：

公開後のトラブルが90%以上削減
ユーザーからの問い合わせ品質が向上
検索エンジンでの表示順位が安定
サイト運営に対する不安が解消

という成果を実感されています。

次のステップ：今すぐできること

現在のサイト状況を把握：既存サイトがある場合は、このチェックリストで現状確認
チェック体制の構築：社内でチェック担当者を決める
定期的な見直し：月1回程度の定期チェックを実施

もし技術的な部分で不安を感じたり、より詳細なサポートが必要でしたら、お気軽にFivenine Designまでご相談ください。20年以上の実績を活かし、あなたのサイト公開を成功に導きます。

サイト公開前チェックリスト完全ガイド【2024年版】

「サイトを公開したら真っ白になった」そんな悩みありませんか？

なぜ公開前チェックが重要なのか？

開発環境と本番環境の違いによるトラブル

SEOへの致命的な影響

【基本設定編】技術的な設定チェック

1. サーバー・ドメイン設定の確認

2. ファイルパスとリンクの確認

3. データベース接続の確認

4. パフォーマンス設定の確認

【コンテンツ確認編】ユーザー体験の最終チェック

1. 全ページの表示確認

2. レスポンシブデザインの確認

3. 画像・メディアファイルの確認

【フォームテスト編】重要な機能の動作確認

1. お問い合わせフォームのテスト

2. バリデーション機能の確認

3. セキュリティ設定の確認

【SEO設定編】検索エンジン最適化の最終確認

1. メタタグの確認

2. robots.txtの確認

3. サイトマップの生成と送信

4. 構造化データの確認

よくある失敗パターンと対処法

パターン1：画像パスの間違い

パターン2：フォームメールが届かない

パターン3：スマートフォンでレイアウト崩れ

まとめ：安心してサイト公開するために

次のステップ：今すぐできること

関連記事

ホームページから問い合わせが来ない5つの理由と改善策

ChatGPTを使った無料サイト診断の方法｜プロが教える活用術

サイト公開前チェックリスト完全ガイド【2026年版】

ホームページ制作費用の徹底比較｜5つの価格帯別品質ガイド

【2026年版】ホームページ制作の最新トレンド完全ガイド

JavaScriptでブロック崩しゲームを作ろう - HTMLファイル1つで完結

無料でご相談いただけます

関連サービスのご案内