ふるさと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. クラス名や数値の調整が確定したら、本番の対応する .tsx の className= や style に書き戻す