AIモーション制作に使うブランドアセットの準備方法

ロゴ、スクリーンショット3枚、ウェブサイトへのリンクが入ったフォルダー。モーション制作を始めるには十分に見えます。ところが初稿が届くと、暗い背景でロゴが見えず、見慣れないフォントで製品名が折り返され、インターフェースのスクリーンショットには先月の機能名が残っています。これらの問題はどれも、アニメーションから始まったものではありません。

モーションデザイン用のブランドアセットを準備するとは、動画が作り出す状況の中で、渡した素材を使えるようにすることです。ロゴには適切なバリエーションが必要です。書体には必要な文字とウェイトが必要です。スクリーンショットには、特定できる製品バージョンと明確な役割が必要です。ファイルだけでなく、それに付随する判断も大切です。

コンパクトな素材一式は、制作者が推測することになりがちな問いに答える必要があります。どのアセットが最新版なのか、どこで使うのか、動かしても何を保持しなければならないのか、という問いです。

各アセットに役割を与える

ファイル形式の一覧ではなく、想定するシーンから始めます。冒頭に製品名、中盤にインターフェース、最後にウェブサイトへの誘導を置くなら、それぞれ必要な素材が異なります。ワードマーク、余計なものが映っていない画面録画、承認済みURL、背景に合う終了画面用ロゴの組み合わせが必要になるかもしれません。一方、イラストのライブラリはまったく不要かもしれません。

渡すファイルごとに、役割を短く書きます。「このスクリーンショットで予約完了の状態を見せる」は、「スクリーンショットを何枚か置きました」より有用です。役割が分かれば、切り抜いても残すべき情報と、画像のどこを強調すべきかが制作者に伝わります。また、手元の画像では予定のシーンを支えられない場合も見つけやすくなります。

参考資料と制作に使う素材は分けます。競合の動画のスクリーンショットは参考であって、自分たちの動画に配置してよいと許可している素材ではありません。古いプレゼンテーションの低解像度画像は、構図の説明にはなっても最終出力には使えないかもしれません。その違いを素材一式の中に明記し、会話を覚えているかどうかに依存しないようにします。

使いやすい素材一式には、分かりやすい入口があります。短いREADMEで承認済みファイルを特定し、各用途を説明し、足りない入力を示せます。ロゴを5種類送るなら、どれが現行版かを伝えてください。制作者がアーカイブを探し回ったりファイル名から推測したりせず、正しい素材で始められることが重要です。

適切なロゴのバリエーションと配置ルールを渡す

ウェブサイトのヘッダーで機能するロゴが、動く映像の上でも機能するとは限りません。使用予定の明るい背景と暗い背景で実物を確認してください。想定表示サイズでも細部が見えるか、透明ファイルに予想外の余白が含まれて配置しにくくなっていないかを見ます。

Dropboxのロゴガイドラインは、ロゴを万能な1枚の画像ではなく、決まった表現を持つシステムとして扱うブランドのよい例です。公開されている使い分けを見ると、ロゴファイルだけを渡した場合に何が未指定のまま残るかが分かります。

自分たちの素材一式でも、背景の条件ごとに使うバリエーションを指定します。ブランドに最小クリアスペースの規定があれば含め、シンボルだけをワードマークなしで表示できるかも説明します。ロゴを変形してはいけないなら、明記してください。「ロゴをアニメーションさせる」という大まかな指示だけでは、ブランドの形そのものを変えてしまう余地が大きすぎます。

SVGを渡せば解像度を保てますが、どのワークフローでもすべてのパスが編集可能なオブジェクトとして扱えるとは限りません。透明PNGも、用途に十分な解像度があれば不適切なわけではありません。実際のコンポジションとツールに合わせてファイルを選び、拡張子を品質の証拠にするのではなく、読み込み後の表示を確認します。

唯一使えるロゴに、不要な背景を焼き込まないでください。後から終了カードの色が変わると、ロゴの周囲の白い四角は避けられたはずの修正になります。承認済みの原本を保管し、ブランドルールに合う場合は、背景をコンポジション側で用意します。

下の検証画像では、支給されたOpenDesignのロゴの組み合わせを2種類の背景で使用しています。シンボル、ワードマーク、間隔は同じまま、前景の表現だけを変えています。これは最初の素材確認に有用です。トランジションや製品画面を足す前に、ロゴ全体が見えるかを制作者が確認できるからです。動画が明るいシーンと暗いシーンを行き来するなら、同様の比較画像を素材一式に含めてください。シンボルとワードマークの実際の間隔と、書き出したファイルの周囲の透明余白を確認します。外側の余白が異なる2つのファイルは、数学的には両方のロゴが中央にあっても、位置がずれて見えることがあります。

タイポグラフィを再現できる状態にする

フォント名は指示であり、そのフォントが利用できる保証ではありません。制作環境には、正しいファイルへのアクセスか、承認済みの読み込み方法が必要です。デザインで使う実際のウェイトも必要です。通常のフォントを擬似的に太くすると、特に大きなタイトルでは、意図したセミボールドと見え方が異なることがあります。

Dropboxのタイポグラフィのガイドを見ると、書体も素材の話に含めるべき理由が分かります。公開システムでは具体的な書体を特定し、実際の見本を示しています。自分たちの素材一式でも、同じように文字の階層を具体化してください。制作者が圧縮されたウェブサイトのスクリーンショットから、見出し用の書体を推測する必要があってはいけません。

動画の文言に近い一文を試します。最も長い製品名、表示予定の通貨記号、アクセント記号付き文字も含めてください。短い英語のスローガンに対応する書体でも、顧客名や別市場で必要な文字を収録していないかもしれません。全ショットのタイミングを決めた後で直すより、静止画の検証段階で見つけるほうがはるかに簡単です。

メインのメッセージ、補足行、インターフェースへの注釈、条件表記という少数のテキストの役割を用意します。役割ごとに例を示し、使用するウェイトを特定してください。デザインができる前にすべてのピクセルを指定する必要はありません。ただし、法的な条件表記が第2の見出しと間違われないよう、役割同士の関係を伝える必要があります。

利用許諾の情報は、フォントの入手元や社内の素材記録と一緒に管理します。誰かのノートパソコンにたまたまインストールされているからといって、フォントファイルを送らないでください。チームがファイルを配布できないなら、許可された制作者がどう入手すべきかを説明するか、制作開始前に使用可能な代替案で合意します。

公開されているDropboxのロゴを拡大すると、もう1つの素材上の問いが見えてきます。どの幾何学的な関係が、そのブランドの形を定義しているのでしょうか。ひし形には決まった角の共有の仕方と隙間があります。全体を引き伸ばすと、結果がまだ箱に似ていても、その関係は変わります。自分たちのロゴでも、読み込んだものを承認済みの原本と同じ高さにそろえて比較してください。接している辺、内側の隙間、小さな突起を見ます。参照画像をソースのそばに置き、後で切り抜き、マスク、縦横比の異なる拡大縮小を行った際も、同じ形と照合できるようにします。動く背景の中より、この独立した検証画像のほうが変形したロゴを見つけやすくなります。

色はカラーコードの寄せ集めではなく関係として説明する

色の一覧だけでは、それらの組み合わせ方は伝わりません。制作者には、背景に使う色、メインの文字に使う色、強調を示す色が分かる必要があります。その役割がなければ、承認済みの色をすべて同じフレームに使っても、ブランドと関係のない印象になり得ます。

明るい構図と暗い構図の両方を使う予定なら、それぞれ1つ用意します。ロゴ、タイトル、補足行、小さな注釈を両方に置いてください。動画の1フレームという大きさで、コントラスト、情報の階層、ブランドの振る舞いを確認できます。アクセントカラーが大きな色面でしか機能せず、小さい文字には使えないかどうかも分かります。

動く背景には特に注意します。冒頭では読めたタイトルが、明るい物体が後ろを通ると見えなくなることがあります。静止した参考画像では、ショット全体を通じた読みやすさは証明できません。文字に安定した背景面が必要か、画像の中の落ち着いた領域を使うべきか、場面が変化しても読みやすい別の配置にするかを判断します。

ブランドにグラデーションが含まれるなら、承認済みの例で役割と方向を説明します。「ブランドカラーでグラデーションを使う」では、無数の結果が生まれます。最も暗い部分の位置と文字の置き方を示す参照例があれば、制作者が好みの混ぜ方を推測せずに方向性を再現しやすくなります。

最も近づいて見せる場面に合わせて製品キャプチャを準備する

動画で見せるべき細部に合わせてスクリーンショットを選びます。重要な証拠が1つのステータスラベルなら、ダッシュボード全体の画像には関係のない情報が多すぎ、そのラベルのピクセル数は少なすぎるかもしれません。必要な状態を使いやすい解像度で撮り、編集用に切り抜く前の原本を保存してください。

どの製品バージョンや状態を示すキャプチャなのかを記録します。見た目がきれいでも、事実として古くなっている場合があります。機能公開の動画では、インターフェースの担当者が、キャプチャ内のラベル、コントロール、結果が対象リリースに適切かを確認する必要があります。元画像が間違った操作フローを示しているなら、アニメーションでは直せません。

意図を持って用意したデモデータを使います。録画前に名前、メールアドレス、アカウント識別子、通知、ブラウザーのタブを確認してください。機密性のある値を差し替える場合は、可能なら元の環境で行い、置き換えによって例の意味が変わらないことを確かめます。無関係な情報を除こうとして、視聴者に必要な結果まで隠さないでください。

キャプチャの言語は、記事や動画の対象読者に合わせます。英語の説明に、なじみのないラベルで埋まったスクリーンショットを組み合わせると、読む負担が増えます。英語のインターフェースを使えるなら、それを使います。有効な元資料が別言語のものしかない場合は、その事情を明らかにし、翻訳を重ねた表示を実際の製品ラベルのように見せないでください。

連続した場面では、操作前、操作中、完了後というキャプチャ同士の関係を明記します。フォルダー内で隣り合っているというだけで、3枚の画像を連続した状態と決めつけないでください。物語は、それらの画像が示す実際の製品の動作で裏付ける必要があります。

ブランドの素材一式に動きの振る舞いも含める

色と書体が統一されていても、動きがまったく別の語り口になることがあります。抑制の利いたインターフェースのデモと、躍動感のあるローンチ映像は、同じ素材でも違う期待を生みます。個々のエフェクトを選ぶ前に、動きに求める役割を説明してください。

Dropboxのモーションガイドは、ブランドシステムに静的なアイデンティティと並んで動きを含められることを示しています。素材一式には静止した外観だけでなく、振る舞いも含めましょう。

小さなプロジェクトなら、大まかなトーンを観察可能な少数の選択に落とし込みます。例えば、注釈が現れる間は製品パネルを安定させる、補足行が動き始める前にタイトルの登場を終える、視聴者が次の行動を読む間は最後のロゴを静止させる、といったことです。こうした関係を使い、次のシーンも同じシステムに属しているかを判断します。

何を変えてよいかも説明します。冒頭には料金カードより表現豊かな動きを使ってもよいでしょう。免責事項は静止させたまま、機能の結果だけを短く強調する場合もあります。使える素材一式は、シーンごとに共通の語り口を与えながら、目的に関係なく同じアニメーションを強いることはありません。

参考動画を添えるなら、借りたい部分を特定します。注意の移る順序、動きの量、文字と画像の関係のどれでしょうか。リンクだけでは、その参考動画の数多くの特徴のうち、何を重視しているかを制作者に決めさせることになります。そこは制作前にもっと明確にできる創造上の判断です。

ブランドガイドラインを使えるアセット一覧にする

アセット一覧を、新たな管理の負担にする必要はありません。そうしなければ高くつく推測になりかねない判断を、コンパクトにまとめた索引です。ファイルのそばに置き、承認済みアセットが変わったら更新してください。

一覧からは、役割ごとに1つの承認済みバージョンを参照できるようにします。代替案を残すなら、存在する理由を説明してください。「暗い背景用の案B」は有用ですが、「最終 新 最新 2」は役に立ちません。命名方法は、別の人も自分と同じ選択ができるようにするためのものです。

不足する素材は、進行を止めるものと暫定で選べるものに分けます。未確認の価格は、オファーを扱うショットを止める理由になります。未定の装飾用背景は、後で変えられるとチームで合意していれば暫定の選択にできます。これによって、小さな好みの問題で制作が止まる一方、重大な事実の不確かさが見過ごされる事態を防げます。

代表的な1フレームで素材一式を確かめる

全体のアニメーションを依頼する前に、衝突しやすい要素を含む1フレームを組みます。最も長い見出し、ロゴ、製品画像の切り抜き、必要な条件表記です。この負荷のかかるテストによって、想定サイズで素材が共存できるかが分かります。

想定される表示サイズでフレームを確認します。大きなデザインキャンバスでは余裕がある構図も、ソーシャルフィードでは窮屈になるかもしれません。拡大せずに補足文を読んでください。ロゴの余白、弱いコントラスト、足りない字形、重要なインターフェース状態を取り除いてしまう切り抜きを探します。関係のない装飾で補うのではなく、原因となった素材やルールを直します。

次に、背景やレイアウトが変わる短いモーションテストを依頼します。静止画の検証では、トランジション中もロゴが読めるか、文字の登場が遅すぎて理解できなくならないかは分かりません。この不確かな点に絞ってテストすれば、磨き込んだ動画を先に発注しなくても判断できます。

OpenDesignのプロジェクトには、ファイルと一緒に素材の役割を渡し、残りをアニメーションさせる前に、代表的な1フレームで読み込んだロゴとフォントを確認してください。その検証結果を、Motionワークフローに記載されたプレビューと書き出し結果のそばに保管します。

承認済みの素材一式を納品物と一緒に残す

動画が承認されたら、その制作に使ったアセット一覧を保存します。後日のキャンペーン更新が、どのロゴ、スクリーンショット、文言のバージョンを使ったかの推測から始まってはいけません。最もよく共有されるのが書き出した動画でも、元のキャプチャと承認済み文言は利用できる状態で保管します。

承認後にアセットが変わった場合は、それに依存するシーンを特定します。新しいワードマークは最後の部分だけに影響するかもしれません。新しい書体はすべての改行位置を変え、複数シーンのタイミングに影響し得ます。こうした影響の違いに応じて扱いを変え、毎回自動的に全体をレンダリングし直して、見た目が保たれることを期待するだけにしないでください。

完成した素材一式は、3つの身近な問いに答えられる必要があります。どのファイルが承認済みか、どう使うべきか、変わったときに何を確認すべきか。答えが簡単に見つかれば、モーション制作は少ない推測で始まり、最初の書き出し後も保守しやすくなります。