モーションデザイナーのショーリールデザイン

音楽のグリッドで組み立てたリール

映像は128 BPMで15秒間続き、画面上のHUDがその構造を可視化します。全フレームにタイムコード、60 FPS、4つのビートスクエア、8小節中の小節数を示すBARカウンター、下端に沿ったプログレスラインが表示されます。

その結果、カットが意図的なものに見えます。一方で、HUDが常に四隅を占めるため、追加するコピーは内側のフレームに収める必要があります。

7つのモーションチャプターとエンドカード

元のノートではリールがチャプターに分けられ、それぞれに開始時間があります。短いチャプターはテンポを保ちますが、読む時間はほとんど残りません。ワードマークは1.5秒、イージングのチャプターは2秒です。

主役のトランジションとしてのタイプと色

背景はフェードではなく、ハードに切り替わります。アイデンティティのフレームは鮮やかなグリーンにほぼ黒の文字、Systemsのフレームは暗い地にペーパーホワイトのグリッド、キネティックのフレームはディープグリーンに白い文字を使います。

キネティックのフレームの文字は、各グリフの後ろに半透明のエコーを引き、モーションブラーのフィルターなしで方向を示します。代償は可読性で、動きの途中で読めるのは「OU」の2文字だけです。

01

ワードマークのスケール

OpenDesignはエクスパンデッドの黒を2行で組み、その下にセリフ体イタリックの肩書き行を置きます。幅広いサンセリフと細いイタリックの対比が、ブランドと職名を分けます。

02

Systemsグリッド

ほぼ黒の背景に3×3のペーパータイル、背後にはかすかなドットグリッド。元のノートでトルシェのフィールドに分割されるとされるまでは、静止したオブジェクトとして始まります。

別の企画にリールを合わせる

元のノートでは、128 BPMのグリッド上に7つのチャプターを保ったまま、ブランド、肩書き、フッターのコピー、配色を変更するとあります。コピー、配色、タイミングがコンポジション冒頭の定数にあるため、実際に行いやすい作業です。

表示される値はすべて時間の関数なので、後ろへシークしても同じフレームになります。肩書き行やブランド名が長い場合は、2行のレイアウトに収まるよう文字を小さくする必要があるかもしれません。

1. アイデンティティを差し替える

   まずブランド、肩書き、フッターのテキストを差し替え、そのうえでワードマークの幅を確認します。

2. 配色を再設定する

   各チャプターの背景と文字の間に強いコントラストを保ちます。

3. グリッドを守る

   チャプターを増やさず、既存の小節の中でコンテンツのタイミングを調整します。

出典と範囲

これは、クレジットされた第三者の作品(X上の@stephanlivera氏の投稿)をOpenDesignが公式にコードで再制作したものです。コンポジションは公開された作品をもとにコードで再構築し、サウンドトラックはオリジナルです。このクレジットは事実の記載であり、原作者による公認を示すものではありません。

これはレンダリングされたショーリールであり、インタラクティブなデザインツールではありません。テンプレートはOpenDesignの動画ワークフロー案に由来し、利用可否はインストールされているバージョンによります。