ダッシュボード画面
KPI 4枚＋折れ線グラフ＋上位テーブルの定番構成。右上の期間セグメント（7日/30日/90日）を切り替えると数字・グラフ・表が同時に更新される。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 売上・注文などの KPI を要約する管理画面
- 期間を切り替えて比較させたい集計
- 上位 N 件だけ見せて全件は別ページへ逃がす場面
- 避ける場面
- 全件の一覧・探索が目的の画面
- グラフごとに別の期間を持たせたいとき
- 構成要素
- ヘッダー（ブランド／見出し／期間セグメント）
- KPI カード×4
- 折れ線グラフ
- 軸ラベル
- 上位テーブル
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で期間ボタン 3 つ→「すべて見る」リンクの順に移動。Enter/Space で期間を切り替える。表は読み取り専用
- 支援技術
期間は role=group＋aria-pressed。切替後は「過去7日」の期間ラベルが aria-live=polite で読まれる。グラフは aria-hidden で、軸ラベルと表が代替。増減は色に加えて +/− の符号で示す
- 動き
期間切替時に線と面を 0.3 に落とし 200ms で戻す（データが入れ替わったことを示す）
デザインの要点
- 主役は KPI の数字。ラベルは小さく灰色に、増減は色だけで示して数字の視線を奪わない
- 期間の切替は画面の右上に 1 つだけ。グラフごとに期間を持たせると比較できなくなる
- 折れ線は塗りを薄く敷いて面で読ませ、グリッド線は 3 本に留める。装飾より読みやすさ
- 表は上位 5 件で切り、全件は「すべて見る」へ逃がす。ダッシュボードは一覧ではなく要約
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="ad-app">
<header class="ad-top">
<div class="ad-title">
<span class="ad-brand">Aoi Analytics</span>
<h1 class="ad-h1">概要</h1>
</div>
<div class="ad-seg" role="group" aria-label="集計期間">
<button type="button" class="ad-seg-btn" data-period="7" aria-pressed="false">7日</button>
<button type="button" class="ad-seg-btn is-on" data-period="30" aria-pressed="true">30日</button>
<button type="button" class="ad-seg-btn" data-period="90" aria-pressed="false">90日</button>
</div>
</header>
<div class="ad-body">
<section class="ad-kpis" aria-label="主要指標">
<div class="ad-kpi"><span class="ad-kpi-label">売上</span><strong class="ad-kpi-val" data-kpi="sales">¥4,820,300</strong><span class="ad-kpi-delta is-up" data-delta="sales">+12.4%</span></div>
<div class="ad-kpi"><span class="ad-kpi-label">注文数</span><strong class="ad-kpi-val" data-kpi="orders">1,284</strong><span class="ad-kpi-delta is-up" data-delta="orders">+8.1%</span></div>
<div class="ad-kpi"><span class="ad-kpi-label">平均注文額</span><strong class="ad-kpi-val" data-kpi="aov">¥3,754</strong><span class="ad-kpi-delta is-up" data-delta="aov">+3.9%</span></div>
<div class="ad-kpi"><span class="ad-kpi-label">返品率</span><strong class="ad-kpi-val" data-kpi="refund">1.8%</strong><span class="ad-kpi-delta is-down" data-delta="refund">−0.3pt</span></div>
</section>
<section class="ad-card">
<div class="ad-card-head">
<h2 class="ad-h2">日別売上</h2>
<span class="ad-card-sub" id="ad-range" aria-live="polite">過去30日</span>
</div>
<svg class="ad-chart" viewBox="0 0 600 160" preserveAspectRatio="none" aria-hidden="true">
<line class="ad-gridline" x1="0" y1="20" x2="600" y2="20"/>
<line class="ad-gridline" x1="0" y1="85" x2="600" y2="85"/>
<line class="ad-gridline" x1="0" y1="150" x2="600" y2="150"/>
<path class="ad-area" id="ad-area" d=""/>
<polyline class="ad-line" id="ad-line" points="" vector-effect="non-scaling-stroke"/>
</svg>
<div class="ad-axis" id="ad-axis"></div>
</section>
<section class="ad-card">
<div class="ad-card-head">
<h2 class="ad-h2">売上上位の商品</h2>
<a class="ad-link" href="#ad-top">すべて見る</a>
</div>
<div class="ad-table-wrap">
<table class="ad-table">
<thead><tr><th>商品</th><th class="ad-num">売上</th><th class="ad-num">注文</th><th class="ad-num">前期比</th></tr></thead>
<tbody id="ad-tbody"></tbody>
</table>
</div>
</section>
</div>
</div>