ページ一覧に戻る

DESIGN CONCEPTS

3案デザインコンセプト

ふるさとQRペイの全8ページについて、3つの異なるデザイン方針で UI を再構築しました。すべて「大元と同じ管理項目セット」で構成されているため、本番に取り込む際に管理画面の項目追加は不要です。

SHARED SPEC（3案共通）

自治体
唐津市（佐賀県）
フォント
Zen Kaku Gothic New / Roboto Mono（数値）
カートCTA
朱橙（#d97a3d）/ styles.css で1行差し替えれば緑に切替可
画像
Unsplash 日本テーマ（茶 / 和菓子 / 陶器 / 唐津城 / 佐賀風景）
管理項目
大元と同じセット（追加項目なし）
レスポンシブ
モバイル / タブレット / デスクトップ対応
V2

モダン・シャープ

Amazon / メルカリ系の効率重視。角丸を控えめにし、密度を上げ、価格や数値は Roboto Mono で表記。情報量を素早く読み取れる作りに振り切っています。

デザイン原則

  • 角丸: 6-8px（控えめ）
  • 影: hover時のみ、控えめ
  • 価格・数量: Roboto Mono
  • ボーダー: 1px ベース
  • 密度UP、件数表示は削除（管理項目に無いため）

向いているシーン

  • EC・コマースを優先したい場合
  • 幅広い世代に「分かりやすさ」で訴求したい
  • 本番への戻しが最も楽（構造変更が小さい）

各ページへのリンク

トップ → 店舗詳細 → 返礼品詳細 → カート → 認証 → 入力 → 完了 → 特商法 →
V3

クール和モダン

藍・墨・干し金の色合いで、観光サイトのような佇まいに。詳細ページではメイン画像をヒーローとして大きく見せ、上品さと「ふるさと」感を両立。色は styles.css の .theme-v3 クラスで --color-fqp-teal を navy にオーバーライドしているだけなので、HTML には一切手を入れていません。

デザイン原則

  • 主色: 藍 navy #1e3a5f
  • アクセント: 干し金 #8a6926
  • 詳細ページに大型ヒーロー（既存画像を流用）
  • 中央寄せ + ゆとり余白
  • STEP 表示など補助テキストで観光サイト感

向いているシーン

  • 自治体ブランディングを重視したい
  • 「物語性」「上質感」を伝えたい
  • 観光関連の連動企画と相性が良い

各ページへのリンク

トップ → 店舗詳細 → 返礼品詳細 → カート → 認証 → 入力 → 完了 → 特商法 →
V4

左サイドバー型

Amazon / 楽天系のクラシック EC レイアウト。常に左サイドバーに「店舗情報 / 注文サマリー / 目次」などの補助情報を表示し、メインに集中できる構造。モバイル時は CSS の order でメインが上、サイドバーが下に並び替わります。

デザイン原則

  • 左 260-300px sticky サイドバー
  • 右メインに本体コンテンツ
  • モバイル時メイン優先（order-1 lg:order-2）
  • サイドバー = 店舗情報 / サマリー / カテゴリナビ / 目次 など、ページ毎に最適化
  • 追加ダミーデータは入れず、元の項目セットのみで構成

向いているシーン

  • 常に補助情報を見せたい（カート → 認証 → 入力フローなど）
  • EC ヘビーユーザーが見慣れた構造
  • 情報量が多くてもナビゲートしやすい

各ページへのリンク

トップ → 店舗詳細 → 返礼品詳細 → カート → 認証 → 入力 → 完了 → 特商法 →

COMPARISON

3案 早見表

観点 V2 モダン V3 和モダン V4 サイドバー
第一印象 効率・実用 上品・物語的 情報整理・効率
主色 teal navy + 干し金 teal
角丸 6-8px 10px 6-8px
余白 密度UP ゆとり 密度UP
構造 元と同じ縦並び 詳細はヒーロー型 左サイドバー固定
本番戻し難易度 ★☆☆ 容易 ★★☆ 中（class追加とヒーロー実装） ★★★ やや重（レイアウト構造変更）

TECH NOTES

本番への戻し方

  • V2 本番の .tsx の className と style を v2 ファイルからコピー貼り付け。HTML 構造はほぼ同じなので、変更箇所がピンポイント。
  • V3 styles.css の .theme-v3 ブロックを globals.css に追加し、ヒーロー画像セクションを店舗・商品詳細に追加。body に className="theme-v3" を付けて全色一括切替。
  • V4 ページ全体のレイアウトを grid lg:grid-cols-[260px_1fr] に。左にサイドバー、右にメインを配置。モバイル順序は order utility で制御。
  • 共通 --color-fqp-cart-cta の追加（カート CTA 色）と、Google Fonts の Roboto Mono を読み込み。画像は実画像 URL に差し替え。
ページ一覧に戻る