スタンプ台帳
1行が「映す画像 → 出るアイテム」です。行を選ぶと、下のAR素材でそのスタンプを編集します。
04 ARスタンプラリー
画像を巡って集め、コンプリートする
スタンプごとに「映す画像」と「出るアイテム」を紐づけ、1つのURLで全部読めます。エディタは rally.html です。
このエディタでできること
最大10個のスタンプを台帳に並べます。2個以上でラリーになります。入手時の演出と、全部集めたあとの特典ボタンを設定できます。進捗は同じブラウザに残ります。
制作の流れ
AR素材
カメラで映す画像、出るアイテム、台帳に出す名前、探し方のヒントをペアで設定します。
見せ方とラリー画面
スタンプごとに位置・向き・動きを調整します。タイトル、キャッチ、探索中メッセージ、入手時の表示、コンプリート特典を設定します。
公開
1つのURLで全スタンプを読めます。訪問者は台帳を見ながら画像を探し、全部集めると特典へ進めます。
訪問者の流れ
収集状況は同じブラウザ内に保存されます。データ消去や端末変更では引き継がれません。
つまずきやすい点
- スタンプが1個だとラリーとして公開できません。2個以上、それぞれに画像とアイテムが必要です。
- 入手時の初期は「GET表示のみ」です。遷移させたいときは「ボタンで遷移する」に切り替えます。
- 3Dと公開の共通ルールは共通操作です。
画面構成
エディタ項目
| ステップ | 項目 | 内容 | 制限・初期 |
|---|---|---|---|
| 1 スタンプ台帳 | 行リスト | 映す画像と出るアイテムのペア。不足は未設定と表示。 | 最大10。2個以上でラリー成立。 |
| 2 AR素材 | カメラで映す画像 | そのスタンプのターゲット。 | png / jpg。スタンプごとに1枚。 |
| 2 AR素材 | 出るアイテム | 3D / 動画と絵柄。 | スタンプごとに1つ。公開全体40 MB。 |
| 2 AR素材 | スタンプの名前 | 台帳に出す名称。 | — |
| 2 AR素材 | 探し方のヒント | 探索の手がかり。 | — |
| 3 ラリー画面 | タイトル / キャッチコピー | 開始画面と台帳の見出し。 | — |
| 3 ラリー画面 | 探索中のメッセージ | どれも映していないときの画面下。コンプリート後は同じ位置が特典ボタンになります。 | — |
| 3 ラリー画面 | スタンプ入手時 | 表示の種類を選択。選んでいるスタンプだけに適用。 | 初期はGET表示のみ（ボタンなし）。 |
| 3 ラリー画面 | 入手時：GET表示のみ | 短いGET演出だけ。 | — |
| 3 ラリー画面 | 入手時：メッセージのみ | 入手時メッセージを表示。 | 未入力時は既定文。 |
| 3 ラリー画面 | 入手時：ボタンで遷移 | 文言、URL、背景色、文字色。 | URLは http(s)://。 |
| 3 ラリー画面 | 達成タイトル / メッセージ | 全スタンプ取得後の達成画面。 | 最後のスタンプの3Dのあと、光とクラッカー。 |
| 3 ラリー画面 | 特典ボタン | コンプリート後の外部誘導。 | 任意。閉じたあと・再認識中も残ります。 |
| 4 公開 | ZIP / URL | 共通の公開仕様。1 URLで全スタンプ。 | スラッグ3〜30。 |
右サイド
編集中スタンプの位置・見た目・動き。ターゲットの向きは壁面または床/机（画像認識と同じ）。マテリアルとアニメーションは共通です。
ヘッダー
使い方ガイド、操作説明、「過去に公開したサイト」（共通の一覧ページ）、すべてリセット、ポータルへ戻る。
プレビュー
中央はスタンプ編集（AR配置）とスタンプ台帳（コレクション画面）を切り替えられます。スマホ風プレビューは次の4状態です。
探索中→GET→達成→特典
訪問者ランタイム
探索メッセージ→ターゲット認識→GET演出→進捗更新→全取得で達成→特典ボタン
- 入手記録は端末のブラウザ内に残るので、同じ端末なら続きから集められます。
- 表示中は撮影できます。
制限と注意
- 最大10スタンプ。公開には2個以上、各スタンプに画像とアイテムが必要です。
- 端末変更・履歴削除では進捗を引き継ぎません。必要な場合は別途設計してください。