ふるさとQRペイ [slug] DEMO

本番Next.jsの frontend/app/[slug] 配下を静的HTML化したデザイン確認用ページ集(自治体: 唐津市 / 佐賀県)

3案デザインコンセプトを見る

トップ [slug]/page.tsx

自治体トップ。カテゴリピル + 店舗グリッド + FAQ

V2 トップ(モダン・シャープ案)

カテゴリピル角丸控えめ、店舗カード密度UP、件数mono表記

V3 トップ(観光サイト風ヒーロー案)

唐津市ヒーロー → クイックインフォ → 店舗一覧 → 自治体ABOUT。クール和モダン

V4 トップ(左サイドバー + フォトモザイク)

左に自治体カード+連絡先+カテゴリナビ、右に唐津市フォトギャラリー+店舗グリッド

店舗詳細 [slug]/shops/[shopId]/page.tsx

店舗ヘッダー + 返礼品カード一覧(カート追加ボタン付き)

V2 店舗詳細(モダン・シャープ案)

パンくず・密度UP・mono価格・角丸控えめ。要素は全て継承

V3 店舗詳細(観光サイト風ヒーロー案)

ヒーロー→商品→About→Access の順。フルブリードヒーロー・ナラティブ・地図モック

V4 店舗詳細(左サイドバー型 + フォトモザイク)

左に店舗情報+連絡先+絞り込み、右に観光サイト風フォトギャラリー+商品グリッド

返礼品詳細 [slug]/rewards/[rewardId]/page.tsx

画像ギャラリー + 数量 + カート追加 + 注意事項

V2 返礼品詳細(モダン・シャープ案)

パンくず・スペック表化・モバイル sticky 購入バー追加。要素は全て継承

V3 返礼品詳細(観光サイト風ヒーロー案)

商品大ヒーロー→アクションバー→About→詳細の順。「観光地のおみやげ品」感

V4 返礼品詳細(左サイドバー + フォトモザイク)

左に店舗カード+同店舗他商品、右にフォトギャラリー+説明+購入カード

カート [slug]/cart/page.tsx

カート明細 + 数量変更 + サマリーサイドバー

V2 カート(モダン・シャープ案)

角丸控えめ、mono フォントで価格・数量、密度UP

V3 カート(クール和モダン案)

中央寄せ大見出し、ゆとり余白、theme-v3 navy系

V4 カート(左サイドバー型)

サマリーを左サイドバーに、右メインにカート内容。モバイル時はメインが上

チェックアウト・認証 [slug]/checkout/page.tsx (step=auth)

ログイン / 新規登録 / ゲスト購入の選択画面

V2 チェックアウト・認証(モダン・シャープ案)

角丸控えめ、mono ステッパー、シャープなフォーム

V3 チェックアウト・認証(クール和モダン案)

中央寄せ STEP 表示、ゆとり余白、theme-v3 navy系

V4 チェックアウト・認証(左サイドバー型)

サマリーを左サイドバーに、右メインに認証フォーム

チェックアウト・入力フォーム [slug]/checkout/page.tsx (step=checkout)

寄附者情報 + 使い道 + ワンストップ + 決済方法 + カード情報

V2チェックアウト・入力フォーム(モダン・シャープ案)

mono フォント、角丸控えめ、密度UP

V3チェックアウト・入力フォーム(クール和モダン案)

中央寄せ STEP 表示、theme-v3 navy系

V4チェックアウト・入力フォーム(左サイドバー型)

注文概要を左サイドバーに、右にフォーム

寄附完了 [slug]/checkout/complete/[uuid]/page.tsx

ステッパー全完了 + 注文サマリー + 店舗受け取り案内

V2寄附完了(モダン・シャープ案)

mono UUID、シャープなステッパー、密度UP

V3寄附完了(クール和モダン案)

大きめ成功アイコン、ゆとり余白、theme-v3 navy系

V4寄附完了(左サイドバー型)

サマリーと店舗受け取り案内を左サイドバー、右に完了メッセージ

特定商取引法に基づく表記 [slug]/tokushoho/page.tsx

2カラム形式の項目テーブル

V2特定商取引法(モダン・シャープ案)

テーブル mono フォント、シャープな区切り線

V3特定商取引法(クール和モダン案)

中央寄せ大見出し、theme-v3 navy系

V4特定商取引法(左サイドバー + 目次)

左サイドバーに目次ナビ、右にテーブル本体

使い方

  1. npm install (初回のみ)
  2. npm run dev でTailwind監視 + 開発サーバー起動(http://localhost:4500)
  3. HTMLを src/pages/ または src/partials/ で編集 → 自動リロード
  4. クラス名や数値の調整が確定したら、本番の対応する .tsxclassName=style に書き戻す