DESIGN.md — はちみつ色グラデの季節ドリンク LP（Honey Gradient Seasonal Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、やさしい・柔らかい、かわいい、上品・高級
• キーワード: はちみつ色・とろける曲線・きらめき・焦げ茶文字・季節限定・キャラクター
• 地の質感: 光沢のあるシズル写真と、平塗りのグラデーション地。とろりと垂れる液体の雫を装飾に使う。
• 形: 液だれのような有機的な曲線でセクションと写真を切り抜く。ボックスは角丸大きめ、ラベルは角の小さい四角枠。
• 温度感: 暖色だけで組んだ、甘くあたたかい冬の雰囲気

Colors

• 地はオレンジ→黄の縦グラデーション。セクションごとに濃淡を変える
• 文字は黒を使わず焦げ茶で統一する
• キャンペーンやキャラクター部はサーモンピンク地に切り替える
• 強調語は白地＋茶の細枠のマーカー箱で囲む
• 赤と青は価格表の HOT と ICED の区別だけに使う
• 主ボタンは焦げ茶の平塗りに白文字
• button-primary は文字 #FFF8E9 × 背景 #B56126 のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AD5C24、4.58:1）を使う。

Typography

• 英字の大見出しの上に、小さな日本語ラベル箱を添える
• 価格は大きなセリフ数字。下にサイズ帯を置く
• リード文は中央揃えで行間を広く取る
• 擬音は手書き風の文字を写真の横に斜めに置く
• 番号は細いセリフ体の大きな数字。縦線で区切り、英字を小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品一覧は角丸の大パネルに縦に並べ、写真を中央に大きく置く
• 特長は左揃えの文字ブロックと、右へはみ出す液形の写真を交互に組む
• 注釈は各ブロックの末尾にまとめる
• セクション見出しは中央揃え

Elevation & Depth

• 影はほぼ使わず平面で組む
• 商品写真には床の柔らかな落ち影だけを付ける
• キャラクターは白フチ＋茶線のステッカー風にする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 液だれ・はちみつが溶けたような不定形のマスクで切り抜く
• セクション境界: とろりと垂れる波形、または大きな円弧
• ラベルとマーカー箱は角を立てた四角
• パネルは角丸大きめ
• ボタンは角の小さい長方形

Components

• 日本語ラベル箱（label-box）: 英字大見出しの上に置く小さな四角ラベル。クリーム地に茶の細枠。
• マーカー囲み（marker-word）: 本文中の強調語を白地＋茶の細枠で囲む。
• 価格表示（price-block）: 大きなセリフ数字の価格の下に、茶色帯に白字でサイズを入れる。
• 特長番号（feature-number）: 小さな英字ラベル＋大きな細い数字＋縦線＋英字の名前を横一列に並べる。
• 注文誘導バナー（order-banner）: 黄色の角丸箱に注文の案内とアイコン、白の内側箱に日付を入れる。
• 主ボタン（button-primary）: 焦げ茶の平塗りに白い太字のボタン。幅いっぱいに置く。
• 共有ボタン（share-button）: 白地に茶の細枠。アイコンとラベルを入れ、2 つ横に並べる。
• 吹き出しラベル（speech-label）: 下に小さなしっぽが付いたクリーム色の見出しラベル。
• サイズ別価格表（price-table）: 薄グレー地の角丸枠。S/M/L の丸アイコンを並べ、ICED は青・HOT は赤で示す。

Do's and Don'ts

Do - 地の色は暖色のグラデーションで、セクションごとに濃淡を変える - 写真の周りにきらめき装飾と液だれのモチーフを散らす - 強調語はマーカー箱で囲む - 英字大見出しと日本語ラベルを必ずセットで使う - 文字色は焦げ茶で統一する

Don't - 寒色の背景を使わない - 純黒の文字を多用しない - 写真を四角いまま並べない - 強い影や立体的なボタンにしない - ゴシックの太字だけで見出しを組まない

Page Structure

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

1. ファーストビュー（新商品の世界観と発売日を伝える）: オレンジ地に商品を大きく置き、白の明朝コピーと発売日を重ねる。周りに液だれときらめきを配置する。
2. 注文誘導（先行注文へ誘導する）: 黄色の角丸バナーに日付を入れ、下に小さなリンク文字を置く。
3. コンセプト文（味の魅力を情緒的に伝える）: 中央揃えの太字リード文。キーワードをマーカー箱で囲む。
4. ラインナップ（商品と価格を見せる）: 黄色の角丸パネルに、商品写真・明朝の商品名・大きな価格を縦に並べる。
5. 派生ラインナップ（別ミルク版を紹介する）: 淡いレモン地に筆記体の英字を添え、枠付きの見出しと丸アイコンを置く。
6. 特長（素材ごとのこだわりを伝える）: 番号付きで 4 項目。液形の写真に手書きの擬音と左揃えの本文を添える。
7. 帯バナー（切り替えのアイキャッチ）: 全幅のシズル写真の下に、英単語が流れるテキスト帯を置く。
8. キャンペーン告知（ノベルティ・店内イベントを知らせる）: サーモンピンク地にキャラクターを置き、吹き出しラベルと白フチの丸ゴシック大見出しを使う。
9. BGM 案内（外部コンテンツへ誘導する）: 音符の帯を付けた白カードに、淡いピンクのボタンを置く。
10. 季節のおすすめ（他の季節商品を紹介する）: ベージュ地の白い角丸カードに、写真・欧文の商品名・価格表を並べる。
11. SNS キャンペーン（応募を促す）: 黄色パネルに期間を示し、STEP ラベルと茶色のボタンを置く。
12. シェア・フォロー・フッター（拡散と SNS フォローを促す）: 共有ボタンを 2 つ並べ、SNS アイコンと注釈を置く。最後に白地のフッター。

Imagery

• 商品は白背景で正面から撮り、柔らかい落ち影を付けて切り抜く
• はちみつの雫・ハニカム・ナッツを、光沢強めのシズル写真で添える
• 金色に光る十字のきらめきを余白に散らす
• 素材のアップ写真は液だれ形のマスクで切り抜く
• キャラクターは太い茶の線と白フチのイラストで描く
• 背景にぼかした液だれや丸い光を薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に SP 幅（約 480px）のカラムを置き、左右をグラデーション地で埋める
• 特長は PC では写真と文字を左右に並べてもよい
• 共有ボタンは PC でも横並びのまま
• 見出しサイズは PC で 1.3 倍程度まで大きくする

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