モーション：イベントのリールとインターフェース
- カテゴリー:
- モーションデザイン
- 役割:
- コンセプト、モーションデザイン、サウンドデザイン
- 期間:
- 2026
6週間で、ブラジルのテックとスタートアップのイベント8件を取り上げた縦型リールを10本制作しました。どれも、そのイベント独自のブランドシステムの中で作っています。すべてのリールを、コンセプトから最終レンダーまで、ReactベースのビデオフレームワークRemotionで手がけ、作品に応じてWebGLのレイヤーやSVGフィルターを加えました。ページの後半では、YankeeとZylaという2つのプロダクトから、インターフェースとWebのモーションも紹介しています。
根拠：リールはすべて自主制作で、どのイベントやブランドからの依頼でもありません。10本のうち9本はInstagramで公開されていて、公開されていないのはFestival SGBのリールだけです。インターフェースの作品は、このサイトにあるYankeeとZylaのケースのものです。
Lovable Day São Paulo、イベント当日に制作
Lovable Day São Pauloは、2026年10月16日にCommunity Creators Academyで開かれました。私は会場にいて、同じ日のうちにリールを作りました。アイデアは、Lovableのチャットがイベントを作り上げるという流れです。プロンプトで始まり、「Do prompt ao palco」（プロンプトからステージへ）の一文の下で当日の写真と映像が画面を引き継ぎ、最後はチャットに戻って、次のイベントを作ろうと呼びかけます。書体はInter Tightで、ロゴはLovableのBrand Hubから取りました。背景はダークモードのWebGLメッシュグラデーションで、色はLovableの公式ブランドの塗りからサンプリングしています。
シーンごとの流れ
- 0:00プロンプト「Cria o maior evento de Lovable do mundo, em São Paulo.」（サンパウロで、世界最大のLovableイベントを作って）が、グラデーションの大きな文字で入力され、プロンプト欄に収まって送信されます。
- 0:04それがチャットのメッセージとして戻り、Lovableのハートのロゴの横で「Pensando...」（考え中）が脈打ちます。続いて回答が一語ずつ書かれます：「Construindo o Lovable Day São Paulo.」（Lovable Day São Pauloを構築中）。
- 0:08イベント映像の入った4枚のカードが、時間差のスプリングで遠近をつけて立ち上がり、それぞれ2回クリップを切り替えます。
- 0:11クリックで1枚のカードが全画面に開きます。「Lovable」「Day」「São Paulo」が一語ずつ押し出すように入り、0:12で曲のドロップが来ます。
- 0:16当日の8つのショットを、120 BPMの曲の3拍ごとに、ウィップ、カット、光漏れでつなぎます。その上に「Do prompt」と「ao palco.」が一行ずつ入ります。
- 0:28傾いた5枚のカード（4本のクリップと1枚の写真）がスプリングで飛び上がって浮かび、軌道に沿ってモーションブラーがかかります。
- 0:31チャットに戻ると、「Quer construir o próximo?」（次のイベントも作る？）という問いに「Bora construir!」（作ろう！）と返し、カメラが送信ボタンに飛び込みます。
- 0:33最後のカードには、「Lovable Day」「São Paulo」「16.10.2026」とロゴが、一行ずつ別のスプリングで入ってきます。光は最初のフレームと同じです。
シリーズ
ほかの7つのイベントについて、1本ずつリールを載せています。どれも10秒の抜粋で、無音のままループ再生します。リンクからは、Instagramで全編を見られます。
DevDay Exchange、フロリアノポリス
OpenAI DevDay 2026のキーノートのオープニングから、ビジュアル言語を取っています。「0」の目をしたフラットな緑の顔がパーティクルになって弾け、「OpenAI」の文字を描きます。「OpenAI DevDay[2026]」の「[2026]」は1文字ずつデコードされ、「[Floripa]」に変わります。ドロップでOpenAIの花のマークが回転しながら入り、最初の写真がその中に開きます。結びは「Valeu, [Floripa]」（ありがとう、Floripa）です。27秒、2026年10月22日のイベント。 Make-a-thon、Friends of Figma Floripa
結果発表のリールは、ロゴより先に表彰の場面のハグから始まり、課題をタイポグラフィで見せます。課題は「Crie uma experiência que gere muita ansiedade」（大きな不安を生む体験をつくる）です。優勝チームは2拍に分けて明かします。「E o resultado...」（そして結果は）のあとに、「Venceu:」（優勝）と「FinDuck」が入ります。トランジションには、花、六角形、ボビンレース、市松模様という、アイデンティティそのものの形を使っています。40秒、2026年10月24日のイベント。 Room 30、Rivool Edition
Rota 14とRivool Financeによる、「O novo dinheiro」（新しいお金）がテーマのミートアップです。作品は「Todo empreendedor pensa no negócio. Quem pensa no dinheiro?」（起業家はみな事業のことを考える。では、お金のことを考えるのは誰？）で始まります。最後のショットはオープニングと同じ構図を繰り返し、問いを「Uma sala inteira, na mesma mesa」（部屋まるごと、同じテーブルに）という答えに置き換えます。途中では、「30」の数字を切り抜いた形の中で映像が流れます。32秒、2026年9月30日のイベント。 Sunset Roundtable、Indicium
WebGLのリブガラスとSVGのディスプレイスメントフィルターが、ミートアップの写真をゆがめます。37秒、2026年10月。 Festival SGB：信じる？確かめる？
シリーズのルールを決めた作品で、書体はSora、色はフェスティバルの配色です。「400 currículos. A IA fez o ranking. Você confia?」（履歴書400通。AIがランキングした。あなたは信じる？）で始まり、最後にその問いに答えます。40秒、2026年9月。 Build Day São Paulo、Claude Community
冒頭は「Saí de Floripa por causa disso」（このためにFloripaを出てきた）、結びは「Floripa vem aí」（次はFloripa）です。その間に、IBGE（ブラジル地理統計院）のデータから描いたルートマップと、Anthropicのpress kitにあるロゴが入ります。47秒、2026年9月18日のイベント。 EAG Global Buildathon、フロリアノポリス
シリーズ最初の作品です。ドットの地球儀、3DのEthereumのダイヤモンド、そしてCC-BYライセンスでクレジットを記した楽曲Tidesで構成しています。60秒、2026年9月12日のイベント。 シリーズのほかの2本
Lovableの作品のナレーション入りバージョンと、ピッチを扱ったMake-a-thonの2本目のリールです。
シリーズのルール
Festival SGBの作品が、背景、タイポグラフィ、写真と映像、ストーリーのルールを決め、その後のリールはそこから始まりました。それより前の作品は、BuildathonとBuild Dayだけです。ブランドにすでに強いビジュアル言語があるときは、作品はそのブランドに合わせます。Lovableの作品はLovable自身の色を使ったダークモードで、DevDayの作品はOpenAI DevDayのキーノートの表現をもとにしています。
- 背景
- ブランドの色を使い、黒をデフォルトにはしません。暗い背景にするのは、ブランド自身の素材が暗いときだけです。
- タイポグラフィ
- 大きな文字で、一度に一文だけ出します。次の一文が入る前に、スマホで読めるだけの時間、画面に残します。
- 写真と映像
- グラフィックシステムの中で、カード、グリッド、切り抜き文字に入ったオブジェクトとして動きます。または、一文だけを重ねて画面いっぱいに映ります。
- ストーリー
- 最初の数秒にフックを置き、そのフックを結末で回収します。
- ロゴ
- 使うのは公式ファイルだけです。各ブランドのpress kit、brand hub、公式アートから取り、出典を記録します。
- タイミング
- シリーズの大半は120 BPM（30 fpsで15フレームごとに1拍）のグリッドに乗っています。SunsetとLovableはモンタージュのカットだけをこのグリッドに合わせ、Make-a-thonとDevDayの作品はそれぞれの曲のテンポに従います。文字は強いイーズアウトで入り、ロゴやカードはスプリングで着地します。
- サウンド
- 音楽を入れる場合は、ライセンス楽曲か、クレジットを記したCC-BYの楽曲を使います。効果音は合成音のキットから取ります。これらのリールのミックスは-14 LUFSを目標にし、true peakは-2 dBTP未満に抑えます。
- 品質チェック
- レンダーを送り出す前に、スクリプトが全フレームを走査し、黒フレーム、フリーズしたフレーム、輝度の急な変化を検出したうえで、ラウドネスを測定します。
インターフェースとWebのモーション
プロダクトの仕事から、2つの作品を紹介します。iPhone向けのソーシャルアプリYankeeのモーション作品と、このサイトにあるZylaのケースの、コードで描いたオープニングアニメーションです。
Yankee、iPhone向けのソーシャルネットワーク
Yankeeの作品からの抜粋です。 Yankeeはクライアントワークです。App Storeで公開されているSNSで、私はそのチームの一員として、プロダクトデザイン、ビジュアルアイデンティティ、モーションを担当しています。作品全体では、キネティックタイポグラフィとアプリの画面が交互に現れます。この抜粋では、「the feed adapts to you」が1語ずつ現れ、プロフィールエディターで色を選ぶたびにプロフィール全体がその色に変わり、Spinではビデオのオプションをタップすると4つのビデオがグリッドに並びます。
Zyla：Zを描く軌跡
Zylaのケースの冒頭を、公開中のページから録画しました。ページはポルトガル語です。軌跡がZを描くあいだカードの距離と時間が増えていき、最後に「Pausar」（一時停止）が「Correr de novo」（もう一度走る）に変わります。 このサイトのZylaのケースは、2Dのcanvasにリアルタイムで描くアニメーションで始まります。夜、ドローンから見た視点で、ランナーがGPSの軌跡を残し、軌跡はZylaのマークのZが完成するまでマゼンタに光っていきます。ストライド、ポニーテール、カメラは時間だけから計算されるので、テストでどのフレームでも検証できます。「動きを減らす」がオンなら、ページは完成したフレームを表示します。
Zylaのアプリでは、ラン終了時のお祝い演出が、走り終えたばかりのルートを見せます。紙吹雪も音もありません。そのアニメーションをWebでプロトタイプにし、「動きを減らす」用のモードも用意しました。開発チームは、このプロトタイプをリファレンスにしました。また、GPSでランを記録する機能のリサーチとデザインを行い、フロー順の画面、ストーリーボード、モーション仕様をそろえて開発チームに引き渡しました。開発チームが実装し、2026年9月にストアで公開されました。
主な学び
Festival SGBの作品でルールが決まってからは、新しいリールはどれも、背景、タイポグラフィ、映像についての判断が済んだところから始まりました。おかげで、時間をイベントごとのアイデアに使えました。コードで作っているので、レンダーのチェック、サウンドキット、そして大半の作品では120 BPMのグリッドも、リールからリールへそのまま引き継げました。
モーションが必要なプロジェクトはありますか？
それぞれのブランドのシステムの中で、2Dモーションのデザインとアニメーションを手がけます。イベントのリールからプロダクトのインターフェースまで対応します。
