アニメーションインフォグラフィックの作り方
アニメーションインフォグラフィックは、SNSで最もシェアされるフォーマットの一つであり、スライド上では最も詰め込みすぎられるフォーマットでもあります。うまく作れば、いくつかの数字がカウントアップし、数本のバーが伸び、視聴者は最も大切だった一つの統計を覚えて立ち去ります。下手に作れば、12個もの数字とそれぞれの横に置かれたクリップアートのアイコンで埋め尽くされた、静的なポスターになってしまいます。両者の違いは、より大きな予算でもAfter Effectsでもありません——階層・動き・テンポをめぐる、ほんの一握りの選択です。
このガイドでは、人々が本当に読んでシェアするアニメーションインフォグラフィックの作り方を解説します。何を見せるかの選び方、数字を生き生きと感じさせる方法、見せる順序の組み立て方、そしてデザイナーを雇わずに制作する現実的な2つの方法までを取り上げます。
上の例では、4つの統計——作成された動画数、視聴された分数、アクティブなクリエイター数、満足度——を示しています。これが機能している理由に注目してください。各数字は完成形で現れるのではなくカウントアップし、各バーは相対的な大きさを示すように伸び、各行は一斉にではなく1つずつ現れます。どれも装飾ではありません。一つの数字から次の数字へと視線を運ぶのは、まさにこれらなのです。
アニメーションインフォグラフィックとは？
アニメーションインフォグラフィックとは、データや事実を、1枚の静止画ではなく動くグラフィック——カウントアップするカウンター、伸びるバーやリング、アニメーションして現れるアイコンやラベル——を通して提示する短い動画です。チャートとポスターの中間に位置します。生のモーショングラフィックスチャートよりもデザインされており、印刷されたインフォグラフィックよりも動的です。よくある用途は、年間総まとめ、レポートの要約、製品ローンチの統計、SNS投稿、そしてピッチデックの「数字で見る」スライドです。
アニメーション版が静的版を上回る理由は、注意の引き付け方にあります。静的なインフォグラフィックは、どこを見るかを視聴者に選ばせます。アニメーション版は視聴者を誘導します——あなたが決めた順序で、一度に一つの数字へと。その制御こそが肝心なのですが、それはまた、すべてを一斉にアニメーションさせることで多くの人がやり損なう点でもあります。
ステップ1：20個ではなく、1つの数字を主役にする
最もよくある失敗は、インフォグラフィックを手持ちのあらゆる指標を放り込む場所として扱うことです。最も重要な一つの数字を選び、その周りを組み立てましょう。優れたアニメーションインフォグラフィックには明確な階層があります。1つの主役となる統計、それを支えるいくつかの統計、それ以外には何もなし。
- 主役となる数字を1つ。他に何も覚えていなくても、これだけは覚えてほしいという数字です。画面上で最も大きな要素にしましょう。
- 支える統計を3〜5個。主役の数字への文脈です。5個を超えると、どれも印象に残りません。
- 結論を変えないものはすべて削る。ある統計が主役の数字をより印象的にも、より信じられるものにもしないなら、それは雑音です。
これはデザインの判断ではなく編集の判断であり、シェアされるインフォグラフィックと、スクロールで素通りされるインフォグラフィックを分ける違いです。
ステップ2：不透明度ではなく、値をアニメーションさせる
インフォグラフィックを生き生きと感じさせる唯一のテクニックがカウントアップです。すでに完成した状態でフェードインするのではなく、ゼロから最終値へとアニメーションする数字のことです。ゼロから駆け上がる「50,000」は達成として読み取れますが、ただ現れるだけの「50,000」はラベルとして読み取れます。
カウントアップをプロらしく見せるディテールが2つあります。
- 値をイージングさせ、等速で動かさない。目標値に近づくにつれて減速する数字は、その数値に「落ち着いていく」ように感じられます。等速のカウントはロボット的に感じられます。
- 整形する前に丸め、等幅数字を使う。カウントの途中で「49,998.4」がちらつかないように丸めます。等幅（モノスペース）の数字を使えば、桁の幅の変化で数字が横にブレることがありません。通貨やパーセンテージには、生の整数ではなく適切な記号で整形しましょう——「$2.4M」「98%」のように。
同じ原則がバーやリングにも当てはまります。不透明度だけでなく量をアニメーションさせましょう。トラックの90%まで伸びるバーは相対的な大きさを伝えますが、全長のままフェードインするバーは何も伝えません。
同じ数字、同じ最終フレーム——違いは見せ方だけです。左は完成形で現れて静的なラベルとして読み取れ、右はゼロから駆け上がって達成として読み取れます。インフォグラフィックを「アニメーションしている」と感じさせる仕事のほとんどを、このたった一つのテクニックがこなします。
ステップ3：順序立てる——一度に一つずつ
視聴者は一度に一つの動く要素しか追えません。すべての統計が同時にアニメーションすると、目はどこを見ればよいか分からず、ステップ1で築いた階層は崩れてしまいます。その解決策は、見せ方をずらす（スタガー）ことです。各行や各統計が前のものから一拍遅れて現れ、カウントアップし、次が始まる前に落ち着く、という具合に。
シンプルで確実なリズムは次のとおりです。
- イントロの間を保持して、視聴者がタイトルを読み、何を見ているのかを把握できるようにする。
- 主役の数字を最初に見せ、カウントを最後まで完了させる。
- 支える統計を、おおよそ半秒ずつ間隔をあけて1つずつ登場させる。
- 完成した最終フレームを2〜3秒保持する——それが人々のスクリーンショットするフレームです。
ずらすことは、作品を意図的なものに感じさせもします。要素が順番に現れると、視聴者は小さな物語を体験します。すべてが一斉に現れると、誰かがアニメーションし忘れたスライドのように感じられます。
ステップ4：読みやすく、ブランドに沿わせる
アニメーションインフォグラフィックは、特に音を消した状態で自動再生されるSNSフィードでは、読みやすさで成否が決まります。いくつかのルールがあります。
- 統計ごとにブランドから取ったアクセントカラーを1色。各数字を色分けすると、目がそれらを区別しやすくなります。一貫したパレットは、テンプレートではなく「あなたらしさ」を保ちます。
- すべての数字にラベルを付ける。ラベルのない数字は謎かけです。単位や指標名を値のすぐ隣に置きましょう。
- 高コントラスト、大きな書体。サムネイルサイズで音なしに再生されると想定しましょう。主役の数字がスマートフォンで読めないなら、ほかのすべては意味をなしません。
- ナレーションがあるならキャプションを。SNS動画のほとんどは音を消して再生されるので、語られる文脈はすべて画面上のテキストにもする必要があります。
カウンターだけがフォーマットではありません。リング（ドーナツ）チャートは各セグメントが伸びるにつれてアニメーションし、全体がどう各部分に分かれるか——市場シェア、予算の内訳、タスクごとの所要時間——を示すのに向いています。同じルールが当てはまります。セグメントごとにアクセントカラーを1色、それぞれの横に明確なラベルと値、そして目が一切れずつ追えるようにずらした見せ方を。
制作する現実的な2つの方法
1. コードで作る
Reactに慣れているなら、Remotionのようなフレームワークを使えば全体をフレーム単位で組み立てられます。各カウンターを現在のフレームから駆動し、値をイージングさせ、行をずらし、きれいなMP4を書き出します。完全に決定論的で、無限にカスタマイズ可能です——ただしそれは、コードを書き、数字が変わるたびに再レンダリングすることを意味します。繰り返し使う看板作品には価値がありますが、今日の午後に必要な一品物には重すぎます。
2. データから生成する
コードエディタやAfter Effectsを開きたくないなら、このために作られたAIツールのほうが速いです。iArtのアニメーションチャート＆インフォグラフィックメーカーなら、数字を渡して見た目を「年間総まとめのインフォグラフィック、4つの統計、カウントアップアニメーション、ブランドカラー」のように記述すれば、イージングの効いたカウンター、ずらした見せ方、適切なテンポを自動で処理して、モーショングラフィックスをレンダリングしてくれます。1080pのMP4を約30秒で書き出し、各フレームがあなたの提供した数字からレンダリングされるため、数値は正確です——生成モデルが統計をでっち上げることはありません。数字を変えて再書き出しすれば、更新できます。
どちらの道も同じ種類の結果を生みます。トレードオフは制御性と速さです。スプレッドシートから作る一品物の「数字で見る」総まとめなら、ツールが楽勝で勝ります。独自のアートディレクションを施したオーダーメイドの作品なら、コードが最後の10%を与えてくれます。
避けるべきよくある失敗
- 統計が多すぎる。すべてを強調すれば、何も強調されません。主役の数字と、それを支えるいくつかを選びましょう。
- カウントアップせずに現れる数字。カウントアップこそ、アニメーションしていると感じさせる唯一のものです。
- すべてが一斉にアニメーションする。ずらしましょう。目は一つの動くものしか追えません。
- ラベルのない数字。ラベルのない数字は雑音です——必ず単位や指標を記載しましょう。
- でっち上げた数字、ずれていく数字。生成系の動画モデルを使うと、桁を幻覚（ハルシネーション）することがあります。データについては実際の値からレンダリングしましょう——正確さこそインフォグラフィックの肝です。
主役にする数字を一つ選び、値をカウントアップさせ、一つずつ見せ、読みやすく保つ——それが、人々がスクロールで素通りするアニメーションインフォグラフィックと、本当にシェアするものとの間のほとんどの距離です。