注意をそらすトランジションを避け、シーンをつなぐ方法

トランジションの仕上がりが美しくても、製品動画が理解しにくくなることがあります。フレームが回転し、インターフェースが粒子に溶け、次のシーンが見事にぴたりと収まります。その後、視聴者は今どこを見ているのかを把握するために、1秒を使います。

その1秒は重要です。ナレーションが結果を説明したり、小さなラベルが現れたり、新しい操作が始まったりするのと同じ1秒かもしれません。トランジションが、次のシーンに必要な注意を使い切ってしまったのです。

役立つモーショングラフィックスのトランジションは、シーン間で何が変わり、何が変わらなかったかを伝えます。カードが詳細画面になったこと、操作が結果を生んだこと、比較がもう一方のバージョンに移ったこと、話題が変わったことを理解させます。その成否は、シーン間で起きることの多さより、何が一貫して明確に保たれるかに左右されます。

架空のレポート作成ワークフローを考えてみましょう。レポートを選び、グラフを確認し、結果を共有します。Materialが公開している動きの構成例では、共有要素でこれらの状態をつなぐ方法を見ることができます。

シーン同士の関係から始める

効果を選ぶ前に、前のシーンから次のシーンで何が変わるかを書きます。「レポートカードを開くと、選んだレポートになる」は関係の説明です。「速いズームトランジションを使う」は、関係が明確になる前に実装方法を選んでいます。

よくある関係でも、適した扱いはそれぞれ異なります。詳細画面は、すでに見えている何かに属します。結果は操作に続きます。新しい話題には、以前の話題との空間的な関係がないかもしれません。ビフォー・アフターの比較では、二つの状態にある同等の内容を視聴者が認識する必要があります。

これらをすべて右からのスライドにすると、スタイルは一貫しても、説明は弱くなります。動画が単に話題を変えただけでも、移動方向が画面遷移を意味し始めます。共通のオブジェクトが広がる動きは、無関係な画面を前の画面の詳細だと示唆するかもしれません。編集者が意図したかどうかに関係なく、動きは意味を持ちます。

レポートの例なら、カードからレポートへのトランジションでは、選んだレポートが同じものだと分かるようにします。グラフから共有完了の確認へのトランジションでは、原因と結果を保ちます。最後のブランドメッセージは、話の階層が変わるため、単純なカットでつなげます。

この少しの検討が、後で時間を節約します。レビュアーにトランジションがしっくりこないと言われたら、関係自体が違うのか、関係が見えにくいのか、演出が過剰なのかを問えます。それぞれ必要な修正は異なります。

頼れる目印を一つ保つ

GoogleのMaterialの動きの構成に関する指針は、共有要素による連続性を説明しています。明確な注視点を保つことを勧め、面や内容をトランジションの前後でどうつなげられるかを論じています。これはインタラクションデザインの例ですが、その視覚的な原則は動画でも役立ちます。視聴者には、安心して追える何かが必要です。Materialの動きの構成ガイドで、元の例を確認できます。

公開されている縮小の例では、大きな面が縮む間も、識別しやすい青いヘッダーの内容が残ります。添えられたタイミング図は、カードの高さの変化と、退場する非共有コンテンツの不透明度を分けています。参考になるのは、すべてが一緒に消えるわけではないことです。残す内容が同一性を担い、残りが退きます。この役割分担を借りてください。例に示された秒数そのものを、あらゆる製品動画のルールとして使う必要はありません。

レポートの流れでは、選んだカードにタイトル、サムネイル、リスト内の位置があります。複雑な動きの中で、三つすべてを維持する必要はありません。タイトルと、レポートの特徴が分かる一部を残すだけで、次の詳細画面につながるかもしれません。

目印には、オブジェクト、ラベル、場所、一貫した視覚的性質を使えます。大切なのは、同じものだと分かる手掛かりになるかどうかです。ありふれた青い長方形が別の青い長方形になっても、連続して見えるだけで、どのレポートを開いたかは伝わらないかもしれません。短いタイトルを表示し続ける方が、技術的に見事な形状変化より、よく説明できる場合があります。

目印が多すぎても、まったくない場合と同じように混乱を招きます。すべてのカード、アイコン、ラベル、ツールバー項目が別々に動くと、追う候補がいくつも生まれます。関係を最もよく説明する要素を選び、残りの内容はそれを支えるようにします。

同じMaterialガイドにある共有要素が一つだけの例では、その選択がより明確です。青い円は、位置が変わりながらも、拡大の間ずっと残ります。その周りで面が広がり、共有されないテキストが入れ替わります。円が連続性を与えるため、以前と以後の説明を同じままにする必要はありません。

詳細画面の内容が大きく異なるレポートカードには、役立つモデルです。サムネイルか、識別できるタイトルを目印として残し、概要専用の内容は退場させます。関係が分かってから、詳細な操作対象を登場させます。以前のアイコンをすべて残しても、説明が増えることなく、トランジションが忙しくなるだけです。どのオブジェクトを開いたかが伝わる、最小限の共有要素を選んでください。

カメラの動きと製品の挙動を区別する

製品動画では、実際の画面録画と、編集上のカメラ移動を組み合わせることがよくあります。視聴者がその違いを自動的に見分けられるとは限りません。

カードがフレームいっぱいに広がるとき、製品が詳細画面を開いているのでしょうか。それとも、編集者が静止したスクリーンショットを拡大しているのでしょうか。ツールバーが滑って消えるとき、それは実際のアプリの状態でしょうか。それとも、構図を単純にするために切り取ったのでしょうか。どちらの扱いも有効ですが、編集で裏付けのない操作を示唆してはいけません。

違いを保つ方法の一つは、編集上の動きを入れる前に、実際の操作を見せることです。クリックと、その結果として生じた画面状態を示してから、関連する内容へズームします。視聴者は、製品が何をしたかと、動画が何を強調しているかを見分けられます。

もう一つの方法は、スクリーンショットの周囲に、編集上の枠だと分かるコンテナーを設けることです。スクリーンショット自体は安定した長方形を保ち、カメラがその見せる範囲を変えます。録画ではなく静止画が素材の場合には、特に役立ちます。説明用のイラストだと明示したシーンでなければ、個々の操作部品を、実際に動く製品の一部のようにアニメーションさせないでください。

この区別はタイミングにも影響します。処理時間が主張の中心なら、実際の読み込み状態を、即時完了を思わせるトランジションで消すべきではありません。簡潔な実演のために待ち時間を短くすることはできますが、製品の性能を黙って別のものに定義し直さない方法で行います。

次の操作の前に、移動先を把握する時間を与える

トランジションが終わるのは、最後のアニメーション属性が止まった瞬間とは限りません。視聴者が新しいフレームを理解したときです。

レポートが拡大して詳細なグラフになるとします。落ち着くと同時に、カーソルが小さな「Share」操作部品へ移動し、ナレーションが書き出しオプションを説明し始めます。視聴者は、グラフを認識し、カーソルを探し直し、操作対象を見つけ、説明を理解することを同時に求められます。タイムラインが完璧に同期していても、体験は慌ただしく感じられます。

位置関係を把握する短い時間を加えるか、画面の組み替えを減らします。グラフのタイトルは安定した位置に保ちます。同時に変えると追いにくいなら、カメラの拡大率と画面状態をまったく同じ瞬間に変えることは避けます。視聴者が認識する機会を持てたフレームから、次の操作を始めてください。

すべてのトランジションの後に、一定の停止時間を入れる必要はありません。繰り返すと機械的な流れになることがあります。見慣れた画面なら、把握にほとんど時間がかからないかもしれません。情報の密度が高い新しい画面には、より多くの時間が必要です。変化した情報量に、落ち着く時間を合わせます。

役立つ確認方法は、トランジション直後で停止し、次にどこを見ればよいかを問うことです。答えが、すでに終わったナレーションに依存するなら、視覚的な受け渡しを修正します。移動先は、次の出来事を支えられるだけ明確であるべきです。

有用な連続性を加えないなら、直接カットする

デザイナーは、直接カットでつなぐことを、仕上げが足りない仕事と考える場合があります。しかし多くの製品動画では、それが最も明快なトランジションです。

カットは、空間的な関係があるように見せかけずに、新しい話題を示せます。問題の説明から実際の製品録画へ、操作の実演から顧客の引用へ、証拠から最後の行動喚起へ移れます。視聴者は、編集上の話題が変わったと理解できます。

課題は、前後のよいフレームを選ぶことです。情報の密度が高い画面同士を、同じ拡大率のまま異なる情報へ切り替えると、見失いやすくなります。短いタイトル、認識しやすい視覚構造、意図的に変えた構図が、切り替わりを明確にします。

未解決のカットを隠すために、複雑なトランジションを使わないでください。二つのシーンに有用な関係がなければ、形状変化は間を埋めるだけです。関係があるなら、それを特定して保ちます。いずれの場合も、効果を加えるより、編集上のつながりを解決する方が有効です。

直接カットは、リズムも生みます。浮遊する動きが続く動画は、重みがなく、流れを把握しにくく感じることがあります。明快なカットの後に安定したフレームを置けば、視聴者に分かりやすい区切りを与えられます。凝ったトランジションは、その関係に注意を向ける価値がある場面のために残しておきます。

移動方向をストーリーとそろえる

動きは、空間、順序、階層への予想を生みます。左から右へ進んでいた流れが突然逆向きになると、プロセスが後戻りしているように感じることがあります。取り消し操作には有効かもしれませんが、成功して次へ進む場面では混乱を招きます。

ワークフロー動画では、方向が進行、画面移動、単なる構図のどれを表すかを決めます。進行を表すなら、関連する一連のシーンで、その約束を保ちます。インターフェース自体が異なる方向のモデルを使うなら、任意の編集上の習慣より、実際の製品の挙動を優先すべきです。

動画で必要がないのに、すべての方向に意味を与えないようにします。短いクロスフェードなら、地理的なモデルを作らずに強調を切り替えられます。固定した全体図でハイライトを変えれば、図全体を画面内で移動させずに、プロセスが進む様子を示せます。

比較では注意が必要です。以前のバージョンが左へ去り、新しいバージョンが右から入ると、置き換えとして読まれるかもしれません。丁寧な比較が目的なら、対応する位置を合わせたカットや分割画面の方が、対応関係を明確に保てる場合があります。選択は、視聴者に比較してほしいのか、流れを追ってほしいのか、単に変化を認識してほしいのかによって変わります。

ローカライズ版では、読む習慣や画面のレイアウトが異なる場合があるため、方向は特に重要になります。すべてのトランジションを反転すれば十分だと思わないでください。動き、言語、製品の状態の間にある実際の関係を見直します。

同時に変わるものを減らす

シーンのトランジションでは、内容、拡大率、位置、色、奥行き、向きを変えられます。六つすべてを一度に変えると、印象的な瞬間にはなりますが、同じものだと追跡するための手掛かりが、ほとんどなくなります。

出来事を説明する変化の軸を選びます。レポートカードがレポートとして開くなら、拡大率と位置の変化が必要かもしれません。回転、色の反転、ぼかしまで必要とは考えにくいでしょう。グラフのハイライトは、シーン全体の置き換えではなく、強調の変化だけでよいかもしれません。

ここで抑制は、単に美的な選択ではなく、機能になります。同時の変化を減らすと、何が変わり、何が同じままかが見えやすくなります。次のフレームと前のフレームのつながりも、感じやすくなります。

ソースで作るアニメーションでは、コンテナーと副次的な内容のタイミングを分けます。先に面を移動させ、移動先が分かってから詳細な操作部品を出せます。製品が遅いように感じない程度に遅延を短くし、意味のあるステップを隠していないかも確認してください。

画面録画を使うときは、意図せず動きを重ねていないかに注意します。実際のパネルは、すでに登場のアニメーションをしているかもしれません。録画全体に編集上のスライドを加えると、異なる座標系でパネルが二度動くことになります。それぞれの効果が滑らかでも、結果として妙に滑りやすい感触が生まれることがあります。

前後の情報と一緒にトランジションを見直す

トランジション単体のアニメーションだけで承認しないでください。直前の最後の一文、トランジション自体、直後の最初の意味のある操作を一緒に見ます。

前のシーンには、まだ読まなければならない条件が残っているかもしれません。トランジションが、それを早く消しすぎることがあります。次のシーンには、前のシーンと比較する数値があるかもしれません。長い効果は、最初の数値を必要以上に長く記憶に保つことを要求します。効果音や音楽のアクセントによって、本当に重要なのは直後の結果なのに、トランジションに注意が向くこともあります。

初見の人に簡易的に確かめると、こうした問題が分かります。どのレポートが開いたか、どの操作によって確認表示が出たか、二つ目のグラフは新しいデータセットなのか同じものの別表示なのかを尋ねます。答えを聞けば、意図した関係がトランジションで保たれたかが分かります。

書き出した動画のつなぎ目前後のフレームも調べます。一瞬の黒いフレーム、切れた影、不一致のトリミング、遅れて読み込まれる画像は、滑らかなプレビューでは見えなかった連続性の破綻を起こします。これらは具体的な不具合であり、動きを多くしたいか少なくしたいかという主観的な好みとは別です。

有効な負荷テストとして、一時的な確認版で音楽を消し、色鮮やかなスタイルを中立的な面に置き換える方法があります。それでも、選んだレポートが詳細画面になることを認識できるなら、連続性は実際の関係によって支えられています。両シーンが青いという理由だけでつながっているなら、目印が一般的すぎるかもしれません。確認後は最終的なスタイルに戻してください。目的は同一性の診断であり、中立的な見た目を指定することではありません。

意味を明示したトランジションの指示書を書く

エージェントに「高級感のあるトランジションを加えて」と頼む代わりに、関係と目印を指定します。「選んだレポートカードが、レポートの詳細画面になります。レポートのタイトルはずっと表示してください。詳細画面が落ち着いた後にツールバーを出してください。実際の製品のクリックと結果は保ってください。」

話題を変えるなら、指示はより単純にできます。「直接カットして新しいセクションへ移ります。次のUI操作の前に、新しい見出しを安定したフレームで見せてください。」抽象的なスタイルの形容詞より、評価しやすい指示です。

完成した動画がつながって感じられるのは、一つのシーンから次のシーンへどう進むかを、視聴者が理解できるからです。トランジションは、同一性、原因、順序を保つことで、使う意味を持ちます。それがうまくいけば、視聴者が覚えているのはショット間の効果ではなく、製品のストーリーです。