「つくる人⇆たべる人をARでつなぐ、お弁当からはじまる物語
こんにちは、自社惣菜工場で商品開発を担当している🐸です。
今回はちょっと不思議な実装をご紹介します。
テーマはズバリ、
「ARで、工場とお弁当を食べてくれる人とのコミュニケーションをつくる」
です！
🐸きっかけは、何気ない一言
「わたしたちが作っている商品のことって、お店の人たちにちゃんと伝わってるのかな？」
ある日のこと。
商品開発の先輩🐸が、ぽつりとこぼしたこの一言。
私たちが工場でつくっている商品は、100店舗以上の売場を通じて、お客さまのもとに届いています。
でも、その過程の中で、“つくる人”と"販売する人”と“たべる人”が顔を合わせることってなかなか少ないんです。
「もっとコミュニケーションがあったら、きっと伝わることがあるはず！」
そう思った🐸は、ARを使ってつくる⇆たべるをつなぐ試作を思いつきました。
今回は社内会議用の特注弁当の懸け紙に「QRコード」を載せて、工場からの発信を試みます。
目次
やってみたこと
・パッケージにARマーカーを貼る
・スマホをかざすと「工場の中の様子」が立体的に浮かび上がる
・くまをタップすると、リンクに飛び、ひとくちアンケートがランダムに現れる
・回答を選択すると「ありがとう画像」に切り替わる
使用ツール
・8thWall / WebAR
→ スマホのブラウザだけで動作、アプリインストール不要
Canva / Figma
→ AR画面のデザイン作成
画像マーカー
→ ポスターやパッケージに印刷する用
ChatGPT
→メモ帳（htmlコードを作成）
コンテンツ例
・「おいしいく召し上がれますように」（キャラの3Dアニメーション）
・「くまをTap！」タップを案内します
・製造場面の画像
⓵まずはマーカーを設定します。
→今回はお弁当の懸け紙をマーカーにするので、懸け紙のデザインを.jpgに起こします。
➁ARの種類を選択 ARマーカーを設定していきます。
途中マーカーの設置選択がありますが、撮影方法が平面に置いたお弁当を撮影するため、
画面向かって左側のものを選択。
⓷自由選択で作成していきます
・素材追加からキャラクター、画像をダウンロード
・プロパティでサイズや向きを調整
・「+新規イベント追加」よりURLを設定
「保存」後、「AR体験」でQRコードを読み取り、配置を確認。
こんな感じで配置しました。
タップするクマが他のテキストと重ならないように注意
ひとくちアンケートのリンク先を作成
ここでChatGPTの手をかり、リンク先の作成をしました。
⓵GitHubでリポジトリを作る
➁HTMLと画像をアップロード
⓷GitHub Pagesを有効にする
「Save」後にhttps:から始まるURLが表示されるので、そちらをARへ記入します。
ここをクリックして展開
HTMLの作成もChatGPTにお願いしました。（作成したコード↓）
ここをクリックして展開
<!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>
さいごに
伝えたかったのは、“気配り”です
どんなに忙しくても、まじめに丁寧に、少しでもおいしくなるように工夫している現場の空気。
いつかどこかで、ちょっとでも感じてもらえたら──。
画像を通してそんな「気配り」を届けられないか。
その最初の一歩としての実装でした。
今後やりたいこと
・お店の人と、工場の人が画像越しに双方向でコメントできる機能
・期間限定のpalanAR画像（季節商品・推し商品向け） 等、、
まだまだ未完全な企画だと思いますので、皆さまの声をもとに改良していきたいと思います。
最後までお付き合いいただき、ありがとうございました。
※今回の企画は社内会議用の特注弁当として、非営利目的で使用しております。