はじめに
こんにちは、Checkout Reliabilityチームでバックエンドエンジニアをしているかがの（@ykagano）です！
2026/4/11（土）に開催されたPHPカンファレンス小田原2026にブース出店し、今年は「UMECO周辺のBASEショップを巡ろう！ 小田原ショップスタンプラリー」と題した企画を実施しました。
こちらの特設サイトからスタンプラリーをすることができます（5/11までの限定公開）。
当日のスタート地点となっていたUMECOのスタンプ獲得画像です。
BASEをご利用のショップオーナーにご協力いただき、UMECO周辺の実店舗をスタンプラリーのチェックポイントとさせていただきました。
ご協力いただいたショップオーナーの皆さまありがとうございました！
スタンプラリーサイトの実績
早速ですが、スタンプラリーサイトの実績についてです。
4/11のアクセスユーザー数とスタンプ獲得数がこちらになります。
| 対象 | 件数 |
|---|---|
| アクセスユーザー数 | 75 |
| スタンプ獲得数 | 63 |
| スタンプ種類数 | 6 |
今回のイベント参加者は150名ほどと伺っていたので、約半数の方にアクセスいただけて嬉しいです。
スタンプを全種類獲得された方はまだいませんが、ご自身のスマホでほとんどの方が最初のスタンプは取っていただけたようです。
当日は暑かったため、散歩するにはあまり向いていなかったと思います。それにも関わらずスタンプを獲得していただいた皆さまありがとうございました。
以降はスタンプラリーサイトの企画から実装についてお話ししていこうと思います。
スタンプラリーサイトの企画
私はこれまで何度かブーススタッフを担当してきましたが、企画段階から参加したのは今回の小田原イベントが初めてでした。
今回のスタンプラリーサイトの企画が、これまでと大きく方向性が変わったのは同僚の02さん（@cocoeyes02）からの一言がきっかけだったと思います。
こちらの発言の後、ブレインストーミングをして、アイデアを持ち寄った後、最多投票だったのがシンプルスタンプラリーでした。
この段階ではまだどうやってやるかは決まっておらず、ボード型のマップにするのか、パンフレット型のマップにするのか色々と話し合った結果、今はバイブコーディング（AIへ会話的にコードを高速生成させる開発スタイル）もあるので、スタンプラリーサイトを作ってみようということになりました。
スタンプラリーサイトの実装
スタンプラリーサイトはClaude Codeを使って実装しました。
実装期間は合計で3日程度でした。
技術スタック
技術スタックは以下を使用しています。
| レイヤー | 技術 |
|---|---|
| フロントエンド | HTML / CSS / Vanilla JavaScript |
| フロントエンドデプロイ | S3 + CloudFront |
| マップ | Leaflet.js + OpenStreetMap |
| バックエンド | AWS Lambda (Node.js) |
フロントエンドはビルドのないシンプルな作りとなっており、バックエンドもサーバーレスです。
データの永続化
当初、LocalStorageにスタンプ獲得を記録するプロトタイプを作ったのですが、会社で同僚のパンダさん（@Panda_Program）に見せたところ、LocalStorageに値を入れて小田原にいないのにスタンプを獲得されてしまいました。
そのため、簡単に偽装ができないように、スタンプの獲得判定はバックエンドで行うようにしました。
デザイン
WebサイトをAIで生成すると人間があまり選ばないようなデザインになる部分がありました（影を付けたり角丸にしたり濃い色を使ったり）。
この辺りは一つずつ確認した上で、なるべくシンプルなデザインになるように修正していきました。
工夫した点
チェックポイントを目立つように工夫しました。
チェックポイントの100m以内に近づくと光るようにしています。
50m以内に近づくとスタンプ獲得ボタンが表示されます（これも光ってます）。
本当はスタンプが獲得できるようになったらスマホを振動させることもしたかったのですが、Vibration API にSafariが対応していないことから実装は見送りました。
今回こうした普段作っているものと方向性の違うアプリケーションを作成するのは、色々と考えるところがあって面白かったです。
おわりに
スタンプラリーサイトはまだ2週間近く公開予定ですので、小田原に行かれた際にはぜひご利用ください。
BASEではこのように技術イベント・カンファレンスへのスポンサー協賛活動に取り組んでいます。
ブース企画などにご興味がある方はぜひ採用情報をご覧ください！
