DESIGN.md — 漆喰質感×葡萄色の季節ドリンク LP（Seasonal Fruit Plaster Texture Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: 漆喰テクスチャ・葡萄色・ラベンダー・明朝の詩的コピー・浮遊する果実・円形切り抜き
• 地の質感: ひび割れのある白い漆喰壁のような地。写真は水滴や氷のつやを強調したシズル感。
• 形: 円形の写真マスク、角丸カード、ピル型ボタン。直線的な区切りは使わない。
• 温度感: やや暖かい生成り地に、冷たい紫〜ワインレッドの差し色。

Colors

• 地は漆喰テクスチャの生成り一色で通す。
• 見出し文字は葡萄紫、本文は墨色にする。
• 季節の差し色はラベンダー〜ワインレッドのグラデーションで、商品カードだけに使う。
• 濃色カードの上では文字を白にし、ボタンは白地に黒文字にする。
• 原色の赤や青は使わない。ロゴの緑は写真内だけにする。

Typography

• 本文と見出しは明朝体で統一し、しっとりした印象にする。
• 大見出しは手書き風の斜体にして、背後に斜めのラベンダー帯を敷く。
• 導入コピーは中央揃えで、行間を 2.5 前後と広くとる。
• 価格は欧文サンセリフで太めに書く。
• ボタンだけはゴシック体にして可読性を確保する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストを左右に互い違いでずらして置く
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• テキストブロックは左寄せと右寄せを交互に置き、写真と重ねる。
• 果実写真は画面端からはみ出させて浮遊感を出す。
• 商品カードは左右に約 8% の余白をとった角丸ブロックにする。
• ボタンは幅 80% で中央に置く。
• PC も SP 幅の縦長カラムを中央に置く。

Elevation & Depth

• 影はほとんど使わず、平面的に構成する。
• 果実やグラスの切り抜き写真に薄い落ち影をつける程度にする。
• カードは影なしで、色面とグラデーションだけで浮かせる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品のアップ写真は大きな円形マスクで切り抜き、画面端で途切れさせる。果実は背景を抜く。
• セクション境界: 境界線は引かず、テクスチャの地が続く中で余白と写真で区切る。
• 円・角丸・ピルの柔らかな形だけを使う。
• 見出し帯は斜めにカットした平行四辺形にする。
• 注記バッジは細い枠線の角丸小矩形にする。

Components

• 白ピル型ボタン（button-primary）: 白地に黒文字、中央寄せの詳細リンク。濃色カード上でも使う。
• 枠線ボタン（button-outline）: 透明地に細い黒枠をつけた一覧リンク。
• 下線テキストリンク（link-underline）: 注記情報への小さなリンク。下に細い線を引く。
• 帯付き手書き見出し（heading-brush-band）: 2 行の斜体見出しの背後に、斜めにカットしたラベンダー帯を敷く。
• 円形写真（circle-photo）: ピンク紫の円の中にドリンクのアップを入れ、端からはみ出させる。
• グラデーション商品カード（product-card-gradient）: 上はライラック、下はワインレッドへのグラデーション。見出し・写真・白文字の説明・ボタンを収める。
• 枠線バッジ（badge-note）: 価格の横に置く小さな属性表示。細い枠線をつける。
• 商品名＋価格（price-block）: 明朝の商品名 2 行の下に、欧文の価格を置く。

Do's and Don'ts

Do - 漆喰テクスチャの地をページ全体に敷く。 - 果実やグラスは水滴つきの切り抜き写真で浮かせて配置する。 - 見出しは手書き風の斜体と帯で季節感を出す。 - 文章は短い行で改行し、詩的なリズムにする。 - 差し色は季節のフルーツの色からとる。

Don't - ゴシック体の太い見出しや原色の CTA を使わない。 - セクションを直線や色ベタで区切らない。 - 影の強いカードや立体的なボタンを使わない。 - 情報を詰め込まず、余白を削らない。 - PC で多カラムに広げない。

Page Structure

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

1. ファーストビュー（季節の素材と商品を印象づける）: 果実を口に運ぶ人物写真に、縦置きの大きな明朝漢字を重ねる。下部に商品 2 つと小さな商品名を置く。
2. 導入コピー（季節の情緒を伝える）: テクスチャの地に、明朝の短い行を中央揃え・広い行間で並べる。
3. 商品 1 の見出し（商品のコンセプトを示す）: 手書き風の斜体 2 行に、ラベンダーの斜め帯を敷く。
4. 特長 1（ベースの味を説明する）: 左寄せの小見出しと本文を置き、右に浮遊する果実、下に円形のアップ写真を置く。
5. 特長 2（具材と食感を説明する）: 円形写真を左上にはみ出させ、右寄せでテキストを置く。
6. 商品紹介 1（商品名・価格・詳細へ誘導する）: 切り抜きのグラスと果実の下に、商品名・価格・説明・白ピルボタンを置く。
7. 商品紹介 2（カード）（2 品目を独立して訴求する）: ライラックからワインレッドへのグラデーションの角丸カードに、見出し・写真・白文字の説明・ボタンをまとめる。
8. フッターリンク（一覧と成分情報へ誘導する）: 枠線ピルボタンと下線テキストリンクを中央に縦に並べる。

Imagery

• グラスは正面やや上から撮り、霜・水滴・氷のつやを強調する。
• 果実は房や粒を背景から切り抜き、周りに散らして浮遊させる。
• 人物は柔らかい自然光で目を閉じた陶酔感のある表情にし、白い布をまとわせる。
• 背景はひび模様のある白い漆喰壁のテクスチャにする。
• 炭酸の泡や水しぶきの粒を写真の上に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも SP と同じ幅（約 400px 相当）の縦長カラムを中央に固定する。
• PC のカラム外側はベージュの無地にし、左上に記念ロゴを置く。
• カラム内のレイアウトと文字サイズは 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 行書くと起動時に読み込まれる。