ウェブサイト
サービスランブックのウェブサイトデザイン
auth-service ランブックのデザインは、サービスの責任範囲、アラート対応、デプロイ手順、インシデントの引き継ぎを、ひと目で把握できる運用リファレンスにまとめます。
ランブックサイトの活用シーン
- オンコールのインシデント対応重大度、初動対応、エスカレーションの指針をすばやく見つけられます。
- サービスオーナーシップの文書化範囲、依存関係、顧客向けサービスへの影響を説明します。
- デプロイ復旧ワークフローリリース、ロールバック、鍵のローテーションの手順をひとまとめにします。
- 運用ランブックのデザイン密度の高い技術情報を、繰り返しすばやく使えるよう構成します。
運用リファレンスの見どころ
- サービスコンテキストオーナー、バージョン、レビュー日、本番ティアをまとめて表示します。
- アラート対応表しきい値が、重大度、意味、最初のアクションを結びつけます。
- 手順ブロックコマンドと運用上の注意点を、読みやすい一つの流れにまとめます。
- インシデントタイムライン5つの対応ステップが最初の30分を整理します。
サービス概要からインシデント引き継ぎまで
1 / 5
auth-service ランブックのデザイン
この公式の OpenDesign ウェブサイト例は、Northwind の ID サービスのランブックを一つの運用リファレンスとして提示します。見出しは「auth-service」で、続いてオーナー、バージョン、レビュー日、そして「TIER 0 · PRODUCTION-CRITICAL」のステータスが並びます。この冒頭部分により、読み手がアラートやコマンドに到達する前に、サービスの責任範囲が示されます。
サービス概要では、Web、モバイル、公開 API にまたがるセッショントークンの発行、検証、失効が挙げられています。パスワードストア、TOTP/WebAuthn の登録、監査ログライターも明記されています。そのため、対応者は手順を選ぶ前に、このサービスが担う顧客に関わる責務とセキュリティ関連の責務を確認でき、状況把握に役立ちます。
対応する運用タスク
このデザインは、関連する複数のタスクを別ページに分けずに支えます。構成はサービスの範囲から依存関係、アラート、手順、オンコール体制、インシデント対応へと進みます。この順序により、アラートを単独で解釈する必要が減ります。読み手はまずサービスが何を担うかを知り、その一部に障害が出たときの対応を学べます。
依存関係リストでは、Postgres、Redis、KMS、SES、Pager について、名前と状態のパターンが繰り返されます。4件は healthy で、SES · transactional は degraded とされています。右揃えの状態表示は見やすさに役立ちますが、これはサンプルデザイン上のスナップショットであり、ライブのヘルスチェックを実証するものではありません。
| セクション | 表示内容 | 読み手の用途 |
|---|---|---|
| サービス概要 | オーナー、範囲、セッションの挙動、依存関係 | 影響範囲とシステムの境界を把握する |
| 呼び出される可能性のあるアラート | しきい値、重大度、意味、初動対応 | 最初の調査の進め方を選ぶ |
| よく使う手順 | デプロイ、ロールバック、鍵のローテーション、バックログのコマンド | 名前の付いた運用ワークフローに従う |
| インシデント対応 | 最初の30分に向けた番号付きの5つのアクション | 確認応答、緩和、引き継ぎを調整する |
アラートから手順へ
アラートセクションは、アラート、重大度、意味、初動対応という4カラムの判断用の表として設計されています。たとえば「auth.login_5xx_rate greater than 1%」は「SEV-1」、顧客がロックアウトされるという説明、Postgres と Redis のダッシュボードを確認する指示と組み合わされています。明示されたしきい値は対応者にトリガーを与え、文章が解釈を補います。ただし実際のランブックでは、サンプル値に検証済みの監視ソースが必要になるというトレードオフがあります。
手順セクションでは、コンパクトな行から、見出し、利用メモ、説明文、コマンドパネルを備えた大きなブロックへとリズムが変わります。「Deploy a new version」では、フローが blue/green であり、昇格前に連続2回のヘルスチェックを待つことが示されています。表示されるトラフィックの順序「10% / 50% / 100%」は段階的なロールアウトを伝えます。大きなブロックは縦のスペースを多く使いますが、その分コマンドを安全に読み取れます。
コマンドと制約
手順ブロックでは、アクションと注意点が隣り合って置かれます。ロールバックはデプロイ後のエラー率が 1% を超えたときに使うものとして示され、署名鍵のローテーションには「Schedule with security; never solo」とあります。監査ログの手順は、バックログのアラートに明確に結びつけられています。これらの組み合わせは情報設計上の有効な選択を示しています。コマンドだけでは十分とせず、周囲の条件が、そのコマンドをいつワークフローに用いるかを定めています。
インシデントの流れと機能の境界
最後のインシデント対応セクションは、最初の30分を番号付きの5枚のカードに変換します。流れは、5分以内の確認応答に始まり、専用のインシデントチャンネルの開設、10分ごとの状況スナップショットの投稿、緩和の優先、そして引き継ぎまたは対応終了で終わります。番号によって意図された順序が見えます。2カラム配置により最初の4つのアクションはコンパクトに収まり、5枚目のカードは自身の内容の幅だけを占めます。
これはデザインのみのウェブサイト例です。キャプチャされたページには、コマンド、ステータス、名前、「rolled back to v4.7.2 in 38 s」のようなサンプル結果が表示されていますが、それらのコマンドが実行されること、サービスが接続されていること、表示された運用結果が計測されたものであることを裏づけるものではありません。応用する際は、文書化された指針と検証済みのランタイムデータの区別を保ってください。
呼び出しに確認応答する
デザインは /ack と5分間の対応ウィンドウで始まり、最初の連携義務を明確にします。
インシデントチャンネルを開設する
2枚目のカードには、専用の対応スペースを作るために使うサービス名と短いタイトルのパターンが示されています。
状況スナップショットを投稿する
3枚目のカードは、顧客への影響、現時点で分かっていること、次の確認事項を、繰り返し使える更新にまとめます。
緩和して引き継ぐ
最後の2枚のカードは、ロールバックまたはセキュリティへのエスカレーションを優先し、その後に引き継ぎと完了を定めます。
OpenDesign でサービスランブックのウェブサイトデザインを作成する方法
サービスの境界を定義する
サービス名、オーナー、バージョン、レビュー日、本番ティア、顧客に影響する責務、依存関係の状態から始めます。影響と実装の詳細を区別できる程度に、要約を具体的にしてください。
推奨プロンプトNorthwind の ID プラットフォームにおける auth-service 向けに、ダークでデスクトップ優先のサービスランブックWebサイトを作成してください。幅広の中央寄せページに、サービスヘッダー、ティアバッジ、2カラムの概要と依存関係パネル、アラート表、手順ブロック、オンコール体制、番号付きの5枚のインシデント対応カードを配置します。使用するのはサンプルデータのみとし、ライブ監視、コマンドの実行、接続済みサービス、計測された成果を示唆しないでください。
アラートとアクションをつなぐ
アラート名、重大度、意味、初動対応を並べた表を使います。auth.login_5xx_rate が 1% を超えるといったしきい値と、それに続くアクションの関係を保ち、検証されるまでは値が例示であることを明記します。
手順の読みやすさを磨く
各手順のコマンドパネルの前に、条件、注意点、またはタイミングの注記を置きます。blue/green 昇格、ロールバック、署名鍵のローテーション、監査ログの排出が、ひとまとまりのコードブロックではなく、それぞれ独立したワークフローとして読めることを確認します。
インシデントの順序を確認する
5枚の対応カードを、確認応答、チャンネル開設、状況スナップショットの投稿、緩和、引き継ぎまたは対応終了という時間順のシーケンスとして見直します。小さな画面でカードが縦に積まれても読みやすいことを確かめます。
エクスポートして共有リンクを取得
完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。
AIデザインスタジオのWebサイトデザイン
OpenDesignのAIデザインスタジオのWebサイトデザインは、ローカルファーストのスタジオ構想を、スキル、実験、手法を見やすく把握できるエディトリアルなランディングページへと変換している。
ウェブサイト
AIインフラストラクチャのWebサイトデザイン
サンプルのランタイム指標、入れ子状の機能カード、控えめなモーション、そして1つのセールス導線を備えた、ソフトなAIインフラストラクチャのランディングページ案。
ウェブサイト
汴京ナイトツアーWebサイトデザイン
宋代を思わせる想像上の汴京を夜に巡るインタラクティブな旅。持続する河畔都市、詩、灯籠、多言語の章ごとのテンポを組み合わせています。
ウェブサイト
ブルータリスト・ジャーナルのウェブサイトデザイン
ブルータリスト・ジャーナルのウェブサイトデザインは、印刷物を思わせる一号分の誌面を読みやすいウェブの読書体験へと変え、大胆な書体と節度ある編集構成を組み合わせます。
ウェブサイト