📊 STEP 39: 実践プロジェクト2 – 経営ダッシュボード

経営層向けのインタラクティブなダッシュボードを構築しよう!

📋 このステップで学ぶこと

経営ダッシュボードの設計原則
KPI（重要業績評価指標）の選定と可視化
Plotly Dashの基礎と使い方
インタラクティブ機能の実装方法
コールバック関数の仕組みと使い方
実践的なダッシュボードの構築

📊 1. 経営ダッシュボードとは

なぜ経営ダッシュボードを学ぶのか

経営ダッシュボードとは、企業の重要指標（KPI）を一画面で可視化し、経営判断を支援するツールです。

経営者は多忙です。毎月のExcelレポートを何十ページも読む時間はありません。経営ダッシュボードがあれば、5秒で現状を把握し、すぐにアクションを決定できます。

このステップでは、Plotly Dashを使って、インタラクティブな経営ダッシュボードを構築する方法を学びます。

【経営ダッシュボードの特徴】 🎯 目的: ・重要な指標を一目で把握できる・異常値や変化を素早く検出できる・データに基づく意思決定ができる・部門間の情報共有ができる 📊 表示する情報: ・売上・利益（財務KPI）・顧客数・満足度（顧客KPI）・生産性・品質（業務KPI）・従業員満足度（人事KPI） ✨ 必須機能: ・リアルタイム更新（または定期更新）・期間フィルター（月次、四半期、年次）・ドリルダウン（詳細表示）・アラート機能（目標未達時に警告）

ダッシュボードの階層

ダッシュボードは、誰が見るかによって表示する情報が異なります。

    📊 ダッシュボードの階層
    
                レベル
                対象者
                表示内容
                特徴
            
                レベル1
                経営層（CEO、CFO）
                売上、利益、成長率
                シンプルで大きな数字
            
                レベル2
                部門長
                部門ごとの詳細KPI
                グラフと数値表
            
                レベル3
                担当者
                日次の詳細データ
                多数のグラフとテーブル

レベル	対象者	表示内容	特徴
レベル1	経営層（CEO、CFO）	売上、利益、成長率	シンプルで大きな数字
レベル2	部門長	部門ごとの詳細KPI	グラフと数値表
レベル3	担当者	日次の詳細データ	多数のグラフとテーブル

🔑 優れたダッシュボードの5原則

5秒ルール: 重要情報は5秒で理解できる
一画面主義: スクロールなしで全体把握
視覚的階層: 重要度に応じたサイズと配置
最新性: データは常に最新
アクション可能: 見て終わりではなく、行動に繋がる

⚠️ よくある失敗

❌ 情報過多: グラフが20個以上 → 何が重要かわからない
❌ 更新が遅い: 前週のデータ → 意思決定に使えない
❌ 操作が複雑: 使い方がわからない → 誰も見ない
✓ 理想: シンプル、最新、直感的！

🎯 2. KPIの選定と可視化

KPIとは

KPI（Key Performance Indicator）とは、ビジネスの成功を測る重要な指標です。業種や企業によって異なりますが、一般的なKPIをご紹介します。

    📊 主要なKPI例
    
                カテゴリ
                KPI名
                計算式・説明
            
                財務
                売上高
                月次、四半期、年次の売上金額
            
                財務
                営業利益率
                営業利益 ÷ 売上高 × 100
            
                顧客
                新規顧客数
                月間で新たに獲得した顧客数
            
                顧客
                顧客離脱率
                離脱顧客数 ÷ 総顧客数 × 100
            
                顧客
                顧客生涯価値（LTV）
                平均購買額 × 購買頻度 × 継続期間
            
                業務
                生産性
                売上 ÷ 従業員数
            
                Web
                コンバージョン率
                購入者数 ÷ 訪問者数 × 100

カテゴリ	KPI名	計算式・説明
財務	売上高	月次、四半期、年次の売上金額
財務	営業利益率	営業利益 ÷ 売上高 × 100
顧客	新規顧客数	月間で新たに獲得した顧客数
顧客	顧客離脱率	離脱顧客数 ÷ 総顧客数 × 100
顧客	顧客生涯価値（LTV）	平均購買額 × 購買頻度 × 継続期間
業務	生産性	売上 ÷ 従業員数
Web	コンバージョン率	購入者数 ÷ 訪問者数 × 100

KPIカードのデザイン

KPIは大きな数字で表示し、目標との比較を一目でわかるようにします。PlotlyのIndicatorを使うと、簡単にKPIカードを作成できます。

【go.Indicatorの解説】 go.Indicator( mode=”number+delta”, # 表示モード value=1500, # メインの数値 delta={ # 変化量の設定 ‘reference’: 1400, # 比較対象（目標値や前期値） ‘relative’: False # True=相対値(%)、False=絶対値 }, number={ # 数値の書式 ‘suffix’: ‘万円’, # 単位 ‘font’: {‘size’: 40} # フォントサイズ }, title={ # タイトル ‘text’: ‘売上高’, ‘font’: {‘size’: 18} } ) 【modeの種類】・’number’: 数値のみ・’delta’: 変化量のみ・’gauge’: ゲージ（メーター）・’number+delta’: 数値と変化量（よく使う）・’number+gauge’: 数値とゲージ

▼ 入力するコード（KPIカード）

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# KPIデータ（例）
kpis = {
    ‘売上高’: {‘value’: 1500, ‘unit’: ‘万円’, ‘change’: 15, ‘target’: 1400},
    ‘営業利益’: {‘value’: 300, ‘unit’: ‘万円’, ‘change’: 20, ‘target’: 280},
    ‘新規顧客’: {‘value’: 45, ‘unit’: ‘社’, ‘change’: -5, ‘target’: 50},
    ‘顧客満足度’: {‘value’: 85, ‘unit’: ‘%’, ‘change’: 3, ‘target’: 80}
}

# 4列のサブプロットを作成（各列にIndicator）
fig = make_subplots(
    rows=1, cols=4,
    subplot_titles=list(kpis.keys()),
    specs=[[{“type”: “indicator”}, {“type”: “indicator”}, 
            {“type”: “indicator”}, {“type”: “indicator”}]]
)

# 各KPIをIndicatorとして追加
for i, (name, data) in enumerate(kpis.items(), 1):
    # 色の決定（目標達成なら緑、未達なら赤）
    color = ‘#009944’ if data[‘value’] >= data[‘target’] else ‘#E60012’
    
    fig.add_trace(go.Indicator(
        mode=”number+delta”,
        value=data[‘value’],
        delta={‘reference’: data[‘target’], ‘relative’: False},
        number={‘suffix’: data[‘unit’], ‘font’: {‘size’: 40}},
        title={‘text’: name, ‘font’: {‘size’: 18}},
    ), row=1, col=i)

# レイアウト設定
fig.update_layout(
    height=300,
    title_text=’主要KPI一覧‘,
    title_font_size=24,
    showlegend=False
)

fig.show()

print(“KPIカードは、重要な数値を大きく表示し、”)
print(“目標との差分を△や▼で示すことで、一目で状況を把握できます！”)

💡 KPIカードのポイント

数値は大きく: 40pt以上のフォントサイズ
目標との差分: deltaで達成/未達を表示
色で状態を示す: 達成=緑、未達=赤
単位を明記: suffix で「万円」「%」など

🛠️ 3. Plotly Dashの基礎

Plotly Dashとは

Plotly Dashは、PythonだけでインタラクティブなWebアプリケーションを作成できるフレームワークです。HTML、CSS、JavaScriptの知識がなくても、本格的なダッシュボードが作れます。

    🛠️ Plotly Dashの特徴
    
                特徴
                説明
            
                Pythonのみで完結
                HTML/CSS/JSの知識不要
            
                Plotlyグラフと完全統合
                これまで学んだグラフがそのまま使える
            
                リアルタイム更新が可能
                dcc.Intervalで定期更新
            
                豊富なUI部品
                ドロップダウン、スライダー、日付選択など
            
                本格的なWebアプリ
                社内公開やクラウド公開が可能

特徴	説明
Pythonのみで完結	HTML/CSS/JSの知識不要
Plotlyグラフと完全統合	これまで学んだグラフがそのまま使える
リアルタイム更新が可能	dcc.Intervalで定期更新
豊富なUI部品	ドロップダウン、スライダー、日付選択など
本格的なWebアプリ	社内公開やクラウド公開が可能

【インストール方法】 pip install dash 【Dashアプリの基本構成】 1. レイアウト（Layout） → アプリの見た目を定義 → html.Div, html.H1, dcc.Graph などを配置 2. コールバック（Callback） → ユーザー操作に応じた更新 → @app.callback デコレータで定義 3. 実行（Run） → app.run_server() でアプリを起動 → ブラウザで http://127.0.0.1:8050/ にアクセス

最小限のDashアプリ

まずは、最もシンプルなDashアプリを作ってみましょう。ドロップダウンでグラフの種類を切り替える機能を実装します。

【コードの解説】 # Dashアプリを初期化 app = dash.Dash(__name__) # レイアウト定義 app.layout = html.Div([…]) ↑ アプリの見た目（UI）を定義します。 html.Div, html.H1, dcc.Dropdown, dcc.Graph などを配置。 # コールバック（グラフの更新） @app.callback( Output(‘output-graph’, ‘figure’), # 更新先 Input(‘graph-type’, ‘value’) # 入力元（監視対象） ) def update_graph(graph_type): # graph_typeの値に応じてグラフを作成 … return fig ↑ ユーザーがドロップダウンを変更したとき、この関数が自動的に呼ばれ、グラフが更新されます。 # アプリを実行 if __name__ == ‘__main__’: app.run_server(debug=True) ↑ debug=True にすると、コード変更時に自動リロードされます。

▼ 入力するコード（最小限のDashアプリ）

※ ローカル環境（Jupyter Lab、VS Codeなど）で実行してください

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go

# Dashアプリを初期化
app = dash.Dash(__name__)

# レイアウト定義
app.layout = html.Div([
    # タイトル
    html.H1(‘初めてのDashアプリ’, style={‘textAlign’: ‘center’}),
    
    # ドロップダウン
    html.Div([
        html.Label(‘グラフの種類を選択:’),
        dcc.Dropdown(
            id=’graph-type’,
            options=[
                {‘label’: ‘折れ線グラフ’, ‘value’: ‘line’},
                {‘label’: ‘棒グラフ’, ‘value’: ‘bar’}
            ],
            value=’line’  # 初期値
        )
    ], style={‘width’: ‘50%’, ‘margin’: ‘auto’}),
    
    # グラフ表示エリア
    dcc.Graph(id=’output-graph’)
])

# コールバック（グラフの更新）
@app.callback(
    Output(‘output-graph’, ‘figure’),
    Input(‘graph-type’, ‘value’)
)
def update_graph(graph_type):
    # サンプルデータ
    x = [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’]
    y = [100, 120, 110, 140, 130]
    
    # グラフタイプに応じて切り替え
    if graph_type == ‘line’:
        fig = go.Figure(go.Scatter(x=x, y=y, mode=’lines+markers’))
        fig.update_layout(title=’売上推移（折れ線）’)
    else:
        fig = go.Figure(go.Bar(x=x, y=y))
        fig.update_layout(title=’売上推移（棒グラフ）’)
    
    return fig

# アプリを実行
if __name__ == ‘__main__’:
    app.run_server(debug=True)

print(“ブラウザで http://127.0.0.1:8050/ にアクセスしてください！”)
print(“ドロップダウンを変更すると、グラフが切り替わります。”)

⚠️ Google Colabでの制限

Google ColabではDashアプリを直接実行できません。ローカル環境（Jupyter Lab、VS Code、PyCharmなど）で実行してください。または、JupyterDashを使用する方法もあります。

🔄 4. コールバック関数の使い方

コールバックの仕組み

コールバックは、Dashの核となる機能です。ユーザーの操作（クリック、選択など）に応じて、画面を自動的に更新します。

【コールバックの基本構造】 @app.callback( Output(‘更新先のID’, ‘更新するプロパティ’), Input(‘入力元のID’, ‘監視するプロパティ’) ) def 関数名(入力値): # 処理 return 更新する値【具体例】 @app.callback( Output(‘graph’, ‘figure’), # graphのfigureプロパティを更新 Input(‘dropdown’, ‘value’) # dropdownのvalueを監視 ) def update_graph(selected_value): # selected_valueに基づいてグラフを作成 fig = create_graph(selected_value) return fig 【複数の入力を受け取る】 @app.callback( Output(‘graph’, ‘figure’), [Input(‘dropdown1’, ‘value’), Input(‘dropdown2’, ‘value’), Input(‘slider’, ‘value’)] ) def update_graph(value1, value2, value3): # 3つの入力を使ってグラフを更新 … return fig 【複数の出力を返す】 @app.callback( [Output(‘graph1’, ‘figure’), Output(‘graph2’, ‘figure’)], Input(‘dropdown’, ‘value’) ) def update_graphs(selected_value): fig1 = … fig2 = … return fig1, fig2

実践例: フィルター機能付きダッシュボード

期間と商品カテゴリでデータを絞り込み、グラフを更新するダッシュボードを作成します。

【このコードで使う主なコンポーネント】 dcc.DatePickerRange ↑ 日付範囲を選択するUI部品 start_date: 開始日 end_date: 終了日 dcc.Dropdown ↑ ドロップダウンメニュー options: 選択肢のリスト value: 初期値 dcc.Graph ↑ Plotlyグラフを表示する部品 id: 一意の識別子（コールバックで参照）【複数出力のコールバック】 @app.callback( [Output(‘sales-graph’, ‘figure’), Output(‘profit-graph’, ‘figure’)], # 2つのグラフを更新 [Input(‘date-range’, ‘start_date’), Input(‘date-range’, ‘end_date’), Input(‘category’, ‘value’)] # 3つの入力を監視 )

▼ 入力するコード（フィルター機能付きダッシュボード）

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import pandas as pd
import numpy as np

# サンプルデータ生成
np.random.seed(42)
dates = pd.date_range(‘2024-01-01’, ‘2024-12-31′, freq=’D’)
df = pd.DataFrame({
    ‘date’: dates,
    ‘sales’: np.random.randint(80, 150, len(dates)),
    ‘profit’: np.random.randint(15, 35, len(dates)),
    ‘category’: np.random.choice([‘商品A’, ‘商品B’, ‘商品C’], len(dates))
})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1(‘売上ダッシュボード’, style={‘textAlign’: ‘center’}),
    
    # フィルターエリア
    html.Div([
        html.Label(‘期間を選択:’),
        dcc.DatePickerRange(
            id=’date-range’,
            start_date=df[‘date’].min(),
            end_date=df[‘date’].max(),
            display_format=’YYYY-MM-DD’
        ),
        
        html.Label(‘商品カテゴリ:’, style={‘marginLeft’: ’20px’}),
        dcc.Dropdown(
            id=’category’,
            options=[{‘label’: cat, ‘value’: cat} 
                     for cat in df[‘category’].unique()],
            value=df[‘category’].unique()[0],
            style={‘width’: ‘200px’, ‘display’: ‘inline-block’}
        )
    ], style={‘width’: ‘80%’, ‘margin’: ‘auto’, ‘padding’: ’20px’}),
    
    # グラフエリア
    dcc.Graph(id=’sales-graph’),
    dcc.Graph(id=’profit-graph’)
])

@app.callback(
    [Output(‘sales-graph’, ‘figure’),
     Output(‘profit-graph’, ‘figure’)],
    [Input(‘date-range’, ‘start_date’),
     Input(‘date-range’, ‘end_date’),
     Input(‘category’, ‘value’)]
)
def update_graphs(start_date, end_date, category):
    # データのフィルタリング
    filtered_df = df[
        (df[‘date’] >= start_date) &
        (df[‘date’] <= end_date) &
        (df['category'] == category)
    ]
    
    # 売上グラフ（折れ線）
    fig_sales = go.Figure()
    fig_sales.add_trace(go.Scatter(
        x=filtered_df['date'],
        y=filtered_df['sales'],
        mode='lines',
        name='売上',
        line=dict(color='#0072B2', width=2)
    ))
    fig_sales.update_layout(
        title=f'{category} の売上推移',
        xaxis_title='日付',
        yaxis_title='売上（万円）'
    )
    
    # 利益グラフ（棒グラフ）
    fig_profit = go.Figure()
    fig_profit.add_trace(go.Bar(
        x=filtered_df['date'],
        y=filtered_df['profit'],
        name='利益',
        marker_color='#009E73'
    ))
    fig_profit.update_layout(
        title=f'{category} の利益',
        xaxis_title='日付',
        yaxis_title='利益（万円）'
    )
    
    return fig_sales, fig_profit

if __name__ == '__main__':
    app.run_server(debug=True)

print("期間と商品カテゴリを変更すると、グラフが更新されます！")

📊 5. 経営ダッシュボードの構築

完全な経営ダッシュボード

これまで学んだ内容を統合して、本格的な経営ダッシュボードを構築しましょう。以下の要素を含みます：

ヘッダー: タイトルと最終更新日時
フィルター: 期間選択（全期間/上半期/下半期）
KPIカード: 総売上、営業利益、平均顧客数
グラフ: 売上推移、利益率、顧客数推移

【ダッシュボードの構成】 ┌─────────────────────────────────────┐ │ ヘッダー（タイトル、更新日時） │ ├─────────────────────────────────────┤ │ フィルター（期間選択） │ ├─────────────────────────────────────┤ │ KPIカード × 3 │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐│ │ │ 総売上 │ │ 営業利益 │ │ 顧客数 ││ │ └─────────┘ └─────────┘ └─────────┘│ ├─────────────────────────────────────┤ │ グラフ × 3 │ │ ┌─────────────────────────────┐ │ │ │ 売上推移（折れ線 + 目標線） │ │ │ ├─────────────────────────────┤ │ │ │ 営業利益と利益率 │ │ │ ├─────────────────────────────┤ │ │ │ 顧客数推移（エリアチャート） │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘

▼ 入力するコード（完全な経営ダッシュボード）

※ コードが長いので横スクロールできます

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np

# サンプルデータ生成
np.random.seed(42)
months = [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, 
          ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]
df_monthly = pd.DataFrame({
    ‘month’: months,
    ‘sales’: [1000, 1100, 1050, 1200, 1250, 1300, 
              1350, 1320, 1400, 1450, 1480, 1500],
    ‘profit’: [200, 220, 210, 240, 250, 260, 
               270, 264, 280, 290, 296, 300],
    ‘customers’: [100, 105, 103, 110, 115, 118, 
                  120, 119, 125, 128, 130, 132],
    ‘target_sales’: [1050] * 12,
    ‘target_profit’: [250] * 12
})

app = dash.Dash(__name__)

app.layout = html.Div([
    # ========== ヘッダー ==========
    html.Div([
        html.H1(‘経営ダッシュボード 2024’, 
                style={‘textAlign’: ‘center’, ‘color’: ‘white’, ‘margin’: ‘0’}),
        html.P(‘最終更新: 2024年12月1日’, 
               style={‘textAlign’: ‘center’, ‘color’: ‘white’, ‘margin’: ’10px 0 0 0′})
    ], style={‘backgroundColor’: ‘#0068B7’, ‘padding’: ’20px’}),
    
    # ========== フィルター ==========
    html.Div([
        html.Label(‘表示期間:’, style={‘fontWeight’: ‘bold’, ‘marginRight’: ’10px’}),
        dcc.Dropdown(
            id=’period-filter’,
            options=[
                {‘label’: ‘全期間’, ‘value’: ‘all’},
                {‘label’: ‘上半期’, ‘value’: ‘first_half’},
                {‘label’: ‘下半期’, ‘value’: ‘second_half’}
            ],
            value=’all’,
            style={‘width’: ‘200px’, ‘display’: ‘inline-block’}
        )
    ], style={‘padding’: ’20px’, ‘backgroundColor’: ‘#f8f9fa’}),
    
    # ========== KPIカード ==========
    html.Div(id=’kpi-cards’, style={‘padding’: ’20px’}),
    
    # ========== グラフエリア ==========
    html.Div([
        dcc.Graph(id=’sales-trend’),
        dcc.Graph(id=’profit-margin’),
        dcc.Graph(id=’customer-growth’)
    ], style={‘padding’: ’20px’})
])

@app.callback(
    [Output(‘kpi-cards’, ‘children’),
     Output(‘sales-trend’, ‘figure’),
     Output(‘profit-margin’, ‘figure’),
     Output(‘customer-growth’, ‘figure’)],
    Input(‘period-filter’, ‘value’)
)
def update_dashboard(period):
    # 期間フィルタリング
    if period == ‘first_half’:
        df = df_monthly.iloc[:6]
    elif period == ‘second_half’:
        df = df_monthly.iloc[6:]
    else:
        df = df_monthly
    
    # KPI計算
    total_sales = df[‘sales’].sum()
    total_profit = df[‘profit’].sum()
    avg_customers = df[‘customers’].mean()
    profit_rate = (total_profit / total_sales * 100).round(1)
    
    # ========== KPIカード ==========
    kpi_cards = html.Div([
        # 総売上カード
        html.Div([
            html.H3(‘総売上’, style={‘color’: ‘#666’, ‘marginBottom’: ’10px’}),
            html.H2(f'{total_sales:,}万円’, style={‘color’: ‘#0068B7’, ‘margin’: ‘0’}),
            html.P(‘▲ 前年比 +15%’, style={‘color’: ‘#009944’, ‘margin’: ’10px 0 0 0′})
        ], style={‘flex’: ‘1’, ‘padding’: ’20px’, ‘backgroundColor’: ‘white’, 
                  ‘borderRadius’: ‘8px’, ‘margin’: ’10px’, 
                  ‘boxShadow’: ‘0 2px 4px rgba(0,0,0,0.1)’}),
        
        # 営業利益カード
        html.Div([
            html.H3(‘営業利益’, style={‘color’: ‘#666’, ‘marginBottom’: ’10px’}),
            html.H2(f'{total_profit:,}万円’, style={‘color’: ‘#009944’, ‘margin’: ‘0’}),
            html.P(f’利益率: {profit_rate}%’, style={‘color’: ‘#666’, ‘margin’: ’10px 0 0 0′})
        ], style={‘flex’: ‘1’, ‘padding’: ’20px’, ‘backgroundColor’: ‘white’, 
                  ‘borderRadius’: ‘8px’, ‘margin’: ’10px’, 
                  ‘boxShadow’: ‘0 2px 4px rgba(0,0,0,0.1)’}),
        
        # 平均顧客数カード
        html.Div([
            html.H3(‘平均顧客数’, style={‘color’: ‘#666’, ‘marginBottom’: ’10px’}),
            html.H2(f'{avg_customers:.0f}社’, style={‘color’: ‘#F39800’, ‘margin’: ‘0’}),
            html.P(‘▲ 前年比 +8%’, style={‘color’: ‘#009944’, ‘margin’: ’10px 0 0 0′})
        ], style={‘flex’: ‘1’, ‘padding’: ’20px’, ‘backgroundColor’: ‘white’, 
                  ‘borderRadius’: ‘8px’, ‘margin’: ’10px’, 
                  ‘boxShadow’: ‘0 2px 4px rgba(0,0,0,0.1)’}),
    ], style={‘display’: ‘flex’, ‘justifyContent’: ‘space-around’})
    
    # ========== 売上推移グラフ ==========
    fig_sales = go.Figure()
    fig_sales.add_trace(go.Scatter(
        x=df[‘month’], y=df[‘sales’],
        mode=’lines+markers’,
        name=’実績’,
        line=dict(color=’#0068B7′, width=3),
        marker=dict(size=10)
    ))
    fig_sales.add_trace(go.Scatter(
        x=df[‘month’], y=df[‘target_sales’],
        mode=’lines’,
        name=’目標’,
        line=dict(color=’#E60012′, width=2, dash=’dash’)
    ))
    fig_sales.update_layout(
        title=’月次売上推移‘,
        xaxis_title=’月’,
        yaxis_title=’売上（万円）’,
        height=400,
        hovermode=’x unified’
    )
    
    # ========== 利益率グラフ ==========
    df[‘profit_rate’] = (df[‘profit’] / df[‘sales’] * 100).round(1)
    fig_profit = go.Figure()
    fig_profit.add_trace(go.Bar(
        x=df[‘month’], y=df[‘profit’],
        name=’営業利益’,
        marker_color=’#009944′
    ))
    fig_profit.add_trace(go.Scatter(
        x=df[‘month’], y=df[‘profit_rate’],
        name=’利益率（%）’,
        yaxis=’y2′,
        mode=’lines+markers’,
        line=dict(color=’#F39800′, width=2)
    ))
    fig_profit.update_layout(
        title=’営業利益と利益率‘,
        xaxis_title=’月’,
        yaxis_title=’営業利益（万円）’,
        yaxis2=dict(title=’利益率（%）’, overlaying=’y’, side=’right’),
        height=400
    )
    
    # ========== 顧客数推移グラフ ==========
    fig_customers = go.Figure()
    fig_customers.add_trace(go.Scatter(
        x=df[‘month’], y=df[‘customers’],
        mode=’lines+markers’,
        fill=’tozeroy’,
        name=’顧客数’,
        line=dict(color=’#F39800′, width=2),
        marker=dict(size=10)
    ))
    fig_customers.update_layout(
        title=’顧客数の推移‘,
        xaxis_title=’月’,
        yaxis_title=’顧客数（社）’,
        height=400
    )
    
    return kpi_cards, fig_sales, fig_profit, fig_customers

if __name__ == ‘__main__’:
    app.run_server(debug=True)

print(“完全な経営ダッシュボードが完成しました！”)
print(“期間フィルターを変更すると、KPIとグラフが更新されます。”)

📝 STEP 39 のまとめ

    ✅ このステップで学んだこと
    
                トピック
                重要ポイント
            
                経営ダッシュボード
                KPIを一画面で可視化し、5秒で状況把握
            
                KPI選定
                売上、利益、顧客数など重要指標を選ぶ
            
                Plotly Dash
                Pythonだけでインタラクティブアプリを作成
            
                レイアウト
                html.Div, dcc.Graph などでUIを定義
            
                コールバック
                ユーザー操作で画面を自動更新
            
                KPIカード
                重要指標を大きな数字で表示

トピック	重要ポイント
経営ダッシュボード	KPIを一画面で可視化し、5秒で状況把握
KPI選定	売上、利益、顧客数など重要指標を選ぶ
Plotly Dash	Pythonだけでインタラクティブアプリを作成
レイアウト	html.Div, dcc.Graph などでUIを定義
コールバック	ユーザー操作で画面を自動更新
KPIカード	重要指標を大きな数字で表示

💡 最重要ポイント

経営ダッシュボードは、データドリブンな意思決定を支援する重要なツールです。5秒ルールを守り、重要な情報を一目で把握できるようにしましょう。

Plotly Dashを使えば、Pythonだけで本格的なインタラクティブダッシュボードが作成できます。

コールバック関数をマスターすることで、ユーザーの操作に応じた動的な更新が可能になります！

📝 実践演習

演習 1 基礎

最小限のDashアプリを作成し、ドロップダウンでグラフを切り替えてみてください。

【ヒント】

前述の「最小限のDashアプリ」のコードをローカル環境で実行してください。

ポイント: 1. app.layout でUIを定義 2. @app.callback でコールバック設定 3. app.run_server() で起動 4. ブラウザで http://127.0.0.1:8050/ にアクセス

演習 2 応用

自分のビジネスや架空の企業のKPIを3つ選び、KPIカードを作成してください。

【ヒント】

例: カフェのKPI kpis = { ‘日次売上’: {‘value’: 50, ‘unit’: ‘万円’, ‘target’: 45}, ‘来客数’: {‘value’: 120, ‘unit’: ‘人’, ‘target’: 100}, ‘客単価’: {‘value’: 4167, ‘unit’: ‘円’, ‘target’: 4000} } # Plotly Indicatorで表示 # 前述のKPIカードのコードを応用してください

演習 3 発展

完全な経営ダッシュボードを作成してください（KPIカード+3つのグラフ+フィルター機能）。

【構成例】

1. ヘッダー – タイトル – 最終更新日時 2. フィルター – 期間選択（Dropdown） – 部門選択（Dropdown） 3. KPIカード（3-4個） – 売上、利益、顧客数、満足度 4. グラフ（3-4個） – 売上推移（折れ線） – 利益率（棒 + 線） – 顧客推移（エリア） – カテゴリ別売上（円） 5. コールバック – フィルター変更でKPI・グラフを更新

❓ よくある質問

Q1: Dashアプリはどこで公開できますか?

いくつかの選択肢があります。Heroku（無料枠あり）、AWS、Google Cloud、Azure等のクラウドサービスで公開できます。また、Plotly社の「Dash Enterprise」（有料）を使うと、より簡単に公開・管理できます。社内向けなら、社内サーバーで運用することも可能です。

Q2: リアルタイム更新はどう実装しますか?

dcc.Intervalコンポーネントを使います。指定した間隔（例: 5秒ごと）でコールバックを実行し、データを再取得してグラフを更新することで、リアルタイム更新を実現できます。例: dcc.Interval(id='interval', interval=5000, n_intervals=0)

Q3: Dashのパフォーマンスを向上させるには?

いくつかの最適化手法があります。①大量データはサーバー側で事前集計、②キャッシュ機能の活用（flask-caching）、③不要なコールバックの削減、④DataTableの代わりにグラフで表示、などが効果的です。

Q4: Google Colabで動かす方法はありますか?

JupyterDashを使う方法があります。pip install jupyter-dashでインストールし、from jupyter_dash import JupyterDashでインポート。JupyterDash(__name__)でアプリを作成し、app.run_server(mode='inline')で実行すると、Colab内にダッシュボードが表示されます。

📝

学習メモ

データ可視化マスター - Step 39

📋 過去のメモ一覧 ▼