手描きの絵をARに：2026年の技術で実現したアニメーション制作の記録
本イベントへの参加は今回で2回目となります。当初の計画を変更し、お子さんから頂いた手描きの絵をARアニメーションとして命を吹き込むプロジェクトに挑戦しました。画像生成にChatGPT、Web AR開発にはCodexを活用し、わずか10分で実装を完了。2012年の研究当時と比較し、ブラウザ上で完結する現在の技術進化に大きな衝撃を受けました。小規模ながら自身の技術で創作を完遂できた貴重な体験です。
今回イベント「Ship It Saturdays」に参加するのは2回目となります。当初はアニメーションとランディングページを組み合わせる予定でしたが、制作中に素敵な出来事がありました。ある可愛らしいお子さんが手描きの絵をプレゼントしてくれたのです。これには本当に心が温まりました。
制作中に行き詰まりを感じた際、方向性を転換し、その手描きの絵をAR（拡張現実）アニメーションに変換して、静止画に「命を吹き込む」ことに挑戦しました。
制作プロセスと技術的アプローチ
実現のために、以下のステップを踏みました。
- 素材準備：手描きの原画をスキャンしてデジタル化しました。
- AI画像生成：Seedance、Wan、Klinなど複数のAIツールを比較検討しましたが、最終的にChatGPTの画像生成機能が最も理想的な結果をもたらしました。
- アニメーション制作：手描きの原画を「最初のフレーム」に、AIで生成した絵を「最後のフレーム」に設定。特定のテクニックを用いて関連付けを行い、Geminiのウェブ版を活用して最高のアニメーションを仕上げました。
AR開発の衝撃と技術の変遷
ARアプリケーションの開発を通じて、時代の大きな変化を痛感しました。
- 技術の対比：私とARの関わりは、2012年の大学院での研究課題にまで遡ります。当時は専用のアプリが必須であり、モデルや画像の構築工程は非常に煩雑なものでした。
- 2026年のブレイクスルー：驚くべきことに、2026年の現在ではスマートフォンのウェブブラウザ（Web AR）だけでこれら全てが完結します。この技術の進化には大きな衝撃を受けました。
- 効率的な開発：Codexを使用してウェブ版ARアプリを構築しました。要件は「特定の画像を認識した際に、その場所でアニメーションを再生する」というものです。驚いたことに、わずか10分程度で開発が完了しました。
小規模なデモ作品ではありますが、自分の手でAR作品を完成させることができ、非常に満足しています。子どもも大喜びしてくれました。今回の創作体験を通じて、2026年の技術発展の素晴らしさを改めて実感することができました。
Project Info
> Demo Page: https://demovibecodingjapan.web.app/fantasyarforlittlegirldream.html
> Demo Page QR:
> AR Image:
> Github: https://github.com/perfact-tang/fantasyarforlittlegirldream