なぜ顧客にアップタイムを見せるのか

サイトがダウンしたとき、顧客はこう考えます。「自分だけ見えないのか、それとも全員に見えていないのか?」

ステータス情報がないと、顧客は次のような行動を取ります。

ページを必死にリロードする
別のブラウザやデバイスで試す
サポートに電話する(あなたの時間を浪費する)
「信頼できないサービスだ」と思い込む(信頼を損なう)

シンプルなステータスウィジェットがあれば、顧客の疑問にこう答えられます。「はい、ダウンしているのは把握しています。現在修正中です。」

ステータスウィジェットに表示される内容

Nova Uptime Status Widget

🟢 All Systems Operational

Last 30 days: 99.87% uptime
Last incident: Feb 18, 14:32-14:47 UTC (15 min)

Recent Status:
✅ mysite.com - Up
✅ api.mysite.com - Up
✅ Email Service - Up

[View full status] [Subscribe to updates]

埋め込みウィジェットの選択肢

オプション1:ウェブサイトに埋め込むiframe#

ウェブサイトのフッターまたは専用のステータスページに追加します。

<iframe
  src="https://status.novauptime.com/embed/your-embed-token"
  style="width: 100%; height: 400px; border: none;">
</iframe>

ページのリロードなしに、60秒ごとに自動更新されます。

オプション2:独立したステータスサブドメイン#

status.yourcompany.com を作成し、次の情報を表示する完全なステータスページを公開します。

すべてのサービスの現在のステータス
インシデント履歴
復旧予定時刻
顧客向け通知

オプション3:インラインのステータスバッジ#

ヘッダーにシンプルなバッジを表示します。

[🟢 All Systems Up] [View Status]

完全なステータスページまたはダッシュボードへのリンクとして機能します。

ステータスウィジェットのメリット

サポート負担の軽減

ステータスウィジェットがない場合:

顧客:「サイトがダウンしています」
サポート:「確認します……はい、把握しており、修正中です」
顧客:「では、なぜステータスページに掲載されていないのですか?」

ステータスウィジェットがある場合:

顧客はすぐにステータスを確認できる
認識して対応中であることを把握できる
サポートに連絡しない

結果:サポートチケットが減り、本当に必要な対応により早く着手できます。

信頼と透明性

リアルタイムのステータスを示すことで、次のことが伝わります。

インフラを監視している
問題に対して誠実である
顧客とのコミュニケーションを大切にしている
可用性を重視している

調査によると、透明性のあるステータス表示は障害時および障害後のチャーンを40%削減します。

競争上の優位性

競合他社にはステータスウィジェットがなく、あなたにはあります。

障害発生時に顧客があなたか競合かを選ばなければならない場合:

競合:「ダウンしているのか?」(情報なし)
あなた:「はい、把握しています。現在修正中、ETA 30分」(明確なステータス)

顧客はあなたを信頼するようになります。

Nova Uptimeのステータスウィジェットを設定する#

ステップ1:埋め込みウィジェットを有効化#

Nova Uptimeダッシュボードにログイン
ドメイン設定に移動
「Embed Settings」をクリック
「Enable Embed Widget」をオンにする
埋め込みトークンをコピーする

ステップ2:ウィジェットの外観をカスタマイズ#

次の項目を選びます。

カラーテーマ:ライト / ダーク / カスタム
表示するコンポーネント:アップタイム%、最近のインシデント、サービス一覧
更新頻度:30秒、1分、5分
履歴期間:過去7日、30日、90日

ステップ3:ウェブサイトに追加#

オプションA:HTML iframe

<!-- Place in footer or dedicated page -->
<div id="gum-status-widget">
  <iframe
    src="https://status.novauptime.com/embed/YOUR_TOKEN?color=dark"
    width="100%"
    height="500px"
    style="border: none;">
  </iframe>
</div>

オプションB:Reactコンポーネント

import { NovaUptimeStatusWidget } from '@novauptime/react-status';

export default function StatusPage() {
  return <NovaUptimeStatusWidget token="YOUR_TOKEN" theme="dark" />;
}

オプションC:独立したページ status.yourcompany.com を作成してリンクを設定します。

[Check Status Page]

ウィジェットコンテンツのカスタマイズ

表示する内容

基本(多くのサイトに推奨)

全体ステータス(稼働中/ダウン)
30日間のアップタイム%
直近のインシデントと継続時間

詳細(SaaS向け)

各サービスのステータス(API、ダッシュボード、メール)
リアルタイムの応答時間
進行中のインシデントと更新情報
インシデント履歴(直近10件)
顧客向けのアップデートメッセージ

表示するサービスを選ぶ

詳細すぎる例:顧客を混乱させます

- Load Balancer: Up
- API Node 1: Up
- API Node 2: Up
- Cache Layer: Up
- Database Primary: Up
- Database Replica: Up

ちょうどよい例:顧客が気にしている内容を表示します

- Website: Up
- API: Up
- Email Service: Up

障害発生時のメッセージング

インシデントが発生したら、ステータスウィジェットを更新します。

発生中(リアルタイム更新)

🟡 Partial Outage - Investigating
API is currently unavailable due to database connectivity issues.
Started: 14:32 UTC
Expected fix: In progress

復旧後(解決の確認)

✅ Resolved
Database connectivity has been restored. All services are operational.
Incident duration: 15 minutes
Resolved: 14:47 UTC

事後対応

Post-Mortem: [Link to incident review]
We experienced a database failover that took 15 minutes to complete.
[Details of what we learned and how we're preventing this]

技術的な考慮事項

CORSとクロスオリジン#

ウィジェットはJavaScriptで更新されます。ウェブサイトでこれを許可していることを確認してください。

// Runs on your website, fetches from Nova Uptime
fetch('https://api.novauptime.com/embed/YOUR_TOKEN/status')
  .then(response => response.json())
  .then(data => updateWidget(data));

Nova UptimeのCORSヘッダーは、これを自動的に許可します。

パフォーマンス

ウィジェットはページサイズを50KB未満しか増やさず、ページの読み込みをブロックしません。

更新は60秒ごとに非同期で実行され、ユーザー体験を妨げません。

SEOへの影響#

ステータス情報はJavaScriptで動的に更新されるため、SEOに直接影響しません。ただし、ステータスページがあると次の点で改善されます。

サイト滞在時間(ユーザーがステータスを確認する)
再訪問(ステータスページがブックマークされる)
信頼シグナル(適切なインシデント管理)

代替案:外部のステータスページ

ウェブサイトに埋め込みたくない場合は、次のようにします。

https://yourcompany.statuspage.io

これは顧客がブックマークして確認できる別ドメインです。メインサイトをすっきり保ちながら、十分なステータスの透明性を提供できます。

Nova Uptimeの利点:別ツールは不要です。ステータスウィジェットが標準で備わっています。

ウィジェットの効果測定

次の項目を計測しましょう。

ステータスウィジェットを確認した訪問者数
ステータスページの平均滞在時間
インシデント中にユーザーが再訪問するかどうか
障害発生時のサポートチケット数(減少するはず)

これらをもとにステータスページの内容と見せ方を改善します。

ベストプラクティス

インシデント中に更新する:沈黙より手動の更新の方が良い
現実的なETAを示す:わからないなら「Fixed in 10 min」より「Investigating」の方が良い
インシデント後にポストモーテムを公開する:何が起きたかを共有すると顧客に喜ばれる
常に最新に保つ:古いウィジェットは無いより悪影響
見える場所に置く:フッターの一番下に隠さない

まとめ

Nova Uptimeで埋め込みウィジェットを有効化する
外観とコンテンツをカスタマイズする
ウェブサイトにiframeを追加するか、専用のステータスページを作成する
インシデントの最中と事後にステータスを更新する
サポートドキュメントやヘルプセンターからリンクする
効果を計測して改善を繰り返す

今日から顧客の信頼を築き始めましょう: Nova Uptimeダッシュボードのドメイン設定から埋め込みウィジェットを有効化できます。すべてのプランに含まれます。🚀

埋め込み型ステータスウィジェット:顧客に稼働状況を見せる