DESIGN.md — 紫×金のクラシック額縁 洋菓子ブランド LP（Classic Purple Gold Frame Confectionery LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、レトロ、かわいい
• キーワード: 紫の紙テクスチャ・金の額縁・唐草オーナメント・筆記体英字見出し・明朝体本文・クラシック洋菓子
• 地の質感: 紫や水色の地に和紙・ラシャ紙のような細かい粒状テクスチャを敷き、金の粒子を散らす
• 形: 楕円の額縁、角を内側に削ったクラシックなカード枠、ピル型の金ボタン
• 温度感: やや暖かい。紫の甘さと金のつやで高級感を出す

Colors

• 地は紫を基本にし、別商品の紹介だけ水色に切り替える
• 一覧系のセクションは生成りの紙地にして紫地と交互に並べる
• 装飾線・額縁・英字見出しはすべて金で統一する
• 濃いチョコ色は締め帯と期限表示だけに使う
• 本文は紫地なら白、明るい地なら濃いグレーにする
• 企業共通の青はフッターのボタンだけに使う

Typography

• 本文と見出しは明朝体を使い、ゴシックは使わない
• セクション見出しは金の欧文筆記体を中央に置く
• 商品名の大見出しはワイン色の太い装飾書体にし、上下を唐草飾りで挟む
• 本文は字間を広め、行間 2.0 で中央揃えにする
• 商品写真の構成パーツは細い引き出し線と小さい明朝で注記する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カード一覧は 2 カラム
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し・本文・ボタンはすべて中央揃えにする
• セクションごとに地色を切り替えて区切る
• バナーは左右に余白を取った横長カードを縦に積む
• カードの間隔は 2 カラムで 24px 前後にする
• 商品写真は額縁の中に置き、パッケージは額縁の外にはみ出させる

Elevation & Depth

• 影はほぼ使わず、金の枠線で奥行きを出す
• 額縁は内側に薄いハイライトを入れて立体的に見せる
• 金ボタンは横方向のグラデでつやを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 楕円や樽型の金の額縁で切り抜く。カード写真は四角で、角を削った枠の中に入れる
• セクション境界: 直線で地色を切り替える。装飾は唐草のオーナメントだけ
• カード枠は角を内側に削ったアンティーク型にし、金の二重線で描く
• 主ボタンは金のピル型にして矢印を添える
• 小さな丸い金の矢印アイコンを詳細リンクに使う
• ページトップへ戻るボタンは金の丸にする

Components

• 楕円額縁ビジュアル（frame-oval）: 金の楕円額縁の中に人物や商品の写真を入れる。FVのスライダーと商品紹介で使う
• 筆記体英字見出し（heading-script）: 金の筆記体英字の左右に細い唐草の線を添える
• 唐草挟み商品見出し（heading-ornament）: 上下を金の唐草で挟み、ワイン色の太い商品名に小さなルビを添える
• 金ピルボタン（button-primary）: 金のグラデ地に黒文字と右向き矢印を入れる
• アンティーク枠商品カード（card-lineup）: 生成りの地に金の二重線枠。上の飾り、商品写真、商品名、丸い矢印を縦に並べる
• レシピ写真カード（card-recipe）: 紫地の上に置く。上が写真、下が生成りのキャプション帯と金の矢印
• キャンペーン告知枠（campaign-banner）: クリーム地に賞品を2列で並べ、下にチョコ色の帯で期限と詳細リンクを置く
• 金プレート付きお知らせ枠（news-plate）: 生成りの枠の上辺に金のプレート見出しを重ね、日付とリンクを罫線で区切って並べる
• more リンク（link-more）: 金のセリフ英字に小さい金の丸矢印を添える

Do's and Don'ts

Do - 紫・金・生成りの3色を軸にする - 写真はすべて金の額縁かアンティーク枠に入れる - セクション見出しは金の筆記体で統一する - 地には紙のテクスチャと金の粒子を薄く敷く - 商品ごとにテーマ色（紫・水色）を割り当て、セクション単位で切り替える

Don't - ゴシック体の太い訴求見出しを使わない - ビビッドな赤や黄色のセール風バッジを置かない - テクスチャのない平坦なベタ塗りにしない - 角が直角でそっけないカードにしない - 濃い影やネオン調の装飾を加えない

Page Structure

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

1. ファーストビュー（ブランドの顔とキャッチを見せる）: 紫の柄の地に楕円額縁の人物写真を置き、キャッチを白い帯に入れる。商品写真とスライドで切り替える
2. キャンペーン告知（購入キャンペーンへの誘導）: クリーム枠に2つの賞品を並べ、チョコ色の帯で期限と詳細リンクを置く
3. お知らせ（新商品の情報を伝える）: 金プレート見出しの付いた生成りの枠に、日付とリンクを罫線区切りで並べる
4. 関連バナー（シリーズサイトへ誘導する）: 横長バナーを4つ縦に積む
5. 別商品紹介（姉妹商品の特長を伝える）: 水色地にし、唐草挟みの見出し、額縁の断面写真、引き出し注記、明朝の本文を2つの商品分くり返す
6. ブランド紹介（主力商品の説明）: 紫地に金の粒子を散らし、金のセリフ英字と白い明朝見出しを置く。断面写真、本文、金ピルボタンを続ける
7. ラインナップ（商品一覧を見せる）: 生成りの紙地にアンティーク枠のカードを2カラムで並べ、最後の1枚は中央に置く
8. アレンジレシピ（食べ方の提案）: 紫地に写真カードを2カラムのグリッドで並べ、各グループの先頭に文字だけのタイトルカードを置く
9. CM・ギャラリー・壁紙（広告コンテンツへの誘導）: 紫地に筆記体見出し、金枠のサムネイル、more リンクを3つ続ける
10. フッター（SNS共有と企業リンク）: 白地にSNSの丸アイコン、企業ブランドの青いピルボタン、テキストリンク、ロゴ、コピーライトを置く

Imagery

• 人物は無地の濃色背景で、菓子をつまむポーズをとった正面の上半身を撮る
• 商品は断面を見せる寄りのカットで撮り、パーツ名を引き出し線で注記する
• パッケージは切り抜いて額縁の外側に重ねる
• レシピ写真はやわらかい自然光で、淡い紫やグレーの背景に置く
• 装飾は金の唐草・クラシックな額縁・金の粒子・小さな花柄の地紋で作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは2商品の人物を左右に並べ、地を紫と水色に塗り分ける
• PC のキャンペーン枠は賞品を横1列に並べる
• PC のバナーは2×2のグリッドにする
• PC の商品紹介は大きな額縁の中に見出し・写真・本文をまとめる
• PC のラインナップは3列で見出しを中央に置き、レシピは5列、CM・ギャラリー・壁紙は横3列にする

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 行書くと起動時に読み込まれる。