ARフラスタの作り方とフラスタの贈り方
とあるライブイベントで「ARフラスタ」を、フォロワーさんと協力して贈りました！
この記事では、ARフラスタの作り方とフラスタの贈り方について解説してきます。
今後贈ろうと考えている方の参考になれば幸いです。
単にフラスタを贈りたい方の参考にもなるような内容になっていると思います。
拡張現実のことで、現実世界にデジタル情報を重ね合わせる技術のことを言います。
有名なものでいうとポケモンGOです。
実際の風景にポケモンがいるように映すことができるあの機能です。
(大体の人はAR機能をオフにしてると思いますが笑)
目次
1.ARフラスタの作り方
まずは実際のフラスタ写真です。
全体
AR起動時
動画
とあるライブイベントでARフラスタを贈ってみました！アプリインストール不要なので、フラスタ以外でもリアルイベントのちょっとした仕掛けにも使えそうです
QRコードがWEBサイトへのアクセス兼ARマーカーの役割、A-Frameで画面に雪を降らせる&自作の3Dモデルを表示、という仕組みです pic.twitter.com/rZ5styM5Lx— ぱやぱや (@paya2_5routai) December 26, 2019
実際のサイト
PCでコチラのQRコードを表示させた後、ケータイでQRコードを読み取り、WEBサイトに移動すると起動するカメラをQRコードに向けると体験できます。
またはケータイで↓のリンクに直接アクセスしてもok
https://mssp-soulmate.com/
こんな感じで、写真のようにパネルにARマーカーを仕込んで、カメラ越しに見るとフラスタにキャラクターを浮かび上がらせることができるわけです。
今回はフラスタにしましたが、例えば楽屋花とか、もっと身近なところで言えば名刺や広告のビラなんかにもARを仕込むことができます。
当日の反応
当日の反応は、フラスタ前に列ができる程たくさんの人に見ていただけました！
ARフラスタの出来よりも、QRコードを読み取るために立ち止まる→人だかりが出来る→それを見てさらに人が集まる、という行列の心理(行列ができているラーメン屋はうまいんだろう的な)のお陰もあったのだと思います。
それにしてもただのファンからの贈りものが、ここまで見てもらえるとは思ってもみなかったです。ありがたや！
さて、仕組みを簡単に説明します
- QRコードが、WEBサイトへのアクセス兼ARマーカーになっている
- WEBサイトに移動するとカメラが起動し、雪が降ってくる
- カメラを再度QRコードに向けると、キャラクターが浮かびあがる
となっております。
作成手順
- サーバ、ドメインの用意
- QRコード・ARマーカー作成
- WEBサイト作成
- ３Dモデル作成
- フラスタ制作
となっております。
ここではシステム周りについて説明します。フラスタ制作は先の章をご参照ください。
フラスタ制作
サーバ、ドメインの用意
私はサーバはNetlify、ドメインはムームードメインを使いました。
Netlify
Git・Githubを使えばコマンドひとつでファイルをアップロードできます。
そうでなくとも、ドラッグアンドドロップできるのでオススメです。(ただし英語です)
ARの確認のために、何度もファイルアップロードと確認という作業をするので、アップロード作業が簡単な方法を選んだ方がよいです。
(ローカルにサーバを立てて確認することも出来ますが、https化しないといけないため少し難易度が高いです)
ムームードメイン
ドメインは、whois情報(ドメイン登録者の氏名や住所)の公開代行を無料でしてくれるムームードメインを選びました。
(代行してもらうと、自分の住所を公開しなくてよくなる)
お名前ドットコムでも代行は可能ですが、年額980円かかります(2019/12/31現在)
このブログのドメインもムームードメインです。
【ムームードメイン】
QRコード・ARマーカー作成
QRコード生成
QRコードは大きめのサイズで解像度高めに生成した方がよいです。
小さいと認識距離が狭くなってしまうためです。
また、パネルに印刷するため解像度は300dpi以上に設定します。
私は下記サイトを利用させていただきました。
クルクルManager
こちら以外でも「QRコード 生成」で検索すると色々なサイトが出てきます。
ARマーカーの生成
↑で作ったQRコードを、ARマーカーとしても使います。
下記サイトを利用させていただきました。
AR.js Marker Training
手順
①↑で生成されたQRコードの画像をアップロード
②サイズ、白黒領域の比率を調整する
③マーカーとイメージ両方をセットでダウンロードする
※WEBサイト構築後、実際に読み込めるか確認してください。
※最初はとりあえずデフォルトの設定で良いですが、もし読み込めない場合はサイズや比率を変更します。
WEBサイト作成
(編集中)
３Dモデル作成
Blenderというフリーの3Dモデリングソフトを使いました。
https://www.blender.org/
日本語の情報サイト(非公式)
https://blender.jp/
私はこの3Dモデリングの作業が一番時間かかりました。
ネットで検索して上の方に出てくる情報が基本的に古いバージョンなので注意が必要です。
操作方法を検索するときは「blender 2.8」とバージョンも入れて検索することをオススメします。
無理に3Dモデリングでなくとも、画像をARで表現するツールもあるようですので、こちらを利用するのも手です。
こちらを利用すればサーバやドメインを用意する必要すらなさそうです
WebARジェネレータ
これだけで終わるのも作り方指南の記事としては足りないと思うので、箇条書きですがなるべく簡単に作れる方法を書いておきます。
詳細を書くとそれだけで10記事ぐらいかかりそうなので・・笑
- 最低限のショートカットキーを覚える
- 形が難しい場合は、ベースになる3Dモデルを探す
- 頭、髪、胴体と脚、手、足、服、あれば持ち物は別々のパーツとして作って、後から合体
- 既に作ったパーツは、複製で再利用する
- 新規で形を作る場合は、立方体を変形させて形を作る
- 瞳など色や形が複雑はものはテクスチャを使う(メッシュを瞳の画像にUV展開)
操作対象(頂点/辺/面)の切り替え(1,2,3)、移動(G)、拡大縮小(S)、回転(R)、これらの動作を各軸だけに固定(XYZ、またはShift + XYZ)、複製(Shift + D)、カット(K)あたり
ベースをBlender内にインポート。ベースを元に、自身の作りたいものに近づける(※3Dモデルの利用規約で制限されている場合があります)
もし手が止まった場合はわかる範囲で回答しますのでTwitter(@paya02_ictdev)にどうぞ。
2.フラスタの贈り方
続いてフラスタの贈り方。
大きく分けて以下の作業が必要になります。
3つ目はいれるまでもないかもしれませんが、ネットで同志を集う場合は必要です。
- フラスタ制作
- パネル制作
- 共同出資者の募集、集金(一人で出す場合は必要なし)
フラスタ制作
スケジュール
まずは締め切りを先に花屋さんに確認しましょう。
私の場合のスケジュールは、パネル送付・デザイン確定・入金まですべて1週間前が締めでした。
実際はこのようになりました。
2ヶ月前：電話でいつのイベントに出したいか伝える
1ヶ月半前：フラスタの仮デザインを送る
3週間前：フラスタのデザインを確定
2週間前：パネル送付完了
1週間前：入金完了
始めたのは早かったのですが、QRコードの読取りテストをするために、
パネル制作会社→自宅→花屋
と一旦自宅に送ってもらったため結局ギリギリになってしまっています。
フラスタ仮デザイン〜確定までは、主にサーバと3Dモデルの準備でしたので、通常のフラスタであればもっと余裕を持って動けると思います。
価格の相場は3〜5万円くらいのようです。
私が贈った写真のようなフラスタで3.6万円でした。
少しでも安くしたい場合は、お花の数を減らす・安いお花を使ってもらう(薔薇が高いそうです)・バルーンを減らすことで安くなるようです。
各作業の詳細
・電話でいつのイベントに出したか伝える
まずは連絡しましょう。このときデザインはなくても大丈夫です。
花屋さんは最大「1日〇〇基」と贈れるフラスタの数に制限があるので、先に枠だけでもとっておいた方がいいです。
・パネルの仮デザインを送る
大体のイメージを花屋さんに画像で送ります。おまかせも可能。
仮デザインには、バルーン、布の種類、自前の小物の有無等も、一緒に書いておくといいです。
またパネルについて、
お花屋さんで一緒にお願いできる場合もあります。
別な業者で頼んだ場合の、パネルの送付先は花屋さんになります。
フラスタのデザインによってはパネルのサイズに指定があるかもしれません。
ちなみに、私の贈ったフラスタはパネルの組み立てが必要でしたが、組み立ては花屋さんでやってくれました。
ちょっと複雑だったため、パネルの各パーツに付箋を付け、さらにGoogleサイトで手順を作って共有していました。
一例ですが、こんな画像を送っています。
・日時、会場、イベント名、誰宛てか、納品時間、撤去時間を伝える
納品時間、撤去時間は、アーティストから公式に案内があればそちらを参照。
ない場合はイベント会社に問い合わせが必要です。
パネル制作
パネルはなくても無しでも頼めますが、文字を入れたいとか参加者の名前を出したい場合は必要です。
(編集中)
共同出資者の募集、集金
パネルに名前を載せるのか載せないのか、入金はいつまでか、一口いくらか、などを書いて募集します。
お金はトラブルの元になりやすいので、講演の前なのか後なのか、現金手渡しなのか事前振込なのか、などを確認しておくと良いです。
ちなみに私はFF外からも募集しましたが全然集まりませんでした！！！
おわりに
長くなりましたが、推しに花を贈りたい方の参考になれば幸いです。
「ここどうなってるの」とか、ARフラスタに関して知りたいところがあれば、Twitterの方にご連絡ください。
@paya02_ictdev
ソウルメイトの方はこちらでも構いません！
@paya02_mssp
