【AR】箱の中身をARでお見せします！＆売場作成のイメージを具現化してみる

# 【 AR 】中身はなんだろな？＆この棚置いたらどんな感じ？を視覚化！


ウニやアスパラが旬になってきましたね。
メロンやスルメイカ、ホッケ、サクラマスなどもおいしい時期です。
もう少しするととうきびも出始めます。
特に積丹で食べるウニは最高です！甘くてとろとろ、ウニ嫌いも絶対好きになるおいしさ。

**こんにちは！**
**普段は北の大地のスーパーマーケットで働いています。**
**職場の業務改善できることはないか？と模索しデジタルの勉強をしています。**


自己紹介がてらDX改善したいことを書き綴っていますので、良かったらこちらもぜひご覧ください。

https://note.com/leal_peony8082/n/n621347db3511

# 導入
先日、AR技術を学習したので業務に活用できることはないか？と考えてみました。


:::note
ARとは「Augmented Reality」（拡張現実）の略で、現実世界の映像や画像にコンピューターによって生成された情報（映像、音声、グラフィックなど）を重ね合わせる技術を指します。これにより、ユーザーは現実の環境にデジタル情報が追加された状態で体験することができます。ARはスマートフォンやタブレットのカメラを通じて表示されることが一般的ですが、専用のARグラスやヘッドセットを使用する場合もあります。
by :chatGPT
:::

バーチャルと現実世界の融合がこんな身近になっているだなんて…！
しかも、それが自分で作れるなんて…！



# :one:箱入り商品の中身をARで表示
### 箱に入った商品って？

買うか買わないか決めるときに中身が見たい、って時ありますよね？

例えば、お酒や、ギフト商品・おもちゃ・化粧品・お菓子など。

中身のラベルが見たいけど箱をあけてもいいのかダメなのか…。
中身が見たいってだけで、店員さんに話しかけるのはちょっと……。
そんな時に中身をARで見れたら便利じゃないかな？と思い作成しました。

ギフト品は通常見本品を置いてますが、商品によっては現物を開封し店舗で透明なシートをかけて見本品を作成しています。


そのため、その商品は販売する価格で入荷しているにも関わらず、大体が廃棄処理をしています。(※会社によって異なります)
見本を置くことはお客様に商品説明をするためにも必要なことではありますが、経費的にもったいないと感じるのが正直なところです。
( 食品であればフードロス的な面でももったいない… )

また、見本をAR化することで商品陳列に使えるスペースの確保ができます。


# :point_up:使用したツール
### palanAR　
簡単にARを作成・管理ができるノーコードツール。

https://palanar.com/

### removebg
画像をアップロードするだけで背景を消してくれます。
私のような初心者には最高に使いやすかったです。


https://www.remove.bg/ja 




# :point_up:作成方法

### palanAR

**▶palanARのログイン→「作成/管理」→「ARマーカー」の選択**
![スクリーンショット 2024-06-25 212853.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/197ae3c1-64da-31a0-d06d-65c07945d920.png)

**▶「シングルARマーカー」を選択→「画像をアップロード」**
**ここでマーカーにしたい画像を選ぶと画像のように変更できます。**
**今回は何の商品であるか分かりやすくするため箱パッケージの画像にしました**
![スクリーンショット 2024-06-25 210309.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/c90b6c7a-3711-45f3-6bd3-74933b01926b.jpeg)


**▶用意した画像を「ファイルから追加」**
![DSC_2271-removebg-preview (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/2de0f351-d9d7-690b-0b2d-22a16774b8da.png)
**↑商品の写真を撮影し “removebg” で背景を消去します。**　


![スクリーンショット 2024-06-25 210613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/e1dee6c1-d165-9d91-95dc-c9dc005e7c27.png)

**▶「プロパティ」から“サイズ” “位置” “回転”を設定します**
**▶ 画面右上の「保存」→「AR体験」で完成です**
![スクリーンショット 2024-06-25 222907.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/284dab3c-bbb8-58d4-b497-6c9e075d93f5.png)

▶**マーカーをダウンロードし、スマホのカメラでQRコード読み込み→ARマーカーを写して、ARが表示されれば成功です！**
![スクリーンショット 2024-06-25 223402.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/c01aeba5-df75-1447-e81c-4ba8a8feca43.png)





# :point_up: 実際に設置してみました
▶**QRコードとARマーカーを印刷して、売価POPの横に設置してみました**
何の説明もないのでお客さまからすれば「なんだこれ？」状態…今のところはね…
![スクリーンショット 2024-06-25 224642.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/83623e33-b307-0ffe-7ec6-6c572174a091.png)


▶**売場でAR表示させてみる**
![20240625_091706.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/4f826b6e-8527-86f7-9dbb-27cebb41bfd7.png)

**成功です！**

## :point_up:その他の活用アイディア
### 商品説明を表示させる
・現在、商品説明POPはあるが自分で印刷・取り付けをしないといけないが売価も一緒に表示されているため売価の変更があるときは再度POPを出力しなおさなければならない。
その手間を省ける。

### 高額商品の見本品として使用
・防犯的観点から実物は売場に置かないが商品のイメージをつかむため、お客さまに利用していただく。

# :two:催事用棚の視覚化！
催事場 (主に入口付近に設置されている特定のイベントや特売、プロモーションなどを行うための専用エリア)　に陳列棚を設置するときに、イメージを視覚化できると思い作成しました。

実際のところ何となくこのスペースにはこれがはまるな…とは感覚で自分では分かるのですが、パートさんへ説明するときにより伝わりやすくなるのではないかと考えました。
売場作成の指示後、指示の確認をしたら意図しないことに伝わっていたり、お互いの齟齬を減らす目的で考えました。









# :point_up:作成方法

**▶まずは作りたいARの写真を用意**

![売場棚写真.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/9efe62f9-abbb-c292-d846-7291efe490bd.jpeg)



**▶背景を消します　:one:と同じくremovebg を使用します**
![DSC_2229-removebg-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/a8aadac7-adba-4dee-088d-9dca71cbf8c0.png)
被写体がちょっと斜めなところが性格を表しています…
が後で調整できるので目をつぶります。


**▶palanARを使用　「ARマーカーなし」を選択**
マーカーをなしにすることで売場でスマホをかざすだけで棚がARとして表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/6e8864bf-a8ba-4aae-1ce0-5f49ad74a543.png)


以降は1⃣の作成方法と同様です。

# :point_up:実際にやってみた


![スクリーンショット 2024-06-27 134025.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/ee5f8338-d4ba-953d-8fce-2227a9aec9a9.png)

売場で表示させようと思いましたが、いろいろと障りがあるため店舗のバックヤードでAR化した棚を出してみました。


今回はこの棚だけ作成しましたが、平台や冷蔵ケースなどなんでも作れます。


## :point_up:その他の活用アイディア
### 売場レイアウトの作成
### 棚割・陳列指示書の作成
上記二つに活用できれば売場の完成イメージが明確になります。


# :frowning2:今後の課題
・画像のARを作成する時間が費用対効果で見合うのか？本当に使用してもらえるのか検証が必要。
・見本品のＡＲ化は商品によっては開封するので結局費用の負担は軽くならないのでは。　
・ARの揺らぎを無くせないか考える。
・棚のサイズを設定をしなければいけない。実物とＡＲでの差異が大きく違和感が残る。
・表示させたい場所にいうまくＡＲが表示出来ない。(プロパティの位置・回転で調整が必要)





　
# :smiley:あとがき
以上2点を今回作成しましたが、業務とどのようなことが結びつくのかおぼろげながら分かってきました。

本当は３Dモデルを作りたかったのですが難しすぎて今回は断念したのが残念ポイントです。
使用して感じたのは3Dモデルの方が圧倒的にイメージが湧きやすく、お客さまや従業員に自分の意図することが伝わりやすいです。



このARを利用して、メニュー提案や商品説明、売場レイアウトの作成、クーポン企画の訴求など活用方法は幅広いと感じ、自分のアイディア次第で可能性は無限大だなと思い、今後の業務に活かしていきたいです。