モーショングラフィックスで料金プランをわかりやすく説明する方法

記事タイトルと、料金帯および計算例を示すStripe公式ボリューム料金ドキュメントを配置した油彩の表紙

どちらのプランにも「$6から」と書いてあります。一方は到達した最後の料金帯の単価を全数量に適用し、もう一方は利用量の各部分にそれぞれの単価を適用します。動画で同じ魅力的な最低価格を見せても、視聴者は請求額について、それぞれまったく異なる誤解を抱くかもしれません。

料金解説動画を見た人には、請求額を計算できるようになってほしいものです。何を数えるのかを把握し、料金ルールを適用し、支払いの対象期間を確認できることが目標です。だからこそ、有用な説明の軸は計算になります。何を数え、どのルールを適用すると、いくら支払うことになるのかを伝えます。

モーションはこの計算を少しずつ明らかにできますが、隠してしまうこともあります。安い月額換算だけが先に現れ、年間契約の条件は読む時間がないほど遅れて表示される。数量カウンターは勢いよく進むのに、どこでルールが変わるかわからない。割引が画面を占める一方で、その終了時期は切り替えの中に消えてしまう、といったことが起こります。

まず完全な請求額を用意し、そこから逆算して見せる順番を決めましょう。数量を特定し、単価を適用し、合計のそばに支払いの対象期間を残します。

視聴者が本当に知りたい問いから始める

「料金を説明する」という依頼には、いくつもの意味があります。見込み客が知りたいのは、プランの選び方かもしれませんし、従量料金の見積もり、年間払いの仕組み、無料枠を使い切った後の扱いかもしれません。関連する問いではあっても、必要な実演はそれぞれ異なります。

動画で答える中心的な問いを一つ選びます。従量制なら「今月6単位使うと、いくらかかる?」、年間契約なら「今日$348支払うのに、なぜページには月額$29とある?」、シート課金なら「誰が有料シートとして数えられる?」といった問いです。

問いを絞ることは、答えが変わる条件を省いてよいという意味ではありません。むしろ、必要な条件を特定しやすくなります。金額が通貨、請求期間、有効なシート数、最低契約条件に左右されるなら、それらは計算に含める情報です。装飾的な製品機能の一覧は含まれません。

絵コンテを作る前に、期待する答えを書いてください。平文での計算についてチームの認識が一致しなければ、アニメーションはその食い違いを増幅します。まず担当のプロダクト責任者や請求担当者と料金ルールを確定し、その後で視覚的な説明方法を決めます。

Stripeの料金帯の例で、ボリューム料金と段階制料金を説明する

Stripeの段階制料金ドキュメントでは、架空のフォント販売事業を使って二つのモデルを区別しています。例の単価は1〜5単位が$7、6〜10単位が$6.50、10単位を超える分が$6です。6単位では、ボリューム料金の合計が$39、段階制料金の合計が$41.50になります。

違いは、単価をどこに適用するかです。ボリューム料金では、到達した料金帯の単価を6単位すべてに適用します。段階制料金では、最初の5単位に$7、6単位目に$6.50を適用します。同じ数量と料金表を使っていても、必要な視覚的説明は異なります。

料金帯と計算例を示すStripe公式ボリューム料金ドキュメント。

ボリューム料金のアニメーションでは、一つの単価で全数量と合計を結びつけられます。段階制料金では、先に使った単位に元の単価が適用され続ける理由がわかるまで、グループを分けて見せる必要があります。全体の上にある「$7」を単に「$6.50」に置き換えると、別の課金モデルを伝えてしまいます。

これは計算の仕組みから導かれる編集上の判断です。複雑なアニメーションは必要ありません。6個の印、明確な料金帯の境界、消えずに表示される小計が正しく関係づけられていれば、回転する料金カードより多くを伝えられます。

理解しやすい小ささと、信頼できる完全さを両立させる

計算例では、数量、何を数える単位なのか、期間、通貨、合計を定義します。例示する小計に税金が含まれない場合など、明記しなければ解釈が変わる除外条件も示してください。網羅的に見せるためだけに、関係のない例外を加える必要はありません。

6単位の段階制料金の例なら、ラベルを付けた6単位から始められます。5単位をまとめ、残りの1単位を分けます。最初のグループのそばに「5 × $7 = $35」、次のグループのそばに「1 × $6.50 = $6.50」を示し、最後に両者を「今月6単位で$41.50」という合計へつなぎます。

最後の状態が重要です。合計が出る前に小計が消えると、視聴者は動きを追いながら数字も覚えておかなければなりません。結果を示すときにも、計算の根拠を見える状態にしておきましょう。式全体があれば、ただ説明を受け入れるだけでなく、自分で確かめられます。

動画の中心的な問いに必要でなければ、この例に手数料や割引を加えないでください。項目が増えるたびに、理解すべき関係も増えます。実際の製品に必須の基本料金があれば含める必要がありますが、任意の複雑な例外は、動画の横に別の例として置くほうがよい場合もあります。

直感が外れる境界を見せる

一つの数量だけでも計算は実演できますが、プランの挙動までは伝わらないことがあります。次の場面では、数量を変えて境界をまたぐと有用です。問いは「ルールの何が変わり、何が変わらないのか」になります。

段階制料金では、5単位から6単位になると、次の料金帯に1単位が加わります。最初の5単位は元の位置で元の単価を保ちます。全単位の色を変えるのではなく、新しい単位を2番目のグループへ移動させます。その動きによって、先の小計が維持されることを強調できます。

ボリューム料金では、境界を越えると全数量に適用する単価が変わる場合があります。別の架空の例として、100単位までは1単位$10、101単位以上は1単位$8だとします。100単位なら合計$1,000、101単位なら合計$808です。この例では安い単価が全単位に適用されるため、1単位増えると合計が下がります。

離散的な数量の間を、説明なしに滑らかな費用曲線で補間しないでください。実際のプランにはない端数単位や連続的なルールがあるように見えることがあります。整数のシートを数える製品なら、整数のシートを示します。利用量が端数になりうるなら、カウンターを設計する前に、実際の単位と丸め方を明示します。

Stripeが公開する単価の例を使い、5、6、7単位のボリューム料金と段階制料金の合計を比較した計算。

5単位から6単位への変化は、特に違いがわかりやすい場面です。どちらも5単位では$35から始まります。その後ボリューム料金は$39となり、表示された6単位目の単価が$6.50なのに、増加額は$4です。最初の5単位にも安い単価が適用されるからです。段階制料金では新しい単位だけにその単価が適用されるため、$41.50になります。7単位では、それぞれ$45.50と$48です。

これらは絵コンテの確認点になります。5単位とその合計を示し、6単位目を追加して、どの単価ラベルが変わるかを正確に見せます。ボリューム料金では6個のラベルを同時に変えます。段階制料金では最初の5個を変えず、6単位目の小計を別に追加します。視聴者は最終金額から課金ルールを推測し直す必要がなくなります。二つの小計を総額の横に残し、足し算できるだけの時間を確保してください。

価格、単位、支払い時期を一緒に表示する

架空の年間契約なら、年払い$348、月額換算$29という、より単純な内容です。それでも不適切なアニメーションは簡単に生まれます。大きな「$29」を数秒間見せてから年間払いを明かすと、その場面の大半で不完全な印象を与えます。

数字、単位、支払い条件を一つの情報グループとして扱います。視覚的な強弱を付けることはできますが、互いに無関係な事実として順番に登場させてはいけません。月額換算を最も大きくしながら、そのすぐ下に「年額$348を請求」と置き、同時に登場して同じ時間静止させることができます。

この架空の契約シーンでは、両方の行が0.8秒で静止し、4.8秒までその状態を保ちます。もっと複雑な請求なら、長めの静止時間や段階的な計算表示が必要かもしれません。

主要な数字を残したまま、料金の切り替えで条件だけを消さないでください。カードを隅に縮小して「$29」だけが残るなら、その縮小版は別の意味を伝えています。エンドカードやSNS用の切り抜きも含め、すべての構図をそれ自体で成立する価格表示として確認します。

OpenDesignで再生する独自の架空料金デモ。2.4秒時点で月額換算と年間支払額を同時に表示。

動かすのは説明であって、支払額そのものではない

数字がカウントアップする演出は洗練されて見えますが、その意味は曖昧です。実際の使用量なのか、累積小計なのか、見積もりなのか、単なる表示効果なのか。視聴者に推測させてはいけません。

金額が固定なら、誰も支払わない途中の価格を経由するより、確定値をそのまま示すほうが明快な場合があります。積み上がる仕組みの説明が目的なら、累積合計が役立ちます。ただし、追加される単位とのつながりを保ってください。そうすればカウンターは、装飾ではなく計算になります。

割引には特に注意が必要です。$100から$60へ下がる動きは比較を伝えられますが、その比較の基準も見えなければなりません。$100は旧価格なのか、月払いの選択肢なのか、初回割引前の価格なのか。文字のデザインや動きで、元のオファーにない定義を補うことはできません。

不明確なラベルを派手な動きで補おうとしないでください。「利用量」が何を数えるかわからない人に、1,000個の動く点を追加しても問題は解決しません。抽象的なラベルを具体的な単位に置き換えるか、まず代表的な1回の出来事が数えられる様子を示してから、合計へ広げます。

見積もりなら、不確実さも見えるようにする

料金動画の中には、固定した前提で正確な請求額を示すものもあれば、将来の使い方によって結果が変わる見積もりを示すものもあります。両者は約束する内容が違います。精密に見える数字は、見積もりを実態以上に確実なものに感じさせることがあります。

観測値ではなく仮定を使う入力には、そのことを示します。たとえば、1か月を通して12の有効シートを使い、途中の変更はないと仮定した見積もりです。この前提を計算のそばに置けば、自分の金額が変わる理由を理解しやすくなります。

実際の仕組みに変動する利用量があるなら、普遍的な答えを装う一つの例より、意味のある少数のシナリオを検討します。低利用、標準利用、高利用の例は、その定義が明確なら有用です。ただし、対応するデータがなければ、実測した顧客分布のように示してはいけません。

例を現実的に見せるために、丸め、日割り、税、為替の扱いを創作しないでください。関連ルールを確認するか、そのルールを必要としない範囲に教材の例をとどめます。細かい架空の請求書を実製品の確定情報のように見せるより、範囲が狭くても正確な説明のほうが役立ちます。

比較して確かめられる画面を作る

価格の場面には通常、金額、それを説明するルール、例の適用範囲を限定する背景情報という、少なくとも三つの読み取り階層があります。下位の情報が実質的に読めなくなることなく、優先順位によって視線を導く必要があります。

近接配置で、どのラベルがどの数字に属するかを示します。単位は離れた凡例ではなく、金額の隣に置いてください。比較する料金帯は同じ位置に揃えます。二つのプランを比べるなら、共通の前提を同じ場所に置くことで、違いを確認しやすくします。

色で現在の料金帯や追加された数量を区別することはできますが、グループを見分ける唯一の手段にしてはいけません。ラベル、括弧、一貫した空間的なまとまりがあれば、静止画でも、色の見え方が異なる人にとっても説明を保てます。

実際の配信サイズで確認してください。全画面の編集画面で読める条件も、小さなカードに埋め込むと消えてしまうことがあります。価格を理解するうえで必要な条件なら、その表示を守る構図にします。数字を小さくすることが、正しい選択になる場合もあります。

後の修正も料金ルールと結びつける

料金素材は、制作チームが計算を見直したいからではなく、キャンペーンが変わったために修正されることがよくあります。誰かが目立つ金額だけを変え、残りのアニメーションも有効だと思い込むと、古い数量、小計、請求期間、エンドカードの条件が気づかれずに残ります。

プロジェクトでは入力値と表示する合計を一緒に管理します。年払いから月払いへの変更があれば、支払額、比較の基準、支払いラベル、そのオファーを再利用する全シーンを見直します。見える計算式を、無関係なテキストレイヤーの集まりではなく、相互に依存するものとして扱ってください。

短い回帰確認として、通常の数量と境界に当たる数量を一つずつ選び、別途計算して書き出し結果と比較できます。価格を編集したら、その両方を再確認します。

作風への承認ではなく、計算できるかでレビューする

視聴後、レビュアーが動画の最初の問いに答えられる必要があります。段階制料金の例なら、7単位の金額を尋ねます。期待する答えは$48で、5単位が$7、2単位が$6.50です。

誤答にも診断の手がかりがあります。7単位すべてに$6.50を適用したなら、グループ分けや切り替えがボリューム料金を示唆したのかもしれません。請求期間がわからなければ、期間ラベルの表示タイミングが悪かったり、視覚的な優先度を下げすぎて役に立たなくなっていたりする可能性があります。

書き出した動画の境界フレームも調べます。退出前の最後の安定したフレーム、プラン切り替え後の最初のフレームを読んでください。金額だけ残って条件が一瞬消えるなら、最終カードが正しくても、アニメーションは途中で誤解を招く状態を作っています。

目標は、構造を隠して料金を単純に感じさせることではありません。必要な構造を理解できるようにすることです。よい料金解説を見た人には、請求額を予測する方法と、その予測の前提が残ります。モーションがその思考を助けるとき、使う価値が生まれます。