DESIGN.md — 苺色グラデと曲線の季節限定ドリンク LP（Strawberry Gradient Seasonal Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、かわいい、力強い・インパクト
• キーワード: 苺グラデーション・大きな曲線・シズル写真・円形クロップ・欧文イタリック・季節限定
• 地の質感: なめらかなグラデーションとわずかなノイズ。光沢のある液体と果実の写真
• 形: 画面をまたぐ大きな S 字カーブと円。ボタンはピル型
• 温度感: 暖色中心。ピンク〜赤〜ボルドーの甘く温かいトーン

Colors

• 前半はピンク→コーラル→赤→ボルドーと商品ごとに地の色を変え、グラデーションでつなぐ
• 色地の上の文字・罫線・ボタン枠は白だけにする
• 白地・淡ピンク地では見出し・本文・ボタンをすべて赤系 1 色で揃える
• 商品カードのテキスト色とボタン色は、その商品のテーマ色（赤・キャメル・深緑）に合わせる
• コラボ導入だけスカイブルーを使い、場面の切り替えを強調する
• button-primary は文字 #FFFFFF × 背景 #E43B3B のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E22E2E、4.5:1）を使う。

Typography

• 商品の章タイトルは欧文イタリックセリフを 2〜3 行に分けて中央に置く
• 情緒的なコピーは明朝で中央揃え、行間を広く（2.4 以上）とる
• 素材説明は『小さい説明文＋大きい素材名』の組を＋記号でつなぐ
• 商品カードは左揃えで、ラベル→商品名→価格→説明の順に置く
• FV のキャッチは斜めに傾け、写真に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストの 2 カラムを左右交互に置く
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 90px、基本単位 8px、カード内 32px（375px 幅換算）
• 素材説明は上下に白い横罫線（幅 80%）を引いたブロックに入れる
• 商品写真は幅いっぱい近くまで大きく見せ、下に商品名・価格・ボタンを中央に置く
• ボタンは幅 約 170px で中央に配置
• 商品カード同士は 100px 前後あけて余白でゆったり区切る
• ページ下部にはサブの枠線ボタンと下線テキストリンクを縦に並べる

Elevation & Depth

• 影はほぼ使わず、写真自体の落ち影で立体感を出す
• 商品の切り抜き写真には柔らかい接地影をつける
• ボタン・カードはフラットにする

Shapes

• 角丸: 小 4px ／ 中 24px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 素材のアップは正円で切り抜き、人物写真は角丸 24px 前後の矩形にする。背後にグラデの円を重ねる
• セクション境界: 大きな S 字カーブや円弧で色面を切り替える
• セクション境界はまっすぐ切らず、曲線にする
• 装飾の円は写真の角から半分はみ出すように重ねる
• ボタンはすべてピル型にする

Components

• 商品詳細ボタン（塗り）（button-primary）: 白・淡ピンク地で使う赤のピル型ボタン。商品ごとにテーマ色へ差し替える
• 色地上の白ボタン（button-white）: 色地の上に置く白いピル型ボタン。文字はその地の色と揃える
• 一覧へのサブボタン（button-outline）: 1px 枠線だけのピル型ボタン。幅は広め（約 230px）
• 下線テキストリンク（link-underline）: 中央に置いた文字に 1px の下線をつける。外部リンクにはアイコンを添える
• 素材構成ブロック（ingredient-block）: 上下を白罫線で挟み、小さい説明文と大きい素材名の組を＋でつないで並べる
• 円形素材アップ（circle-photo）: 直径 約 240px の正円で質感をアップで見せる
• 属性タグ（badge-outline）: 価格の横に置く小さい枠線タグ
• 商品カード（product-card）: 切り抜き写真→ラベル→商品名→価格→説明→ボタンの順。枠はつけない

Do's and Don'ts

Do - 商品ごとに地の色を変え、グラデーションと曲線でなめらかにつなぐ - シズル感のある写真（液体のはね・果実・ソース）を大きく使う - 欧文イタリックの章タイトル＋円形の素材写真＋罫線ブロックを 1 セットにして繰り返す - 白地のパートは余白を多めにとり、写真と装飾の円で軽やかに見せる - 文字色は地の色に合わせて白か赤系 1 色に絞る

Don't - 直線の帯や箱型のカードでセクションを区切らない - 色地の上に黒い文字を使わない - 影の濃いボタンや立体的なボタンを使わない - 1 画面に複数の強い色を並べない - 本文を長く詰め込まない

Page Structure

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

1. ファーストビュー（2 つの限定商品を同時に強く印象づける）: ピンクと赤の 2 つの曲線面に、傾けた商品写真と斜めの明朝キャッチを重ねる
2. コンセプトリード（味わいの世界観を伝える）: コーラルのグラデ地に、白い明朝 5 行を中央揃えで置き、果実を散らす
3. 商品紹介1（1 品目の素材と価格を見せる）: ピンク地に欧文イタリックのタイトル、円形の素材アップ、罫線ブロック、物撮り、価格、白ボタンを順に置く
4. 商品紹介2（2 品目の素材構成を伝える）: コーラルから赤への曲線地で同じ型を繰り返し、素材は 3 段で見せる
5. 一覧導線（ドリンク一覧と成分情報へ案内する）: ボルドー地に枠線ボタンと下線リンクを置く
6. コラボ導入（コラボ企画へ切り替える）: スカイブルー地に大きな欧文タイトルと人物の手元写真を置き、下端は円弧で切る
7. ライフスタイル提案（使う場面を想像させる）: 白地に明朝の見出しと詩的なリード文を置き、角丸の人物写真・グラデの円・商品チップを交互に配置する
8. コラボ商品一覧（物販商品の購入へ誘導する）: 白地に商品カードを 3 つ並べ、文字色とボタン色を商品ごとのテーマ色に変える
9. 注意事項（使用方法と注意点を補足する）: 赤の小さい文字を中央揃えにし、外部リンクに下線をつける
10. フード紹介（一緒に買えるフードを提案する）: 淡ピンク地に欧文イタリックの見出しを置き、切り抜き写真と商品カードを縦に並べる
11. フッター導線（一覧と成分情報へ案内する）: 枠線ボタンと下線リンクを中央に置く

Imagery

• ドリンクは光沢を強調した高精細な物撮りにし、果実・ミルク・ソースのはねを合成して躍動感を出す
• 素材は質感がわかる真上からのマクロ写真にし、正円で切り抜く
• 人物は自然光で撮り、笑顔や手元のアップで生活の一場面を見せる
• 商品は白背景で切り抜き、柔らかい落ち影をつける
• 背景にはノイズを少し入れたグラデーションの円や曲線を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV の 2 商品を横に並べ、曲線の分割も横長にする
• 素材ブロックは円形写真を左、罫線ブロックを右に置く 2 カラムにする
• 商品カードは写真とテキストを左右交互に配置する
• ライフスタイル写真は左右に散らして配置し、中央にリード文を置く
• PC でも章タイトルは中央揃えのままにする

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