DESIGN.md — 黄×水色×紺の夏向け飲料レシピ LP（Bright Yellow & Aqua Summer Beverage Recipe LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感
• キーワード: 夏・イエロー・水面・レシピ・手描き線画・斜めカット
• 地の質感: 水面や空の写真テクスチャの上に、フラットな白・黄の面を重ねる。影はほぼ使わず、色の面で区切る。
• 形: 四角いカードの上下辺を少し斜めにカットする。見出しの下に斜めの平行四辺形マーカーを敷き、ボタンだけはピル型。
• 温度感: 明るく爽やかで、少し温かい。黄の元気さと水色の涼しさを組み合わせる。

Colors

• 地はセクションごとに白・水色・黄・紺を切り替えて、レシピのまとまりを分ける。
• レシピの中身は白カードにまとめ、水色や黄の背景の上に浮かせる。
• 文字は紺を基本にする。紺地の帯では白文字にする。
• 赤は手書き風の大見出しにだけ使い、それ以外では使わない。
• 見出しの下には黄の斜めマーカーを敷いて強調する。
• 購入ボタンは黄の塗り、サブ導線は白地に紺線のアウトラインにする。

Typography

• 見出しは小さなリード行、斜めマーカー付きのラベル、大見出しの 3 段で組む。
• 英字の大見出しには、淡い水色のずらし影を付ける。
• 文字は中央揃えを基本にする。紹介パネルの本文だけ左揃えにする。
• 材料リストは左に項目、右に分量を置き、間を点線でつなぐ。
• 数字（01〜04、比率）は太い欧文で大きく見せる。
• 字間はやや広め（0.06〜0.12em）にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。冒頭の 3 レシピ導線だけ 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面端から約 16px 内側に置き、背景色が左右に見えるようにする。
• 1 つのレシピは、写真、材料、購入ボタン、3 ステップのカルーセルの順で 1 枚のカードにまとめる。
• コツは黄のパネルを縦に積み、パネル同士は 24px あける。
• 紺の帯は全幅にし、最後に下向きの二重矢印を置く。
• ステップは 1 枚ずつのカルーセルにし、左右の矢印とドットを付ける。

Elevation & Depth

• 基本はフラット。影ではなく色の面で層を作る。
• 商品カードだけ、柔らかい薄い影（0 4px 12px rgba(0,0,0,.1)）を付ける。
• グラスなどの切り抜き写真には、自然な落ち影を残す。

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: グラス写真は四角に切り、下辺を斜めにカットする。人物は白フチ付きで切り抜く。イラストは斜めの白い台形の上に載せる。
• セクション境界: 上下辺を少し傾けた斜めカットで区切る。
• カードの角は基本 0 にし、上下辺だけ数度傾ける。
• 注釈枠は紺の細線で囲み、対角の 2 隅に紺の三角を付ける。
• 見出しの下には、傾けた黄の平行四辺形マーカーを敷く。
• STEP 番号は紺の正方形で示し、黄のずらし影を付ける。

Components

• 黄ピル購入ボタン（button-primary）: 黄の塗りのピル型。文字は中央、右端に「>」を置く。
• アウトラインボタン（button-outline）: 白地に紺の細線のピル型。コツや製品一覧への導線に使う。
• 斜めマーカー見出し（heading-marker）: 小さなラベル文字の下に、黄の斜め帯を敷く。
• 紺地の帯ラベル（label-dark）: 見出しの下に置く、紺の長方形に白文字のサブコピー。
• 点線の材料リスト（ingredient-list）: 項目と分量を点線でつなぐ。目安は右寄せの小さな注釈にする。
• 角飾り付き注釈枠（note-box）: 紺の細線の枠。左上と右下に紺の三角を付ける。
• STEP 番号（step-badge）: 紺の正方形に白で STEP と数字を入れ、黄の影を付ける。
• コツの黄パネル（tip-panel）: 黄の面に番号、見出し、斜めの白台に載せたイラスト、注釈枠を縦に並べる。
• 商品カルーセルカード（product-card）: 黄地の上に置く角丸の白カード。商品画像、名称、アウトラインボタンを並べる。

Do's and Don'ts

Do - 黄・水色・白・紺の 4 色で構成する。 - カードの上下辺を少し傾け、軽やかな動きを出す。 - 工程やコツは、黄をアクセントにした手描き線画イラストで描く。 - 見出しは「リード、マーカー付きラベル、大見出し」の 3 段で組む。 - セクションの切り替わりに、紺の帯と下向き矢印で区切りを入れる。

Don't - 赤を大見出し以外に多く使わない。 - 黒文字を使わず、紺で統一する。 - 強いドロップシャドウや立体的なボタンを使わない。 - 角丸カードを多用しない（商品カードだけにする）。 - くすんだ色や暗い写真を使わない。

Page Structure

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

1. ファーストビュー（季節感と商品を一目で伝える）: 青空と海を背景にした人物写真。上に白い太字のコピーを黄の下線付きで載せ、下部に商品パッケージと実績バッジを置く。
2. 動画紹介（作り方を動画で見せる）: 白地に、マーカー付きの見出しと全幅の埋め込み動画を置く。
3. レシピ導線（3 種のレシピへジャンプさせる）: 水面写真の上に 3 列の縦長カードを並べる。上半分が黄地にグラス、下が白地に見出しと下向き矢印。下にコツへの角丸バナーを置く。
4. レシピ1（基本）（基本の作り方を示す）: 赤の手書き風大見出しと紺の帯ラベルを置く。水色地の白カードに写真、材料、商品紹介と購入ボタン、3 ステップのカルーセルを入れる。
5. 中間の訴求帯（アレンジへ話をつなぐ）: 上が黄、下が紺の斜め分割の帯。グラスとティーバッグの切り抜きを置き、白文字の見出しと矢印を入れる。
6. レシピ2（ミルク）（比率の訴求とアレンジのレシピ）: 水色地の白カードに、大きな比率数字と黄マーカーを置く。続けて材料と 3 ステップを入れる。
7. レシピ3（レモン）（夏のアレンジを提案する）: 黄の背景に、レモンの切り抜きを散らした白カードを置く。
8. コツの導入（コツのパートへ導く）: 全幅の紺帯に白文字を置き、二重矢印で締める。
9. 4つのコツ（おいしく作る手順のポイントを伝える）: 番号付きの黄パネル 4 枚に、線画イラストと注釈枠を入れる。
10. 商品一覧（購入へ誘導する）: 黄地に、角丸の白い商品カードのカルーセルを置く。
11. こだわり紹介（品質の根拠を示す）: 空の写真を背景に、写真と黄の斜めパネルの説明を交互に置く。比較写真とレーダーチャートも入れる。
12. 実績バナー・フッター（信頼を補強し、関連リンクを置く）: 黄のグラデーションの実績バナーを置き、その下に薄グレーで 3 列のテキストリンクを並べる。

Imagery

• グラス入りドリンクは、黄と水色のツートン背景で撮り、明るい自然光で氷の透明感を出す。
• 背景から切り抜いた茶葉・レモン・ミルク瓶を、カードの端からはみ出すように散らす。
• 工程とコツのイラストは、黒の手描き線画に黄と淡い水色の塗りを部分的に入れる。
• 背景には、水面のきらめきや青空と雲の写真を薄く敷く。
• 人物は笑顔の白シャツ姿にし、白フチで切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、ステップのカルーセルを 3 列に並べる。
• PC では、コツの黄パネルを 2×2 のグリッドにする。
• PC では、商品カードを 3 枚横に並べる。
• PC では、材料リストと商品紹介を左右 2 カラムにする。
• PC では、こだわり紹介の写真と説明を左右交互に 2 カラムで置く。
• コンテンツ幅は PC で約 80%（最大 900px 程度）にする。

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