混在コンテンツ警告の修正方法：HTTPSサイトで画像が表示されない原因と対処法

安全なサイトを構築したのに、Chromeに「保護されていない通信」と表示されたり、画像が表示されなかったりする。これは混在コンテンツ警告です。ここでは、その原因と、ノーコードやAIで構築したサイトでもすぐに修正する方法を解説します。

HTTPSページでブラウザがHTTPリソースをブロックする理由

ページがHTTPSで読み込まれると、ブラウザはそのページ上のすべてのリソース（画像、スクリプト、スタイルシート、フォント、iframe）もHTTPSで読み込まれることを期待します。たとえ1つでも古いhttp://アドレスを使っているリソースがあれば、ブラウザはそのページを混在コンテンツとして扱います。

ブラウザがこうする理由は単純です。ページの一部が改ざんされる可能性があるなら、安全な鍵アイコンには意味がありません。公共Wi-Fi上の攻撃者が安全でないリソースを通じてスクリプトを注入し、フォームデータを盗んだり訪問者をリダイレクトしたりできるからです。そのため、Chrome、Firefox、Safari、Edgeは現在、混在コンテンツをデフォルトでブロックまたはダウングレードします。

その結果は目に見えて、深刻な影響を及ぼします：

• 画像や動画が気づかないうちに読み込まれない
• 埋め込み地図やフォームが空白のボックスになる
• カスタムスクリプトが動作しなくなる
• アドレスバーから鍵アイコンが消え、「保護されていない通信」と表示される

小規模事業者にとって、これは信頼の喪失と売上の損失です。訪問者が問題を報告することはほとんどなく、ただ離脱してしまいます。

Chrome DevToolsで混在コンテンツ警告を見つける方法

原因を突き止めるのに開発者である必要はありません。Chrome DevToolsは、どのリソースが安全でないかを正確に表示します。

1. Chromeでページを開きます。
2. 任意の場所を右クリックして検証を選択するか、Ctrl+Shift+I（Windows）/ Cmd+Option+I（Mac）を押します。
3. Consoleタブをクリックします。「Mixed Content」に言及した赤または黄色のメッセージを探します。
4. 各警告には、問題を引き起こしている正確なURL（例：http://example.com/photo.jpg）が示されます。
5. Networkタブに切り替え、ページを再読み込みし、「blocked」または「insecure」とマークされたリクエストを探します。

簡単なショートカット：アドレスバーの鍵アイコンまたは「保護されていない通信」アイコンをクリックします。Chromeは安全でないリソースを直接一覧表示します。そのリストをスクリーンショットしてください — それが修正チェックリストになります。

ノーコードまたはAI構築サイトで最も一般的な3つの修正方法

webcekeのようなAIウェブサイトビルダーで構築されたサイトでは、通常HTMLに触れることはありません。修正はほぼ常に次の3つのいずれかです。

1. 画像とメディアを再アップロードする

画像が古いソースやhttp://のみを提供するサードパーティホストから貼り付けられた場合、サイトのメディアライブラリを通じて再アップロードします。ビルダーは自動的にHTTPSで保存・配信します。ページエディタで古い画像を置き換え、再公開します。

2. 埋め込みURLをHTTPSに切り替える

地図の埋め込み、YouTube動画、予約ウィジェット、レビューバッジはよく問題になります。埋め込み設定を開き、URLを確認します：

• http://をhttps://に変更する
• プロバイダーが安全な埋め込みコードを提供している場合は、最新版をコピーする
• HTTPSをまったくサポートしていないプロバイダーの埋め込みは削除する

主要なプラットフォームのほとんど（Google Maps、YouTube、Vimeo、Calendly）はHTTPSをサポートしています。1文字の編集で警告全体が解決することがよくあります。

3. カスタムスクリプトとトラッキングコードを更新する

アナリティクス、チャットウィジェット、カスタムJavaScriptを追加した場合、スクリプトのソースを確認します。古いトラッキングスニペットはhttp://エンドポイントを指していることがよくあります。スニペットをHTTPS版に更新するか、プロバイダーが廃止されている場合は削除します。webcekeのカスタムコードエリアで、修正したスニペットを貼り付けて保存します。

変更後は、ページをハードリフレッシュ（Ctrl+Shift+R）してConsoleを再確認します。混在コンテンツ警告がなくなるまで繰り返します。

小規模事業者向けの簡単な公開前チェック

新しいページを告知したりキャンペーンを送信したりする前に、この60秒チェックを実行してください：

1. デスクトップのChromeで公開ページを開きます。
2. 鍵アイコンが表示され、「保護されていない通信」というテキストがないことを確認します。
3. DevTools Consoleを開き、赤い混在コンテンツエラーがないか確認します。
4. ページ全体をスクロールし、すべての画像、地図、フォームが読み込まれることを確認します。
5. スマートフォンでも繰り返します。モバイルネットワークでは異なるリソースが表面化することがあるためです。

すべて合格すれば問題ありません。そうでなければ、上記の3つの修正（再アップロード、HTTPSへの切り替え、スクリプトの更新）を順に試してください。

一度修正すれば、あとはビルダーに任せる

混在コンテンツ警告は厄介ですが、ほとんどは深い技術的問題ではなく、いくつかの古いURLが原因です。一度修正すれば、最新のプラットフォームは新しいアップロードや埋め込みをデフォルトで安全に保ちます。

webcekeはHTTPSでページを構築し、アップロードしたメディアを安全に配信するため、混在コンテンツの最も一般的な原因は発生する前に解消されます。コンソールエラーではなく顧客に時間を費やしたいなら、webcekeを無料で試して、数分で安全な多言語サイトを公開しましょう。