DESIGN.md — 深紅×緑リボンのホリデーカフェ季節限定LP（Festive Red Ribbon Holiday Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ポップ・元気、かわいい
• キーワード: ホリデー・深紅グラデーション・緑リボン・ボケ光・切り抜き商品・祝祭感
• 地の質感: ほぼ単色の赤い面に、ぼかした白い光の玉と細い緑のサテンリボンを重ねて奥行きを出す
• 形: 角丸カード、ピル型ボタン、八角形の線枠、曲線のリボン
• 温度感: 暖色が中心。赤に緑を補色として少しだけ効かせる

Colors

• 背景は上の深紅からコーラルレッドへ、スクロールに合わせてなめらかに変える
• 文字はすべて白にする。欧文の小見出しだけ淡い金色にしてよい
• 緑はリボンと、1 つだけ置く強調パネルに限って使う
• ボタンは白地に赤文字。補助のリンクは白い線のアウトラインボタンにする
• 白いボケ光を 10〜20% の不透明度で、各セクションの端に散らす
• green-panel は文字 #FFFFFF × 背景 #2EA25B のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#26864B、4.57:1）を使う。

Typography

• 欧文見出しは大文字のセリフ体で 2 行に分け、中央揃えにする
• 欧文見出しの直下に、日本語のサブコピーを 1〜2 行添える
• 本文は短い行で改行し、中央揃えか商品写真に寄せた左揃えにする
• 価格はサイズ表記と並べ、商品名のすぐ下に置く
• 文字は白一色にし、太字は商品名と価格だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2 列グリッドも可
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは欧文見出し→サブコピー→商品→ボタン→補助リンクの順で中央に積む
• フード系は写真とテキストを左右交互に配置する
• リボンはセクションの境界をまたいで斜めに流す
• 補助リンク（一覧へ・アレルゲン情報）はセクションの最後にまとめる

Elevation & Depth

• 商品写真の右下に、柔らかい落ち影を付ける
• カードやパネルには影を付けず、色の差だけで区切る
• ボケ光で背景に奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。シーン写真とカードは角丸の矩形にする
• セクション境界: 直線では区切らず、波打つ緑リボンと背景色の変化で区切る
• ボタンはすべてピル型にする
• 特集枠には、角を斜めに落とした八角形の白い細線フレームを使う
• 強調パネルは角丸 8px の単色面にする

Components

• 商品情報ボタン（button-primary）: 白地に赤文字のピル型ボタン。商品ごとに置く
• 一覧リンクボタン（button-outline）: 透明地に白い細線と白文字のピル型。セクション末尾に置く
• 下線付きの補助リンク（text-link-underline）: 白い小さな文字に細い下線を引く。アレルゲン情報などに使う
• 欧文セリフ見出し（section-title-serif）: 大文字 2 行の見出し。下に日本語のサブコピーを添える
• 商品カード（product-card）: 切り抜き写真、商品名、価格、ボタンを縦に並べる。背景面は持たない
• 八角形の線枠（octagon-frame）: カスタマイズ提案などの特集に使う白線の枠。左に写真、右に文章を置く
• 緑の強調パネル（green-panel）: 季節限定ドリンクをまとめる緑の角丸面
• キャンペーン分割バナー（campaign-split）: 左にシーン写真、右に濃い赤のパネルを置き、欧文見出しと詳細リンクを載せる
• 縦長のコンセプトカード（concept-card）: 幾何学的な模様の上に、ロゴ風の大見出しと説明を中央に置く角丸カード

Do's and Don'ts

Do - 背景は赤系だけで通し、上から下へ明るくしていく - 緑リボンは 1 画面に 1〜2 本、曲線で流す - 商品写真は切り抜きにし、落ち影を付ける - 見出しは欧文セリフ体と日本語サブコピーの 2 段で作る - ボケ光を画面の端に散らして、祝祭感を出す

Don't - 白や灰色のセクション背景を入れない - 緑を文字色や広い面に多用しない - 角張った四角いボタンを使わない - 黒い文字や濃い影の付いたカードを使わない - 写真を矩形のまま並べるだけのグリッドにしない

Page Structure

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

1. ファーストビュー（季節限定のテーマと主役商品を見せる）: 深紅の背景に、手書き風の欧文ロゴと商品の集合写真を置き、リボンをあしらう
2. コンセプト（季節の世界観を伝える）: 白文字の 2 行キャッチと、中央揃えの短いリード文
3. 素材紹介カード（シリーズの由来を説明する）: 幾何学的な模様の縦長角丸カードを中央に置く
4. 主役商品の詳細（味の組み合わせを伝える）: 大きな切り抜き商品写真の横に、素材を「×」でつないだ短文を添える
5. 商品ラインナップ（価格を示して購入へ誘導する）: 2 列の商品カードにピル型ボタンを付ける
6. カスタマイズ提案（追加トッピングを訴求する）: 八角形の線枠に、写真と文章を左右に分けて入れる
7. 季節限定ドリンク（定番の季節商品を紹介する）: 緑の角丸パネルに欧文見出しと 2 列の商品を載せる
8. フード（フード商品を紹介する）: 切り抜き写真とテキストを左右交互に並べ、最後に一覧ボタンを置く
9. 季節の豆（物販商品を紹介する）: パッケージ写真と説明を横に並べる
10. キャンペーン（オンライン購入特典を告知する）: 写真と濃い赤パネルを左右に分けたバナー
11. ギフト・グッズ（ギフト需要を取り込む）: 金色の欧文小見出しの下に、角丸のシーン写真やカード画像を 2 列で並べる
12. eギフト・会員キャンペーン（デジタル施策へ送客する）: 正方形イラストと縦長のバナーを中央に置き、アウトラインボタンを添える

Imagery

• 商品は斜め上から撮り、背景を抜いて柔らかい影を付ける
• いちごや茶葉、金のスプーンなどの素材を、商品のまわりに添える
• 緑のサテンリボンを、細く波打つ曲線として描く
• 白やピンクのぼかした光の玉を、ボケとして散らす
• ギフトやグッズは、ツリーのある暖かい室内のシーン写真で見せる
• バナーは、フラットな北欧風の冬の街並みイラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPCでも中央 1 カラムの縦長構成なので、SPでもほぼ同じ順で積む
• 2 列の商品カードは、SP でも 2 列のまま縮小するか 1 列にする
• 左右交互のフードは、SP では写真を上、テキストを下に積む
• キャンペーンの分割バナーは、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 行書くと起動時に読み込まれる。