プロダクトプロモーションのモーションデザイン

15秒のストーリー構成

この映像は、販売のストーリーを6つのチャプターに凝縮しています。率直な問いかけで始まり、販売できる3つの形式を見せ、モバイルストアを組み上げ、チェックアウトの運用へ展開し、クリエイターとプラットフォームについてのメッセージで終わります。各チャプターが単に1つのレイアウト内の文言を入れ替えるのではなく、主となる構図そのものを変えるため、流れが読み取りやすくなっています。

キャラクター、タイポグラフィ、モーションが拍を共有する

マスコットは、動かないプレゼンターとしては使われていません。商品カードの横にせり上がり、新しく現れるオブジェクトを視線で追い、ジャンプ、うなずき、まばたき、スクワッシュで見せ場を強調します。こうしたリアクションは、視聴者にタイミングの手がかりをもう1つ与えますが、小さなUIの細部と注意を奪い合うことにもなります。キャラクターをフレームの片側に寄せておくことで、商品カードやチェックアウトのコピーがその競合から守られます。

01

ディスプレイサイズのハーフトーン

キャラクターと商品オブジェクトは、低解像度のグレーで描かれ、レイヤーごとに1回のオーダードディザ処理で変換されています。荒いテクスチャはワイドショットでも認識しやすく、小さなUIラベルはクリーンな文字組みのまま保たれます。

02

タイポグラフィが声色を変える

見出しとUIテキストにはInter、「create」などの語を強調するにはInstrument Serif Italic、チャプターとタイムコードのラベルにはJetBrains Mono、最後のワードマークにはFrauncesを使っています。対比が表現を豊かにしますが、スタイルを増やしすぎると短いシーケンスが散漫になります。

03

ナビゲーション補助としてのHUD

左上にチャプターラベル、右上にPennyflowと60 fpsのタイムコードが置かれています。エンドカードでこのHUDを外すことで、最後のブランドロックアップが制作中のフレームではなく、到達点として読めます。

モーションの見せ場として描くチェックアウト

チェックアウトのチャプターは、エクスプレス決済のコントロールに寄った状態から始まり、その後、より大きなボードを見せます。view-2では、149ドルのDesign Course、Apple Payボタン、カードフィールド、小計、合計、アップセル、マスコットの放送パネルが共存しています。その後の拍で金額や完了マークが加わります。カメラの動きによって、1つの操作がより広いサービスの物語へと広がり、現実的なエンドツーエンドのチェックアウト体験を必要としません。

結びの一文がブランドに変わる

黒い背景では、view-3のとおり、「You create.」がイタリックの語と大きなサンセリフのフレーズを並べ、反対側にマスコットを配置します。次の行は「We handle the」で始まり、「flow.」が単なるコピーを超えて中央へ移動し、ワードマークの末尾を形づくって、残りの文字を受け取ります。この再利用によって移行が連続したものに感じられますが、文章とロゴの両方に使える語がない場合、差し替え後のブランド名には別の橋渡しが必要になることがあります。

1. ロゴの前に要素を減らす

   詳細なチェックアウトボードから、1行のテキストと1体のキャラクターだけの黒い背景へ移ります。視覚的な負荷が減ることで、最後の変化のための余白が生まれます。

2. 1つの語を先へ運ぶ

   メッセージの中から、ブランドロックアップの一部として物理的に成り立つ語を選びます。視聴者が動きを追えるよう、その位置とスタイルを十分な時間保ちます。

3. キャラクターのアクセントで締める

   文字が収まった後、マスコットがワードマークの後ろからのぞき、跳ね、ウインクします。商品説明を再び開くことなく、最後の拍を加えられます。

出典と範囲

これは、@achxviが投稿したサードパーティ製モーションリファレンスを、OpenDesignが公式にコードで再制作したものです。構成は架空のPennyflowブランドとオリジナルのBGMで翻案されており、クレジットは参照元のクリエイターによる公認を示すものではありません。これはレンダリングされたプロモーション映像であり、実際に動作するストア、決済フロー、連携されたコマース製品ではありません。関連する動画ワークフローは未マージのPR8619に関連しているため、現在の安定版OpenDesignで利用できると説明すべきではありません。