数字を読み上げるのをやめて、棒の長さにした

• 数字の羅列は、動画だと頭に入らない
• 棒の長さにすると、差が一目で分かる
• 棒と数字を同じ速さで動かすのが大事

このサイトのカテゴリ別記事数を動画にした。最初は数字を順に出していたが、見返すと何も残らなかった。棒グラフにし直した。

数字を並べると、なぜ残らないのか

紙なら戻って読み返せるが、動画は戻れない。32と31の差を数字で見せられても、見ている側はその場で比べられない。

長さにすると、比べる作業がいらなくなる。見た瞬間に「ほぼ同じ」「これだけ少ない」が分かる。

棒と数字は同じ速さで動かす

最初、棒だけを伸ばして数字は最後に出した。これは失敗だった。どの数字がどの棒のものか、目で探すことになる。

棒の伸び具合をそのまま数字にも掛けて、同時に進むようにした。棒が半分まで伸びたら数字も半分。これで迷いが消えた。

全部を同時に伸ばさない

7本を同時に伸ばすと、どこを見てよいか分からない。上から0.12秒ずつ遅らせた。

• 目が自然に上から下へ動く
• 1本ずつ順に読める
• 遅らせすぎると最後まで待てないので、合計1秒以内に収める

いちばん多いものだけ色を変える

全部同じ色だと、結局どれが結論か分からない。1位だけ青にして、残りは黒の薄めにした。

色を3色も4色も使うと、色そのものに意味があるように見えてしまう。意味がないなら、増やさないほうがよい。

データは外から渡す

棒の数も中身もコードに直接書かず、外から渡す形にした。

defaultProps={{
  title: "カテゴリ別の記事数",
  rows: [
    { label: "プロンプト集", value: 32 },
    { label: "AIツールレビュー", value: 32 },
  ],
}}

こうしておくと、来月の数字でもう1本作るときに、数字を書き換えるだけで済む。棒の最大値も自動で計算しているので、1件だけ極端に多い月でもはみ出さない。

ラベルの位置を右端で揃える

カテゴリ名を左揃えにすると、名前の長さが違うぶん棒の開始位置がばらついて見えた。ラベルを右揃えにして、棒の始まりを1本の線に揃えた。

棒グラフは始まりが揃っていないと長さを比べられない。見落としやすいが、ここがずれると全部が台無しになる。

目盛りは入れなかった

目盛り線を入れると正確になるが、今回は入れていない。

• 伝えたいのは正確な値ではなく、大小の関係
• 数字は棒の右に出しているので、正確な値はそこで読める
• 線を増やすほど、肝心の棒が目立たなくなる

報告資料なら目盛りが要る。何のための動画かで、入れるものは変わる。

やらなかったこと

棒が伸びきったあとに跳ねる動きを入れてみたが、やめた。数字を見せる動画で跳ねると、値が揺れているように見える。

楽しさより、読み違えないことを優先した。

実際の数字を使った

サンプルの数字ではなく、このサイトの本当のカテゴリ別記事数を入れた。

適当な数字で作ると、見栄えのよい差が付くように無意識に調整してしまう。実データは差が小さかったり、1位が2つ並んだりする。その「きれいでなさ」に耐えられるかどうかが、実際に使えるかどうかの分かれ目だった。

今回も1位が32で並び、グラフとしては締まりが悪い。それでも事実なので、そのまま出した。

書き出してからの直し

画面で見ているときは良く見えたのに、書き出したら棒が太すぎた。

• プレビューは縮小表示なので、太さの印象が変わる
• 実寸で確認するには、静止画を1枚だけ書き出すのが速い
• 全部書き出すと1分かかるが、1枚なら数秒で済む

直すたびに全部書き出していると時間が溶ける。確認したいコマだけ静止画で出すのを覚えてから、作業が一気に速くなった。

まとめ

動画で数字を扱うなら、まず長さや面積に置き換える。そのうえで棒と数字を同時に動かし、順番に出し、1つだけ色を変える。この3つで、見た人が覚えて帰れるものになった。