人物の物語を、動く顔に編み上げる：Mosaic Studioのデザイン手法を読み解く

Agu Seguíは、デザインインタビュー番組『First of Kind』（シーズン3第1話、Vercel創業者Guillermo Rauch出演）のために開発したWeb向けジェネラティブ・アニメーションエンジン「Mosaic Studio」を発表しました。このエンジンは、ゲストを象徴するキーワードを組み合わせて、動く文字の肖像を描きます。Webブラウザ上でリアルタイムにアニメーションを描くほか、番組オープニングやSNSプロモーション向けの高解像度動画素材をフレーム単位でレンダリングできます。

画面に現れるのは、赤、白、黒を基調とした人物の横顔の肖像です。カメラを引くと顔全体の輪郭がはっきりと認識でき、寄っていくと、明暗を構成しているのが滑らかなピクセルのグラデーションではなく、隙間なく敷き詰められた長短さまざまな矩形の文字ブロックであることに気づきます。そこには、BORGES、LANUS、ARGENTINA、そして DEPLOY、VELOCITY、SLOP、LATENT といった大文字の英単語が並んでいます。

近くで見ると単語、離れて見ると顔になる理由

文字肖像の本質は、「ミクロな可読性」と「マクロな造形」の統合にあります。

至近距離で見ると、それぞれの文字ブロックは独立した判読可能な英単語として存在します。視点を引き離すと、視線は個々の文字を追うのをやめ、全体的な明暗のコントラストやカラーブロックとして知覚し始めます。このとき、各文字ブロックの位置、サイズ、文字色、そして背景の地色が一体となって、絵画における筆跡（タッチ）のように、顔の輪郭や陰影を形作ります。

作者のAgu Seguíは制作の振り返りの中で、こうした「言葉で絵を描く」視覚構造は、チャック・クロース（Chuck Close）のグリッド肖像、ジョルジュ・スーラ（Georges Seurat）の点描画法、そしてゴッホの筆跡を思い起こさせると述べています。局所においては個々の記号が固有の形態を保ちつつ、配置と明暗のコントロールによって、全体として連続したひとつの肖像画を結像させています。

言葉の意味が、適用される動的スキンを決定する

単語を単なる静的なタイポグラフィのパーツとして並べるだけでは、画面は文字のコラージュにとどまります。Mosaic Studioの大きな特徴は、単語の意味（セマンティクス）に応じて異なる視覚「スキン」（Skins）を割り当てている点にあります。同じカテゴリに属する単語は、同一の描画エフェクトとモーションルールを共有します。

インタビューの中で、Guillermo Rauchは自身の生い立ちやプログラミングとの出会い、フロントエンドやAIに対する洞察を語りました。Agu Seguíは、単語ごとに異なる感情的・文化的文脈が宿っていることに着目しました。たとえば BORGES（アルゼンチンの作家ボルヘス）や LANUS（ブエノスアイレス州ラヌス）という言葉には人間的な記憶や文化が息づいており、一方で DEPLOY、SLOP、JSON、LATENT といった言葉はエンジニアリングや計算機の語彙を想起させます。

システムはこれらの連想を、人間と機械を横断する意味の軸として整理しています。人間の経験や記憶、手仕事での判断から始まり、ビジネスや受け手、コードツールや機械知能へと広がり、その両端を横断する外力としてスピードとノイズ（摩擦）が配置されています。これらの分類は設計者が意図的に定義したルールです。作者はカテゴリごとに専用のシェーダースキンを紐付け、文字ブロックにそれぞれ全く異なる動きを与えています。

• BORGES（記憶・過去 → emulsion）：文化的な記憶をフィルムの粒子で表現。背景と文字の輪郭が微細なグレインで構成され、出現アニメーション時にはまず粒子の塊が現れ、現像されるように単語が浮かび上がります。
• CRAFT（クラフトマンシップ・手仕事 → ink）：人間の手仕事による美意識や判断に対応。寄って見ると紙の繊維のようなテクスチャとインクの滲み効果があり、出現アニメーション時にはブラシで左から右へ払ったように現れ、隣接するグリッチの影響を受けません。
• VELOCITY（スピード・リズム → smear）：エンジニアリングのデリバリー速度やテンポに対応。水平X軸に沿って動的な軌跡を生み出し、文字ブロックは左へ伸びる残影を引き連れて左側から勢いよくスミアしながら滑り込みます。下地には横に引き伸ばされたノイズストライプが走り、時折明るい光の帯が水平に横切ります。
• SLOP（摩擦・抵抗 → corrupt）：システム内の混乱、ノイズ、摩擦を表現。画面にはブロック崩れ、ブロックの行のずれ、RGB色収差が現れ、動的イベントの際には隣接する文字ブロックへと浸食・拡散していきます。
• JSON（コードツール → cursor）：プログラムでよく使われるデータ形式であるJSONを、ターミナルのタイピング挙動で表現。ブロックカーソルが1文字ずつ単語を入力し、単語を切り替える際には古い文字を選択してから新しい文字を入力します。入力完了後も、フォーカスされた一部の文字ブロックではカーソルが点滅を続けます。
• LATENT（機械知能 → latent）：定型化される前の潜在空間（Latent Space）を指し示します。画面上では微細に揺らぎ続ける不安定なドットマトリクスとして表現され、文字ブロックの出現や切り替え時には、粗いブロックから徐々に鮮明な字形へと遷移します。単語の途中にはあらかじめ設定された分割スリット（LAT|ENT など）が露出することもあり、機械知能を象徴する視覚的なメタファーとなっています。

このように、ひとつの単語はテキスト情報を持つだけでなく、固有の表現ルールと結びついています。別のゲストの回を制作する場合でも、これらの分類とスキンをそのまま流用し、新しい単語群と肖像レイアウトを流し込むことで展開が可能です。

コード内の分類ルールはあらかじめ定義された設計上の取り決めであり、既存の単語とスキンの間には明確なデータマッピングが構築されています。なお、インタビュー音声からどのようにキーワードが抽出され、どういったプロセスを経て各カテゴリへ割り振られたのかについては、公開資料では具体的に言及されていません。

シェーダーはどのようにルールを映像へと変換するのか？

一般的なWebページにおいて、膨大な数の独立したHTML要素を個別に配置して複雑なアニメーションを適用しようとすると、ブラウザの描画性能がボトルネックになりやすくなります。Mosaic StudioはWebGL2を活用して文字グリッド全体を駆動しています。その要となるのが「シェーダー（Shader）」です。GPU上で並列実行される描画プログラムであり、現在のフレームの状態データを受け取り、文字の色塗り、輪郭の変形、グロー、ノイズなどの視覚効果をピクセル単位で計算します。

システム全体の描画パイプラインは、主にJavaScriptで書かれたスケジューラー（scheduler.js）とWebGLレンダラー（renderer.js）の連携によって構成されており、「全単語の現在フレームの状態を先に算出し、その後に一括描画する」という明確な責務分担を持っています。

1. スケジューラーが状態を算出する：JavaScriptのスケジューラーがCPU側で、各文字ブロックが現在のフレームでどの単語を表示すべきか、表示される途中なのか消える途中なのか、揺らぎやグローの強さはどれくらいかを計算し、その結果をまとめてGPUへ渡します。
2. レンダラーが画面を描画する：システムはあらかじめ使用頻度の高いアルファベットを1枚のテクスチャにまとめて焼き込んでおきます（グリフアトラス）。GPUが文字ブロックを描画する際、インデックスに基づいて必要な字形をテクスチャから参照し、位置とサイズに合わせて整列させ、対応するスキンのカラーと変形ルールを適用します。同一の矩形テンプレートを用いて大量の文字ブロックをまとめて描画できるため、単語ごとにWebのDOM要素を個別に管理する必要がありません。

動的イベントと視覚の伝播

スケジューラーのイベントテーブルにおいて、文字ブロックは個別に静止したり点滅したりするだけではありません。一部の視覚効果は隣接する文字ブロックへと伝播していきます。たとえば corrupt（グリッチ）スキンに属する揺らぎイベントは、周囲の文字ブロックへと広がっていきます。これらの変化は事前に設定されたアニメーションルールによって制御されています。

• ink（インク）スキンの文字ブロックに到達した場合、プログラムは処理を直接スキップ（コード内の continue）し、グリッチを適用しません。
• latent（潜在空間）スキンの文字ブロックに到達した場合、システムは再生成（Regen）アニメーションをトリガーし、粗いブロックからクリアな文字への変化を再び実行させます。
• detox（デトックス／浄化）フラグを持つ文字ブロックは、グリッチを受け取った直後にワイプのようなアニメーション（Sweep）を挟み、グリッチ表示をクリアします。

カメラモーションブラー

初期バージョンにおける画面のパンやズームのトランジションは、やや硬く無機質に見えていました。動きの滑らかさを高めるため、作者はレンダリングパイプラインにカメラモーションブラー（motion.js）を導入しました。仮想カメラが移動やドリーイン／アウトを行う際、シェーダーは移動軌跡に沿って複数回のサンプリングとブレンドを行い、素早く動くテキストに自然な方向性のブレを与えます。一方、カメラが静止しているか微小な動きにとどまる場合は、ブラー処理のパスを自動的にスキップすることで、文字のシャープさを維持しながらレンダリング負荷を抑えています。

同一のアニメーションをWebと動画の双方に展開する仕組み

デジタルクリエイティブの現場において、Web向けのアニメーションとプロモーション用の映像制作は、往々にして別々の職能によって分断されてきました。Web側はフロントエンドコードでインタラクティブな動きを実装し、映像側はモーショングラフィックスツールでレイアウトを組み直し、キーフレームを打って動画をレンダリングします。コピーやビジュアルの変更が発生するたびに、双方で個別の修正を余儀なくされます。

Mosaic StudioがWebサイトでのリアルタイム表示と高解像度動画の書き出しを同時に成立させている鍵は、決定論的なフレーム状態管理の仕組みにあります。

• システム内の状態計算関数 evalState(schedule, frame, out) と描画関数 draw(f) は、ブラウザのシステムクロック（Date.now() など）に依存せず、固定されたシーン設定、事前生成されたイベントテーブル、決定論的なランダムシード、そして現在のフレーム番号の組み合わせによって一意に状態を決定します。
• すべてのランダムイベントは、シード値に基づいた決定論的な擬似乱数ハッシュストリームから生成されます。モーションブラーのサンプリング時にも、決定論的に算出された前後の小数フレームにおけるカメラパラメータを読み取ります。
• 同じシーン構成、イベントテーブル、ランダムシード、フレーム番号が与えられれば、システムは同じアニメーション状態を再現できます。

この仕組みにより、まったく同じアニメーションロジックを目的に応じたメディアへ柔軟に出力できます。

• Webブラウザでの実行：ブラウザの描画ループ（requestAnimationFrame）に沿ってタイムラインを進め、リアルタイムに計算してCanvas上に描画します。実際の公開Webサイト First of Kind にアクセスすることで、そのリアルタイム演出を直接体験できます。
• 動画素材の書き出し：リアルタイムの画面更新が必要なWebとは異なり、動画のレンダリングは1フレームずつ進められます。あるフレームの計算が終わるまで待ってから次に進めるため、計算に時間がかかれば、その分だけ書き出し時間が延びます。フレームを描画した後に、作者が触れたProRes出力などの形式でエンコードし、各プラットフォームの仕様やポストプロダクションの工程に合わせて調整します。

Webサイトにおけるインタラクティブ・ストーリーテリング

Webサイトにおいて、アニメーションは単に受動的に眺めるリニアな動画ではなく、状態に応じて進行を切り替えるステートマシンで制御された、インタラクティブな物語体験として構築されています。

1. 単一のコアワード「DRAGON」が表示されて始まります。
2. 初回クリック（または Enter、スペースキーの押下）によって波紋が広がり、その単語から外側へ、背景の単語ウォールの一部が広がります。
3. 再びインタラクションを行うと、番組タイトル「FIRST / OF / KIND」が導入され、続いてインタビューのキーフレーズが順番に自動再生されます。各フレーズの後には読書のための適切な間（ポーズ）が置かれ、フレーズの周囲にある関連単語がハイライトされます。
4. ナラティブの終盤、カラーパレットの波紋が画面全体を駆け巡り、仮想カメラが後方へズームアウトします。背景を埋めていた単語群が徐々にフェードアウトし、残された赤・白・黒の文字ブロックがGuillermo Rauchの肖像を形作り、番組情報や視聴リンクがフェードインします。

最初の2ステップで操作が行われない場合、約3秒の待機時間を経て自動的に次の段階へと進行します。オープニングはキーボード操作でも進行でき、フレーズ再生は自動で進みます。「REVEAL」ボタンを押せばストーリーをスキップして直接肖像を表示でき、サウンドのミュート切り替えも可能です。

アスペクト比に合わせたレイアウトと取景

決定論的な仕組みは「同じフレームで同一の状態を再現する」問題を解決しますが、異なるデバイスやメディアフォーマットに対応するには、画面のアスペクト比に応じたレイアウトとカメラワークの設計が不可欠です。

実際の公開サイトでは、デスクトップのワイド画面では人物肖像を左、情報パネルを右に配置する水平分割を採用しています。一方、スマートフォンの縦長画面では情報パネルを上部に配し、肖像を横幅いっぱいに広げる縦方向のレイアウトへと移行します。システムは全体を機械的に縮小するのではなく、画面サイズごとに肖像の占有率、カメラの注視点、ビューポートのトリミングを再計算しています。作者のワークベンチのデモでも、複数アスペクト比のプレビュー画面が示されています。以下のコンポーネントでは、元動画の肖像静止画を用いた構図の比較を行えます。縦横のアスペクト比を切り替えて配置の変化を確認し、拡大して顔全体の陰影と個々の単語のバランスを観察できます。

レイアウトを試す

アスペクト比が変わると、顔とタイトルはどこに配置されるか？

アスペクト比を切り替えて配置の変化を確認し、肖像を拡大して「ひとつの顔」が「個々の単語」へ分解される様子を観察できます。

16:9 横向き9:16 縦向き

構図をリセット

肖像エリア

FIRST OF KIND · S03/E01One Stroke
DragonGUILLERMO RAUCH番組タイトル / ゲスト / クレジット

肖像の拡大率

1.0×

16:9：左側に肖像、右側に番組情報。等倍（1x）で全体の輪郭を確認。

原画はスレッド内第2動画の高解像度静止画から取得し、元動画上部のタイトルをトリミングしたものです。ここでは解説用のモックアップとして再構成しており、横・縦構図で同一の肖像とテキストを使いつつエリアを再配置しています。数値はStudioの書き出しプリセットではなく、オリジナルのアニメーションエンジンは動作していません。

週末の短期間で構築できた土台

こうした完成度の高いシステムを目にすると、「AIにプロンプトを入力するだけで、自動的にすべてを生成してくれたのではないか」という印象を抱くかもしれません。

Agu Seguíはこのプロジェクトを、週末に「それほど労力をかけずに」制作したものだと表現しています。彼の見積もりでは、土台となる既存のデザインが、作業のおよそ80%を担っていたといいます。この言葉は、迅速なプロトタイピングを可能にした重要な前提条件を示しています。彼が着手した時点で、視覚言語の骨格はすでに確立されていたのです。

1. 確立されたグラフィックデザイン体系：ビジュアルアイデンティティとデザイン言語は、デザイナーのOliver Hamrinと @haris_chc によって事前に設計されており、番組シリーズの基礎となるタイポグラフィの規範と文字組のシステムが完成していました。Mosaic Studioはゼロからスタイルを創出したのではなく、既存の優れたタイポグラフィ体系を画面上の動的表現へと拡張したものです。
2. AIの具体的な役割と境界：作者はグラフィックの概念や技術に関する自身の理解に基づいてプロンプトを設計しました。映像出力パイプラインにおいては、FFmpegによる動画エンコード処理の設計判断の大部分を Claude Opus 5.5 に委ねています。どのシェーダーや数式の実装にAIがどの程度関与したかについての詳細な内訳は公表されていません。
3. 制作エコシステムの相互接続：デザイナーが「Paper」上で文字ブロックのレイアウトを組み、システムがHTML Canvasを介してその版面を解析し、Mosaic Studioに読み込んで描画します。生成された肖像はMCP（Model Context Protocol）インターフェースを経由してPaperに戻し、微調整を続けることができます。また、視覚スキンの多くは「Paper Shaders」ライブラリをベースとしており、作者は開発者 @uuuuuulala のエンジニアリング貢献に感謝を表明しています。

エディタに用意された複数の作業スペースは、制作工程を明確な階層に整理しています。デモ画面からは、部分から全体へと視点を往復させるチェックの手順が見て取れます。まず Cell Lab で単一単語のスキンと動きの妥当性を検証し、次に Portrait で顔全体のプロポーションや陰影が破綻していないかを確認し、最後に Plate、Intro、Outro といったワークスペースで用途別のシーケンスや複数アスペクト比での見え方をチェックします。これはUIから読み取れる制作手法の整理であり、作者による個別のボタン操作マニュアルや、Plateスペースの完全な仕様が開示されているわけではありません。

これらの階層は常に行き来する必要があります。ひとつの単語の点滅やスミアは単体で見ると魅力的でも、顔全体の中に配置すると目鼻立ちのコントラストを損ねてしまうことがあります。全体を俯瞰し、再び個別要素に戻ってエフェクトを弱めたり配置を調整したりすることで、はじめて「寄れば言葉、引けば顔」という二面性が成立します。新エピソードを制作する際も、このスキンとモーションルールを継承しながら、人物レイアウト、コアキーワード、番組情報を差し替えることで展開が可能です。

さらに、システムはWeb Audio APIを活用し、サウンドデザインと単語のセマンティクスを融合させています。文字ブロックの状態変化に応じて微細な音響粒子（グラニュラー）がトリガーされ、各シェーダースキンに応じた音色を奏でます。オーディオ全体は3つのレイヤーで構成されています。主要キーワードとタイトル音はフォアグラウンドに位置し、仮想カメラの移動やカラーパレットの波紋がミドルグラウンドのうねりを生み、背景に敷かれた他の単語群の微小な音響粒子が低音量の環境音レイヤーを形成します。作者はこのサウンドシステムについて、現在はまだ開発途上（WIP）であり、新エピソードのリリースとともに継続してアップデートしていくと明言しています。

出力とポストプロダクションの工程では、パートナー企業であるスタジオ「Room3」がエンジンから出力された各種モーション素材を受け取り、プロフェッショナルのワークフローにおいて編集、調整、最終的な書き出しを行い、最終的なマーケティングプロモーション用のアセットとして仕上げています。

自分で試す：3つの単語から2つの構図へ

以下のステップに沿って、本稿のエフェクトデモと構図プレビューを使いながら検証を進め、そのチェック視点を自身の制作素材へと応用してみてください。これらは事例の構造を理解するために設計された演習です。本稿のコンポーネントは動きのルールとレイアウトの確認を目的としたものであり、任意の写真から文字肖像を自動生成したり動画を書き出したりする機能は含まれていません。また、Mosaic Studioの公開エディタ、インストールパッケージ、完全なプロンプト群は現在一般公開されていません。

1. 3つの単語と、鑑賞者に想起させたいイメージを書き出す。 たとえば「個人の手記」「計算の論理構造」「コマンドライン環境」を選び、それぞれ NOTEBOOK、ALGORITHM、TERMINAL と設定します。単語の流行り廃りだけで選ぶのではなく、各単語の背後にある意味を1文添えておきます。

2. エフェクトデモで3種類の出現アニメーションを比較する。 上部にある「同じ単語に動きのルールを加えるとどう変わるか？」へ移動し、BORGES、JSON、LATENT を順に選択します。「出現の進行度」を 0%、50%、100% へと動かし、粒子の凝集、タイピング入力、粗いブロックからの鮮明化を観察します。さらに「エフェクト強度」を 0% から 75% へ引き上げ、静止状態の文字ブロックと比較します。「再生」を押して連続したアニメーションを確認することも有効です。評価の基準は「その動きが言葉の意味と共鳴しているか」「停止したときに単語が明瞭に読めるか」の2点です。

3. 自身の単語に手作業でスキンを割り当てる。 以下の表を参考に3行を記述し、デモで近い挙動を確認します。ここでの対応関係は演習用のデザイン判断であり、文脈が異なれば別の選択肢も成り立ちます。なお、本稿のツールが単語を自動解析・分類することはありません。

4. まず顔を見つめ、次に文字を読む。 「アスペクト比が変わると、顔とタイトルはどこに配置されるか？」の構図ツールで、「肖像の拡大率」を1倍にし、その後3倍まで拡大します。1倍では目鼻立ち、輪郭、陰影全体のバランスをチェックし、3倍では文字の可読性と、文字ブロックがどのように陰影を構成しているかを確認します。自身のプロジェクトでもこの2つの距離感を往復し、単一の局所エフェクトの面白さだけに気を取られないようにします。

5. 横構図と縦構図のレイアウト草案を作成する。 「16:9 横向き」と「9:16 縦向き」を切り替え、肖像の拡大率を1倍に戻します。横構図では左右の分割バランスを、縦構図ではタイトル上部配置と人物のリフレーミングを確認します。これをもとに、紙やデザインツール上で2パターンの枠組みを描きます。肖像が占める割合、タイトルの配置場所、クレジットやロゴを置く領域を検討し、文字がトリミングで欠けていないか、人物が小さくなりすぎていないかを検証します。ここでの比率は演習用のアスペクト比であり、オリジナルの書き出しプリセットとは異なります。

6. チェック手順を自身の制作フローへ組み込む。 まずデザインツール上で静止画としての文字肖像を完成させ、次に代表的な3つの単語に絞ってアニメーションを実装します。単語単体での動きが成立したら顔全体に戻して調和を確認し、最後にオープニング、エンディング、縦横のアスペクト比展開を行います。各バージョンで同一タイムラインの静止画を書き出し、タイトル、単語、人物の印象にズレがないかを照合します。Web展開ではクリック、キーボード操作、ウィンドウリサイズ時の挙動を確認し、動画展開では先頭・末尾フレームの処理、テロップやロゴのセーフエリア、再生時のリズムを検証した上で最終編集へと進みます。今回の練習では、まず単語の対応表と2種類の構図案まで完成させれば十分です。エンジン全体ができる前にデザイン上の問題を見つけられます。

開発者向け実践：Paper Shaders 入門

自身のフロントエンドプロジェクトでシェーダーによる動的テクスチャを試してみたい場合、オープンソースの Paper Shaders から始めるのが手軽です。既存の Vite + React プロジェクトを例に、プロジェクトディレクトリに必要な依存関係をインストールします。公式ドキュメントではバージョンの固定が推奨されているため、--save-exact を付与して package.json に固定バージョンを記録します。

npm i --save-exact @paper-design/shaders-react

src/ShaderDemo.jsx を新規作成し、以下のコンポーネントコードを記述します。

import { MeshGradient } from '@paper-design/shaders-react';

export default function ShaderDemo() {
  return (
    <MeshGradient
      colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
      distortion={1}
      swirl={0.8}
      speed={0.2}
      style={{ width: 300, height: 300 }}
    />
  );
}

続いて src/App.jsx で ShaderDemo をインポートして <ShaderDemo /> を配置し、ターミナルで npm run dev を実行してローカルサーバーのURLを開きます。300 × 300 ピクセルの領域に、滑らかなカラーグラデーションが表示されます。

パラメータの speed を 0 から 0.2 へ変更することで、静止していた色の分布が流動的なアニメーションへと変化する様子を確認できます。これはシェーダーによる背景描画を理解するための最小構成の演習です。テキストのマスク処理、複数文字ブロックの状態スケジューリング、カメラモーションブラーなどの高度な実装を行うには、この基礎の上にCanvas描画とステート管理ロジックを組み合わせていく必要があります。

公開中の First of Kind 公式サイトで実際のインタラクションを体験できるほか、さらなる視覚エフェクトの詳細は Paper Shaders 公式ドキュメント を参照してください。