DESIGN.md — 濃茶×クリームが溶け合う対比型アイス LP（Dark Chocolate vs White Cream Dual Flavor Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: 二項対比・とろける境界・艶のあるシズル・明朝の金文字・紫×金グラデ
• 地の質感: とろみのある液体の光沢。背景には細かいノイズとビネットを入れる。
• 形: 角はほぼ使わず、垂れ落ちる曲線でセクションを区切る。枠は装飾的なアーチ形。
• 温度感: 暖色系。濃いブラウンとクリームで、甘く濃厚な印象にする。

Colors

• 2 つの味を、濃茶の地とクリームの地で分ける。
• 地色が替わる境目は、液体が垂れる曲線で入れ替える。
• 見出しはベージュから金のグラデ文字にし、暗い地の上で艶を出す。
• クリーム地の本文は黒にせず、赤茶を使う。
• 終盤は紫ワイン色から金へのグラデ地で、2 つの味を融合させる。
• CTA は紫→金の横グラデにし、白文字を乗せる。
• 線や枠は白か金の細線だけにする。

Typography

• 商品名は漢字を大きく、かなを小さくしてメリハリをつける。
• 大見出しには金のグラデと薄い影をかける。
• ポイント番号は、斜体の筆記体を見出しの左上に小さく置く。
• 本文は明朝の太字。字間を広めにして、短い行で改行する。
• 暗い地の本文は中央揃え、ポイント説明は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV のみ左右 2 分割。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• FV は縦に左右二分し、2 つの味を並べて対比させる。
• ポイントは写真を左右交互に置き、テキストを反対側に配置する。
• 商品のカップ写真から細い引き出し線を伸ばし、各ポイントの説明につなぐ。
• お客様の声は左右にずらして交互に配置する。
• 大きな余白は液体の曲線で埋める。

Elevation & Depth

• 切り抜いた商品写真に、柔らかく濃い落ち影をつける。
• 文字に薄いドロップシャドウをかけ、地から浮かせる。
• 背景の周辺を暗くするビネットで奥行きを出す。
• CTA は影なしで、グラデだけで立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 背景を抜いた切り抜き写真。一部を画面外にはみ出させる。
• セクション境界: チョコやクリームが垂れ落ちる有機的な曲線
• 直線の区切りは使わない。
• 囲み枠は、上が膨らむアーチ形のクラシックな白い二重線にする。
• ラベルはピル型の小さな帯にする。
• 声の上下は、唐草の飾りが付いた細い横線で挟む。

Components

• グラデ CTA ボタン（button-primary）: 紫→金の横グラデをかけたピル型ボタン。白文字と右矢印を付ける。
• 情報リンクのピル（pill-label）: 商品の下に置く小さなピル。色は味ごとに紫か金。
• ポイント見出し（point-heading）: 左上に筆記体の番号を斜めに置き、太字の見出しと本文を続ける。
• 引き出し線（leader-line）: カップ写真の各層から細線を垂直に伸ばし、ポイントの説明につなぐ。
• アーチ枠の囲み（arch-frame）: 上が膨らむ白い二重線の装飾枠。中に中央揃えの開発者メッセージを入れる。
• お客様の声（voice-item）: 羽の付いた線画カップのアイコンと番号を置き、唐草線で挟んだ感想文を添える。
• 羽付き見出し（wing-heading）: 見出しの左右に、悪魔の羽と天使の羽の線画を添える。
• SNS 共有（share-icons）: 丸い SNS アイコンを 3 つ横に並べる。

Do's and Don'ts

Do - 2 つの味は、色・地・羽のモチーフで対にして見せる。 - セクションの切り替えには、とろける曲線を使う。 - 見出しは明朝体に金のグラデをかける。 - 商品写真は切り抜いて大きく見せ、シズル感を出す。 - 装飾は白い細線のクラシック調にそろえる。

Don't - 純色のビビッドカラーを使わない。 - 角丸カードのフラットな UI を並べない。 - 白い背景でクリームの地を代用しない。 - 手書き風や丸ゴシックで、子どもっぽくしない。 - 直線の帯でセクションを区切らない。

Page Structure

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

1. ファーストビュー（2 つの新作を対比して見せる）: 左は濃紫と茶、右はクリームと金で縦に二分する。それぞれにソースのかかったアイス、商品名、カップ写真、ピルラベルを置く。
2. 対比の問いかけ（どちらを選ぶか興味を引く）: 二分した地の上に、大きな明朝 2 行の問いかけを置く。下端は液体の曲線で溶け合わせる。
3. 商品 A の紹介（濃厚さを訴求する）: 濃茶の地。2 行のキャッチと大きな商品名を置く。
4. 商品 A のポイント（構成要素を 3 つ説明する）: 開けたカップの写真から引き出し線を伸ばす。素材写真を左右交互に置き、point 番号付きのテキストを添える。
5. 商品 B の紹介とポイント（もう一方の味を説明する）: チョコが垂れる境目からクリームの地に切り替える。同じ型の 3 ポイントを、赤茶の文字で組む。
6. 開発者のこだわり（作り手の想いを伝える）: 黒→紫の地に置いたアーチ枠に、中央揃えの本文を入れる。
7. お客様の声（共感を集める）: 羽付きの見出しの下に、線画アイコンと感想を左右交互に 2 件並べる。地は紫→金のグラデ。
8. CTA・共有（他の商品へ誘導し、SNS で共有してもらう）: グラデのピル CTA を置き、その下に SNS の丸アイコンを 3 つ並べる。地は黒。

Imagery

• アイスとソースは暗い背景で接写する。とろみと光沢を強調する。
• ソースが流れ落ちる瞬間を、上から垂らした構図で撮る。
• 素材（クッキー、焼き菓子のかけら、チョコ片）は切り抜き、画面端からはみ出させる。
• 開けたカップは真上から撮り、蓋を斜めに重ねて置く。
• 白い線画で、羽・カップ・唐草の飾りを描く。
• 金のラメが舞う粒子の光をアクセントに入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像がないため、以下は推奨。PC では中央 480〜600px の SP 版の列を据える。
• 列の外側は、セクションに合わせて濃茶・クリーム・紫の地を全幅に広げる。
• ポイントは写真とテキストを 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 行書くと起動時に読み込まれる。