§25-01
環境バッジ (staging/dev)
ステージングや開発環境であることを帯で常に示す。
どの環境を触っているかが一目でわかり、本番と間違えた操作を防ぐ。環境を複数持つ管理画面や社内ツールに置く。
実装のポイント環境名はビルド時の環境変数から差し込み、本番では表示しない。本番以外は色付きの帯を常に最上部に固定し、誤操作を防ぐ。
- CSS のみ
§25
メタ表示・ステータス
Meta
- Patterns
- 8
- Demos
- 8
§25-02
バージョン表示 (footer)
フッターに動作中のバージョンを表示する。
利用者と開発者が同じ版を見ているかを確かめる。不具合報告でどの版か分からず再現できない問題に効く。
実装のポイントバージョンとコミットハッシュはビルド時に環境変数で埋め込み、選択してコピーしやすい等幅で出す。問い合わせ時に添付してもらう用途を想定する。
- CSS のみ
§25-04
接続状態 indicator
オンライン・オフラインの状態を色と文言で示す。
通信が切れたことを即座に伝え、保存されない操作を続けさせない。チャットや共同編集など、常時接続を前提とする画面に置く。
実装のポイントnavigator.onLine は信頼度が低いので online/offline イベントと実際のリクエスト失敗を併用し、状態変化は role=status で通知する。
- ブラウザ API
- 状態管理
§25-05
同期 indicator
同期中・完了・オフラインの状態を表示する。
変更が保存されたかを利用者が確かめられ、オフラインでも安心して作業を続けられる。自動保存のエディタやメモアプリで使う。
実装のポイント同期中・完了・オフラインの 3 状態を色とアイコンと文言で区別し、オフライン中は未送信件数を出す。経過時間は相対表記で定期更新する。
- タイマー
- 状態管理
§25-06
最終更新時刻 (relative)
更新時刻を「3 分前」のような相対表現で示す。
情報の新しさを瞬時に判断させる。更新頻度の高い一覧やコメントで、日付を読む手間を省く。
実装のポイント相対時刻は Intl.RelativeTimeFormat で整形し、time 要素の datetime と title に絶対時刻を残す。更新間隔は経過時間に応じて粗くしてよい。
- タイマー
§25-07
Tooltip ツアー再生
ツールチップのツアーをあとで再生できるようにする。
初回のツアーを飛ばした、または忘れた利用者が自分のタイミングで見直せる。機能が多く学び直しが発生するアプリで効く。
実装のポイントヘルプやアカウントのサブメニューに「ツアーをもう一度」を置き、既読フラグをリセットして最初のステップから再生する。
デモはTour 再生ボタンと共通です。
- 永続化
§25-08
Maintenance banner
メンテナンスの予定や実施中であることを告知する。
停止の予定を事前に知らせ、作業中に使えなくなる驚きを減らす。計画停止のあるサービスで、問い合わせの増加を抑える役も持つ。
実装のポイント予定時刻は利用者のタイムゾーンでも併記し、閉じた状態は告知 ID ごとに保存する。内容が変われば再表示する。
- 永続化