ARで千客万来！ミライのPOP UP STOREに向けて

みなさんこんにちは。めろんうゆです🍈🥛

今回は初！ARを使ったプロトタイプの作成に挑戦！

これまで書いたQiita記事はそれぞれ現在ぶつかる課題を解決するためのものでしたが
今回は少し視点を変えてECサイトオープン後の課題を取り上げました🖊
# 作成経緯🖊いつかくるリアル展開を見据えて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/6e70fd2c-dec6-d749-9a3b-33a4f385ae39.png)

現在準備しているECサイトはオンラインだけでの展開を予定していますが、
いずれはPOP UP STOREを開催しようと画策しています。

お客様にご来店いただき
『あのお店おもしろいね！』と思っていただくためには、サイトにあるものを
買うだけでは得られない満足感も一緒に持ち帰ってもらわなくてはなりません。

ではどんな方法でPOP UP STOREを満足度の高いものにしていくか…？

今回はARを使って記憶に残る体験をしてもらい
販促にもつなげてしまおう！とこの企画を考えてみました。

:::note info
目的①
<font color="green">**『商品を買うだけではない“コト体験”をしてもらう』**</font>
ARを使った写真撮影イベントの開催



:::

:::note info
目的②
<font color="green">**『“コト体験”を販促につなげる』**</font>
ARイベントページから販促ツールに遷移する導線をつくる


:::

# 完成品はこちら📷🎄
https://x.com/junwooseishun/status/1828403490366148667

# 使用ツール🧰
[palanAR](https://palanar.com/)
[LINE Developers](https://developers.line.biz/ja/)
[Canva](https://www.canva.com/)

# 下準備🎨画像マーカーの作成
まず、ARの作成を始めるにあたり、1点準備を行いました。

palanARをいろいろと触って試していたところ
<font color="Red">特定の画像をカメラで映すとARが出現する【画像認識】</font>
なるものがあることを知り、ぼくはこの方法でARを出現させることに。

店内のビジュアルを読み込ませるだけでARが起動したら、サプライズ感が出るかも？
というのが選択の理由です💡


Canvaを使用し、以下の通り店内用ヴィジュアルを作成🍈
少し早いですが、クリスマス時期のPOP UPを想定しています🎄✨

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/b75e90c5-4d32-6fb2-876c-3ef6c89d8213.png)

# palanAR👓簡単AR作成
準備ができたら早速ARを作成していきます。
ARなんてどうつくるんだ…💦そんな声が聞こえてきそうですが、
今回はpalanARを使用したため、簡単にARのプロトタイプを作成することができました。
会員登録後の手順は以下の通り。

## 1.AR新規作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/3f420060-ef8d-0bb1-7d97-35766d27ec96.png)
【AR新規作成】のボタンを押し、いざスタート。

## 2.ARの種類選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/0fc9631b-901a-a1fa-4f17-750381d5f9f0.png)
今回はARの種類の中から【画像認識】を選択。
特定の画像が認識された際、ARが表示されるようにします。

## 3.画像認識方法の選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/0f620c6f-8d4a-f6e2-90aa-8a89d7af1650.png)
1つの画像のみ認識する【シングルマーカー】か
複数の画像を認識する【マルチマーカー】を選択できます。
今回は【シングルマーカー】を選択。


## 4.名称設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/9dcb4d1a-0419-5de8-a0d2-7eb62fad7ce0.png)
プロジェクトに名前を付けます。
今回はPOP UP STOREの開催を想定しているため、
【メロンうゆモールPOP UP STORE】とつけました。

## 5.画像マーカー設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/7aa13c03-4677-00f8-63f8-a45d0c4a277e.png)
下準備で作成したビジュアルイメージを読み込ませ、マーカーとして設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/2d9c82d2-06d4-af5a-695b-bea8d43e9583.png)
このように読み込ませた画像をカメラで映すだけで、ARが出現するようになります。

## 6.ARデザイン設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/34ca964b-21d8-0aa3-0d1c-3c54ffd6716f.png)

今回は左カラムから
【AR編集】＞【AR素材】＞【＋素材ライブラリから追加】とそれぞれ進み
2つの素材を表示させることにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/84bb3450-1ed8-3ae4-17cb-9cc0598dfb5e.png)
素材はこれらの候補から選ぶことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/64724f52-8ee5-bfb7-b16a-e7c94fdd2dbc.png)
素材をクリックすれば、右側に出てくるプロパティでサイズや位置の変更も可能です。
何度か保存と再編集を繰り返しながら大きさと配置を決定させていきました。

## 7.イベント設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/69af54a9-b2f2-32fc-c832-af750a273496.png)

デザインが決まったらARを使ってどのようなイベントを行うか設定します。
今回設定するイベントは2つ。

①写真撮影用設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/661adc06-2913-0ce4-cf68-ea50d440c843.png)
撮影ボタンを押すとARと一緒に写真を撮ることができるようになるものと…

②ページ遷移設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/7db38449-64ab-d376-cdad-990572eda6c2.png)
出現したクリスマスツリーをタッチすると、指定したURLに遷移するもの。
指定したURLについては後述します。

以上で設定は終わり。

# ARイベント活用🎪
前述の設定で
①ARと記念撮影
②ARをタッチして指定したページに遷移 の2点が可能になりました。
こちらでは設定したイベントの活用方法に触れていきます。

## ①ARと記念撮影
まず①の活用方法。
ARと一緒に記念撮影ができる、というのはワクワク感があるものの
撮るだけならやめておこうかな、という方も少なくなさそうです。

そこで、撮影した画像を『#melonuyumall』とタグ付けしてInstagramのストーリーに
あげてくださった方の中から抽選で〇名様にメロンうゆモールで人気の商品をプレゼント！
等のキャンペーンを行い、撮影する楽しみをUPさせます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/8ed505d2-c877-3e92-7925-c0e672d34b75.png)

今回もおなじみ、りんごさん🍎にご協力いただきコメントをもらってきました。

<details><summary>りんごさん🍎のコメント</summary>


🍈今回はチームでもよく出るPOP UP STPREの開催を想定してこんな企画をしてみました。
毎度毎度申し訳ないですが、感想をいただけますでしょうか…？🙇

🍎いつも呼んでいただきありがとうございます！笑 
何気に新しい企画の登場を楽しみにしていたりします。
今回の企画面白いと思いました！

めろんうゆさん演じる店員さんが
「今日はご来店ありがとうございます～」
「もしよかったらカメラでQRコード読んでみてください」
って言いだしたところで
『あ。なんか始まる。』とちょっと構えたんですよ。

でも何が始まるでもなく別なカメラが起動していて。
で、ポスターに向かって写真を撮ってみて、というのでカメラをかざすと
ツリーが出てくるじゃないですか。
これは今まで経験したことのないイベントだったのでちょっとびっくり。
友達と一緒だったりしたらワイワイしちゃうと思いました。笑

フォトスポットがあってそこで写真撮影できる、というようなものって
『ザ・フォトスポット』な見た目だと正直近寄りがたかったりするんですよね。
でもこれなら「え、なになに？」と
興味を引き付けられてしまうんじゃないかなと思いました。

また、写真を撮ってストーリーにアップすればプレゼントが当たる、というのも
写真撮影の動機付けとしていいなと思いました。ただ写真が撮れるというだけだと
よほど好きなキャラクターなどと写真が撮れるわけでもない限り
恥ずかしいしまぁいいや、と思ってスルーしたりすることも多々あるので。

あ、ポスターがA4サイズで小さかったところは減点です👼
</details>

## ②ARをタッチして指定したページに遷移
続いて②の活用方法。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/23cb69d5-72fd-2e02-5176-ea0fb481eab5.png)

ARをタッチした際の遷移先にはLINE botの友達追加画面のURLを設定しました。
以前業務改善のためのbotをつくり記事にしましたが、
今回はお客様向けの情報配信を行うアカウントを想定。

追加した画面を見せてくれた方にメロンうゆモール限定ノベルティをプレゼント！
等のキャンペーンを行います。
<font color="green">【キャンペーンの案内→QRコードを読んでもらう→友達追加してもらう】</font>
というのがよくある流れかと思いますが、レジ前でキャンペーンの案内をされても
今回は大丈夫です、となるケースが多くあるため、ARで写真撮影をして盛り上がり、
SNSにアップしてキャンペーンに参加し、テンションが上がったまま友達追加も
してもらえればハードルが下がるかも！という魂胆です。

<details><summary>余談</summary>
AppSheetで作成したアプリを遷移先に設定し、
簡単に選択するだけのアンケートに答えてもらいGoogle Sheetに回答を自動転記し、アンケート結果の集計に役立てる、というのも考えたのですが、
<font color="green">【AR写真撮影→SNSにアップ→アンケートに回答】</font>
の流れは高揚感が削がれそうなので今回のLINEの友達追加を選びました。
</details>

# つくってみて🍈
今回はARに初挑戦！
ARなんてポケモンGOくらいしか触れたことがなく、
まさか自分でカスタマイズする日がくるなどとは思ってもみませんでした。
しかし、ARに触れて得られるワクワク感はやはりイベントに向いている！と強く実感。
試してくれたりんご🍎さんのナイスリアクションでお客様がご来店されたときの姿が
想像できました。ARはそこまで興味があったわけではないのですが、
今回プロトタイプをつくり、触ってもらって、やってみてよかったなと心から思いました！

それではまた👋