--- version: alpha name: Warm Cream Organic Green Juice Story LP description: クリーム色の地に若草グリーンと焦げ茶の文字を合わせた、読み物型の健康飲料 LP。縦書きの見出し、吹き出し、手描き線のイラスト、黄色い丸ラベルで会話するように話を進め、悩みから成分、生産地の順に納得してもらう構成。 colors: primary: '#699F19' background: '#FFFFFF' background-alt: '#FFFFFF' dark-section: '#F6EFDF' text: '#5A3418' secondary: '#FDDF67' marker: '#FFE08A' tint-1: '#FCE6CD' tint-2: '#DAEDA7' accent-1: '#DAF3BA' line: '#6B4A2E' accent-2: '#B59C6E' accent-3: '#E0303A' typography: display: fontFamily: Zen Maru Gothic fontSize: 48px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 72px fontWeight: 800 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px speech-bubble-worry: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 70px qa-bubble: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 90px point-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 60px voice-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 230px stat-big-number: textColor: '{colors.primary}' typography: '{typography.accent}' height: 140px comparison-bar: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 28px outline-pill-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px check-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 36px --- # DESIGN.md — 生成り×若草色のやさしい青汁ストーリーLP（Warm Cream Organic Green Juice Story LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、信頼・誠実 - **キーワード**: 生成り・若草色・縦書き・吹き出し・手描きイラスト・対話型ストーリー - **地の質感**: 無地のクリーム面と白い面を交互に置く。写真は自然光で淡い。紙のようにフラットな質感。 - **形**: 角丸の大きいカード、片側の角だけ尖った吹き出し、黄色い丸ラベル、円形に切り抜いた写真。 - **温度感**: 暖かい。ベージュや卵色の暖色が基調で、グリーンは鮮度と健康を表す差し色。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#699F19` | 強調見出しと数字のグリーン | 2% | 画素の実測 | | `background` | `#FFFFFF` | メインのクリーム地 | 26% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白いセクション面 | 28% | 画素の実測 | | `dark-section` | `#F6EFDF` | ページ外側のベージュ帯 | 8% | 画素の実測 | | `text` | `#5A3418` | 見出しと本文の焦げ茶 | 3% | 推定 | | `secondary` | `#FDDF67` | 黄色い丸ラベル | 2% | 画素の実測 | | `marker` | `#FFE08A` | 黄色のマーカー下線 | 0% | 推定 | | `tint-1` | `#FCE6CD` | 淡いピーチの吹き出し | 4% | 画素の実測 | | `tint-2` | `#DAEDA7` | 淡い黄緑の回答吹き出し | 4% | 画素の実測 | | `accent-1` | `#DAF3BA` | 円グラフの薄緑 | 2% | 画素の実測 | | `line` | `#6B4A2E` | 吹き出しとカードの焦げ茶線 | 0% | 推定 | | `accent-2` | `#B59C6E` | ゴールドの注釈テキスト | 0% | 画素の実測 | | `accent-3` | `#E0303A` | 否定リストの赤い×印 | 0% | 推定 | - クリーム地と白地を交互に置き、話の段落を区切る。 - 文字は黒ではなく焦げ茶にする。 - グリーンは結論の見出し・数値・成分名に限って使う。 - 黄色は丸ラベルとマーカーだけに使う。 - 悩みや質問はピーチの吹き出し、回答や解決は黄緑の吹き出しで色を分ける。 - ページ外側は一段濃いベージュにし、中央の本文カラムを浮かせる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | 丸ゴシック | Zen Maru Gothic | 900 | 48px | 1.1 | 0.05em | | `headline-lg` | グリーンの結論見出し（縦書き・横書き） | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.4 | 0.08em | | `headline-md` | ポイント見出しとセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 21px | 1.5 | 0.05em | | `body-lg` | つなぎの語り文（中央揃え） | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.8 | 0.05em | | `body-md` | 吹き出しとカードの本文 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.8 | 0.04em | | `accent` | 大きな数字・Voice・Point の欧文 | 欧文サンセリフ | Montserrat | 800 | 72px | 1.0 | 0.0em | | `note` | 出典と注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `label-button` | 丸ラベルと吹き出しのラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.3 | 0.05em | - 全体を太めの丸ゴシックにして、柔らかく親しみのある印象にする。 - 重要な見出しは縦書きにし、焦げ茶とグリーンの 2 行を組み合わせる。 - 本文はほぼ中央揃えで、1 行 15〜18 文字の短い行で語りかける。 - 数値は欧文太字で特大にし、単位を小さく添える。 - 強調したい語句には黄色マーカーを敷く。 - 文字の傍点は小さなグリーンの点で付ける。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。左右の吹き出しを交互にずらして配置する - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 本文カラムの外側にベージュの余白を 8px ほど見せる。 - 吹き出しは画面端まで伸ばし、左右交互に置く。 - セクションの間は下向きの三重シェブロンや点線でつなぐ。 - 写真は左右どちらかに寄せて、少し重ねてずらす。 - 大きなセクション面は上側だけ角丸のパネルにする。 ## Elevation & Depth - 影はほぼ使わない。フラットな面と線で区切る。 - 商品写真にだけ柔らかい落ち影を付ける。 - 立体感は面の色差で出す。 ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 角丸の四角か円形に切り抜く。風景写真は幅いっぱいに置き、端をフェードさせる。 - **セクション境界**: 上端が大きく角丸になったパネルでつなぐ。直線の区切りは使わない。 - 吹き出しは片側をピル型にし、尻尾を付ける。 - ラベルは黄色の円に下向きの尻尾を付ける。 - Point 番号は黄色の多角形バッジに入れる。 - 成分名は細い線のピル枠で囲む。 ## Components - **黄色丸ラベル**（`label-circle`）: 直径約 80px の黄色い円に下向きの尻尾を付け、場面転換の短い語を入れる。 - **悩み吹き出し**（`speech-bubble-worry`）: 白またはピーチの角丸吹き出しを焦げ茶の線で囲み、横に円形の人物イラストを添える。 - **Q&A吹き出し**（`qa-bubble`）: 大きな Q（ピーチの面）と A（黄緑の面）を左に置いた横長の吹き出し。 - **Point番号バッジ**（`point-badge`）: 黄色の多角形に Point と数字を入れ、その下に見出しを置く。 - **お客様の声カルーセル**（`voice-bubble`）: クリーム色の大きな円の中に感想を書く。左右に矢印を付け、小さな円の尻尾を添える。 - **特大数値**（`stat-big-number`）: 放射線の飾りの中に、グリーンの特大数字と小さな単位、吹き出しラベルを置く。 - **比較棒グラフ**（`comparison-bar`）: 自社素材の棒をグリーンのグラデーションのピル型で一番長く描き、他の素材は淡いクリームとピンクで描く。 - **線囲み成分カード**（`outline-pill-card`）: 焦げ茶の線のピル型枠の上端に見出しを載せ、成分の説明を書く。 - **おすすめチェックリスト**（`check-list`）: 線囲みの角丸カードを縦に並べ、それぞれにグリーンのチェックと一文を入れる。 ## Do's and Don'ts **Do** - 語りかける短い文を中央揃えで積み重ね、ストーリーとして読ませる。 - 悩みは左右交互の吹き出しと人物イラストで見せる。 - 結論の見出しはグリーンの縦書きにする。 - 数値は円グラフ・棒グラフ・特大数字で見せる。 - クリーム地と白地を交互に置き、角丸パネルでつなぐ。 **Don't** - 純黒の文字や強いコントラストの配色は使わない。 - 角張ったボタンや直線の区切りを多用しない。 - グリーンを背景の広い面に使わない（差し色にとどめる）。 - 派手な影やグラデーションの装飾は付けない。 - 1 行の長い文章を左揃えで詰めて組まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（初めての人でも安心できることを伝える）: 縦書きの特大キャッチと商品パッケージを置き、背景に斜線の帯、手前に飲用写真と吹き出しを重ねる。 2. **ブランド紹介**（何の悩みを解決する商品かを示す）: ロゴを中央に置き、縦書きで悩みのキーワードを並べ、食べ物の写真を添える。 3. **悩みの提起**（読者が共感できる場面を見せる）: 左右交互の吹き出しと円形の人物イラストを 6 つ並べる。 4. **コンセプト**（食事に近い自然さを打ち出す）: 黄色丸ラベルから縦書きの見出しへつなぎ、水彩風のグラスのイラストを添える。 5. **お客様の声・味**（飲みやすさを証明する）: 円形の声カード、写真のコラージュ、円グラフの数値、返金保証の吹き出しで構成する。 6. **疑問への回答**（栄養面の疑問を解消する）: 大きなはてな付きの黄色い円、Q&A吹き出し、特大数値、栄養素の円を放射状に並べた図。 7. **素材の秘密**（主原料の価値を伝える）: 放射線の上に素材のイラストを置き、成分表の図、縦書きの結論、×印リストで見せる。 8. **3つの魅力**（優位性をデータで示す）: Point バッジを付け、レーダーチャート、比較棒グラフ、成分ピルで説明する。 9. **生産地ストーリー**（希少性と産地の信頼を伝える）: 円形の手元写真、地図のシルエット、風景写真を使い、循環フロー図で示す。 10. **ブランドの想い**（誠実さを印象づける）: ロゴ、グリーンの見出し、畑に置いた商品写真、生産者の写真 3 枚を並べる。 11. **まとめ・おすすめ**（対象者を明確にして購入へ促す）: 黄色丸ラベルを付け、斜線で挟んだ見出しとチェックリストで構成する。 12. **開発者ストーリー**（共感で締めくくる）: 線画イラストと吹き出しを置き、最後に縦書きのメッセージと商品画像を配置する。 ## Imagery - 人物は細い焦げ茶の線画に淡いパステルで塗る。円形のフレームに入れることが多い。 - 食べ物や素材は柔らかい水彩・色鉛筆風のイラストで描く。 - 写真は自然光で明るく、淡い緑のボケ背景にした生活シーンにする。 - 葉を手のひらに載せたカットや畑の風景で、オーガニック感を出す。 - 放射線、点線、手描きの矢印などのラフな装飾を添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版も約 375px 幅の SP カラムを中央に置く構成。 - PC の左右の余白はベージュ地にし、白い大きな欧文ロゴを透かしのように繰り返す。 - PC の左右固定エリアにはロゴ・購入ボタン・QR コードを置く。 - 要素の比率は SP と同じままにし、カラムの幅は広げない。 ## 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-7a918446`（元 LP の URL から採番） - **元 LP**: https://www.teinei.co.jp/lp/bd/sp/537/aa/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。