--- version: alpha name: Fresh Sky Blue Green Juice Subscription LP description: 空色の青を主役に、緑の CTA と素材色の緑で健康感を出した食品メーカーの青汁通販 LP。淡いグレーの地に写真を大きく敷き、特長は POINT 番号つきで解説する。価格オファーのブロックを何度も繰り返す訴求型の構成。 colors: primary: '#049CE4' cta: '#1BAB43' on-cta: '#FFFFFF' secondary: '#E49C33' background: '#F8F8F7' background-alt: '#D6D7D9' surface: '#FEFEFE' text: '#343434' accent-1: '#248E5E' accent-2: '#E8335A' marker: '#FDFDB4' tint-1: '#DECBC4' dark-section: '#3D3D3D' tint-2: '#FEFCD5' cta-accessible: '#158835' secondary-accessible: '#A36A16' accent-2-accessible: '#E61E49' primary-accessible: '#037DB7' accent-1-accessible: '#228659' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.06em headline-lg: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px 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: 52px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px price-offer-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 900px badge-discount: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 80px label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 32px merit-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 52px point-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 90px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 340px faq-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 40px price-box-dark-head: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 200px --- # DESIGN.md — 空色×緑の爽やか青汁定期便 LP（Fresh Sky Blue Green Juice Subscription LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、ナチュラル - **キーワード**: 空色・野菜の緑・明るい朝・定期便オファー・写真主体・光のフレア - **地の質感**: 白〜淡グレーの地に、明るく高キーの写真と柔らかいレンズフレアを重ねる。紙の質感は使わない。 - **形**: 角丸の白カード、ピル型 CTA、斜めの写真区切り、文字の帯ラベル - **温度感**: やや寒色寄りの爽やかさ。暖色はオレンジとベージュで少しだけ足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#049CE4` | ブランドの空色。見出し文字・帯ラベル・FAQ バー | 6% | 画素の実測 | | `cta` | `#1BAB43` | 主 CTA の緑ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#E49C33` | 単品購入のサブボタン(オレンジ) | 1% | 画素の実測 | | `background` | `#F8F8F7` | ページの基本地色 | 30% | 画素の主要色に補正 | | `background-alt` | `#D6D7D9` | POINT 解説などのグレー地 | 20% | 画素の実測 | | `surface` | `#FEFEFE` | オファーやレビューの白カード | 15% | 画素の実測 | | `text` | `#343434` | 見出し・価格の濃いグレー文字 | 2% | 画素の実測 | | `accent-1` | `#248E5E` | 素材の深緑。こだわり見出し・帯 | 3% | 画素の実測 | | `accent-2` | `#E8335A` | 割引バッジの赤ピンク | 0% | 推定 | | `marker` | `#FDFDB4` | 強調語のレモン黄マーカー | 0% | 画素の実測 | | `tint-1` | `#DECBC4` | レビュー見出しのベージュ地 | 3% | 画素の実測 | | `dark-section` | `#3D3D3D` | 価格ボックスの濃グレーヘッダー | 1% | 画素の実測 | | `tint-2` | `#FEFCD5` | アレンジ枠の淡いクリーム地 | 2% | 画素の実測 | | `cta-accessible` | `#158835` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#A36A16` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#E61E49` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#037DB7` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#228659` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡グレーを交互に使い、写真セクションで区切る - 空色は見出し・帯ラベル・FAQ に使うブランド色。大きな面には使わない - 主 CTA は緑のみ。単品購入はオレンジにして主・副を色で分ける - 割引率は赤ピンクのギザギザバッジだけで見せる - 強調語は黄マーカーか空色/緑の帯に白抜きにする - 素材や製法の話は深緑でまとめ、ブランドの空色と分ける - `button-primary` は文字 `#FFFFFF` × 背景 `#1BAB43` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#158835`、4.56:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#E49C33` のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#A36A16`、4.54:1）を使う。 - `badge-discount` は文字 `#FFFFFF` × 背景 `#E8335A` のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E61E49`、4.52:1）を使う。 - `label-band` は文字 `#FFFFFF` × 背景 `#049CE4` のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#037DB7`、4.54:1）を使う。 - `point-badge` は文字 `#FFFFFF` × 背景 `#248E5E` のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#228659`、4.54:1）を使う。 - `faq-bar` は文字 `#FFFFFF` × 背景 `#049CE4` のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#037DB7`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV やセクションの大見出し | 明朝 | Shippori Mincho | 500 | 44px | 1.25 | 0.06em | | `headline-lg` | POINT の見出し(空色/緑) | 明朝 | Noto Serif JP | 500 | 32px | 1.3 | 0.08em | | `headline-md` | 悩みや中見出し・価格ボックス見出し | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.5 | 0.08em | | `headline-sm` | レビュー見出し・カード見出し | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | POINT 01 や英字の小見出し | 欧文サンセリフ | Montserrat | 500 | 13px | 1.2 | 0.2em | | `label-button` | CTA ボタンの文字・価格数字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.2 | 0.08em | - 大見出しは細めの明朝を空色・緑・濃グレーで大きく入れる - 本文はゴシックで、行間は広めの 1.8〜1.9 - 価格の数字はとても太い丸ゴシックで 60px 前後まで大きくする - 英字の小ラベル(POINT/RECIPE など)は字間を広くして見出しの上に置く - 注釈は 9px 前後でブロックの下にまとめる - 手書き風の書体はレビューのハッシュタグとレシピ名だけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長やレシピは写真と文章を左右交互に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - オファーブロックは白カードにして上部・中盤・下部の 3 回繰り返す - 写真は画面幅いっぱいに置き、その上に見出しを重ねる - 特典やメリットは番号付きの横長行を縦に 4 つ並べる - レビューはベージュの見出し帯とアレンジ枠つきの白カードを縦に積む - FAQ は空色バーを縦に並べるアコーディオンにする ## Elevation & Depth - 白カードには薄い影(0 2px 8px rgba(0,0,0,.12))をつける - CTA ボタンには下方向に少し影をつける - 写真の重なりは影ではなく斜めの区切りで見せる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 四角か角丸の写真。素材写真は切り抜いて余白に置く - **セクション境界**: 斜めカットの写真区切りと、角丸カードの境界 - CTA は完全なピル型 - 帯ラベルは角丸なしの四角 - POINT 番号は円形バッジにする - 特長カードの角は 24px で大きめに丸める ## Components - **主 CTA ボタン**（`button-primary`）: 緑のピル型ボタン。右端に矢印を置き、影をつける - **単品購入ボタン**（`button-secondary`）: オレンジのピル型ボタン。主 CTA より少し小さくする - **定期便オファーカード**（`price-offer-card`）: 商品写真・通常価格・特大の初回価格・割引バッジ・特典 2 行を 1 枚の白カードにまとめる - **割引ギザギザバッジ**（`badge-discount`）: 赤ピンクの星形に白文字で割引率を入れる - **白抜き帯ラベル**（`label-band`）: 空色の四角帯に白文字。見出しを 1 行ずつ帯にのせる - **番号付きメリット行**（`merit-row`）: 左に空色の番号タブ、右は白地に枠線。強調語には黄マーカーを引く - **POINT 円バッジ**（`point-badge`）: 緑の円に英字の POINT と番号、短い悩み語を入れる - **お客様の声カード**（`review-card`）: 上部はベージュ地に人物写真と見出し。下部は感想とクリーム地のアレンジ枠 - **FAQ バー**（`faq-bar`）: 空色のバーに白文字の質問、右端に＋ - **単品価格ボックス**（`price-box-dark-head`）: 濃グレーのヘッダー付き白箱。通常価格＋送料を並べ、下にオレンジのボタンを置く ## Do's and Don'ts **Do** - 価格オファーは同じデザインで 3 回繰り返す - 強調語は黄マーカーか色帯にして、1 文に 1〜2 箇所までにする - 写真は明るく高キーにし、空色の光やフレアを足す - データはグラフで見せ、空色・オレンジ・濃グレーで色を分ける - 注釈はブロックの直下に小さくまとめる **Don't** - 主 CTA に緑以外の色を使わない - 暗い背景を広い面積に使わない(製法パートの一部だけにとどめる) - 見出しを太い黒ゴシックだけで組まない - 角丸と四角の帯を混ぜて乱雑にしない - 空色と深緑を同じ見出しの中に混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品とひと言の価値を伝える）: 青空背景に手書き風の白いキャッチを置き、商品箱を大きく見せる。下に 3 つの丸バッジで特長を並べる 2. **定期便オファー**（最初に価格と特典を見せる）: 白カードに特大の価格、割引バッジ、緑の CTA、特典 2 行、単品価格ボックスを入れる 3. **悩みの提起**（毎日の食事の悩みに共感してもらう）: 和食の写真を斜めに区切って重ね、悩みを白い帯の短い文で 3 つ並べる 4. **ブランド紹介**（食品メーカーとしての信頼を伝える）: 大きな明朝見出しと光の写真。最後は空色地のラベルで締める 5. **特長 POINT 01〜03**（成分の価値を説明する）: グレー地に POINT 番号と明朝見出しを置く。素材の切り抜き写真と色帯のハイライトを使い、棒グラフも入れる 6. **凝縮・利用シーン**（飲む場面を想像してもらう）: 注ぐ瞬間の大写真に黄色の手書き見出し。続けて女性が飲む写真を置く 7. **定期便メリット**（定期便を選ぶ理由を示す）: 空色の吹き出し見出しの下に、番号付きの行を 4 つ並べる 8. **原料・製法のこだわり**（品質を裏付ける）: 畑の写真と深緑の明朝見出し。角丸カードに地図と工程図を入れる 9. **栄養充足**（一食分の価値を数字で示す）: 空色の大見出しとレーダーチャートを使う 10. **味・飲み方**（飲みやすさと手軽さを伝える）: 白い渦の背景に空色の見出し。手順 2 枚を空色の枠のカードに入れる 11. **特典・アレンジレシピ**（続ける楽しさを伝える）: 写真と文章を左右交互に置く。レシピ名は手書き風の文字を枠で囲み、空色のピル型サブボタンをつける 12. **お客様の声**（第三者の評価を見せる）: ベージュの見出し帯がついたカードを 3 枚縦に並べる 13. **最終オファー**（購入を後押しする）: 冒頭のオファーとメリット行、単品ボックスをそのまま繰り返す 14. **よくある質問**（不安を解消する）: 空色の Q&A の大見出しの下に、空色のアコーディオンバーを並べる ## Imagery - 写真は自然光の白く明るいキッチンや食卓。浅い被写界深度で撮る - 緑の飲み物のグラスを主役にし、注ぐ瞬間や泡も見せる - 野菜・粉末・蜜などの素材は切り抜いて余白に置く - 空色のレンズフレアや虹色の光を重ねる - 工程図はシンプルなフラットイラスト(緑の葉・矢印・クリーム色の円) - 人物は飲む・持つなどのナチュラルな日常のしぐさで撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 750px 前後の SP 幅カラムを置き、左右は淡グレーで埋める - PC では大写真をカラムの幅に収め、見出しサイズは 1.3 倍程度にとどめる - メリット行やレシピは PC でも同じ構成のまま余白だけ広げる - CTA は PC で幅 400px 程度に固定する ## 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-92a6b337`（元 LP の URL から採番） - **元 LP**: https://www.sbotodoke.com/shop/lp/asa_aojiru01.aspx - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。