店内の販促物の課題をARで改善しようとしてみた

こんにちは、@rilakkuma46です。
先日ARに触れる機会があり、自分でも簡単に作成できることを知りました。これって何かに使えないかなと思い、チャレンジしたことを記事にします。

# 販促物の課題

#### 販促物・POPとは
小売の店内には、販促物と呼ばれるPOPやポスター、カタログなどがあふれています。なかでも、商品の名前や価格・セールスポイントなどを表示する「POP」は重要なものです。デジタル表示も増えてはきましたが、まだまだ紙のものが多いです。特に紙のPOPは、
* POP表示価格とレジでの価格を一致させるのは手間がかかる
* 広告商品など期間限定のものがある
* POPの種類が多くなりがちで、買う人に伝わりづらい

などの課題があります。
この課題解決の方法として「AR」が利用できないか試してみました。

#### ARとは
「AR」とは現実世界にデジタル情報を重ね合わせる技術です。スマホを通して映像・音楽・３Dモデルなどのデジタルコンテンツを表示します。現実世界とデジタルの要素が組み合わされているため、日常生活の中で使いやすいのが特徴です。「palanAR」というツールを使うと比較的簡単にARが作成できます。

:::note info
palanAR
コードを書かずにオンラインでWebARが作成できるツールです。無料プランもあり、操作も簡単、AR作成が初めての方でもすぐに作れます。
https://palan.co.jp/
:::

# POPをARで改善してみた

## ◆使用ツール
* palanAR
* Tinkercad　（オンラインの3D設計およびモデリングツール）

## ◆できたもの

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">AR試してみた <a href="https://t.co/y7ujQT0ucq">pic.twitter.com/y7ujQT0ucq</a></p>&mdash; Toshi82430 (@Toshi82430) <a href="https://twitter.com/Toshi82430/status/1838001073145176190?ref_src=twsrc%5Etfw">September 22, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

:::note info
ARが表示される仕組み
「マーカー」と呼ばれるARを表示させる目印となる画像を専用アプリまたはWebカメラで読み込むとARが表示されます。
:::

## ◆AR作成までの流れ
#### ①ARの種類を選ぶ
最初にARの種類を選びます。パッケージを認識させたいので、今回は画像認識を選択しました。
![プレゼンテーション1.pptx.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818386/e88e4184-6693-a35e-ae58-80f2f37e3258.jpeg)

#### ②マーカーを設定する
画像認識のためマーカーも画像になります。今回は自作した架空のパッケージ画像をマーカーに設定します。画像によりマーカーに適さない場合があります。
![スクリーンショット 2024-09-19 205445.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818386/3320f033-c121-fe3f-b656-31693e270207.jpeg)
#### ③AR素材を設定する
無料の素材ライブラリから選ぶこともできますが、自分で作成した素材を使用することもできます。
![スクリーンショット 2024-09-20 195842.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818386/bc8e4b98-c0f0-2aa1-c8b0-8e3017ce285a.jpeg)

今回はTinkercadというツールを使って3Dモデルデータを自分で作ってみました。
<details><summary>Tinkercadでの作成方法はこちら</summary>

まずは基本となるオプジェクトを右側から選んで
![スクリーンショット 2024-09-19 211459.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818386/15532237-eb89-d07f-ed48-08a05dd337d1.jpeg)
大きさ・色などを設定していきます。設定そのものは直感的な操作で簡単ですが、奥行きの設定が加わるので調整が難しいです。
![スクリーンショット 2024-09-19 211613.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818386/43ea6f80-d39d-ce08-5017-f95e4141f222.jpeg)
</details>




素材を選んだら、表示させる大きさ・位置などを設定します。
![スクリーンショット 2024-09-20 200050.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818386/880f5ad8-d53e-8f92-db04-58bdf83744b5.jpeg)

簡単な動きも設定できます。下の画像はマーカーを認識したときにAR素材を回転させる設定です。
![スクリーンショット 2024-09-19 210516.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818386/888e2aa4-a15f-0e30-8c7d-f98716136f70.jpeg)

#### ④保存をして完成


## ◆試してみた
パソコン上で画像を表示して試してみました。感想は、
* インパクトはある
* AR素材を見やすく設定するのが難しい
* 3D文字は読みづらい
* 別アプリを立ち上げるのが面倒くさい
* 画像マーカーの読み取りが難しい（ARマーカーと呼ばれる専用のものを印刷して配置すれば簡単に読み取れる）

実用化にはほど遠いものでした。


# なぜPOPをARで表示させるのか？
今回改善したかった対象は、広告商品など期間限定で表示が変わるPOPです。紙のPOPは表示切り替えの手間が面倒ですし、デジタル表示は文字が小さく買う人に伝わりにくいと思っています。商品パッケージをマーカーにすることで、紙のPOP表示切り替えの手間をなくします。ARで表示することにより伝わりやすくなるのでは、と考えました。
さらに、AR表示のハードルが他社より低いと考えました。AR表示にはスマホでアプリ等を立ち上げる手間があり、気軽に使えないという欠点があります。ところが、我が社にはセルフスキャンの仕組みがあります。

:::note info
セルフスキャン
「スキャン＆ゴー」「レジゴー」「スマートショッピングカート」などのことで、スマホのカメラ機能を利用して、自分で商品のバーコードをスキャン、最後にお会計だけするもの。レジの時間も早いのですが、マイバスケットで買い物すると、レジの後に商品を詰め直さずにそのまま帰れるのが楽です。
:::

これらは、専用アプリではあるものの、バーコードを読み込ませるために常にカメラが起動したままになっています。もし専用アプリの画面内でARも表示できたら、AR表示のためにカメラやアプリを立ち上げる手間がなくなります。
そんな我が社の利点を生かしてPOPが抱える課題を解決できないかとARを試してみました。ARを表示さるのは比較的簡単だが、表示させるARをどんなものにするか、知識と経験が必要と感じています。わかりやすいAR表示・パッケージの読み込ませ方などもう少し検証してみたいと思います。

(追記)
パッケージをマーカーにすると、近くまで行かないと表示できない・商品が正面を向いていないと表示できないなど課題がありそうです。