年賀状をはじめて作ってみた
お久しぶりです。しゅうと申します。
2020年が訪れ、自堕落な冬休みを送っていますが、この新年を迎えるにあたって12月序盤あたりから準備をすすめてきたのがこの年賀状です。
AR年賀状の構想
ARで年賀状を送るという構想はふとした思いつきだったりします。
はじめは適当なハガキをモーショントラッキングして、「39」のMVをはめ込んだ映像をつくりたいと考えていました。
しかし、どうにも実写撮影のノウハウを持ち合わせていないので、「ARマーカーを置いて、スマホで再生できるようにすればいいじゃん」という考えに至りました。
ちなみに、モーショントラッキングのためだけに月額2000円くらいのAdobe Creative Cloud コンプリートプラン学生版を購入しました（あんまり使ってない）。
ARを実現するにあたって、最初は「HP Reveal」というアプリを使おうと考えていました。
スキャンした絵柄（なんでもOK）をマーカーにして、AR映像を簡単に作成できるというアプリです。
これだ！と思ったのですが、一度作成したARは編集できなかったり、サービス終了しているという噂だったり（ちゃんと調べてないのでわからん）、小回りが効かない印象でした。
ということで、AR.jsとGitHub Pagesの組み合わせで、AR映像を自作することとなりました。
映像製作
映像はいつもどおり、AviUtlで製作しました。
今回ははがきサイズの映像ということで、200dpiの787x1165pxという気持ちの悪い解像度でつくりました。
ここで失敗したのが、エンコーダーが偶数サイズしか受け付けてくれなかったことです。AviUtl側でサイズを変更して、エンコードはなんなくできましたが、最初に試しておけばよかったです。
今回はじめての試みとなるのは、イラストを使用させていただいたことです。
茉莉花（まつりか）さんに初音ミクのイラストの依頼を出し、イラストとその線画を動画後半で使わせていただきました。納期はとても早くて最高だったんですが、完璧にイラストを活用できたかというと、微妙なところかもしれません。
素敵なイラストだったので、もう少し存在感をもたせたかったとは今思います。
今回パクリ参考にさせていただいたのは、以下の映像たち。
シェイプモーション関連なんかは、Virtual to LIVEをはじめとするろくんしさんの映像。
あとは、Cumuloworksさんの映像（特に39）もシェイプモーションの参考にさせていただきました。とかいいつつ、そんなにシェイプモーションしてないですが。
ラスサビのところは、まきのせなさんのSingularityやI seek youに触発されました。あんまりアイデアがなかったので、結構似た感じになってしまいました。
本家MVの映像も雰囲気を考えるのに役立ってくれました。
宣伝っぽくなってしまうのですが、このMVでは自作スクリプトを結構使っていたりします。イントロ部分では、螺旋状に動くアニメーションや日付がスクロールするものを使っていましたが、これらは全部自分でつくりました。
特に年月日カウンターは、このMVのためにコードを書いています。たぶん探せばあると思うんですが、なにを血迷ったのかあまり時間がないのに作っていました。
日付をぐわーってできるスクリプトできましたhttps://t.co/xxoHe4QwJa pic.twitter.com/DcvBZ4lP0f
— しゅう (@shulmj_) 2019年12月15日
ちなみに全部GitHubで公開してるので、よかったら見てね。
一番この映像制作でつらかったのは、エンコードです。
はじめはx264GuiExで出力していたのですが、最終エンコードではエラーが多発。
結局、無圧縮AVIで出力して、それをx264GuiExでエンコードするという手法をとりました。
たった2分の動画ですが、一回のエンコードに約12時間かかっています。ミスの修正なども合わせれば、これを3セットくらいはしました。
さすがに何度もエンコードするのはしんどいので、細かいミスは数秒くらいの修正済み無圧縮AVIに起こして、それをもとの映像と組み合わせたりしてました。
それでも十数秒の映像とかで2時間くらいかかっちゃうんですけどね。モーションブラーは悪です。
WebAR製作
映像製作と並行して行っていたのが、AR.jsとaframeを用いたWebARの製作です。
幸いにもマニュアルが充実していて（参考1、参考2）、結構簡単にARマーカーを認識することはできたのですが、問題は映像と音楽を再生することでした。
結局はここに書いてあるソースを真似ることで再生できるようにはなったのですが、結構試行錯誤してしんどかったです。
特に書くこともないくらい地味なコーディングだったのですが（commitしてGitHub Pagesから確認してを繰り返すだけ）、一番大変だったのはこれの製作中に発症したインフルエンザです。
40℃くらいの熱が出て、まーじで死ぬかと思いました。体に異常な寒気がしたら、コーディングは一旦やめたほうが良いと思います。
年賀状製作
肝心の年賀状ですが、元日に届けるには12月25日に投函しなければならなかったのですが、普通につくるのを忘れていました。
せっかくなのでIllustratorで試行錯誤しながらデザインをつくり、ARマーカーもちゃんと載せました。
しかし、自宅にははがきをきれいに印刷できるプリンターがなかったので、宛名印刷を無料で行ってくれるおたより本舗に依頼しました。
正直に言うと、クッソ高かったですが（10枚で3500円）品質はとても良かったです。
縁無しにするために光沢印刷のオプションを付けたのですが、めちゃくちゃ高級感があってとても満足してます。宛名印刷も非常によい。
ただ、3500円かける価値があるかは微妙です。
小ロットの印刷なので、はがき印刷可能なプリンターを購入したほうがコスパは良いと思います。納期も存在しないですし。
来年もしつくるなら、適当にコンビニプリントで済ませようかと思ってます。
完成品
結局映像が完成したのは、12月30日でした。わりと最後の方はスケジュール的に余裕があったので、結構ゆったり作業していたのですが、来年はもうちょっと早くから作りたいと思います。
もう一つ反省点としては、知り合いの住所をあまり聞き出せなかったことです。AR年賀状の反応は結構いただけてとても嬉しいのですが、肝心の現物を渡す人が10人程度しかいなかったので、来年は色んな人に住所を教えてもらおうと思ってます。
あとインフルにもかからないように。
実際に動いている様子はここから見れます。
2020年の年賀状はスマホAR動画になります！
— しゅう (@shulmj_) 2020年1月1日
受け取った方はぜひ試してみてね pic.twitter.com/Aa3Qyfkh50
あとMVはこちらから
ARマーカーさえあれば、このAR年賀状を楽しむことはできます。
