--- version: alpha name: Fruity Gradient Seasonal Gift Bag LP description: オレンジ・ピーチ・ピンクのざらついたグラデーション地に、細身の欧文セリフと明朝見出しを合わせた、華やかでやさしいドリンクブランドの限定セット販売 LP。アーチ形の写真枠、波形のセクション境界、フルーツのイラストで季節感と特別感を出している。 colors: primary: '#E83B51' secondary: '#FD8204' cta: '#F0405A' on-cta: '#FFF0F0' background: '#F3CED3' background-alt: '#FFD4A6' dark-section: '#E55B4D' surface: '#FEF3F3' tint-1: '#F8CFCD' text: '#503A23' on-dark: '#FDFDFC' accent-1: '#C46174' line: '#8A6A5A' cta-accessible: '#DC112F' secondary-accessible: '#B65D01' primary-accessible: '#DB1A32' typography: display: fontFamily: Italiana fontSize: 56px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Playfair Display fontSize: 64px fontWeight: 500 lineHeight: 1.0 headline-md: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Italiana fontSize: 30px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.03em headline-sm: fontFamily: DM Serif Display fontSize: 34px fontWeight: 700 lineHeight: 1.2 body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 8px md: 16px lg: 120px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-anchor-light: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px item-number-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 140px arch-photo: rounded: '{rounded.lg}' height: 340px spec-pill: textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px price-box: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 110px step-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px highlight-copy: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px bracket-box: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 250px --- # DESIGN.md — 桃色×橙グラデのフルーツ福袋 LP（Fruity Gradient Seasonal Gift Bag LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: やさしい・柔らかい、上品・高級、ポップ・元気 - **キーワード**: フルーツグラデーション・粒状ノイズ・アーチ枠・波形境界・欧文セリフ・限定ギフト - **地の質感**: グラデーション地に細かいノイズ（グレイン）をかけ、紙のようなざらつきを出す - **形**: 上辺だけ大きく丸いアーチ枠、ゆるい波形の境界、角丸カード、ピル型ボタン - **温度感**: 暖色寄り。オレンジからピンクへ移ろう温かく甘い印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E83B51` | 商品名・見出しの赤ピンク | 2% | 画素の実測 | | `secondary` | `#FD8204` | 番号・欧文の差し色オレンジ | 1% | 画素の実測 | | `cta` | `#F0405A` | 購入導線ボタン | 0% | 推定 | | `on-cta` | `#FFF0F0` | ボタン文字 | 0% | 画素の実測 | | `background` | `#F3CED3` | ピンク系の基本地 | 25% | 画素の実測 | | `background-alt` | `#FFD4A6` | ピーチ系の地 | 15% | 画素の実測 | | `dark-section` | `#E55B4D` | 購入案内の朱赤地 | 12% | 画素の実測 | | `surface` | `#FEF3F3` | 情報カード・円形パネル | 14% | 画素の実測 | | `tint-1` | `#F8CFCD` | 手順ブロックの淡ピンク | 5% | 画素の実測 | | `text` | `#503A23` | 本文・日付の焦げ茶 | 2% | 画素の実測 | | `on-dark` | `#FDFDFC` | 濃い地上の白文字 | 2% | 画素の実測 | | `accent-1` | `#C46174` | フッター寄りの紫ピンク | 4% | 画素の実測 | | `line` | `#8A6A5A` | 区切り線・枠線 | 0% | 推定 | | `cta-accessible` | `#DC112F` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#B65D01` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#DB1A32` | AA を満たす補正値（計算） | | 計算 | - 地はオレンジ→ピンク→ピーチの縦グラデーションをセクションごとに切り替える - 全面にうっすらノイズをかけ、ベタ塗りの平板さを避ける - 商品名・小見出しは赤ピンク、番号と欧文はピンク→オレンジのグラデ文字 - 購入案内は朱赤の濃い地に切り替え、白文字で締める - 本文は黒ではなく焦げ茶で柔らかく見せる - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のタイトル欧文 | 欧文セリフ | Italiana | 400 | 56px | 1.0 | 0.02em | | `headline-lg` | アイテム番号 | 欧文セリフ | Playfair Display | 500 | 64px | 1.0 | 0.0em | | `headline-md` | 商品名・セクション和文見出し | 明朝 | Shippori Mincho | 600 | 30px | 1.4 | 0.05em | | `accent` | 弧状に流れる欧文アイテム名 | 欧文セリフ | Italiana | 400 | 30px | 1.1 | 0.03em | | `headline-sm` | 日付・価格の太い数字 | 欧文セリフ | DM Serif Display | 700 | 34px | 1.2 | 0.0em | | `body-md` | 商品説明本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.05em | | `note` | 注意書き | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.8 | 0.03em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.08em | - 欧文は細身でコントラストの高いセリフ体で、上品なギフト感を出す - 欧文のアイテム名は弧や波に沿わせて斜めに配置する - 番号は大きなセリフ数字をグラデーションで塗る - 和文見出しは明朝、本文はゴシックにする - 本文は行間 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-294c04f8`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/happinessbag2026/index.html?_gl=1*1b1jmvi*_gcl_au*MTQwNzY0ODE0My4xNzU2ODkwMDc0*_ga*OTQ1NzE2Nzk3LjE3NTY4OTAwNzQ.*_ga_F4SYD729GY*czE3NjIzMzI5OTgkbzYkZzEkdDE3NjIzMzI5OTgkajYwJGwwJGgw&_ga=2.212159572.1904302740.1762332998-9457167 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。