LESSON 30分

ストーリー

高
高橋アーキテクト
メトリクスを数字で見ても直感的にわかりにくい。人間の脳はビジュアルに強い

高橋アーキテクトがGrafanaのダッシュボードを表示した。折れ線グラフ、ゲージ、ヒートマップが並んでいる。

高
高橋アーキテクト
ダッシュボードを適切に設計すれば、システムの状態が一目で把握できる。“良いダッシュボード”の作り方を学ぼう

Grafanaとは

Grafanaは、メトリクス・ログ・トレースを統合的に可視化するオープンソースのダッシュボードツールです。

graph TD
    subgraph Grafana
        D1["Dashboard<br/>API"]
        D2["Dashboard<br/>Infra"]
        D3["..."]
    end

    subgraph "Data Sources"
        Prom["Prometheus"]
        Loki["Loki"]
        Jaeger["Jaeger"]
        CW["CloudWatch"]
    end

    Prom --> Grafana
    Loki --> Grafana
    Jaeger --> Grafana
    CW --> Grafana

ダッシュボード設計の原則

1. レイヤー構造

graph TD
    L1["Level 1: サービス概要ダッシュボード<br/>全サービスの健全性を一覧表示<br/>異常があるサービスを赤で表示"]
    L2["Level 2: サービス詳細ダッシュボード<br/>特定サービスのREDメトリクス<br/>エンドポイント別のパフォーマンス"]
    L3["Level 3: デバッグダッシュボード<br/>個別リクエストのトレース<br/>ログの詳細検索"]

    L1 --> L2 --> L3

2. REDダッシュボードの構成

// サービスダッシュボードに含めるべきパネル
interface ServiceDashboard {
  // Row 1: 概要（ステータスパネル）
  overview: {
    currentStatus: 'Stat panel - UP/DOWN';
    uptimePercent: 'Stat panel - 99.95%';
    activeAlerts: 'Stat panel - 0 alerts';
  };

  // Row 2: Rate（リクエスト率）
  rate: {
    requestsPerSecond: 'Time series - rate(http_requests_total[5m])';
    requestsByEndpoint: 'Time series - sum by (path) (rate(...))';
  };

  // Row 3: Errors（エラー率）
  errors: {
    errorRate: 'Time series - エラー率の推移';
    errorsByType: 'Pie chart - エラーコード別の割合';
    recentErrors: 'Table - 直近のエラーログ';
  };

  // Row 4: Duration（レスポンスタイム）
  duration: {
    latencyPercentiles: 'Time series - P50, P90, P99';
    latencyHeatmap: 'Heatmap - レスポンスタイムの分布';
  };

  // Row 5: インフラ
  infrastructure: {
    cpuUsage: 'Time series - CPU使用率';
    memoryUsage: 'Time series - メモリ使用量';
    podCount: 'Stat panel - 稼働Pod数';
  };
}

Grafanaパネルの種類と使い分け

パネルタイプ用途適したデータ
Time Series時系列データの推移リクエスト率、エラー率
Stat単一の数値を大きく表示現在のリクエスト数/秒、稼働率
Gaugeメーター表示CPU使用率、メモリ使用率
Bar Chartカテゴリ別の比較エンドポイント別エラー数
Heatmap2次元の密度分布レスポンスタイムの分布
Table一覧表示直近のエラーログ、Top Nクエリ
Alert Listアラート一覧発火中のアラート

ダッシュボードのJSON定義（抜粋）

{
  "dashboard": {
    "title": "Order Service - RED Metrics",
    "panels": [
      {
        "title": "Request Rate",
        "type": "timeseries",
        "targets": [
          {
            "expr": "sum(rate(http_requests_total{service=\"order-service\"}[5m]))",
            "legendFormat": "Total RPS"
          }
        ],
        "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 }
      },
      {
        "title": "Error Rate (%)",
        "type": "timeseries",
        "targets": [
          {
            "expr": "sum(rate(http_requests_total{service=\"order-service\",status=~\"5..\"}[5m])) / sum(rate(http_requests_total{service=\"order-service\"}[5m])) * 100",
            "legendFormat": "Error Rate %"
          }
        ],
        "fieldConfig": {
          "defaults": {
            "thresholds": {
              "steps": [
                { "color": "green", "value": 0 },
                { "color": "yellow", "value": 1 },
                { "color": "red", "value": 5 }
              ]
            }
          }
        },
        "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 }
      },
      {
        "title": "Latency Percentiles",
        "type": "timeseries",
        "targets": [
          {
            "expr": "histogram_quantile(0.50, sum(rate(http_request_duration_seconds_bucket{service=\"order-service\"}[5m])) by (le))",
            "legendFormat": "P50"
          },
          {
            "expr": "histogram_quantile(0.99, sum(rate(http_request_duration_seconds_bucket{service=\"order-service\"}[5m])) by (le))",
            "legendFormat": "P99"
          }
        ],
        "gridPos": { "h": 8, "w": 24, "x": 0, "y": 8 }
      }
    ]
  }
}

ダッシュボード設計のベストプラクティス

プラクティス説明
最も重要な情報を上部にスクロールせずに全体像を把握できる
色を意味づけに使う緑=正常、黄=警告、赤=異常
テンプレート変数を活用サービス名やNamespaceをドロップダウンで切り替え
リンクでドリルダウン概要→詳細→ログへとナビゲーション
適切な時間範囲デフォルトは直近1時間、障害時は拡大
SLO基準線を表示閾値ラインで目標値を可視化

まとめ

ポイント内容
Grafanaメトリクス・ログ・トレースの統合可視化ツール
ダッシュボード設計レイヤー構造（概要→詳細→デバッグ）
REDダッシュボードRate, Errors, Durationを中心に構成
ベストプラクティス重要情報を上部、色の意味づけ、ドリルダウン

チェックリスト

  • Grafanaの役割と主要なパネルタイプを理解した
  • REDダッシュボードの構成を設計できる
  • PromQLを使ったパネルクエリを書ける
  • ダッシュボード設計のベストプラクティスを把握した

次のステップへ

次は「アラート設計のベストプラクティス」を学びます。メトリクスに基づく効果的なアラートの設計方法を見ていきましょう。

推定読了時間: 30分