サイトが突然真っ白になった時の原因の9割はJavaScript読み込みエラー。Web担当者でもできる5分診断術と応急処置法を実案件の事例で解説します。
「サイトが真っ白に…」そんな緊急事態、経験ありませんか？
朝一番にサイトを確認したら画面が真っ白。スマートフォンで見ても同じ状態。お客様から「サイトが見れない」という電話が鳴り響く…こんな恐怖の体験をされたWeb担当者は少なくありません。
私たちFivenine Designにも、このような緊急のご相談が月に数件届きます。先月も、横浜の製造業のお客様から朝8時に「昨日まで正常だったサイトが突然真っ白になった」とお電話をいただきました。
サイトが真っ白になる原因の約90％はJavaScript読み込みエラーです。WordPressプラグインの自動更新、テーマの変更、CDNの設定ミスなど、様々な要因でJavaScriptファイルが正常に読み込まれなくなることがあります。
今回は、技術者でなくても5分でできるJavaScript読み込みエラーの診断方法と応急処置をお伝えします。この方法を覚えておけば、業者に連絡する前に状況を把握でき、場合によっては自分で解決することも可能です。
なぜJavaScriptエラーでサイトが真っ白になるのか
エラー発生の仕組み
現代のWebサイトは、見た目の美しさやユーザビリティを向上させるため、多くのJavaScriptに依存しています。特にWordPressサイトでは、以下のような要素がJavaScriptで制御されています：
- レスポンシブメニューの開閉
- スライダーやアニメーション
- フォームの入力チェック
- Ajax通信による動的コンテンツ読み込み
これらのJavaScriptファイルが一つでも読み込みに失敗すると、その時点でページの描画が停止し、真っ白な画面になってしまいます。
よくある原因パターン
過去の対応実績から、主な原因をまとめると以下の通りです：
特に多いのがWordPressプラグインの競合です。複数のプラグインが同じJavaScriptライブラリ（jQueryなど）を読み込もうとして、バージョンが異なることで動作が停止するケースがよく見られます。
5分でできる緊急診断術：具体的な手順
ステップ1：ブラウザの開発者ツールでエラーを確認
まずは現状を把握しましょう。Chrome、Firefox、Safari、いずれのブラウザでも開発者ツールは使用できます。
- サイトを開いた状態で
F12キーを押す（MacはCmd + Option + I） - 「Console」タブをクリック
- 赤色のエラーメッセージを確認
エラーメッセージの例：
Uncaught ReferenceError: $ is not defined at main.js:15
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught TypeError: Cannot read property 'slider' of undefined
ステップ2：ネットワークタブで読み込み失敗を特定
開発者ツールの「Network」タブ（ネットワークタブ）を開き、ページを再読み込みします。赤色で表示されるファイルが読み込みに失敗したファイルです。
特に注目すべき点：
.jsファイルのステータスコードが404（ファイルが見つからない）- CDNからの読み込みが失敗している（例：
cdn.jsdelivr.net、ajax.googleapis.com） - ファイルサイズが異常に小さい（0KBなど）
ステップ3：プラグイン無効化テスト（WordPress限定）
WordPressサイトの場合、プラグインが原因の可能性が高いため、以下の手順でテストします：
-
wp-content/pluginsフォルダ名を一時的に変更
- FTPまたはサーバーの管理画面で「plugins」を「plugins_backup」に変更
- サイトが表示されるか確認
-
表示された場合、プラグインを1つずつ有効化
- フォルダ名を戻し、プラグインを個別に無効化
- 問題のプラグインを特定
実際の対応例では、横浜のお客様の場合、スライダープラグインが自動更新された際にjQueryのバージョン競合が発生。該当プラグインを無効化することで即座に復旧しました。
ステップ4：キャッシュクリアの実行
キャッシュが原因でJavaScriptの読み込みが失敗することもあります：
- ブラウザキャッシュ：
Ctrl + F5（強制再読み込み） - CDN/サーバーキャッシュ：WordPressの場合、キャッシュプラグインの管理画面から「全削除」
- WordPressキャッシュ：wp-content/cache フォルダを削除
ステップ5：応急処置コードの追加
どうしても原因が特定できない場合の応急処置として、以下のコードをテーマのfunctions.phpに追加することで、エラーの原因となるスクリプトを無効化できます：
// 問題のあるスクリプトを無効化（応急処置用）
function emergency_dequeue_scripts() {
// 特定のスクリプトを無効化
wp_dequeue_script('problematic-script-handle');
// jQuery関連の競合を避ける場合
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0', true);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'emergency_dequeue_scripts', 100);
注意：このコードは応急処置です。根本的な解決のためには、原因の特定と適切な修正が必要です。
よくある失敗パターンと対処法
失敗パターン1：慌ててプラグインをすべて削除
緊急時によくあるのが、慌ててプラグインをすべて削除してしまうケースです。確かにサイトは復旧しますが、必要な機能まで失ってしまいます。
正しい対処法：
- プラグインフォルダの名前変更で一時的に無効化
- サイト復旧を確認してから、1つずつ有効化して原因を特定
- 設定やデータは保持される
失敗パターン2：テーマファイルを直接編集
「functions.phpを編集すれば直る」という情報を見て、知識不足のまま編集してしまうケース。構文エラーでさらに状況が悪化することがあります。
正しい対処法：
- 編集前には必ずバックアップを取得
- 子テーマを使用して編集
- 構文チェッカーで確認してからアップロード
失敗パターン3：CDNの設定ミスを見落とす
CloudflareなどのCDNを使用している場合、設定変更がJavaScript読み込みに影響することがあります。
対処法のフロー：
flowchart TD
A[サイト真っ白発生] --> B[CDN使用中？]
B -->|Yes| C[CDNを一時的にバイパス]
B -->|No| D[プラグイン確認へ]
C --> E[サイト復旧？]
E -->|Yes| F[CDN設定を見直し]
E -->|No| G[他の原因を調査]
F --> H[最適化設定を調整]失敗パターン4：本番環境で直接作業
焦って本番環境で試行錯誤してしまい、状況をさらに悪化させるケース。
推奨する対応手順：
まとめと次のステップ
JavaScript読み込みエラーによるサイトの真っ白化は、適切な診断手順を踏めば短時間で解決できる問題です。重要なのは慌てずに段階的にアプローチすることです。
今回ご紹介した診断術により、エラーの原因特定時間は大幅に短縮されます：
ただし、根本的な解決や再発防止策については、専門的な知識と経験が必要になることもあります。特に以下のような場合は、早めに専門業者に相談することをお勧めします：
- 複数のエラーが同時に発生している
- カスタム開発されたテーマやプラグインが関わっている
- データベースエラーも併発している
- SSL証明書の問題も関連している
次に取るべきアクション：
予防が最も重要ですが、万が一の際にはこの診断術を思い出してください。Fivenine Designでは、このような緊急事態への対応サポートも行っております。技術的なサポートが必要な場合や、根本的な改善をお考えの際は、お気軽にご相談ください。
20年以上の実績に基づく確実な対応で、あなたのWebサイトを守ります。
