2026年10月8日(木)

HTMLサイトの名称変更に伴うお知らせ表示と自動転送を実装した事例

Webサイトの名称変更や新しい公式サイトへの移行に伴い、旧サイトを訪れた方へ変更内容を案内したいというご相談があります。単純に新サイトへ自動転送するだけでは、訪問者が名称変更に気づかず、突然別のサイトへ移動したように感じてしまう可能性があります。

今回は、既存のHTMLサイトに名称変更のお知らせを表示し、10秒後に新しい公式サイトへ自動転送する仕組みを実装しました。また、訪問者が自分で移動先を選べるよう、新サイトへのリンクと、自動転送を停止できる閉じるボタンも設けています。

JavaScriptによる時間制御とCSSによる表示調整を組み合わせ、既存サイトの構成を大きく変更せずに対応した事例をご紹介します。

今回のご相談内容

今回ご相談いただいたのは、医院名の変更に伴う旧公式サイトから新公式サイトへの案内についてです。名称は変更されるものの、診療体制は従来どおり継続するため、旧サイトを訪れた方にもその内容を正しく伝えたいというものでした。

ご希望の仕様は、旧サイトにアクセスした際に「名称変更のお知らせ」を表示し、新しい公式サイトのURLを案内することでした。さらに、何も操作しなかった場合は10秒後に新サイトへ自動転送し、訪問者が閉じるボタンを押した場合は転送を停止できるようにする必要がありました。

対象はWordPressではなく、HTMLで構築された既存サイトです。そのため、プラグインなどを利用するのではなく、HTML・CSS・JavaScriptを組み合わせて実装する方針としました。

発生していた症状・エラー内容

今回の対応は、既存サイトに発生した不具合の修正ではなく、名称変更に伴う新しい案内機能の追加です。ただし、実装時には既存サイトのCSSが影響し、案内画面内のリンクボタンで文字と背景がともに黒くなり、文字が読みにくくなる問題がありました。

Webサイトでは、既存のスタイル設定が新しく追加した要素にも適用されることがあります。特にリンクやボタンは、サイト全体で文字色や背景色が指定されている場合があり、追加したCSSだけでは想定どおりの表示にならないことがあります。

今回も、案内画面そのものの構成ではなく、既存のデザイン設定との兼ね合いを考慮して、ボタンの文字色と背景色を調整する必要がありました。

原因の特定ポイント

まず検討したのは、新サイトへの転送方法です。HTMLサイトで一定時間後に別のページへ移動させる方法としては、HTMLのmeta refreshを利用する方法と、JavaScriptで転送処理を制御する方法があります。

しかし、今回の仕様では単純な自動転送だけでなく、訪問者が閉じるボタンを押した場合に転送を停止する必要がありました。meta refreshによる転送では、このような操作に応じた停止処理を柔軟に管理しにくいため、JavaScriptのタイマー機能を使用する方が適していると判断しました。

また、ボタンの表示については、既存サイトのCSSが新しく追加したリンク要素にも影響している可能性が考えられました。そこで、案内画面専用のクラス名を使用し、文字色や背景色を明示的に指定することで、既存デザインとの干渉を抑える方針としました。

実際に行った対応内容

今回の実装では、既存サイトのHTMLに名称変更のお知らせを表示するためのモーダル画面を追加しました。モーダルとは、ページの手前に重ねて表示する案内画面のことです。背景を半透明の黒で覆い、中央に白い案内画面を表示することで、訪問者が変更内容を確認しやすい構成にしています。

案内画面には、医院名が変更されたこと、診療体制は従来どおり継続すること、新しい公式サイトへ10秒後に自動移動することを記載しました。また、新サイトへのリンクを設置し、10秒待たなくても訪問者自身の操作で移動できるようにしました。

自動転送にはJavaScriptのタイマー機能を使用しています。ページの読み込み後に10秒間のタイマーを開始し、画面上には残り時間をカウントダウン表示する仕組みです。閉じるボタンが押された場合は、案内画面を非表示にすると同時に転送用タイマーも解除し、旧サイトをそのまま閲覧できるようにしています。

デザイン面では、既存サイトのCSSによってボタンの文字が読みにくくなる問題に対応しました。通常時は黒背景に白文字とし、マウスを重ねた際には白背景に黒文字、黒い枠線が残るデザインへ変更しています。これにより、ボタンの状態変化が分かりやすくなるよう調整しました。

さらに、スマートフォンなどの画面幅が狭い端末でも案内内容を確認しやすいよう、画面サイズに応じて余白や文字サイズが変わるCSSも追加しました。

対応後の結果・改善点

今回の実装により、名称変更のお知らせ、新公式サイトへのリンク、10秒後の自動転送、閉じるボタンによる転送停止という、必要な機能を一つの案内画面にまとめることができました。

また、ボタンの文字色と背景色の指定を見直し、通常時とマウスを重ねた際の表示を明確に分けることで、既存サイトのデザインとの干渉にも対応しました。

単純に旧サイトから新サイトへ移動させるだけでなく、訪問者が変更内容を確認してから移動できる構成になったことが、今回の改善点です。なお、実際の公開環境における全端末での動作確認や、公開後のアクセス状況については、今回の対応記録には含まれていません。

今回の対応から分かったこと

今回の対応で重要だったのは、自動転送の機能を実装することだけでなく、訪問者が状況を理解できる案内方法を選ぶことでした。

名称変更やサイト移転では、旧サイトをブックマークしている方や、以前の案内からアクセスする方も想定されます。そのような場合、何の説明もなく新サイトへ移動すると、訪問者が戸惑う可能性があります。

一方で、案内画面を表示するだけでは、訪問者が新しいサイトへの移動操作を行う必要があります。今回のように、変更内容の説明と自動転送を組み合わせることで、案内の分かりやすさと移動の手間の軽減を両立できます。

また、既存サイトに新しい機能を追加する場合は、機能そのものが正しく設計されていても、既存のCSSによって表示が崩れることがあります。HTMLやJavaScriptだけでなく、実際の表示状態も確認しながら調整することが大切だと分かる事例でした。

同様のトラブルを防ぐために

Webサイトの名称変更や移転を行う際には、新しいサイトへ移動できることだけでなく、旧サイトを訪れる方への案内方法も事前に検討しておくことが重要です。

例えば、名称変更の理由や変更後も継続するサービスについて説明する必要がある場合は、すぐに転送するのではなく、一定時間お知らせを表示する方法が考えられます。また、訪問者が自分で移動先を選べるよう、リンクや転送停止の操作を用意しておくことも一つの方法です。

実装時には、既存サイトのCSSとの干渉、スマートフォンでの表示、リンクの文字色や背景色、転送停止の動作などを確認する必要があります。特に、自動転送を停止する機能を設ける場合は、画面を閉じるだけでなく、転送処理そのものが解除される設計になっているかが重要です。

なお、今回のような案内画面による転送とは別に、サイト移転に伴う検索エンジンへの対応も検討する必要があります。旧サイトのURLを新サイトへ恒久的に移転する場合には、301リダイレクトなどの方法が適していることもあります。どの方法を選ぶかは、旧サイトを残す必要性や移転の目的に応じて判断することが大切です。