DESIGN.md — 紺鼠×ベージュのレトロ洋館チョコ催事 LP（Retro Port Town Chocolate Fair LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: レトロ、上品・高級、情報量多め・訴求型
• キーワード: レトロ洋館・レンガ壁・港町・ショコラ・百貨店催事・くすみ紺
• 地の質感: 暗いくすみ紺のベタ面に、少し明るい紺のレンガ模様を重ねたマットな質感。光沢はチョコ色バッジだけに使う。
• 形: 角を斜めに落とした八角形の写真枠、立体的な額縁型のタブボタン、日よけテントの波形、吊り看板。
• 温度感: 寒色の地に暖かいベージュと茶を差した、落ち着いた中間の温度。

Colors

• 地はほぼ全面をくすみ紺 1 色にし、明るい紺のレンガ模様で区切る
• 見出しのタイトル・看板はベージュゴールドで描き、強い原色は使わない
• 原色に近い青・朱・茶はフロア案内のタブボタン 3 つだけに使う
• 商品写真は白い枠に入れ、紺地とはっきり分ける
• 新商品・初登場のバッジはチョコ茶の雫型に白文字で、写真の右下に置く
• 本文は紺地の上に白系の文字で組む
• floor-tab-button は文字 #FFEFE5 × 背景 #D46351 のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C0432F、4.58:1）を使う。

Typography

• タイトルはレトロ装飾体をベージュゴールドで描き、上下に細い線を添える
• 本文は細めのゴシック体を行間 1.8 で組む
• 商品名は山かっこ〈〉で囲んだショップ名の下に置き、価格は税込表記で小さく添える
• ショップのキャッチは 2 行の短い文にする
• 文字は左揃えにし、案内情報だけ中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品明細だけ小さなサムネイルと文字の 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• ショップごとにロゴ・写真・キャッチ・説明・区切り線・商品明細の順で縦に積む
• ショップの間は横線か、レンガ模様の帯で区切る
• 写真は本文の幅いっぱいに大きく置く
• シェフの小さな写真を説明文の左に置くことがある
• ページ末尾にブランド名を中点付きの縦リストで並べる

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• タブボタンだけは額縁のような斜めのベベルで立体に見せる
• 雫バッジには軽い光沢を入れてチョコの質感を出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 白枠の四隅を斜めに小さく落とした八角形。中の写真は角丸なし
• セクション境界: レンガ壁のパターン帯と、日よけテントの波形（スカラップ）
• ボタンは四角いベベル付きの額縁型にする
• 看板は 2 本の紐で吊るした長方形にする
• バッジは溶けたチョコの雫のような円形にする

Components

• フロア案内タブ（floor-tab-button）: 青・朱・茶の 3 色を横に並べたベベル付きのボタン。下向き矢印の丸アイコンを添える
• 吊り看板見出し（hanging-sign）: テント波形の下から紐で吊るしたベージュの板。欧文のエリア名をチョコ色で大きく入れる
• 階数アイコン（floor-badge）: 白い細線の正方形の中に階数を入れ、見出しの上に置く
• 角カット写真枠（product-photo-frame）: 白い八角形の枠に商品写真を入れる。右上か左上にショップのロゴを置く
• チョコ雫バッジ（drip-badge）: 新商品や初登場を示す茶色の円形バッジ。写真枠の右下からはみ出させる
• 商品明細行（product-spec）: 左に小さなパッケージ写真、右にショップ名・商品名・入数・税込価格を並べる
• 一覧見出し帯（list-heading-bar）: チョコ茶のベタ帯に白い見出しを中央揃えで入れる

Do's and Don'ts

Do - 地はくすみ紺で通し、レンガ模様とテント波形で場面を切り替える - 商品写真は必ず白い角カット枠に入れる - 新作・初登場の訴求は雫バッジで統一する - 洋館や街灯は細い線画のベージュで描く - 説明文の下に細い区切り線を引いてから価格情報を置く

Don't - 白地や明るい地のセクションを入れない - ピンクや赤のハートなど甘すぎるバレンタイン装飾を使わない - ボタンをピル型や角丸にしない - 原色を見出しや本文に広げない - 写真に強いドロップシャドウを付けない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー帯（催事名と会期を伝える）: 木の扉のようなチョコ茶の帯に、日付ロゴ・白い催事名・会期を入れる
2. フロアナビ（会場ごとのエリアへ誘導する）: 3 色のベベル付きタブを横に並べる
3. ファーストビュー（催事の世界観を見せる）: レンガ壁の上に、ベージュの装飾タイトル・洋館の線画・左右の街灯を配置する
4. 開催概要（日時と会場を伝える）: タブを再掲し、その下に日時・注記・会場を中央揃えで置く
5. コンセプト紹介（催事テーマと土地の由来を語る）: 階数アイコン・見出し・左揃えの本文を置き、下をレンガ帯で区切る
6. エリア看板（エリアの切り替えを示す）: テント波形から吊り看板を下げ、短い紹介文を中央揃えで入れる
7. 特集コレクション（テーマ商品をまとめて見せる）: 見出しと説明文を置き、商品カードを続ける
8. ショップ別商品紹介（各店の商品と価格を伝える）: ロゴ・角カット写真・雫バッジ・キャッチ・説明・明細の順で繰り返す
9. 記号付き商品群（1 枚の写真で複数の商品を紹介する）: 写真にアルファベットを振り、明細の各行と対応させる。右端に雫バッジを付ける
10. ブランド一覧（出店ブランドを網羅する）: チョコ茶の見出し帯の下に、中点付きのリストを並べる

Imagery

• 商品写真は明るい背景で物撮りし、真上または斜め上から自然光で撮る
• 背景は大理石・クラフト紙・クリーム色など温かい素材にする
• シェフは小さめの顔写真を添える
• レンガ壁・洋館・ガス灯は細線のベージュで描いたイラストにする
• 港町のランドマークを薄い線画で写真の端に添えてよい
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムで、写真枠を本文の幅いっぱいに置く
• SP のタブは 3 列を保ち、高さ 56px 前後にする
• PC は中央に 640px 前後の固定幅で同じ構成を置き、左右は地色で埋める
• PC はレンガ模様を左右いっぱいに広げて世界観を保つ

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。