バーチャート描画
棒が下から伸びるアニメーション。読み込みで自動再生し、ボタンで何度でも再生できる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 曜日・月ごとの比較を最初の一瞬で印象づける表示
- ダッシュボードの読み込み時の演出
- 少数カテゴリ（7 本程度）の棒グラフ
- 避ける場面
- 頻繁に更新される数値（毎回の再生が邪魔）
- 棒が 20 本を超え順次アニメが長引く場合
- 構成要素
- 棒（7本）
- 値ラベル
- 軸ラベル
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- キーボード
Tab で再生ボタンへ、Enter／Space で再生
- 支援技術
グラフ枠は role=img＋aria-label に全曜日の値を列挙（月 62、火 45…）。中の棒は aria-hidden。reduced-motion では伸長・段差を省き最終形を即表示
- 動き
棒が高さ 0 から 700ms ease-out で伸び、60ms ずつ順に開始。値ラベルは 600ms 後に 300ms で表示。増加の勢いを示す
デザインの要点
- 棒は 60ms ずつ順に伸ばす。同時に伸ばすと 1 枚の面に見え、順に伸ばすと 7 本の比較として読める
- 値ラベルは棒が伸び切る 600ms 後に出す。伸びている途中に数字があると、動く棒と数字の対応が取れない
- 最大の棒の上に出るラベルぶん枠に padding-top を取る。忘れると 91 の数字が切れる
- reduced-motion では最終形を即座に出す。再生ボタンは残し、押しても段差なしで描き直す
コード（コピーして使えます）
<div class="bc-wrap">
<div class="bc-chart" role="img" aria-label="曜日別の値の棒グラフ。月 62、火 45、水 78、木 55、金 91、土 38、日 29">
<div class="bc-bar-group">
<div class="bc-bar" style="--h:62%;--c:#2b50c7"><span class="bc-val">62</span></div>
<div class="bc-label">月</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:45%;--c:#4c6fd4"><span class="bc-val">45</span></div>
<div class="bc-label">火</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:78%;--c:#2b50c7"><span class="bc-val">78</span></div>
<div class="bc-label">水</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:55%;--c:#4c6fd4"><span class="bc-val">55</span></div>
<div class="bc-label">木</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:91%;--c:#2b50c7"><span class="bc-val">91</span></div>
<div class="bc-label">金</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:38%;--c:#7b96e2"><span class="bc-val">38</span></div>
<div class="bc-label">土</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:29%;--c:#9aaee8"><span class="bc-val">29</span></div>
<div class="bc-label">日</div>
</div>
</div>
<button class="bc-btn" type="button">再生</button>
</div>