--- title: 2Dモーショングラフィクスを空間体験へ翻訳する tags: #visionos author: [satoshi0212](https://image.docswell.com/user/satoshi0212) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/Y76WZK297V.jpg?width=480 description: 2Dモーショングラフィクスを空間体験へ翻訳する by satoshi0212 published: September 16, 26 canonical: https://image.docswell.com/s/satoshi0212/KN78X2-2026-09-16-173455 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/Y76WZK297V.jpg) iOSDC 2026 2Dモーショングラフィクスを空間体験へ翻訳する 服部 智 @shmdevelop # Page. 2 ![Page Image](https://bcdn.docswell.com/page/G75MWP2D74.jpg) 服部 智 Cyber Agent, Inc visionOS Developer Expert Host: visionOS Engineer Meetup Organizer: visionOS TC GitHub: satoshi0212 X: @shmdevelop # Page. 3 ![Page Image](https://bcdn.docswell.com/page/9J29Q61MER.jpg) 空間にCGと情報がピタッと存在している状態が好き！ # Page. 4 ![Page Image](https://bcdn.docswell.com/page/DEY4W9ZPJM.jpg) ひとつの2Dモーショングラフィクスを どう分析して どう空間表現へ変えたか # Page. 5 ![Page Image](https://bcdn.docswell.com/page/VJNY9L3M78.jpg) 映像分析・AI実装・RealityKitで考える 空間モーショングラフィクス # Page. 6 ![Page Image](https://bcdn.docswell.com/page/YE9P249WJ3.jpg) 今回セッションの注意、お願い 1. セッション中の音は最小限にしています 2. 最後に音ありの実機デモをします # Page. 7 ![Page Image](https://bcdn.docswell.com/page/GE8D5Q9RED.jpg) Intention # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LELMYXW27R.jpg) Apple Intention で検索 2013年のWWDC基調講演の冒頭で公開された、ものづく りに対する同社の哲学や姿勢を伝えるブランドムービー。 「もし誰もがすべてのものを作ろうと忙しくしているな ら、どうやって何かを完璧にすることができるだろう か？」という問いかけから始まり、数よりも「何を大切に し、どう意図して作るか」という製品作りの本質や情熱を 表現しています。 Intention Agency: TBWA\Media Arts Lab / Los Angeles ff Client: Apple 1997年の「Think Di erent」以来の強力なブランドメッ セージとして話題を集めました。 1分30秒。 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4JMYNL99JW.jpg) Source: Apple Inc., “Apple - Intention,” premiered as WWDC 2013 Intro, Vimeo, 2013 https://vimeo.com/241783590 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/PJR9DKG979.jpg) (見ていて気持ちの良い作品だ) # Page. 11 ![Page Image](https://bcdn.docswell.com/page/PEXQ1LX3JX.jpg) (ところどころ立体的、空間的に感じられる) # Page. 12 ![Page Image](https://bcdn.docswell.com/page/3EK92LWNED.jpg) (これをAVPで空間的に観てみたい！) # Page. 13 ![Page Image](https://bcdn.docswell.com/page/L73W431Z75.jpg) 空間で再現する良い感じのモーショングラフィクス... # Page. 14 ![Page Image](https://bcdn.docswell.com/page/87DKQ4X4JG.jpg) 無いなら作るぞ！ # Page. 15 ![Page Image](https://bcdn.docswell.com/page/VJPKLMPVE8.jpg) 元の動画を分析する 実装する 磨く # Page. 16 ![Page Image](https://bcdn.docswell.com/page/2EVVQ92REQ.jpg) 元の動画を分析する # Page. 17 ![Page Image](https://bcdn.docswell.com/page/57GLWZR6EL.jpg) 元の動画を分析する 全体構成を分析する 複雑な個別シーンを分析する 個別演出を分析する # Page. 18 ![Page Image](https://bcdn.docswell.com/page/4EQY3LV2JP.jpg) 全体構成を分析する AIと並走 Codex [GPT-5.5, 5.6 Sol] Claude [Fable5, 5.1] # Page. 19 ![Page Image](https://bcdn.docswell.com/page/KJ4W1DMP71.jpg) 全体構成を分析する # Page. 20 ![Page Image](https://bcdn.docswell.com/page/LE1YGZ8X7G.jpg) 全体構成を分析する # Page. 21 ![Page Image](https://bcdn.docswell.com/page/GEWGK9ZKJ2.jpg) 全体構成を分析する 全体を15シーンに分割できた [SC-01 〜 SC-15] 以後、AIプロンプト指示で「SC-01にて」等で範囲指定可能に # Page. 22 ![Page Image](https://bcdn.docswell.com/page/47ZLZ91NJ3.jpg) 全体構成を分析する # Page. 23 ![Page Image](https://bcdn.docswell.com/page/YJ6WZKL9JV.jpg) 全体構成を分析する テキスト、背景色、音などの共通設定も分析し切り出し # Page. 24 ![Page Image](https://bcdn.docswell.com/page/GJ5MWP1DJ4.jpg) 元の動画を分析する 全体構成を分析する 複雑な個別シーンを分析する 個別演出を分析する # Page. 25 ![Page Image](https://bcdn.docswell.com/page/9E29Q69M7R.jpg) 複雑な個別シーンを分析する # Page. 26 ![Page Image](https://bcdn.docswell.com/page/D7Y4W94PEM.jpg) 複雑な個別シーンを分析する SC-01 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/VENY9LYMJ8.jpg) Analyze Source: Apple Inc., “Intention” (2013) # Page. 28 ![Page Image](https://bcdn.docswell.com/page/Y79P24PWE3.jpg) テキスト、点、線 の表示タイミングを抽出 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/G78D5QDR7D.jpg) # Page. 30 ![Page Image](https://bcdn.docswell.com/page/L7LMYXM2JR.jpg) 元の動画を分析する 全体構成を分析する 複雑な個別シーンを分析する 個別演出を分析する # Page. 31 ![Page Image](https://bcdn.docswell.com/page/4EMYNLY9EW.jpg) 個別演出を分析する # Page. 32 ![Page Image](https://bcdn.docswell.com/page/PER9DK99J9.jpg) 個別演出を分析する 「気持ち良さ」はどこに存在するだろうか この動きはそもそも何のために存在しているのか？ # Page. 33 ![Page Image](https://bcdn.docswell.com/page/P7XQ1LQ3EX.jpg) 個別演出を分析する 「気持ち良さ」はどこに存在するだろうか この動きはそもそも何のために存在しているのか？ → そのシーンの特徴を抽出 # Page. 34 ![Page Image](https://bcdn.docswell.com/page/37K92L9N7D.jpg) 個別演出を分析する 点出現の音とのタイミング合致 点が出現から少し間を取って動き出す 点の動きのイージング 点が移動に応じて小さくなる 一つの図形が完成する前に次の図形の構築が始まる連続性 完成した図形が手前へ動くアニメーション # Page. 35 ![Page Image](https://bcdn.docswell.com/page/LJ3W43WZJ5.jpg) 個別演出を分析する 点出現の音とのタイミング合致 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/8JDKQ4K4EG.jpg) Analyze Source: Apple Inc., “Intention” (2013) # Page. 37 ![Page Image](https://bcdn.docswell.com/page/VEPKLMKV78.jpg) 個別演出を分析する 点が移動に応じて小さくなる # Page. 38 ![Page Image](https://bcdn.docswell.com/page/27VVQ9VR7Q.jpg) # Page. 39 ![Page Image](https://bcdn.docswell.com/page/5JGLWZL67L.jpg) # Page. 40 ![Page Image](https://bcdn.docswell.com/page/47QY3LY2EP.jpg) Source: Apple Inc., “Intention” (2013) # Page. 41 ![Page Image](https://bcdn.docswell.com/page/KE4W1DWPJ1.jpg) Source: Apple Inc., “Intention” (2013) # Page. 42 ![Page Image](https://bcdn.docswell.com/page/L71YGZYXJG.jpg) Source: Apple Inc., “Intention” (2013) # Page. 43 ![Page Image](https://bcdn.docswell.com/page/G7WGK9GKE2.jpg) 個別演出を分析する 点の動きのイージング # Page. 44 ![Page Image](https://bcdn.docswell.com/page/4JZLZ9LNE3.jpg) Analyze # Page. 45 ![Page Image](https://bcdn.docswell.com/page/YE6WZKW9EV.jpg) 個別演出を分析する 点出現の音とのタイミング合致 点が出現から少し間を取って動き出す 点の動きのイージング 点が移動に応じて小さくなる 一つの図形が完成する前に次の図形の構築が始まる連続性 完成した図形が手前へ動くアニメーション # Page. 46 ![Page Image](https://bcdn.docswell.com/page/GE5MWPMDE4.jpg) 元の動画を分析する 実装する 磨く # Page. 47 ![Page Image](https://bcdn.docswell.com/page/9729Q6RMJR.jpg) 実装する # Page. 48 ![Page Image](https://bcdn.docswell.com/page/DJY4W9DP7M.jpg) 実装する 仮説 - mpegでフレーム解析しデータファイルを作成 - それをSwiftの実装で空間に再現 ff で完成するのでは？ # Page. 49 ![Page Image](https://bcdn.docswell.com/page/V7NY9L6ME8.jpg) 分析1 # Page. 50 ![Page Image](https://bcdn.docswell.com/page/YJ9P24LW73.jpg) 分析2: ベクトル # Page. 51 ![Page Image](https://bcdn.docswell.com/page/GJ8D5QXRJD.jpg) 実装する 実装したものがこちら！ # Page. 52 ![Page Image](https://bcdn.docswell.com/page/LJLMYX82ER.jpg) 実装1 # Page. 53 ![Page Image](https://bcdn.docswell.com/page/47MYNL697W.jpg) 実装2 # Page. 54 ![Page Image](https://bcdn.docswell.com/page/P7R9DKP9E9.jpg) カオス # Page. 55 ![Page Image](https://bcdn.docswell.com/page/PJXQ1L337X.jpg) データ生成を固く行うツールも実装したが... # Page. 56 ![Page Image](https://bcdn.docswell.com/page/3JK92LYNJD.jpg) 実装する: macOS対応編集ツール # Page. 57 ![Page Image](https://bcdn.docswell.com/page/LE3W439ZE5.jpg) (とんでもなく作業量が多くなり) 挫折 # Page. 58 ![Page Image](https://bcdn.docswell.com/page/8EDKQ4G47G.jpg) しかし無事解決に至る # Page. 59 ![Page Image](https://bcdn.docswell.com/page/V7PKLM3VJ8.jpg) 実装する: Fable 5 AppleのWWDC 2013のモーショングラフィクス動画があります。 これを空間的に再構成しApple Vision Proで空間モーショングラフィクスとして体験したいです。 音楽と尺はそのまま使用する想定です。 visionOS 27、Swiftで、Xcodeプロジェクトを新規作成し ネイティブアプリとして実装してください。 モーショングラフィクスの気持ち良さを保つこと、空間的な構成と表現であることが必須です。 + 素材動画を添付 # Page. 60 ![Page Image](https://bcdn.docswell.com/page/2JVVQ94RJQ.jpg) 通して体験できる50点の物ができた # Page. 61 ![Page Image](https://bcdn.docswell.com/page/5EGLWZ16JL.jpg) Implement # Page. 62 ![Page Image](https://bcdn.docswell.com/page/4JQY3LD27P.jpg) 元の動画を分析する 実装する 磨く # Page. 63 ![Page Image](https://bcdn.docswell.com/page/K74W1DZPE1.jpg) 磨く # Page. 64 ![Page Image](https://bcdn.docswell.com/page/LJ1YGZRXEG.jpg) 磨く これまでの表現分析やデータを活用し シーン毎に改善の積み重ね 実機動作を確認し違和感があるところを削りこむ # Page. 65 ![Page Image](https://bcdn.docswell.com/page/GJWGK91K72.jpg) 磨く これまでの表現分析やデータを活用し シーン毎に改善の積み重ね 実機動作を確認し違和感があるところを削りこむ 2Dに留まっていた表現を空間体験として作り直す 2D: 画面の中で動く 3D: 奥行き方向にも動く Spatial: 自分との関係性が変化する 画面の枠がなくなった時に演出をどう成立させるか # Page. 66 ![Page Image](https://bcdn.docswell.com/page/4EZLZ9PN73.jpg) 磨く Claude Fable、Fable5.1と数週間に及ぶ積み上げ作業 # Page. 67 ![Page Image](https://bcdn.docswell.com/page/Y76WZKM97V.jpg) # Page. 68 ![Page Image](https://bcdn.docswell.com/page/G75MWPZD74.jpg) 磨く # Page. 69 ![Page Image](https://bcdn.docswell.com/page/9J29Q6PMER.jpg) 磨く # Page. 70 ![Page Image](https://bcdn.docswell.com/page/DEY4W95PJM.jpg) 磨く 事例1: SC-01 # Page. 71 ![Page Image](https://bcdn.docswell.com/page/VJNY9LNM78.jpg) 元の2D映像 Source: Apple Inc., “Intention” (2013) # Page. 72 ![Page Image](https://bcdn.docswell.com/page/YE9P24RWJ3.jpg) AIによる作成直後 磨く SC-01 # Page. 73 ![Page Image](https://bcdn.docswell.com/page/GE8D5QWRED.jpg) 改善後: 整合性 # Page. 74 ![Page Image](https://bcdn.docswell.com/page/LELMYXN27R.jpg) 改善後(実機): 空間体験化 # Page. 75 ![Page Image](https://bcdn.docswell.com/page/4JMYNLX9JW.jpg) 磨く 事例1: SC-02 # Page. 76 ![Page Image](https://bcdn.docswell.com/page/PJR9DKN979.jpg) 元の2D映像 Source: Apple Inc., “Intention” (2013) # Page. 77 ![Page Image](https://bcdn.docswell.com/page/PEXQ1LN3JX.jpg) AIによる作成直後 # Page. 78 ![Page Image](https://bcdn.docswell.com/page/3EK92LNNED.jpg) 改善後(実機) # Page. 79 ![Page Image](https://bcdn.docswell.com/page/L73W43VZ75.jpg) 磨く 事例1: SC-10, 11 # Page. 80 ![Page Image](https://bcdn.docswell.com/page/87DKQ484JG.jpg) 元の2D映像 Source: Apple Inc., “Intention” (2013) # Page. 81 ![Page Image](https://bcdn.docswell.com/page/VJPKLM8VE8.jpg) AIによる作成直後 # Page. 82 ![Page Image](https://bcdn.docswell.com/page/2EVVQ9NREQ.jpg) 改善後(実機) # Page. 83 ![Page Image](https://bcdn.docswell.com/page/57GLWZK6EL.jpg) 磨く 空間体験になるよう調整、改修 # Page. 84 ![Page Image](https://bcdn.docswell.com/page/4EQY3LN2JP.jpg) 余談: 空間的体験なので裏に回ることも可能 # Page. 85 ![Page Image](https://bcdn.docswell.com/page/KJ4W1DGP71.jpg) 磨く # Page. 86 ![Page Image](https://bcdn.docswell.com/page/LE1YGZDX7G.jpg) 元の動画を分析する 実装する 磨く # Page. 87 ![Page Image](https://bcdn.docswell.com/page/GEWGK9YKJ2.jpg) 分析、実装、磨きを経て... # Page. 88 ![Page Image](https://bcdn.docswell.com/page/47ZLZ9XNJ3.jpg) 完成した物がこちら # Page. 89 ![Page Image](https://bcdn.docswell.com/page/YJ6WZK49JV.jpg) Intention: Spatial # Page. 90 ![Page Image](https://bcdn.docswell.com/page/GJ5MWPQDJ4.jpg) # Page. 91 ![Page Image](https://bcdn.docswell.com/page/LE3W43ZQE5.jpg) # Page. 92 ![Page Image](https://bcdn.docswell.com/page/8EDKQ4RW7G.jpg) 空間モーショングラフィクス 体験すると凄く新鮮 今後の拡がりを感じています # Page. 93 ![Page Image](https://bcdn.docswell.com/page/V7PKLMWXJ8.jpg) 是非一度 Apple Vision Pro実機 音あり で観てください！ # Page. 94 ![Page Image](https://bcdn.docswell.com/page/2JVVQ983JQ.jpg) さいごに 是非一度 Apple Vision Pro実機 音あり で観てください！ 気軽に「観たい」と声を掛けてください。 2分で体験できます。 眼鏡の方でも大丈夫です。 X: @shmdevelop Xで最新情報共有してます この機会にフォローお願いします