AR フォトフレームを作った

先月ドラえもん映画を観に行ったとき、入場者特典でブックレットをもらった。コミックが読めたり、パラパラ漫画があったり、お絵描きがあったり、いろいろ盛りだくさんのブックレットだった。

[映画]『映画ドラえもん のび太の絵世界物語』
https://dokusho.nary.cc/post/2025/2025-03-21_film-review-doraemon-movie-2025/

そのなかで QR コードをスマートフォンで読み取ると、ドラえもんのキャラクターのイラストと一緒に写真が撮れるようになる。ブラウザで撮影ができるので、特にアプリなどをインストールする必要がない。

また去年映画『がんばっていきまっしょい』を観たときに X で、映画のキャラクターを含んだ写真を投稿している人がいた。これは特定の場所（この場合映画に関係ある場所）に行くと専用アプリでそういう写真が撮れるようだ。

そういった AR 写真を、自分でも作りたいじゃないですか。

僕の場合、よく観光地などでコロ助のぬいぐるみで撮影をしているが（いわゆる「ぬい撮り」だ）、ぬいぐるみで撮影するのは恥ずかしい状況もある。でも AR 写真なら気軽に撮影ができる。

AR 写真は位置情報を使ったものや AR マーカーを使ったものなどもあるが、今回はフォトフレームで写真が撮れればいい。つまり好きなキャラクターを固定配置したフォトフレームを用意し、ブラウザで撮影できるようにしたい。

最初は自分でコードを書こうとした。僕はゼロからそういったコードを書くことはできないが、ウェブでコードを公開している人がいるので、それを真似して作成しようとした。

特に「AR 年賀状」という、年賀状に AR 画像を表示されることをやっている人が多くいるので、コードの書き方、作り方はある程度情報は見つかった。

でも僕の環境ではどれもうまくいかなかった。最終的にあと一歩のところまで行ったんだけど、画像が暗くなってしまう問題がどうしても解決できなかった。結局諦めた。

すると palanAR というサービスを使えばノーコードで AR 写真を作れることを知った。本当はこういう市販のサービスではなく自分で作りたいが、僕のスキルでは現時点では難しい。今回は palanAR を使わせてもらおう。

palanAR（パラナル） | WebAR（ウェブAR）作成オンラインツール
https://palanar.com/

palanAR では無料プランでもいくつか自分の AR ツールを作ることができる。AR フォトフレーム以外にも前述の位置情報を使ったものや AR マーカーを使ったものなどもできる。

早速登録してやってみたが、あっという間にできてしまった。僕はシンプルにぬいぐるみやイラストと写真が撮れればいいので。

ブラウザの操作画面。

ぬいぐるみ写真からぬいぐるみ部分だけを切り抜くには以下のツールを使った。

AIが自動で画像の背景を切り抜きます｜切り抜きAC
https://clipping-ac.com/upload

ぬいぐるみとイラストの切り替えはトップのボタンで操作できる。

指定の URL にアクセスすればすぐに利用できる。QR コードも発行されるので、それを年賀状に貼ったり、SNS で共有するようなこともできるだろう。

早速ミスタードーナツで撮影してみた。

参考：
ARフォトフレームとは？活用事例、無料での簡単な作り方・使い方を解説！｜お役立ち情報｜ウェブAR・ブラウザARなら「LESSAR（レッサー）」
https://less-ar.jp/media/column/ar-photoframe

前提知識ゼロで AR 年賀状を作ってみた
https://zenn.dev/alea12/articles/05a6ff557166ff

GitHub - Villager-B/Simple_AR_CARD: AR.jsとA-Frameを使ってサクッとAR名刺を作るレポジトリ
https://github.com/Villager-B/Simple_AR_CARD?tab=readme-ov-file

プログラミング未経験者のためのAR.js #初心者 - Qiita
https://qiita.com/Mk459/items/c8fa67a6044178a802ec

スマホで3DモデルをAR体験！GitHub Pagesで簡単ホスティング｜yasusan
https://note.com/famous_gnu433/n/n57b122de3b6a

【初心者でも1時間でできる！】撮った写真をAR化していつでもどこでもｲｯﾇといっしょ🐶 #HTML - Qiita
https://qiita.com/chiiirotty/items/fe4ca55422d5fc508212

【お手軽AR】アプリインストール無しで見られるスマホAR体験を作る方法｜癒色えも
https://note.com/ishiki_emo/n/n108895685e22

AR.js の世界へようこそ！ ３歩でわかる お手軽 拡張現実 #JavaScript - Qiita
https://qiita.com/dsudo/items/58718e9e3c870e6b92e6

GitHub - t-takasaka/vrm-three-ar
https://github.com/t-takasaka/vrm-three-ar

[HTML5] カメラをJSで操作し写真を撮影する - ねこの足跡R
https://blog.katsubemakito.net/html5/camera1

java - Merge Camera preview with a image? - Stack Overflow
https://stackoverflow.com/questions/10315872/merge-camera-preview-with-a-image

ARの教科書 | Dieter Schmalstieg, Tobias Hollerer, 池田聖, 酒田信親, 山本豪志朗, 池田聖, 一刈良介, 大槻麻衣, 河合紀彦, 酒田信親, 武富貴史, 藤本雄一郎, 森尚平, 山本豪志朗 |本 | 通販 | Amazon
https://amzn.to/4cOTtlM