DESIGN.md — 桃色×橙グラデのフルーツ福袋 LP（Fruity Gradient Seasonal Gift Bag LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、上品・高級、ポップ・元気
• キーワード: フルーツグラデーション・粒状ノイズ・アーチ枠・波形境界・欧文セリフ・限定ギフト
• 地の質感: グラデーション地に細かいノイズ（グレイン）をかけ、紙のようなざらつきを出す
• 形: 上辺だけ大きく丸いアーチ枠、ゆるい波形の境界、角丸カード、ピル型ボタン
• 温度感: 暖色寄り。オレンジからピンクへ移ろう温かく甘い印象

Colors

• 地はオレンジ→ピンク→ピーチの縦グラデーションをセクションごとに切り替える
• 全面にうっすらノイズをかけ、ベタ塗りの平板さを避ける
• 商品名・小見出しは赤ピンク、番号と欧文はピンク→オレンジのグラデ文字
• 購入案内は朱赤の濃い地に切り替え、白文字で締める
• 本文は黒ではなく焦げ茶で柔らかく見せる
• CTA は赤ピンクのピル。白い丸に矢印アイコンを添える
• button-primary は文字 #FFF0F0 × 背景 #F0405A のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC112F、4.56:1）を使う。
• price-box は文字 #FDFDFC × 背景 #FD8204 のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B65D01、4.53:1）を使う。
• step-badge は文字 #E83B51 × 背景 #FEF3F3 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB1A32、4.6:1）を使う。
• highlight-copy は文字 #FDFDFC × 背景 #FD8204 のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B65D01、4.53:1）を使う。

Typography

• 欧文は細身でコントラストの高いセリフ体で、上品なギフト感を出す
• 欧文のアイテム名は弧や波に沿わせて斜めに配置する
• 番号は大きなセリフ数字をグラデーションで塗る
• 和文見出しは明朝、本文はゴシックにする
• 本文は行間 2.0 前後でゆったり組む
• スペックの数値はピル枠ラベルに入れて見出しの下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。補足写真だけ 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• アイテムごとに『番号＋欧文名→アーチ写真→和文商品名→ラベル→説明→スペックカード』を繰り返す
• 写真は片側の画面端まで寄せ、反対側の角だけ大きく丸める
• 情報カードは半透明の白地に角丸で重ねる
• 購入手順は大きな角丸パネルの中に、ステップ番号と画面図を交互に並べる
• 販売期間は大きな円形・アーチ形の白パネルで中央揃えにする

Elevation & Depth

• 影はほぼ使わず、色面とノイズで奥行きを出す
• 写真枠は 2〜3px の淡い色付き外枠を少しずらして重ね、浮いたように見せる
• グレーのピル型の日付表示だけ下にやわらかい影を付ける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 120px。ボタンはピル型。
• 写真の切り抜き: 上辺の片側または両側を大きく丸めたアーチ形。楕円形やずらした長方形もある
• セクション境界: ゆるやかな波形のカーブ。山形のアーチや大きな円でも区切る
• アーチ写真にはオフセットした色付きの細枠を添える
• カードは角丸 16px 前後にする
• ボタンとラベルは完全なピル型にする
• 購入期間の白パネルは画面幅を超える大きな円にする

Components

• 購入導線ピルボタン（button-primary）: 赤ピンクのピル型ボタン。右端に白丸に入った下向き矢印を付ける
• 白ピルのアンカーボタン（button-anchor-light）: FV に置く白地のピル。文字は焦げ茶、右に赤い丸矢印を付ける
• 番号付きアイテム見出し（item-number-heading）: 弧状の欧文名と大きなグラデ番号を組み合わせ、波形の帯の上に置く
• アーチ写真枠（arch-photo）: 片側の角だけを大きく丸めた写真枠。淡色の外枠をずらして重ねる
• サイズラベル（spec-pill）: 細い赤ピンクの線で囲んだ小さなピル。容量やサイズを入れる
• スペック・内容カード（info-card）: 半透明の白い角丸カード。赤い丸の箇条書きと細い区切り線で構成する
• 価格ボックス（price-box）: 上下に白い細線を引き、ピンク→オレンジのグラデ帯に白い大きなセリフ数字で価格を出す
• ステップ番号（step-badge）: 赤いセリフの『Step.』に、赤線の丸で囲んだ数字を並べる
• 帯付きコピー（highlight-copy）: 写真の上に、オレンジ〜赤のベタ帯を行ごとに敷いて白い明朝コピーを載せる
• かぎ括弧枠（bracket-box）: 四隅だけを茶色の細線で囲んだおすすめボックス。中は中央揃え

Do's and Don'ts

Do - グラデーション地にはグレインのノイズを必ず重ねる - アイテムの紹介は同じ構成で番号順に繰り返す - フルーツ（柑橘・桃・苺・マンゴー）のイラストを画面端からはみ出させて配置する - 欧文の細いセリフ体と和文の明朝で上品さを保つ - 購入期間・方法は濃い朱赤の地に切り替えて目立たせる

Don't - 真っ黒な文字や寒色を主役にしない - 四角い写真を角丸なしで並べない - 太いゴシックの見出しを多用しない - 強いドロップシャドウを付けない - 単色のベタ地だけでセクションを作らない

Page Structure

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

1. ファーストビュー（限定セットの世界観と内容を一目で見せる）: オレンジのノイズ地に細い欧文の大タイトルを置き、下にアーチ枠の集合写真とフルーツのイラストを配置する
2. コンセプトと価格（価値と価格・発売日を伝える）: ピンクのグラデーション地に白い明朝コピーを置き、白線で挟んだグラデの価格帯と、大きなセリフ数字の日付を並べる
3. ラインナップ導入（内容紹介の開始を示す）: 波形の帯に、小さな欧文と大きな欧文見出しを中央揃えで置く
4. アイテム紹介 01〜04（セット内容を 1 点ずつ詳しく紹介する）: 番号見出し→アーチ写真→明朝の商品名→ピルラベル→本文→白カードの順。地の色をアイテムごとに変える
5. 使い方（飲み方を手順で見せる）: 上辺がアーチ形のグラデパネルに、白抜きの番号と線画風のイラストを縦に並べる
6. 着用・活用例（グッズの使い方を想像させる）: 白背景の写真をずらして重ね、間に赤い欧文ラベルを置く
7. 作家紹介（デザインの付加価値を示す）: 白い角丸カードに細線の見出し、グラデ文字の名前、グラデのピルボタンを置く。角に円形に回る欧文を添える
8. 情緒コピー（利用シーンへの共感を生む）: 丸く切り抜いた写真の上に、帯付きの明朝コピーを段違いに置く
9. 購入方法（オンライン購入の条件を伝える）: 人物イラストを山形の境界に乗せ、朱赤の地に白文字で中央揃えにする。白線で囲んだ会員登録の誘導枠を置く
10. 購入手順（操作手順をステップで案内する）: 淡ピンクの大きな角丸パネルに、ステップ番号・白縁の画面キャプチャ・説明を縦に繰り返す
11. 販売期間（販売期間と条件を明示する）: 大きな円形の白パネルに、マーカー付きの見出し、線で挟んだ小見出し、太いセリフ数字の日付を置く
12. 店頭販売・注意書き（店頭での販売情報と注意事項を伝える）: 円形パネルと赤い CTA の下に、半透明の角丸カードで注意書きをまとめる
13. フッター（SNS への誘導）: 紫寄りのピンク地に、線で挟んだ細い欧文見出しと白い SNS アイコンを置く

Imagery

• 商品は白い円柱の台に載せ、オレンジ〜コーラルのグラデ背景でスタジオ撮影する
• 影はやわらかく、暖色の光で甘い雰囲気を出す
• フルーツのイラストはノイズ質感のフラットなベクターで描き、画面端で一部を切る
• 人物は後ろ姿のフラットイラスト。グラデとノイズで仕上げる
• 着用例は白背景のシンプルな写真で、柄の色を際立たせる
• 手順は線と淡い塗りのシンプルなイラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP の縦長構成を中央に固定し、左右はグラデーション地で埋める
• PC ではアイテム紹介を写真と文の 2 カラムにしてもよい
• 欧文の display は PC で 1.5〜2 倍に拡大する
• 円形パネルは PC で最大幅 720px 程度に収める

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