ダッシュボード画面
KPI 4枚＋折れ線グラフ＋上位テーブルの定番構成。右上の期間セグメント（7日/30日/90日）を切り替えると数字・グラフ・表が同時に更新される。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 主役は 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">過去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>