DESIGN.md — ラズベリー赤×金紙吹雪の記念スイーツ LP（Festive Raspberry & Gold Anniversary Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、かわいい
• キーワード: 祝祭・金ラメ・紙吹雪・アーチ枠・明朝×筆記体・記念限定
• 地の質感: ラズベリー地に細かな金ラメのノイズ。下に行くほど深い赤へグラデーション。
• 形: 角丸の大きな濃色パネル、上部が半円のアーチ型画像枠、金のリボンラベル。
• 温度感: 暖色。赤〜ピンクと金で温かく華やか。

Colors

• 地はラズベリーピンク一色にし、下へ向かって深紅へ移行させる。
• 商品説明は一段濃いローズの角丸パネルにまとめ地と区別する。
• 商品写真は必ず淡ピンクのアーチ枠に載せて浮かせる。
• 金はリボンラベル・紙吹雪・ラメなど装飾だけに使う。
• 文字は濃色地では白、金地では濃ワインに限定する。
• 強い原色の CTA は置かず、白線ボタンで控えめに誘導する。
• commitment-panel は文字 #FBEEEA × 背景 #CC4365 のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#C7365A、4.51:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで分ける。
• 日本語見出しの右下に筆記体欧文を斜めに少し重ねる。
• 商品名の下には全角ダッシュで挟んだ副題を添える。
• リード文は中央揃え、パネル内本文は左揃え。
• 数字は見出し内で一回り大きくして目立たせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はパネル内で画像と文章の 2 カラム交互
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しの上下を細い横線で挟み区切る。
• こだわりパネルは左右 20px 程度の余白を残した幅広角丸カード。
• 商品ブロックは画像→線→商品名→本文→線の順で繰り返す。
• 装飾の紙吹雪はコンテンツの外側の余白に散らす。

Elevation & Depth

• アーチ枠に柔らかな薄い影を付けて浮かせる。
• パネルは影なし、色差だけで階層を作る。
• 紙吹雪はぼかしを入れ前後の奥行きを出す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 上が半円で下が四角のアーチ型、商品を切り抜きで中央に配置
• セクション境界: 直線境界なし。細い横線とグラデーションで切り替え
• パネル角丸は 40px 前後の大きめ。
• ボタンは白線のピル型。
• 金リボンは両端が折り返した帯の形。
• 第◯弾は円形メダル風バッジ。

Components

• アーチ型商品枠（arch-product-frame）: 上が半円の淡ピンク枠。切り抜き商品と原料写真を添える。
• 金リボンラベル（ribbon-label）: アーチ枠の上端に斜めにかける金帯。欧文で商品名を入れる。
• こだわりパネル（commitment-panel）: 商品紹介を包む濃ローズの大きな角丸パネル。
• 筆記体添え見出し（script-heading）: 白い明朝見出しの右下に淡色の筆記体欧文を重ねる。
• 第◯弾メダル（edition-badge）: 金ベージュの円に欧文をぐるりと配し中央に数字。
• 白線ピルボタン（button-outline）: 透明地に白 1px 線、白文字と右向き三角。
• 金グラデのリンクバナー（banner-gold）: 左に写真、右に 2 行の文字を置く角丸金バナー。
• 細線の区切り（divider-line）: 淡い白の横線でブロックを区切る。

Do's and Don'ts

Do - 地全体に金ラメのノイズと紙吹雪を散らし祝祭感を出す。 - 見出しは白の明朝＋筆記体欧文で上品にまとめる。 - 商品は 1 つずつアーチ枠で大きく見せる。 - 商品写真の脇に原料の小物写真を添える。 - 余白を広めに取り、本文は短く 3〜5 行に収める。

Don't - 青や緑などの寒色をテーマ色に使わない。 - 太いゴシックの大見出しや派手な価格訴求を入れない。 - 金をベタ塗りの大面積に使わない。 - 四角い写真をそのまま並べない。 - 紙吹雪を本文の上に重ねて読みにくくしない。

Page Structure

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

1. ファーストビュー（祝祭感と商品を一目で伝える）: 手に持った商品カップの写真に紙吹雪とリボン。白明朝のキャッチを 3 行で段差配置し、右下にパッケージと情報リンク。
2. 記念商品の紹介（記念の位置づけを伝える）: 上下を細線で挟んだ明朝見出しに筆記体を重ね、中央揃えのリード 2 行。
3. 商品タイトル（商品シリーズ名を示す）: 左に円形メダル、右に欧文セリフの大見出しと日本語小見出し。
4. パッケージ画像とリード（セット内容を見せる）: 箱の写真を大きく中央に置き、下に中央揃えの説明文と強調の一文。
5. こだわり（商品別）（各フレーバーの魅力を説明）: 濃ローズの角丸パネル内に、リボン付きアーチ枠→商品名と副題→本文を 3 回繰り返す。
6. 関連リンク・シェア（関連サイトへ回遊させる）: 金バナー、白線ピルボタン、SNS 丸アイコン 3 つを中央に縦並び。深紅の地。

Imagery

• 商品は白背景で切り抜き、正面やや上から撮る。
• FV は爪を彩った手で商品を掲げる明るいライフスタイル写真。
• 原料（ミルク瓶・プリン・クッキー）を小さく添える。
• 金の紙吹雪・リボン・ラメをぼかし込みで散らす。
• 全体を赤〜ピンクで色調統一する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を横長にし、キャッチを左、写真を右に置く。
• PC のこだわりパネルは画像と文章を左右交互に並べる。
• PC は本文幅を中央 60% 程度に絞り、両側の余白に紙吹雪を置く。
• 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 行書くと起動時に読み込まれる。