Claude Codeのpluginだけで抽選LINEミニアプリを作って展示会で運用してみた
はじめに
こんにちは、マッハチームの日吉です。
2026年3月3日〜6日に東京ビッグサイトで開催された「リテールテックJAPAN 2026」に、今年もクラスメソッドがブース出展しました。来場者の方にブースを楽しんでいただくための施策として、NFC（LINEタッチ）にスマホをかざすだけで参加できるLINEミニアプリのルーレット抽選会「Welcomeチャンス」 を開発・運用しました。
このアプリ、実は コードは全てClaude Codeが書きました。僕は1行もコードを書いていません。
あんでぃ さんが作ってくれた、ありがたーーーいClaude Codeのプラグインを活用し、企画を渡すだけでアプリが出来上がるという開発体験でした。本記事では、AIだけで展示会アプリを作って実際に運用した取り組みをご紹介します。
何を作ったのか
ブースに訪れた来場者が NFCタグ（LINEタッチ）にスマホをかざす と、LINEアプリ内でミニアプリが起動し、ルーレットを回して景品が当たるというインタラクティブな抽選体験アプリです。
体験フロー
NFCタグにスマホをかざす
↓
LINEミニアプリが起動（LIFF）
↓
景品一覧を確認
↓
「抽選に参加する」→ ルーレットを回す！
↓
ルーレット回転 → 結果表示
↓
景品をその場でお渡し
所要時間は約30秒〜1分。全員当選（ハズレなし）で、1人1回限りの抽選です。
景品ラインナップ
LINEヤフー様にも大量の景品をご提供いただきました。
また弊社の公式キャラクターである「くらにゃん」のグッズも景品としてラインナップしました。
| -- | 景品名 | 数量 |
|---|---|---|
| A賞 | LINEヤフー タオルハンカチ | 60枚 |
| B賞 | LINEヤフー ボールペン | 200本 |
| C賞 | くらにゃん ワンポイントTシャツ | 20枚 |
| D賞 | くらにゃん ワンポイントキャップ | 10個 |
| E賞 | LINEヤフー キャラクターステッカー | 100枚 |
なぜ作ったのか
展示会のブース運営において、来場者の足を止めてもらうことは大きな課題です。今回は以下の3つの目的で企画しました。
- 集客力の向上: ノベルティ配布に続く「第2の足止めコンテンツ」として、抽選体験でブースへの滞在時間を延ばす
- リード獲得の促進: 抽選参加をきっかけにLINE友だち追加・名刺交換へ自然につなげる
- サービスデモの実演: 実際にLINEミニアプリを触ってもらい、LINEミニアプリについて知ってもらう
販促ツールであると同時にデモそのもの という一石二鳥の設計を目指しました。
LINEタッチとは
今回のアプリ起動に使った LINEタッチ について少し紹介します。
LINEタッチはLINEヤフーが提供するNFCを活用したサービスです。専用のNFCタグにスマートフォンをかざすだけで、LINEミニアプリやLINE公式アカウントへ遷移できます。
ぜひLINEタッチに関するRuonさんのブログもご覧ください。
LINEタッチのメリット
- QRコードよりスムーズ: カメラを起動してスキャンする手間が不要。かざすだけで即起動
- 直感的な体験: 「Suicaをかざす」ような感覚で、ITリテラシーを問わず誰でも使える
- 店舗・イベントとの親和性: テーブル、レジ横、ポスターなどにタグを埋め込むことで、自然な導線を設計できる
- LINE連携が前提: タッチした瞬間にLINEアプリ内で起動するため、友だち追加やミニアプリへの誘導がスムーズ
今回の展示会では、ブースの集客ゾーンにNFCタグを設置し、スタッフが「スマホをかざしてみてください」と声をかけるだけで体験が始まる導線を実現しました。QRコードのように「カメラを開いて → スキャンして → ブラウザで開いて...」という手順が不要なので、来場者の離脱を最小限に抑えられる のが大きなポイントでした。
技術スタック
| レイヤー | 技術 |
|---|---|
| フロントエンド | Next.js 16（App Router）+ Tailwind CSS |
| バックエンド | Next.js API Routes |
| データベース | Supabase（PostgreSQL） |
| 認証 | LIFF SDK + LINE IDトークン検証 |
| ホスティング | Vercel |
| NFC起動 | LINEタッチ（NFCタグ） |
Claude Codeだけで作った話
Claude Code × カスタムプラグインによる開発
本プロジェクトのコードは、全てClaude Codeが生成しました。自分がやったのは企画書を書いて、プロンプトで指示を出すことだけです。
これを可能にしたのが、社内のメンバーが開発してくれた Claude Codeのカスタムプラグイン です。このプラグインはLINEミニアプリ開発に特化しており、以下のような機能を持っています。
- LINEミニアプリの設計エージェント: 要件から画面構成・コンポーネント設計・データフローを自動で策定
- フロントエンド実装エージェント: 設計書をもとにNext.js + Tailwind CSSのコードを一括生成
- バックエンド実装エージェント: Supabaseのテーブル設計・マイグレーション・認証フローを実装
- デプロイエージェント: Vercelへのデプロイまで自動実行
実際の開発フロー
1. 企画書（Markdown）を作成
↓
2. Claude Codeのプラグインに企画書を読み込ませる
↓
3. 設計エージェントが画面構成・DB設計・API設計を策定
↓
4. バックエンドエージェントがSupabaseのセットアップ・マイグレーションを生成
↓
5. フロントエンドエージェントがNext.jsの全画面・コンポーネントを実装
↓
6. 統合エージェントがフロント・バックを接続
↓
7. デプロイエージェントがVercelにデプロイ
↓
8. 動作確認 → フィードバック → 修正（これもClaude Codeが対応）
企画書を渡してから最初の動作するプロトタイプが出来上がるまで、ものの数十分 でした。もちろん細かい調整（ルーレットの見た目、色味、景品画像の差し替えなど）は何度かやり取りしましたが、ロジックの実装やコンポーネント設計で自分がコードを書くことは一切ありませんでした。
AIに任せて良かった点・気づき
- PL/pgSQL関数の排他制御ロジック: Advisory Lockを使った同時アクセス制御など、自分で書くと調査に時間がかかる部分もAIが即座に実装してくれた
- Canvas描画の数学的処理: ルーレットの角度計算やイージングアニメーションなど、数学的な処理はAIの得意分野
- 一貫したアーキテクチャ: プラグインがNext.js + Supabase + LIFFの構成パターンを熟知しているため、設計のブレがない
- 企画書の質が重要: AIに渡す企画書が具体的であるほど、出力の精度が上がる。「何を作りたいか」を明確に言語化する力は引き続き人間に求められる
まとめ
展示会ブースの集客施策として、LINEミニアプリによるルーレット抽選会「Welcomeチャンス」を開発・運用しました。
Claude Code × カスタムプラグイン:
- 企画書を渡すだけで、設計からデプロイまでAIが一貫して実行
- コードを一切書かずに、展示会で実運用できるレベルのアプリが完成
- 社内で開発されたLINEミニアプリ特化プラグインにより、設計のブレなく高品質な出力
技術的なポイント:
- Next.js（App Router）+ Supabase + Vercel でサーバーレスなアーキテクチャ
- LIFF SDK + LINE Touchで、NFCタグをかざすだけのシームレスな体験
- PostgreSQL Advisory Lockによる排他制御で在庫の整合性を保証
- Canvas描画 + 2フェーズアニメーションでリッチなルーレット体験
ビジネス的なポイント:
- 販促ツールでありながら、LINEミニアプリの技術デモとしても機能する一石二鳥の設計
- LINEタッチ（NFC）で来場者の体験開始までのハードルを最小化
- Supabase管理画面での直感的な在庫管理
Claude Codeとカスタムプラグインの組み合わせにより、展示会のような「短期間・一発勝負」のイベントアプリも高速に構築できることがわかりました。「企画書を書く → AIに渡す → 動くアプリが出来る」というワークフローは、今後のイベント施策でも積極的に活用していきたいと思います。
