ARの謎解き切り絵バースデーカードを作ってみた

2026/07/11

AR切り絵バースデーカードを作りました。

これは我が家の毎年の恒例行事というか、バースデーカード大喜利みたいになっているのですが、今年もいろいろ工夫して作ってみました。

できたもの

蟹座ということで、カニさんモチーフです。

今年、仕事が変わって新しい街へと引っ越すことが決まったので、新しい世界への「航海」の願いを込めて作ってみました。

カニの切り絵の上にスマホをかざすと、金庫の扉が現れます。

ダイヤルを回して秘密のパスコード（誕生日）を入力すると、ロックが解除され、扉が開きます。

扉の向こうには水が満ちてきて、切り絵の船が飛び出します。

最後に、Bon voyage（よい旅を！）というメッセージが表示されます。

HTML, CSS, JavaScriptで作りました。

ARのライブラリは8thWallの画像認識を使用し、アニメーションはCLIP STUDIO PAINTで作成しています。

ダイヤルを回して鍵を開ける、というちょっとしたインタラクティブな仕掛けを入れています。

以前作ったARゲームの中で、スワイプで氷を溶かす機能を入れてみたことがあったのですが、これが個人的にめちゃくちゃ面白かったんですよね。

なので、今回の体験は、ただのタップではなくて、スワイプする体験を入れよう！と決めて実装していました。

タップとスワイプ、ちょっとした違いではあるのですが、スワイプすることで、ゲームを遊んだ感というか、没入感や満足度が結構高まるな、というのが大きな発見でした。

他にもロングタップやピンチ、ドラッグなどなど、いろんな指の動きを組み合わせた体験を作るのはかなり良さげかもしれない。

もっとガチなストーリーを作り込んで、AR謎解きを作ってみてもいいな！とワクワクしてきました。

ダイヤルを回した時に、カリカリとスナップ音がするようにしてみました。

音があるだけで、回している感覚が上がる。

本当はスナップするたびに振動も加えたかったのですが、iOSだとブラウザから端末の振動を加えるのが厳しいのですよね...（Androidならばできるけども）。iOSとAndroidでここは規格を統一してくれないものか...とめちゃくちゃ思います。

他にも、ドアの開錠音、波の音、船の汽笛の音など、けっこうリッチに盛り込んで、にぎやかなAR体験になりました。

普段、アニメーション作成はLive2Dを使っているのですが、今回、忙しすぎてめちゃくちゃ納期（誕生日）が短かったので、CLIP STUDIO PAINTで、パラパラ漫画の如くアニメーションを作ってみることにしました。

やってみたら結構直感的に作ることができて、とっても楽しかったです。

Live2Dは、関節の細かい動きや、複雑な変形の表現にはもってこいですが、シンプルにコマ撮りみたいなアニメーションを作りたいだけならば、CLIP STUDIO PAINTでかなりいいものが作れそう、とわかりました。

あと、よーく見るとカニさんがまばたきしています。これもCLIP STUDIO PAINTでサクッと作りました。

えっ、でもカニってこんなまばたきするっけ...？可愛いからいーんだよ( 'ω')

AR切り絵バースデーカードは2022年から毎年作り続けているのですが、正直、この時期が来るたび毎年ネタに苦しみます。笑

ですが、毎年新たな発見や挑戦を盛り込みながら実装できているので、かなりやりがいがあります。同じテーマで作ることで、自分の成長の変遷も感じられますしね。

今年も無事、滑り込みで誕生日に渡せたのでよかったよかった。

また来年、次は何を作ろっかなぁ。