動くグラフは分かりやすい？ アニメーションと静止画を使い分ける資料設計

経営会議の資料で、地域別の売上が一年間にどう動いたかを見せたい。棒や点を滑らかに動かせば、数字が「生きている」ように見えます。けれども、動き終わったあとに「4月と10月を比べて、どの地域の伸びが最大だったか」と聞かれると、もう一度再生しなければ答えられないことがあります。

先に結論を言うと、アニメーションは、同じ対象が移動したり形を変えたりする対応関係を追うときに役立ちます。一方、複数の時点や系列を見比べて判断するときは、静止画を並べた方が正確で速い場合があります。動かすかどうかは見栄えではなく、「変化を追わせたいのか」「結果を比べさせたいのか」で決めます。

この記事では、グラフの遷移を調べた実験と、時系列データをアニメーション・軌跡・小さな複数図で比べた実験を基に、プレゼン、Web、ダッシュボードでの使い分けを整理します。

「動く」と「並べる」は、解く問題が違う

アニメーションの長所は、二つの状態の間を埋められることです。たとえば、地域別の棒グラフを売上順へ並べ替えるとします。完成前と完成後だけを切り替えると、同じ地域の棒がどこへ移ったか見失うことがあります。棒が元の場所から新しい場所へ動けば、読み手は対象の対応を追いやすくなります。

静止画の長所は、情報がその場に残ることです。1月、4月、7月、10月のグラフを同じ尺度で並べれば、視線を戻しながら比較できます。覚えておく量が減り、気になる箇所を自分の速さで見直せます。

つまり、動きは「どれがどれに変わったか」をつなぎ、並列表示は「どこがどう違うか」を見比べる道具です。どちらが常に優れているという話ではありません。

短い遷移は、対象を見失いにくくする

HeerとRobertsonは2007年、棒グラフ、散布図、ドーナツ図などの間を切り替える実験を行いました。参加者は24人で、最初の図で示された対象が、切り替え後にどこへ移ったかを答えました。

結果は、瞬時に切り替える静止条件より、動きを挟む条件の方が、対象の位置を追う誤差が小さくなりました。とくに、散布図の点を棒へ変えるような複雑な切り替えでは、変化を段階に分ける方法が役立つ場合がありました。いきなり点を棒へ変えるのではなく、まず横方向の位置をそろえ、その後で棒へ変えるという見せ方です。

この実験で使われた遷移は、対象を追う課題では1.25秒、値の変化を見積もる課題では2秒でした。長い演出を見せた研究ではありません。しかも、段階を増やせば必ず良いわけではなく、短い時間に複数の変化を詰めた条件では誤差が増えた例もありました。

実務へ移すなら、動かす対象を限定します。並べ替えなら位置、絞り込みなら残る要素、尺度変更なら軸というように、何が変わるのかを読み手が追える範囲へ絞ります。文字、色、形、位置を同時に変えれば、動きは案内ではなく新しい負担になります。

時系列の比較では、静止画が勝つことがある

翌2008年、Robertsonらは、国ごとの寿命、乳児死亡率などが時間とともに変わる多次元データを使い、三つの見せ方を比べました。

• 点が時間とともに動くアニメーション
• 各対象の通った道筋を一枚に重ねる軌跡表示
• 対象ごとの変化を小さな図に分けて並べる表示

分析条件には18人、プレゼン条件には別の18人が参加しました。正答率は全体に65%で、課題は簡単ではありませんでした。三つを比べると、小さな複数図はアニメーションより正確でした。

時間には場面差がありました。発表者が注目箇所を案内するプレゼン条件では、アニメーションの平均回答時間は15.8秒で、小さな複数図の25.3秒、軌跡表示の27.8秒より短い結果でした。ところが、読み手が自分で傾向を探す分析条件では、アニメーションは83.1秒かかり、小さな複数図の45.69秒、軌跡表示の55.01秒より遅くなりました。

参加者はアニメーションを楽しく、刺激的だと評価しました。その一方で、動く点を見失ったという評価も高くなりました。印象の良さ、回答の速さ、正確さは同じではありません。

この違いは自然です。アニメーションでは、ある時点の状態が次の瞬間に消えます。比較するには、前の位置を覚えたまま次を見なければなりません。小さな複数図なら、必要な時点へ何度でも視線を戻せます。分析のように「複数の対象を、複数の時点で比べる」課題では、残る情報が助けになります。

アニメーションが有効な3つの場面

1. 同じ対象の行方をつなぐ

並べ替え、絞り込み、拡大、グラフ形式の変更では、切り替え前後に同じ対象があります。棒、点、カードなどがどこへ移ったかを示す短い遷移は、前後の対応を保つ助けになります。

2. 一つの変化へ注意を向ける

プレゼンで話し手が「ここから北部地域だけを見てください」と案内し、該当する点だけを動かすなら、動きと説明の焦点がそろいます。すべての点が同時に動く状態とは違います。人物の視線や矢印も含め、注意の行き先を一つにそろえる考え方は、写真の人物を見出しへ向かせると読まれる？でも解説しています。

3. 手順の途中を見せる

開始状態と終了状態だけでは、途中の変化が誤解されることがあります。散布図の点が棒へまとまる、組織図の一部が統合される、工程が一段ずつ進むといった場面では、途中を短く示す意味があります。ただし、実際には連続していない因果関係を、滑らかな動きでつないではいけません。

静止画を並べた方がよい4つの場面

1. 離れた時点を正確に比べる

四半期の前後、施策の実施前後、複数の案の差を読むなら、同じ尺度の図を横に並べます。読み手が自分で戻れるため、記憶に頼らず比較できます。

2. 複数の系列から例外を探す

何十個もの点が動く画面から一つの逆行を探す作業は、見落としが起きやすくなります。対象ごとの小さな図、注目系列だけの強調、軌跡の表示を使い、結果を画面に残します。

3. 読み手が一人で分析する

話し手がいないWeb記事やダッシュボードでは、どこを見るかを利用者が決めます。再生、停止、前後移動ができない自動再生だけにすると、見逃した人が戻れません。静止版や表も用意します。

4. 数値を持ち帰って判断する

会議後に資料を読み返す、PDFで配布する、承認者が根拠を確認する場面では、結果が残ることが重要です。動きは補助にとどめ、結論と判断に必要な値は静止した図でも読めるようにします。

「視覚化・構造化」で、動かす前に問いを決める

伸滋Designの伝わる設計マップにある「視覚化・構造化」は、複雑な情報の関係を、読み手が目で追える形へ整える型です。アニメーションを付ける前に、次の順序で考えます。

1. 読み手に答えてほしい問いを一つ書く。「どの地域が伸びたか」「組織変更で誰がどこへ移ったか」のように、比較か追跡かが分かる問いにします。
2. 問いに必要な関係を残す。追跡なら同じ対象の前後、比較なら同じ尺度の複数時点を残します。
3. 動きの役割を限定する。位置の変化、表示の追加、強調のどれか一つを基本にします。
4. 動きを止めても結論が読めるか確認する。最終画面、静止版、表、要点の文章を用意します。

たとえば、営業会議で6地域の売上順位の入れ替わりを説明するとします。話し手が「東部が5位から2位へ上がった過程」を示すなら、東部の棒だけを強調し、順位変更を短く動かします。会議で「どの地域がいつ伸びたか」を比較して施策を決めるなら、四半期ごとの小さな折れ線グラフを同じ尺度で並べます。

グラフ自体の形式が問いに合っていなければ、動きを付けても改善しません。位置、長さ、角度、面積の比較しやすさは、円グラフはなぜ比較しにくいのか？で整理しています。系列名と線の照合を減らす方法は、凡例を探させない直接ラベルの設計も参考にしてください。

Webでは、止める・減らす・代わりを用意する

動きは理解だけでなく、アクセシビリティにも関わります。W3CのWCAG 2.2では、自動で始まり5秒を超えて続く動きが他の内容と同時に表示される場合、停止、非表示などの仕組みを求めています。また、操作に反応して起きる必須でない動きは無効にできるようにする基準もあります。

Webの図表では、少なくとも次を用意します。

• 再生、停止、最初から見る操作
• 利用者の「動きを減らす」設定を尊重した静止表示
• 動きを見なくても分かる結論の文章
• 正確な値を確認できる表または静止図

アニメーションが情報そのものなら、単純に消すだけでは内容が欠けます。その場合は、主要な段階を静止画で並べ、同じ変化を説明する文章を添えます。

研究を実務へ移すときの限界

• 2007年の実験は24人、2008年の実験は分析18人とプレゼン18人です。現在のスマートフォンやオンライン会議を直接調べたものではありません。
• 研究で使われたのは、統制されたグラフと課題です。ブランド動画、製品紹介、学習教材などへ同じ結果をそのまま広げることはできません。
• 「アニメーション」という一語でも、並べ替え、拡大、点の移動、自動再生、操作に反応する遷移では役割が違います。
• 正確さ、速さ、楽しさ、記憶、説得、意思決定は別の成果です。楽しいという評価を、理解や売上の改善と置き換えてはいけません。
• 静止画にも欠点があります。図を並べすぎれば小さくなり、軌跡を重ねすぎれば線が絡みます。問いに必要な時点と系列へ絞る必要があります。

Tverskyらは、動きが概念の変化と対応していること、そして知覚できる速さと複雑さであることを、良いアニメーションの条件として論じました。変化が見えればよいのではなく、読み手がその意味を正しく受け取れる必要があります。

公開前チェックリスト

• 動きで示したいのは、対象の移動、形の変化、時系列のどれか
• 読み手の課題は、同じ対象を追うことか、複数の状態を比べることか
• 一度に位置、色、形、文字を変えすぎていないか
• 話し手がいなくても、注目箇所が分かるか
• 前後を比べる必要があるなら、静止画を同じ尺度で並べたか
• 動きを止めても、結論と主要な数値を読めるか
• Webでは再生・停止と、動きを減らした表示を用意したか
• 楽しさや見栄えを、理解や正確さと取り違えていないか

まとめ：動かすのは、変化の意味をつなぐとき

アニメーションは、静止画を派手にする飾りではありません。同じ対象がどこへ移り、何に変わったかをつなぐときに価値があります。短く、意味のある変化だけを動かし、読み手が追えるようにします。

複数の時点や系列を比較して判断してほしいなら、結果を画面に残します。小さな複数図、軌跡、表、結論の文章を使い、読み手が自分の速さで戻れるようにします。「動くか、動かないか」ではなく、「追うか、比べるか」が選択の出発点です。

時系列データを見せたいが、動きを付けるべきか、静止図へ整理すべきか迷う場合は、伸滋Designの戦略的プレゼンテーション設計コンサルティングをご覧ください。何を判断してほしいかを先に定め、根拠を必要な位置へ置く資料設計を支援しています。具体的な資料については、お問い合わせフォームからご相談いただけます。

参考文献

1. Tversky, B., Morrison, J. B., & Bétrancourt, M. (2002). Animation: Can It Facilitate? International Journal of Human-Computer Studies, 57(4), 247–262.
2. Heer, J., & Robertson, G. G. (2007). Animated Transitions in Statistical Data Graphics. IEEE Transactions on Visualization and Computer Graphics, 13(6), 1240–1247.
3. Robertson, G., Fernandez, R., Fisher, D., Lee, B., & Stasko, J. (2008). Effectiveness of Animation in Trend Visualization. IEEE Transactions on Visualization and Computer Graphics, 14(6), 1325–1332.
4. Boyandin, I., Bertini, E., & Lalanne, D. (2012). A Qualitative Study on the Exploration of Temporal Changes in Flow Maps with Animation and Small-Multiples. Computer Graphics Forum, 31(3), 1005–1014.
5. Archambault, D., & Purchase, H. C. (2016). Can Animation Support the Visualisation of Dynamic Graphs? Information Sciences, 330, 495–509.
6. W3C Web Accessibility Initiative. Understanding Success Criterion 2.2.2: Pause, Stop, Hide.
7. W3C Web Accessibility Initiative. Understanding Success Criterion 2.3.3: Animation from Interactions.