ARの技術を活用して、キッチンカーの設置場所の提案をしたい！

こんにちは。商業ディベロッパーに新卒で入社して6年目のOLです！現在は本社に勤めています。
最近**AR**という技術に触れる機会があり、「自社の業務に生かしたい！」と思ったので記事にしました！

![IMG_1319.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/f2ecc191-8ed9-341c-17ba-4c00fe71d082.png)


# 私が利用しているARの技術
まず、ARの技術を自社でどのように活用できるのかを考えるために、私が普段から利用しているARの技術をピックアップしていこうと思います！


### メガネの購入時
私はメガネ屋さんで試着をするときに、レンズの部分に指紋がついていたり、鼻の部分に他のお客さんの皮脂がついていたりすることが少し気になってしまいます。
そのため、メガネを買うときはバーチャル試着をした後に、店舗で最小限の試着をしてから購入しています！

> **バーチャル試着はARという「拡張現実」の技術を活用します。** 顧客はまずアプリなどで自分の身体や部屋などをカメラで撮影し、試着したい商品、サイズ感を確かめたい商品の3Dデータを画像に重ねます。これにより、**実際に試着したり部屋に置いたりしているかのように、さまざまな角度から商品イメージを確認できます。**
> （引用：[バーチャル試着アプリ：ECサイトのバーチャルフィッティング](https://www.shopify.com/jp/blog/ar-try)）

**J!NS**
[J!NS HP「リアルタイム3D試着 操作方法」](https://www.jins.com/jp/guide/03/howto_virtualfit/)


**Zoff**
[Zoff HP「3DWEB試着サービス「EASee Zoff Virtual Fitting」を、リリースしました。」](https://www.zoff.co.jp/shop/t/t1932/?srsltid=AfmBOorgYhj5RHOiEl9ET1Q0YcHMRwSrnwBkjU4ejwHKwW8jkMqeBPA7)


![megane_lloyd_woman.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/20eb333a-682a-5c81-c056-add8de039a43.png)


### 家具の購入時
家具を買うとき、「寸法を測らずに買ってしまって、収まりきらなかった」「店舗で見たときより大きく感じる」「照明の具合が異なっていて想像していた色ではなかった」ということはよくありますよね。
そのため、そのようなミスマッチが起きないように、家具を買うときはARで試し置きをしてから購入するようにしています！

**IKEA**
[IKEA HP「Kreativ/イケア クリアティーヴ 理想の家を実現」](https://www.ikea.com/jp/ja/home-design/?itm_campaign=ikea-kreativ&itm_element=LPBanner&itm_content=Inspiration)

**ニトリ**
[ニトリHP「NITORI AR 家具試し置き」](https://www.nitori-net.jp/ec/feature/nitoriAR/?srsltid=AfmBOorDxETppr4z8tCvc15eqlXgAf-Bpf_OBDyEepXjVHXdUTlHQd2B)
![room_living_normal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/5f3f5635-c2cb-8c58-da2f-6838dab963ee.png)

# 自社でARの技術を生かすとしたら…
さて、前置きが長くなってしまいましたが、J!NSやZoff、IKEAやニトリは**自社の商品を売るためにARの技術を活用している**ことが分かりました。
そこで、私も**商業ディベロッパー（ショッピングセンターの運営）の商品を売るためにARを活用したい！** と考えました！

**商業ディベロッパーの商品はズバリ「床（区画・スペース）」** で、テナントや催事業者に対して貸し出した**スペースの賃料が主な収入源**となっています。

私の会社では、テナントに対して区画を貸し出す業務は専門部署が担当しているのですが、催事業者（ウォーターサーバーの会社やキッチンカーなど）に対して区画を貸し出すのは、現場主体で行っています。

そこで今回は、**催事による収入をUPするため**に、**ARの技術を活用してキッチンカーの設置場所を提案**しようと考えました。

# 完成イメージ
下記画像のように、キッチンカーの方が出店スぺースにスマホをかざすだけで、実寸大のキッチンカーが浮かび上がり、出店時のイメージが膨らむようなものを作りたいです！

この技術があれば、誘致をしたキッチンカーの方が「出店イメージが湧かないので今回は出店を見送ります」ということが減り、**賃料収入もUP**すると思います！
![0819_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/fc56f223-7276-cb90-35e8-015ca6eac0e9.png)


# 使用ツール
* [Blender](https://www.blender.org/download/)
* [palanAR](https://palanar.com/)


# 作成方法
### ①Blenderでキッチンカーの3D画像を作る
まずは、Blenderという3DCGソフトで、キッチンカーの3D画像を作ります。
※デザイン力が無いので、ひとまず長方形で表しました。

**1.Scene（しずくのようなアイコン）で長さの単位を「センチメートル」に変更する**
![0819_005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/c692c054-08f6-a65d-b901-85da86c7640d.png)

**2.アイテムで寸法を指定する**
今回は、中型サイズのキッチンカーの寸法で設定しました。

:::note info
参考：[はじめてのキッチンカー](https://foodtruck.co.jp/hajimete/size/)

* 全長：4m68cm
* 幅：1m72cm
* 高さ：2m80cm

:::

![0819_006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/e8b40197-04e8-92b1-c5cc-dbfde36ea64a.png)



**3.X軸・Y軸・Z軸を調整する**
ARで横向きで表示したいため、X軸・Y軸・Z軸を調整し、長方形を横向きにしました。
![0819_007png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/332aca19-aa4a-ff28-f64e-bc7478faca4f.png)

**4.glTF2.0(.glb/.gltf)で保存する**
後ほど使用するpalanARにて、glbファイルをアップロードしなければならないため、glTF2.0(.glb/.gltf)でエクスポートして保存しました。
![0819_004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/e527f557-9e2d-4f5b-971b-a3a218de2f15.png)




### ②palanARでARを作成する
Blenderで3D画像を作成したら、palanARというサイトでARを作成していきます。
**1.「AR新規作成」をクリックする**
![0819_008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/0d2db990-eacf-66d2-6600-fafff924d91f.png)

**2.「平面認識AR」をクリックする**
![0819_009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/3340af62-e632-4530-1abb-a3253cb1e835.png)

**3.「平面認識ARを作成」をクリックする**
![0819_010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/b66ad101-76e8-93b6-73aa-322ff0d5df58.png)

**4.プロジェクト名を記入して「次へ」をクリックする**
![0819_011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/d2051b09-6894-d77f-22ed-cd41244873a9.png)

**5.「自由に作成」をクリックする**
![0819_012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/ee77de59-d2ae-7d4e-8926-2b3ca4ff0359.png)

**6.Blenderで作成したglbファイルを選択する**
![0819_013png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/d47aec16-14e0-d735-7555-78a4fbb264ea.png)

**7.「保存する」をクリックし、右上の「AR体験」をクリックする**
![0819_014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/6b8fb3b3-ced6-bd72-4a60-faa0ad996ed6.png)

**8.QRコードをダウンロードする**
![0819_015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/376268ad-9aee-2077-c70c-efe8e1a78fac.png)

# 試してみた

https://x.com/ai_126485/status/1828143533838180678

今は本社勤めなので試せる場所も無く、狭い家の中で試しました。
100％だと3D画像がスマホの画面からはみ出してしまい、17%にしてようやく全貌が見えました！
![0819_016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802235/3c6ade34-169e-0d31-a73f-fc3ebb69b182.png)



# 問題点：実寸大が表示されない（未解決）
家が狭いからうまく試すことができなかったとは言え、家の中をうろうろして100%の状態を想像してみたのですが、あまりにも大きすぎる気がします…。

そこで、palanARで実寸大を表示することができないかと検索したところ、[palan3D](https://palan3d.com/)というサービスがヒットしました！

> 多くの企業から「実物大の3DでAR表示したいものの作成コストが高い」というご意見を頂いて参りました。
そんな声にお応えすべく、「1枚の画像から3Dを生成し、WebARで実サイズで試しおき可能」な技術の開発に至りました。
（引用：[1枚の画像から3D化・実サイズでAR試しおき可能な「ハリボテAR」を提供開始！（特許申請済）](https://palan.co.jp/news/hXk1hJZN)）

このpalan3Dを使用すれば画像1枚でARを作成できるとのことなので、3D画像をBlenderで作成する必要もなく、キッチンカー業者の方からキッチンカーの画像を頂くだけでARが試せますね！

:::note warn
palan3DのHPを拝見したところ、無料のお試し等がなく「問い合わせ」をしなければならなかったため、試すことはできていないです。
また、X等で検索をしてもpalan3Dを使用しているユーザーが見当たらなかったので、メーカーへの問い合わせが必須だと思います。
:::


# まとめ
今回ARという技術を学んで、**自社の商品を売り出すためにデジタルの活用は必須**だということが改めて分かりました！

自社においては、催事だけではなくテナントの誘致の際も、ARの技術を活用して**そのテナントの什器をスマホ上に表示させながら内見**することができれば、**入居率がUPし、賃料収入もUP**するのではないかと思いました。

現時点では、私一人の力では実現が難しいですが、いつかARのシステム会社と協力するなどして実現出来たら嬉しいです！