メンテナンス画面
サービス停止中を知らせるメンテナンス画面。歯車がゆっくり回るイラストと、再開予定時刻を中央にまとめて表示する。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 計画停止中の全画面案内
- 再開予定時刻を明示した告知
- デプロイ中の一時的な差し替え画面
- 避ける場面
- 一部機能だけ停止のとき（該当箇所にバナー）
- 再開予定が書けない長期停止
- HTTP 200 で返す（クローラーに誤認）
- 構成要素
- イラスト（歯車）
- 見出し
- 補足文
- 再開予定ピル
- 持っている状態
- 通常
- キーボード
操作要素なし（情報表示のみ）。問い合わせ先などを足すならリンクにする
- 支援技術
歯車は aria-hidden の装飾。状態と再開予定はテキストで伝わる（tabular-nums）。reduce で回転停止。実装時は HTTP 503 と Retry-After を返す
- 動き
大歯車 9s・小歯車 6s 逆回転の linear 無限回転。作業中であることを穏やかに示す
デザインの要点
- 再開予定はピルに切り出して唯一の強調にする。利用者が知りたいのは理由ではなく「いつ戻るか」
- 歯車は 9s と 6s の逆回転で噛み合って見せる。同方向・同速だと歯車ではなく回る飾りになる
- 歯車の transform-origin は各歯車の中心座標を指定する。既定の左上のままだと大きく振り回される
- 本番では HTTP 503 と Retry-After を返す。200 で出すとクローラーがこの画面を本文として記憶する
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="mt">
<div class="mt-art" aria-hidden="true">
<svg width="88" height="88" viewBox="0 0 88 88" fill="none">
<!-- 大きな歯車 -->
<g class="mt-gear mt-gear--a" style="transform-origin:32px 34px">
<path d="M32 18l2.6.5 1.7-2 2.9 1.2-.2 2.6 2.1 1.6 2.4-1 1.7 2.6-1.7 2 .8 2.5 2.6.6v3l-2.6.6-.8 2.5 1.7 2-1.7 2.6-2.4-1-2.1 1.6.2 2.6-2.9 1.2-1.7-2-2.6.5-.9-2.5h-2.6l-.9 2.5-2.6-.5-1.7 2-2.9-1.2.2-2.6-2.1-1.6-2.4 1-1.7-2.6 1.7-2-.8-2.5-2.6-.6v-3l2.6-.6.8-2.5-1.7-2 1.7-2.6 2.4 1 2.1-1.6-.2-2.6 2.9-1.2 1.7 2 2.6-.5.9 2.5h2.6l.9-2.5z" fill="#eef1fb" stroke="#2b50c7" stroke-width="1.6" stroke-linejoin="round"/>
<circle cx="32" cy="34" r="6" fill="#fbf6ec" stroke="#2b50c7" stroke-width="1.6"/>
</g>
<!-- 小さな歯車 -->
<g class="mt-gear mt-gear--b" style="transform-origin:58px 58px">
<path d="M58 46l1.9.4 1.2-1.5 2.2.9-.2 1.9 1.6 1.2 1.8-.8 1.3 1.9-1.3 1.5.6 1.9 1.9.4v2.3l-1.9.4-.6 1.9 1.3 1.5-1.3 1.9-1.8-.8-1.6 1.2.2 1.9-2.2.9-1.2-1.5-1.9.4-.7-1.8h-1.9l-.7 1.8-1.9-.4-1.2 1.5-2.2-.9.2-1.9-1.6-1.2-1.8.8-1.3-1.9 1.3-1.5-.6-1.9-1.9-.4v-2.3l1.9-.4.6-1.9-1.3-1.5 1.3-1.9 1.8.8 1.6-1.2-.2-1.9 2.2-.9 1.2 1.5 1.9-.4.7 1.8h1.9z" fill="#eef1fb" stroke="#7fa4ff" stroke-width="1.4" stroke-linejoin="round"/>
<circle cx="58" cy="58" r="4.5" fill="#fbf6ec" stroke="#7fa4ff" stroke-width="1.4"/>
</g>
</svg>
</div>
<p class="mt-title">メンテナンス中</p>
<p class="mt-sub">より快適にご利用いただくため、システムのメンテナンスを行っています。</p>
<div class="mt-eta">
<span class="mt-eta-label">再開予定</span>
<span class="mt-eta-time">本日 15:00 頃</span>
</div>
</div>
</div>