MIRAI POCKET
つながる、ひろがる、未来が育つ。
熊本の未来を育てる地域プラットフォーム | Webアプリ 全体設計図
v0.1 | 2026年7月 | 画面イメージ(モック)とセットでご覧ください
01アプリの5つの柱

まず10/24までに、この5つを「使える形」にします。将来はここに機能を足していきます。

10/24まで
🗺

マップ

加盟店を地図で探す。カテゴリやエリアで絞り込み、お店の詳細ページへ。

10/24まで
🎟

クーポン

お得なクーポンを見つけて、お店でその場で使える。来店・リピートのきっかけに。

10/24まで
🏠

ホーム

おすすめのお店・クーポンをまとめて表示。アプリの入口。

10/24まで
🛍

お買い物

地域の商品をアプリで購入(Shopify)。お会計まで10/24に対応。まずは会員登録なしで買える形。

10/24まで
🎫

デジタルチケット

QR受付。子ども未来キャリアDAY当日、チケットの受付をスマホで完結。当日必達

次の段階
👤

マイページ・ポイント

会員登録・お気に入り・ポイント。買い物や来店がもっと便利に。

将来
💡

補助金の案内

「今使える制度」をやさしく紹介し、専門家につなぐハブに。

02システム全体のしくみ

利用者のスマホから、情報の置き場までの流れです。(かっこ内は使う技術の名前)

📱 利用者のスマホ
アプリ(ブラウザで動く・ホーム画面に追加も可)
熊本の子育て世代・地域の方が使う入口。
🖥 画面を表示するところ
Cloudflare Pages + Next.js
アプリの見た目・動き。速く・安定して表示する土台。
🗄 情報の置き場
Cloudflare(データベース D1 / 画像 R2)
加盟店情報・クーポン・お知らせ・写真を保管。
🛒 お買い物エンジン
Shopify
商品・注文・お会計の専用エンジン。10/24からお買い物(購入・お会計)まで対応。会計はShopifyの安全な画面で完結。
ポイント:お買い物の部分だけを Shopify に任せ、地図・クーポン・加盟店情報は自前の置き場に分けます。こうすると、10/24 までに動かす部分が Shopify の都合に振り回されず、安全に間に合わせられます。
03画面のつながり

下のタブでいつでも画面を行き来できます。10/24までは3つ(ホーム・マップ・クーポン)、マイページは次の段階で加わります。

🏠
ホーム
おすすめ・入口
🗺
マップ
お店を探す
🎟
クーポン
見つける・使う
次の段階
👤
マイページ
お気に入り等
🏪 加盟店の詳細ページ(写真・紹介・SNS・お知らせ) 🎫 クーポンを使う画面(店頭で提示)
※ マイページ・お気に入り・ポイントは「次の段階(10/24後)」の追加機能です。
04情報の流れ(2つ)

🏪 お店の情報が載るまで

1
加盟店さんがお店の情報・写真を提出
2
運営(alorise)が一覧シートに登録
3
アプリに取り込み
4
マップと詳細ページに表示

🎟 クーポンが使われるまで

1
利用者がアプリでクーポンを見つける
2
「使う」を押して画面をお店で提示
3
お店の方が確認して使用済みに
4
利用が記録される(何回使われたか集計)
05作り方の流れ(12週間)

7月中旬から10/24イベントまで、この順番で作っていきます。

W1 7/14–7/20今ここ
設計を固める・画面イメージ合意・開発環境の準備
W2 7/21–7/27
情報の置き場を作る・お店情報の登録シートを運営へ
W3–4 7/28–8/10
マップと加盟店一覧(まず5〜10店で表示)
W5–6 8/11–8/24
加盟店の詳細ページ・お知らせ・商品の表示
W7–8 8/25–9/7
クーポンの一覧・使う画面・利用の記録
W9 9/8–9/14
ホーム画面・検索・全画面をつなぐ
W10 9/15–9/21
お店データを本格投入・表示速度の調整
W11 9/22–10/4
動作テスト・実機確認・代表レビュー・修正
W12 10/5–10/23
予備期間・本番公開・イベント運用リハーサル
🎯 10/24 イベント当日 公開
子ども未来キャリアDAYで一般の方に使ってもらえる状態
063つの段階に分けて育てる
🌱 第1段階
〜 10/24(イベント公開)
  • マップ・加盟店詳細
  • クーポン(見る・使う)
  • ホーム・検索
  • お買い物(購入・お会計)
  • デジタルチケット(QR受付)
🌿 第2段階
10/24 以降
  • 会員登録・マイページ
  • お気に入り・ポイント
  • お店側の管理画面
🌳 第3段階
2027 以降
  • 補助金の案内・専門家導線
  • 通知(締切・新着)
  • ポイントの地域内活用
07ご確認したいこと

設計を進めるために、お手すきの時に教えていただけると助かります。

1クーポンの「使う」方式:まずは画面をお店で見せる方式を推奨(お店側の準備が最小・すぐ始められる)。QRやコード方式が良ければご相談
2お店情報・クーポンの登録:当面は一覧シートで運営側から登録する形でよいか(お店が自分で編集する画面は次の段階)
3デジタルチケットの運用:10/24のキャリアDAYで、どの体験・受付にQRを使うか(対象・枚数・受付の流れ)を詰めさせてください
4お買い物(購入)を受けるお店の体制:注文が入った時の在庫・発送・お問い合わせを、どのお店で・誰が対応するか。まず対応できるお店だけ「購入OK」にする形が安全です
5アプリの住所(ドメイン):miraipocket などの取得はこれからか
この設計図は、システムの全体像と作り方の流れを共有するための資料です(v0.1・たたき台)。
画面のイメージは別途「画面モック」をご覧ください。ご確認いただいた内容を反映して、次の版に更新していきます。