2Dモーショングラフィクスを空間体験へ翻訳する
-- Views
September 16, 26
スライド概要
AR Developer
関連スライド
各ページのテキスト
iOSDC 2026 2Dモーショングラフィクスを空間体験へ翻訳する 服部 智 @shmdevelop
服部 智 Cyber Agent, Inc visionOS Developer Expert Host: visionOS Engineer Meetup Organizer: visionOS TC GitHub: satoshi0212 X: @shmdevelop
空間にCGと情報がピタッと存在している状態が好き！
ひとつの2Dモーショングラフィクスを どう分析して どう空間表現へ変えたか
映像分析・AI実装・RealityKitで考える 空間モーショングラフィクス
今回セッションの注意、お願い 1. セッション中の音は最小限にしています 2. 最後に音ありの実機デモをします
Intention
Apple Intention で検索 2013年のWWDC基調講演の冒頭で公開された、ものづく りに対する同社の哲学や姿勢を伝えるブランドムービー。 「もし誰もがすべてのものを作ろうと忙しくしているな ら、どうやって何かを完璧にすることができるだろう か？」という問いかけから始まり、数よりも「何を大切に し、どう意図して作るか」という製品作りの本質や情熱を 表現しています。 Intention Agency: TBWA\Media Arts Lab / Los Angeles ff Client: Apple 1997年の「Think Di erent」以来の強力なブランドメッ セージとして話題を集めました。 1分30秒。
Source: Apple Inc., “Apple - Intention,” premiered as WWDC 2013 Intro, Vimeo, 2013 https://vimeo.com/241783590
(見ていて気持ちの良い作品だ)
(ところどころ立体的、空間的に感じられる)
(これをAVPで空間的に観てみたい！)
空間で再現する良い感じのモーショングラフィクス...
無いなら作るぞ！
元の動画を分析する 実装する 磨く
元の動画を分析する
元の動画を分析する 全体構成を分析する 複雑な個別シーンを分析する 個別演出を分析する
全体構成を分析する AIと並走 Codex [GPT-5.5, 5.6 Sol] Claude [Fable5, 5.1]
全体構成を分析する
全体構成を分析する
全体構成を分析する 全体を15シーンに分割できた [SC-01 〜 SC-15] 以後、AIプロンプト指示で「SC-01にて」等で範囲指定可能に
全体構成を分析する
全体構成を分析する テキスト、背景色、音などの共通設定も分析し切り出し
元の動画を分析する 全体構成を分析する 複雑な個別シーンを分析する 個別演出を分析する
複雑な個別シーンを分析する
複雑な個別シーンを分析する SC-01
Analyze Source: Apple Inc., “Intention” (2013)
テキスト、点、線 の表示タイミングを抽出
元の動画を分析する 全体構成を分析する 複雑な個別シーンを分析する 個別演出を分析する
個別演出を分析する
個別演出を分析する 「気持ち良さ」はどこに存在するだろうか この動きはそもそも何のために存在しているのか？
個別演出を分析する 「気持ち良さ」はどこに存在するだろうか この動きはそもそも何のために存在しているのか？ → そのシーンの特徴を抽出
個別演出を分析する 点出現の音とのタイミング合致 点が出現から少し間を取って動き出す 点の動きのイージング 点が移動に応じて小さくなる 一つの図形が完成する前に次の図形の構築が始まる連続性 完成した図形が手前へ動くアニメーション
個別演出を分析する 点出現の音とのタイミング合致
Analyze Source: Apple Inc., “Intention” (2013)
個別演出を分析する 点が移動に応じて小さくなる
Source: Apple Inc., “Intention” (2013)
Source: Apple Inc., “Intention” (2013)
Source: Apple Inc., “Intention” (2013)
個別演出を分析する 点の動きのイージング
Analyze
個別演出を分析する 点出現の音とのタイミング合致 点が出現から少し間を取って動き出す 点の動きのイージング 点が移動に応じて小さくなる 一つの図形が完成する前に次の図形の構築が始まる連続性 完成した図形が手前へ動くアニメーション
元の動画を分析する 実装する 磨く
実装する
実装する 仮説 - mpegでフレーム解析しデータファイルを作成 - それをSwiftの実装で空間に再現 ff で完成するのでは？
分析1
分析2: ベクトル
実装する 実装したものがこちら！
実装1
実装2
カオス
データ生成を固く行うツールも実装したが...
実装する: macOS対応編集ツール
(とんでもなく作業量が多くなり) 挫折
しかし無事解決に至る
実装する: Fable 5 AppleのWWDC 2013のモーショングラフィクス動画があります。 これを空間的に再構成しApple Vision Proで空間モーショングラフィクスとして体験したいです。 音楽と尺はそのまま使用する想定です。 visionOS 27、Swiftで、Xcodeプロジェクトを新規作成し ネイティブアプリとして実装してください。 モーショングラフィクスの気持ち良さを保つこと、空間的な構成と表現であることが必須です。 + 素材動画を添付
通して体験できる50点の物ができた
Implement
元の動画を分析する 実装する 磨く
磨く
磨く これまでの表現分析やデータを活用し シーン毎に改善の積み重ね 実機動作を確認し違和感があるところを削りこむ
磨く これまでの表現分析やデータを活用し シーン毎に改善の積み重ね 実機動作を確認し違和感があるところを削りこむ 2Dに留まっていた表現を空間体験として作り直す 2D: 画面の中で動く 3D: 奥行き方向にも動く Spatial: 自分との関係性が変化する 画面の枠がなくなった時に演出をどう成立させるか
磨く Claude Fable、Fable5.1と数週間に及ぶ積み上げ作業
磨く
磨く
磨く 事例1: SC-01
元の2D映像 Source: Apple Inc., “Intention” (2013)
AIによる作成直後 磨く SC-01
改善後: 整合性
改善後(実機): 空間体験化
磨く 事例1: SC-02
元の2D映像 Source: Apple Inc., “Intention” (2013)
AIによる作成直後
改善後(実機)
磨く 事例1: SC-10, 11
元の2D映像 Source: Apple Inc., “Intention” (2013)
AIによる作成直後
改善後(実機)
磨く 空間体験になるよう調整、改修
余談: 空間的体験なので裏に回ることも可能
磨く
元の動画を分析する 実装する 磨く
分析、実装、磨きを経て...
完成した物がこちら
Intention: Spatial
空間モーショングラフィクス 体験すると凄く新鮮 今後の拡がりを感じています
是非一度 Apple Vision Pro実機 音あり で観てください！
さいごに 是非一度 Apple Vision Pro実機 音あり で観てください！ 気軽に「観たい」と声を掛けてください。 2分で体験できます。 眼鏡の方でも大丈夫です。 X: @shmdevelop Xで最新情報共有してます この機会にフォローお願いします