StocKuji

https://github.com/Masaharu1223/Hackathon_fortune

Next.js

TypeScript

React

AWS

在庫確認と購入権利抽選により快適な一番くじ体験を提供するアプリ

Kotaro Maruyama

sakasama

49r8rf67sco

Masaharu

bpd33hcepag

推しアイデア

引かれたくじの一覧を5秒毎に自動認識することで、店員さんの手をかけず在庫更新が可能。

作った背景

「数十店舗まわっても一番くじが引けない」 「目当ての賞がどの店舗に残っているかわからない」 こんな経験はありませんか? そんな課題を解決し、快適な一番くじ体験をお届けしたいとの思いから作成しました。

推し技術

AWSのrekognitionを使用して、引かれたクジを自動認識。

プロジェクト詳細

店舗での一番くじにおける、在庫状況の見える化と来店・購入体験のデジタル化を実現するWebアプリです。

「どこの店に、何が、何個残っているか」をアプリ上でリアルタイムに確認できます。ユーザーが在庫を確認してから店舗に向かい、店員さんの手を借りながらくじを楽しむ ── その体験をよりスムーズにすることを目指しました。

使い方

image

背景

一番くじの在庫情報はリアルタイムで公開されていないことが多く、「行ったら売り切れだった」というのはよくある話です。店舗側も在庫管理をアナログで行っているケースが多いため、確認の手間がかかります。

一方で、デジタルくじは人気シリーズだと販売開始直後からアクセスが集中しやすく、なかなか買いづらいことがあります。

こういった状況から、在庫情報をデジタルで見える化しつつ、くじ体験そのものはリアル店舗で楽しめる形のプロダクトを作ることにしました。

あえて「デジタルで抽選まで完結」させなかった理由

このプロダクトは、景品の抽選をデジタルで行う設計にしていません。

店舗で実際にくじを引く体験そのものにも、魅力が詰まっています。店員さんとのやり取り、その場の空気感、手でくじを引く瞬間のドキドキ感。 デジタルはあくまで「行く前の情報収集」と「店舗の在庫管理」を支えるツールとして位置づけ、リアル店舗でのくじ体験を、店員さんの負荷を最小限にしながら増やすことをゴールにしています。

ターゲット

くじを楽しむユーザー

近くの店舗でどのくじが取り扱われているかを確認し、残り在庫をチェックしてから足を運べるようになります。売り切れによる無駄足がなくなり、限定くじを逃すリスクも減ります。

くじを販売する店舗

最小限の労力で、在庫・販売状況をアプリ上で一元管理できるだけでなく、集客力の向上も見込むことができます。

こだわったところ

アプリ名とロゴデザイン

在庫を意味する「stock」と、「くじ」を組み合わせて、アプリ名「stockuji」が完成しました。

「stockuji」のロゴには三角くじのデザインを入れ、一番くじボタンも直感的にわかりやすく、オリジナリティのある三角くじデザインにしました。テーマカラーは、コンビニに多い原色カラーのオレンジにしてあります。

フルサーバーレス構成

ハッカソンという時間的制約の中で、インフラの管理コストを最小化するために Lambda + API Gateway + DynamoDB のフルサーバーレス構成を選択。スケールを気にせず機能開発に集中できる環境を最初から整えました。

設計のポイント

image

インフラをコードで管理する(AWS CDK)

環境構築をすべて AWS CDK でコード化しました。ハッカソンでは複数人で開発するため、「自分のローカルでは動くのに」という状況を防ぐことが重要です。CDK によってインフラの再現性を担保し、チーム全員が同じ環境でスムーズに開発を進められました。

DynamoDB のスキーマ設計

在庫情報は「見た瞬間は正確だけど、すぐ古くなる」という性質があります。店舗・商品・在庫数を適切に分離しつつ、更新のたびに整合性が取れるスキーマを設計しました。アクセスパターンを最初に洗い出し、DynamoDB らしいシングルテーブル設計に寄せることでクエリの効率化も図っています。

Next.js × Vercel で高速デプロイ フロントは Next.js + Tailwind CSS + TypeScript で構成し、ホスティングは Vercel。AWS 環境のセットアップが整う前の段階から Vercel 上にフロントを載せて開発を進め、バックエンドの構築に集中できる時間を確保しました。

技術スタック

Frontend : React / Next.js / TypeScript / Tailwind CSS Auth : Amazon Cognito(Google・LINEログイン対応) Backend : AWS Lambda + API Gateway Database : Amazon DynamoDB Infra : AWS CDK Hosting : Vercel Map : AWS Location Service

Kotaro Maruyama

@fd4ca009e49d2bd5