DESIGN.md — 金色ボケと赤リボンのホリデーカフェ LP（Golden Holiday Ribbon Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、やさしい・柔らかい
• キーワード: ホリデー・金色のボケ・赤いリボン・切り抜き商品写真・クラシックな欧文見出し・あたたかい
• 地の質感: グラデーションの金地に光のボケと火の粉の粒子が散り、マットな紙っぽい質感がある
• 形: 角丸が小さめのカード、白いピル型ボタン、地を横切る曲線のリボン
• 温度感: 暖色寄り。金茶・赤・深緑で冬のぬくもりを出す

Colors

• 地は濃い金茶から明るいゴールドへ縦にグラデーションさせ、一番上を一番暗くする
• 赤はリボンと 1 枚のカードだけに使い、文字には使わない
• 緑系のカードは、種類が違う商品群やキャンペーンを区切るときにだけ使う
• 濃い地と色カードの上の文字は白にする
• 明るいゴールドの地の見出しは、白い欧文か深緑の欧文にする
• ボタンは白い面に金茶の文字。アウトラインボタンは白い線と白文字にする
• card-color-green は文字 #FFFFFF × 背景 #2EA25B のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#26864B、4.57:1）を使う。

Typography

• セクション見出しは欧文セリフの大文字で 2 行に積み、その下に和文サブ見出しを置く
• 情緒コピーは明朝で中央揃えにし、字間を広めにとる
• 商品情報はゴシックで左揃えにし、名前・価格・注釈の順に並べる
• 欧文の一部の文字だけを装飾体にするなど、遊びを入れてよい
• 本文は短く改行して、1 行 20 字以内に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は 2 列のグリッドか、写真と文を左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション見出しは中央揃えにし、上下の余白を大きくとる
• フード系は写真と説明を左右交互に置く
• 色カードは画面幅の 88% にし、中に商品を 2 列で並べる
• 各商品の下に白いピル型ボタンを 1 つ置く
• 一覧へのリンクはアウトラインのピルボタンにし、その下に下線付きのテキストリンクを添える

Elevation & Depth

• カードには影をつけず、フラットな面にする
• 切り抜き写真には地面に落ちる柔らかい影をつけて浮遊感を出す
• 光のボケを手前と奥に重ねて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を切り抜いて置く。キャンペーンやグッズは角丸の小さい矩形写真にする
• セクション境界: 直線では区切らない。赤いリボンの曲線が画面を横切ってセクションをつなぐ
• カードの角丸は 6〜8px に控える
• ボタンは必ず完全なピル型にする
• リボンは画面の端からはみ出すように描く

Components

• 白ピル詳細ボタン（button-pill-white）: 商品ごとに置く白い面のボタン。文字は金茶
• アウトライン一覧ボタン（button-outline）: 白い細線と白文字のピルボタン。一覧ページへの導線に使う
• 下線テキストリンク（text-link-underline）: アレルギー情報などに使う、小さな白文字の下線リンク
• 赤い商品カード（card-color-red）: 赤い面に明朝の見出し、左に説明、右に切り抜き写真を置く
• 緑の季節商品カード（card-color-green）: 緑の面に欧文見出しを置き、商品を 2 列で並べる
• 説明パネル（panel-explain）: オリーブ色の縦長パネル。金の欧文見出し、説明文、写真の順に並べる
• キャンペーンバナー（banner-campaign）: 写真と深緑の面を組み合わせたバナー。面には白い欧文見出しと矢印リンクを置く
• 欧文積み見出し（heading-en-stack）: 大文字の欧文セリフを 2 行に積み、下に和文サブ見出しを添える

Do's and Don'ts

Do - 赤いリボンの曲線をセクションごとに通して、ページ全体に流れを作る - 地に光のボケと火の粉を散らし、ホリデーのあたたかさを出す - 商品は切り抜きで置き、影をつけて浮かせる - 見出しは欧文セリフ、コピーは明朝で上品にまとめる - ボタンは白いピル型にそろえる

Don't - 赤を文字やボタンに使わない - 直線や波形の区切りでセクションを分けない - ポップな丸ゴシックや原色の青を使わない - カードに強いドロップシャドウをつけない - 地を単色にしてグラデーションをなくさない

Page Structure

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

1. ファーストビュー（季節感と主力商品を一目で伝える）: 濃い金茶の地に金の欧文ロゴタイプを置き、切り抜き商品とリボンを散らす
2. コンセプトコピー（情緒的に世界観を伝える）: 明朝の 2 行見出しと 4 行の中央揃えリード文を置く
3. 素材の説明（テーマ素材が何かを説明する）: オリーブ色の縦長パネルに欧文見出し・説明・写真を並べる
4. 味わいの特長（食感と味を対比して伝える）: 大きな切り抜き写真の横に、短い明朝文を × でつないで並べる
5. 主力商品一覧（購入・詳細ページへ誘導する）: 2 列の切り抜き写真の下に、名前・価格・注釈・白ピルボタンを置く
6. 別系統の商品（サブ商品を紹介する）: 赤いカードに明朝の見出しと写真を置く
7. 季節ドリンク（他の限定ドリンクを紹介する）: 緑のカードに 2 列の商品を並べ、下に一覧ボタンを置く
8. フード（フード商品を紹介する）: 欧文見出しの下で、写真と説明を左右交互に並べる
9. 季節の豆（物販の豆を紹介する）: パッケージ写真と商品情報を横に並べ、続けて 3 種のパッケージを並べる
10. キャンペーン（購入特典を告知する）: 横長の写真に深緑の面をつなげたバナーにする
11. ギフト・グッズ（ギフト商品へ誘導する）: 欧文見出しの下に、深緑の小見出しとグッズの集合写真を置く
12. カード・eギフト（デジタル商品へ誘導する）: カード画像を 2 列で並べ、アウトラインボタンを置く
13. 関連キャンペーンバナー（アプリ施策へ送客する）: 縦長のイラストバナーを中央に置く

Imagery

• 商品は暖かい照明で撮り、背景を切り抜いて斜め下に柔らかい影を落とす
• チョコが垂れるスプーンや浮遊するマシュマロなど、動きのある素材写真を散らす
• 赤いサテンリボンの曲線を前景と背景に重ねる
• 金色の光のボケと火の粉の粒子をオーバーレイする
• グッズは深緑の地に真上から並べたフラットレイで撮る
• バナーは冬の街並みのフラットなイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版しかないため、SP 用の値は PC からの推奨値。SP では 1 カラムにし、商品 2 列は SP でも維持してよい
• 写真と説明の左右交互は、SP では写真を上、文を下に積む
• キャンペーンバナーは SP では写真を上、深緑の面を下に縦に積む
• 欧文見出しは SP で 30〜34px にし、2 行に積む
• リボンとボケの装飾は SP では数を減らして、本文に重ならないようにする

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