DESIGN.md — 紺×金×深紅の美術館風コラボ洋菓子 LP（Royal Blue Gold Art Collaboration Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、レトロ、力強い・インパクト
• キーワード: ロイヤルブルー・金の帯見出し・ステンドグラス・美術館・限定コラボ・深紅のベルベット
• 地の質感: 紺の地に薄いロゴ・星・メダルの柄を敷き詰めたテキスタイル調。写真の背景は赤紫のざらついた石のような質感
• 形: 四角い写真に細い金の枠。商品の柄は円形メダルで見せる。直線の金の罫線で区切る
• 温度感: 濃い寒色（紺）に暖色の金と深紅を合わせた、重厚で華やかな温度感

Colors

• 商品・作家紹介の前半は紺の地に金文字で統一する
• セクション見出しは全幅の金帯に紺文字で置く
• 導入のリードだけ黒地に金文字で格調を出す
• 購入・店舗・注意事項は深紅地＋白文字に切り替える
• 主 CTA は白パネルの上の黒いピルボタンにする
• 鮮やかなピンクは固定ヘッダーの予約ボタンだけに使う
• section-band は文字 #073E79 × 背景 #C6A401 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C9A601、4.53:1）を使う。
• flavor-medal は文字 #C0A730 × 背景 #004891 のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 世界観を出す前半は明朝と欧文セリフで組む
• フレーバー名は欧文大文字の下に和文の読みを小さく添える
• 説明文は短く改行し中央揃えにする
• 購入情報・注意事項は読みやすさ優先でゴシックの白文字にする
• 見出しの前後に★を置いて記念感を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真ギャラリーだけ横スクロールで端をはみ出させる
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
• 金帯見出しは画面幅いっぱいで高さ約 65px
• メイン写真は左右 12px ほどの余白で金枠付きにする
• 商品は円形メダル→金の上下罫線で挟んだ名前→説明文の縦の流れを繰り返す
• 人物写真は中央に約 60% 幅で置き、本文を下に置く
• 購入セクションは白パネルで期間と CTA をまとめる

Elevation & Depth

• 影はほぼ使わず、金の細枠と色の切り替えで階層を作る
• 店舗カードは白い平面で、深紅地とのコントラストで浮かせる
• ヘッダーのボタンは固定で表示する

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 30px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形に 2px の金枠。商品の柄は正円で切り抜く
• セクション境界: 前半は直線の色帯で切り替え、フッターの上だけゆるい弧で質感背景につなぐ
• 写真・パネルは角丸 0 で格調を保つ
• ボタンだけピル型にする
• 導入見出しの四隅に L 字の金の飾り罫を置く

Components

• 金帯見出し（section-band）: 全幅の金の帯に紺の欧文セリフ＋和文を 1〜2 行で中央に置く
• L 字飾り罫の見出し（corner-frame-title）: 黒または深紅の地に、左上と右下に金の L 字罫を置いて記念タイトルを囲む
• 円形メダルのフレーバー紹介（flavor-medal）: 円形の柄画像、金の罫線で挟んだ欧文名と和文、説明文を中央揃えで縦に並べる
• 金枠の写真（framed-photo）: 赤紫背景の商品写真を金の細枠で囲む。スライダーのドット付き
• 予約ページ主ボタン（button-primary）: 白パネル上の黒いピルボタン。右端に矢印
• 固定予約ボタン（header-pill）: 右上のピンクのピルボタンと黒い四角のメニュー
• 期間限定の囲み（period-badge）: 白地に黒の細枠の長方形ラベル、下に大きめの期間と注釈
• 店舗カード（store-card）: 左に店舗写真、右に店名・住所、右端に矢印の白い横長カード
• 注意喚起の白ピル（button-outline-white）: 深紅地の上の白いピルボタンに深紅の文字

Do's and Don'ts

Do - 紺の地には薄いロゴ・星・メダルの柄を敷き詰める - 写真には必ず金の細枠を付ける - セクションの頭は金帯見出しで揃える - 購入情報は深紅地に切り替えて情報エリアだと分かるようにする - 商品の柄は円形で見せる

Don't - 前半の紺エリアでゴシックの白文字を多用しない - 写真や面に大きな角丸や影を付けない - 金・紺・深紅以外の色を広い面に使わない - 説明文を長い 1 段落にせず短く改行する - CTA を金色にして見出しと混同させない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 中央に縦長の紺パネル（作品画像・金のタイトル・ロゴ）、左右に商品写真を敷く
2. 導入リード（企画の概要と記念性を伝える）: 黒地に L 字飾り罫の金明朝見出し、下に白いゴシックの本文
3. 商品紹介（マカロン）（商品とフレーバーを見せる）: 金帯見出し→金枠スライダー写真→円形メダルのフレーバーを 4 つ縦に並べる
4. 商品ギャラリー（パッケージやバッグを見せる）: 金枠の大きな写真と横スクロールのサムネイル列
5. 商品紹介（チョコ）（2 つめの商品を見せる）: 金帯見出し→写真→円形 2 つ並び→罫線付きのフレーバー名と説明
6. 作家紹介（コラボ相手の権威を伝える）: 金帯見出し、金枠の人物写真、金文字の経歴文
7. 作品・プロジェクト紹介（モチーフの背景を伝える）: 金帯見出し、金枠の写真、明朝の本文と小さなクレジット、横スクロール写真
8. 店舗・シェフ紹介（作り手の想いを伝える）: 金帯見出し、シェフ写真と肩書き、コメント本文、店内写真の横スクロール
9. 購入・予約方法（予約へ誘導する）: 深紅地に白い明朝の見出し、商品写真、白パネルで期間と黒いピル CTA
10. 受取店舗一覧（受取場所を選ばせる）: 白線付き見出しと、写真付き白カードを縦に 4 つ
11. 商品詳細・注意事項（価格や条件を明示する）: 白いゴシックで項目を並べ、●の箇条書き、最後に白いピルボタン
12. フッター（ブランドと SNS への導線）: 弧で切り替えた赤紫の石の質感背景に白ロゴ、白丸の SNS アイコン、リンク

Imagery

• 商品写真は赤紫のざらついた石やベルベット調の背景に置き、低い光で影を残して撮る
• パッケージは斜めの俯瞰で、箱のふたを開けて中身を見せる
• 柄は鮮やかなステンドグラス風のイラストで円形に収める
• 人物写真は正面の上半身で、温かい背景か赤紫の背景にする
• 紺地にはブランドロゴ・星・紋章を薄く敷くパターンを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 80% 幅のコンテンツで、背景の紺柄と金帯は全幅
• フレーバー紹介は PC で円形・名前・説明を横 3 列の行にする
• チョコのフレーバーは PC で 2 列並び
• 作家・作品紹介は PC で写真と本文を左右に分け、左右を交互にする
• 購入パネルは PC で写真を左にはみ出させ白パネルと横並び、店舗カードは 2 列
• 商品詳細は PC で 2 列

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