503 メンテナンス画面
このパーツは、サイトメンテナンス中（HTTP 503 相当）に表示する案内画面です。中央に @keyframes でゆっくり回転する工具アイコン（インライン SVG）を置き、その下に h1 の状況説明、復旧予定時刻のバッジ、SNS への誘導リンクを縦に並べます。
このパーツの使いどころと実装ポイント
このパーツは、サイトメンテナンス中（HTTP 503 相当）に表示する案内画面です。中央に @keyframes でゆっくり回転する工具アイコン（インライン SVG）を置き、その下に h1 の状況説明、復旧予定時刻のバッジ、SNS への誘導リンクを縦に並べます。背景は濃色の linear-gradient、本文は読みやすい line-height:1.9 で、落ち着いたトーンに整えています。
向いている場面
計画メンテナンス、サーバー移行、大型アップデートの作業中など、一時的に閉じている理由と再開時刻を丁寧に伝えたい場面に向きます。素っ気ないエラー文ではなく、復旧予定とSNS導線を示すことで、訪問者の不安と離脱を和らげられます。ECや会員サービスのメンテ告知に向く構成です。
カスタマイズと注意点
- 復旧予定時刻はサンプルの固定文字列です。実運用では作業ごとに更新し、タイムゾーンを明記すると誤解を防げます。
- 本物のメンテナンス画面では、サーバー側で
503ステータスとRetry-Afterヘッダーを返すのが正しい作法です。これにより検索エンジンが一時的な停止と理解します。 - 回転アニメは
prefers-reduced-motionで停止させると、動きに敏感な利用者へ配慮できます。SNSリンクはhrefを実URLに差し替えてください。
よくある質問
メンテナンス画面でも正しいHTTPステータスを返すべきですか？
返すべきです。サーバー側で503ステータスとRetry-Afterヘッダーを設定すると、検索エンジンが一時的な停止と判断し、メンテ画面を本来のページとしてインデックスしてしまう事故を防げます。見た目の画面だけでなくサーバー設定もセットで考えてください。
復旧予定時刻はどう書くのがよいですか？
具体的な日時に加えてタイムゾーン（例：JST）を明記すると、海外からのアクセスでも誤解されません。作業が延びそうな場合に備え、固定の文言ではなく更新しやすい形にしておき、わかった時点で早めに修正するのが親切です。