QRコード（PalanAR)でつなぐ「つくる人」と「たべる人」：工場の中のストーリーをお届け！

# 「つくる人⇆たべる人をARでつなぐ、お弁当からはじまる物語

こんにちは、自社惣菜工場で商品開発を担当している🐸です。
今回はちょっと不思議な実装をご紹介します。
テーマはズバリ、

**「ARで、工場とお弁当を食べてくれる人とのコミュニケーションをつくる」**
です！

🐸きっかけは、何気ない一言
「わたしたちが作っている商品のことって、お店の人たちにちゃんと伝わってるのかな？」

https://note.com/minami00901/n/n90cecac75cd4

ある日のこと。
商品開発の先輩🐸が、ぽつりとこぼしたこの一言。

私たちが工場でつくっている商品は、100店舗以上の売場を通じて、お客さまのもとに届いています。
でも、その過程の中で、“つくる人”と"販売する人”と“たべる人”が顔を合わせることってなかなか少ないんです。

「もっとコミュニケーションがあったら、きっと伝わることがあるはず！」

そう思った🐸は、ARを使ってつくる⇆たべるをつなぐ試作を思いつきました。

**今回は社内会議用の特注弁当の懸け紙に「QRコード」を載せて、工場からの発信を試みます。**


## 目次
- [やってみたこと](#やってみたこと)
- [使用ツール](#使用ツール)
- [コンテンツ例](#コンテンツ例)
- [ひとくちアンケートのリンク先を作成](#ひとくちアンケートのリンク先を作成)
- [さいごに](#さいごに)


## やってみたこと

・パッケージにARマーカーを貼る

・スマホをかざすと「工場の中の様子」が立体的に浮かび上がる

・くまをタップすると、リンクに飛び、ひとくちアンケートがランダムに現れる

・回答を選択すると「ありがとう画像」に切り替わる


## 使用ツール
・8thWall / WebAR
→ スマホのブラウザだけで動作、アプリインストール不要

Canva / Figma
→ AR画面のデザイン作成

画像マーカー
→ ポスターやパッケージに印刷する用

ChatGPT
→メモ帳（htmlコードを作成）

## コンテンツ例 

・「おいしいく召し上がれますように」（キャラの3Dアニメーション）
・「くまをTap！」タップを案内します
・製造場面の画像

### ⓵まずはマーカーを設定します。
→今回はお弁当の懸け紙をマーカーにするので、懸け紙のデザインを.jpgに起こします。

### ➁ARの種類を選択　ARマーカーを設定していきます。

途中マーカーの設置選択がありますが、撮影方法が平面に置いたお弁当を撮影するため、
画面向かって左側のものを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048408/d1f9afba-c7d0-4e44-ad55-281549427d71.png)

### ⓷自由選択で作成していきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048408/d13d41b5-4f68-4bee-9716-ca1d0b53d805.png)
    
・素材追加からキャラクター、画像をダウンロード
・プロパティでサイズや向きを調整
・「+新規イベント追加」よりURLを設定


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048408/a9f808ad-27d1-4843-bee8-fe4c1882ea60.png)


「保存」後、「AR体験」でQRコードを読み取り、配置を確認。

こんな感じで配置しました。
**タップするクマが他のテキストと重ならないように注意**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048408/8b558f1b-b7c7-40dd-85ff-9d51bbba9561.png)



## ひとくちアンケートのリンク先を作成

ここでChatGPTの手をかり、リンク先の作成をしました。

### ⓵GitHubでリポジトリを作る
### ➁HTMLと画像をアップロード
### ⓷GitHub　Pagesを有効にする
「Save」後にhttps:から始まるURLが表示されるので、そちらをARへ記入します。

<details>
<summary>ここをクリックして展開</summary>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048408/4a5a565b-de9e-4ad6-832f-c28fa7de4c4a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048408/9b591d30-3112-40a2-81fa-f7acf9792930.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048408/ce188d31-525c-4714-805a-4014dfd8a781.png)

</details>

HTMLの作成もChatGPTにお願いしました。（作成したコード↓）
<details>
<summary>ここをクリックして展開</summary>


```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>お弁当アンケートAR</title>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      text-align: center;
      background: url('https://raw.githubusercontent.com/minami00901/bento-ar/main/%E3%83%86%E3%82%B9%E3%83%88.jpg') no-repeat center center fixed;
      background-size: cover;
      padding: 2rem;
      transition: background 1s ease;
    }
    #questionBox {
      background: rgba(166, 208, 247, 0.85);
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      margin-bottom: 2rem;
      display: none;
    }
    button {
      display: block;
      margin: 0.5rem auto;
      padding: 0.5rem 1.2rem;
      font-size: 1rem;
      border-radius: 1rem;
      border: none;
      background: #ffd700;
      cursor: pointer;
    }
    #showQuestionBtn {
      background-color: #d8b0f9;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    #mainImage {
      display: none;
      width: 70vw;
      max-width: 600px;
      margin: 2rem auto 0;
    }
  </style>
</head>
<body>

  <div id="questionBox">
    <h2>質問がここに出ます</h2>
    <div id="options"></div>
  </div>

  <button id="showQuestionBtn">ひとくちアンケートにご協力をおねがいします</button>

  <img id="mainImage" src="https://raw.githubusercontent.com/minami00901/bento-ar/main/%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86%E3%81%94%E3%81%96%E3%81%84%E3%81%BE%E3%81%99%20(1).png" alt="演出画像">

  <script>
    const questions = [
      {
        text: "今日のお弁当はいかがですか？",
        options: ["① とても美味しかった", "② 普通（空腹は満たされました）", "③ ちょっと惜しい（あと一歩）"]
      },
      {
        text: "お腹いっぱいになりましたか？",
        options: ["① 満腹です！はち切れそうです", "② 丁度いいです。おいしく食べられました", "③ あともう１P食べられそうです…"]
      },
      {
        text: "このお弁当を食べさせたいと思うひとは誰ですか？",
        options: ["① ちゃんと食べてる？忙しそうなあの人へ", "② これから発表！どきどきのあの人へ", "③ 自分（また食べたい）"]
      }
    ];

    let lastQuestionIndex = -1;
    const body = document.body;
    const questionBox = document.getElementById("questionBox");
    const optionsDiv = document.getElementById("options");
    const showQuestionBtn = document.getElementById("showQuestionBtn");
    const mainImage = document.getElementById("mainImage");

    function getRandomQuestionIndex() {
      let idx;
      do {
        idx = Math.floor(Math.random() * questions.length);
      } while (idx === lastQuestionIndex);
      lastQuestionIndex = idx;
      return idx;
    }

    function showQuestion() {
      const idx = getRandomQuestionIndex();
      const q = questions[idx];
      questionBox.querySelector("h2").textContent = q.text;
      optionsDiv.innerHTML = "";

      q.options.forEach(opt => {
        const btn = document.createElement("button");
        btn.textContent = opt;
        btn.onclick = () => {
          startAnimation();
        };
        optionsDiv.appendChild(btn);
      });

      questionBox.style.display = "block";
      mainImage.style.display = "none";

      // 背景リセット
      body.style.background = "url('https://raw.githubusercontent.com/minami00901/bento-ar/main/%E3%83%86%E3%82%B9%E3%83%88.jpg') no-repeat center center fixed";
      body.style.backgroundSize = "cover";

      // ✅ タップ後にボタンを消す
      showQuestionBtn.style.display = "none";
    }

    function startAnimation() {
      questionBox.style.display = "none";

      // 背景を白に変更
      body.style.background = "#fff";

      // メッセージ表示
      const message = document.createElement("h2");
      message.textContent = "「DIGITAL」で「おいしい」がつながる！";
      message.style.marginTop = "2rem";
      message.style.fontSize = "1.5rem";
      message.style.color = "#333";
      body.appendChild(message);

      // 画像表示
      mainImage.style.display = "block";

      // クラッカー演出
      setTimeout(() => {
        confetti({
          particleCount: 150,
          spread: 90,
          origin: { y: 0.6 },
          colors: ['#fce18a', '#ff726d', '#b48def', '#f4306d'],
        });
      }, 500);
    }

    showQuestionBtn.addEventListener("click", showQuestion);
  </script>

</body>
</html>
```
</details>
# お試し実装画像はこちら↓↓（画面の向きが横になってしまいました）

https://x.com/minami00901/status/1931384430675034532

# さいごに

伝えたかったのは、“気配り”です
どんなに忙しくても、まじめに丁寧に、少しでもおいしくなるように工夫している現場の空気。
いつかどこかで、ちょっとでも感じてもらえたら──。

画像を通してそんな「気配り」を届けられないか。
その最初の一歩としての実装でした。

今後やりたいこと
・お店の人と、工場の人が画像越しに双方向でコメントできる機能

・期間限定のpalanAR画像（季節商品・推し商品向け）　等、、


まだまだ未完全な企画だと思いますので、皆さまの声をもとに改良していきたいと思います。
最後までお付き合いいただき、ありがとうございました。


※今回の企画は社内会議用の特注弁当として、非営利目的で使用しております。