--- version: alpha name: Yellow Wave Kitchen Protein LP description: 鮮やかな黄色と生成りの地を有機的な波形で切り替え、黒いパッケージ写真と手描き風の線画を重ねた食品LP。大きな欧文見出しに小さな和文ラベルを添え、黄色マーカーで要点を目立たせる、明るく親しみやすいカフェ風のトンマナ。 colors: primary: '#FED603' background: '#FBF7EC' background-alt: '#FBF1D2' surface: '#FFFFFF' text: '#0E0D0E' dark-section: '#020202' on-dark: '#FEFEFE' accent-1: '#E8763A' marker: '#FEDF01' line: '#0E0D0E' accent-2: '#6B4E33' text-muted: '#686868' cta: '#FEFEFE' on-cta: '#020202' typography: display: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.04em headline-lg: fontFamily: Jost fontSize: 34px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Jost fontSize: 30px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em accent: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Jost fontSize: 16px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.04em rounded: sm: 2px md: 8px lg: 12px 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}' button-view-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px heading-en-lined: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px label-black-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px feature-band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 56px grid-paper-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1100px info-box-yellow: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 460px check-step: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 60px text-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 10px --- # DESIGN.md — 黄色の波形と線画の食品プロテインLP（Yellow Wave Kitchen Protein LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ポップ・元気、ナチュラル、親しみ・手作り感、シンプル・ミニマル - **キーワード**: 黄色の波形・生成り地・線画イラスト・欧文見出し・黄色マーカー・黒パッケージ - **地の質感**: 生成りのフラット地に、薄い方眼紙・手描きの食材線画・紙クリップなどアナログな質感を重ねる - **形**: 有機的な曲線の波形で面を区切り、帯見出しは斜めに傾けた黄色の短冊 - **温度感**: 暖色寄り。黄色と生成りで朝食のような明るい温かさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FED603` | ブランド黄色の面・波形 | 20% | 画素の実測 | | `background` | `#FBF7EC` | 生成りの地 | 30% | 画素の実測 | | `background-alt` | `#FBF1D2` | 淡いクリーム地 | 9% | 画素の実測 | | `surface` | `#FFFFFF` | 方眼紙カード・フッター白地 | 16% | 画素の実測 | | `text` | `#0E0D0E` | 見出し・本文の黒 | 4% | 画素の主要色に補正 | | `dark-section` | `#020202` | 黒ラベル帯 | 2% | 画素の実測 | | `on-dark` | `#FEFEFE` | 黒帯上の白文字 | 0% | 画素の実測 | | `accent-1` | `#E8763A` | チェックマーク・注意文の橙 | 0% | 推定 | | `marker` | `#FEDF01` | 本文の黄色マーカー下線 | 1% | 画素の主要色に補正 | | `line` | `#0E0D0E` | 見出し左右の細罫線 | 0% | 画素の主要色に補正 | | `accent-2` | `#6B4E33` | 木目・焼き色の茶 | 5% | 画素の主要色に補正 | | `text-muted` | `#686868` | 注釈・フッターの灰 | 0% | 画素の実測 | | `cta` | `#FEFEFE` | 白いピル型ボタン | 0% | 画素の実測 | | `on-cta` | `#020202` | ボタン文字・枠 | 0% | 画素の実測 | - 地は生成りと黄色を波形で交互に切り替える - 黄色は面・帯見出し・マーカーに使い、文字色には使わない - 文字は基本黒。黒帯には白文字 - 橙はチェックと注意文だけに限定 - 写真の黒パッケージと黄色で強いコントラストを作る - フッターは白地にして本編と区切る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大型欧文ロゴ見出し | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.04em | | `headline-lg` | セクションの欧文見出し | 欧文サンセリフ | Jost | 500 | 34px | 1.2 | 0.02em | | `headline-md` | フレーバー名の欧文大見出し | 欧文サンセリフ | Jost | 500 | 30px | 1.1 | 0.04em | | `headline-sm` | 特長の帯見出し・手順見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.05em | | `body-md` | 中央揃えの本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.0 | 0.08em | | `accent` | 欧文見出し上の小さな和文ラベル・番号の手書き数字 | ゴシック | Noto Sans JP | 400 | 11px | 1.4 | 0.15em | | `note` | 注釈・フッター | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.05em | | `label-button` | ボタンの欧文ラベル | 欧文サンセリフ | Jost | 500 | 16px | 1.0 | 0.04em | - 見出しは大きな欧文+上に小さな和文ラベルの2段 - 欧文見出しの左右に細い罫線を伸ばす - 本文は中央揃え、行間2.0でゆったり - 要点の一文に黄色マーカー下線 - 特長番号は手書き風の細い欧文数字を薄く重ねる - フレーバー名は欧文大文字2行+和文名、横に太い縦線 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は左右に余白を取った横長配置 - フレーバー紹介はパッケージ写真と名前を左右交互 - 特長は帯見出し→写真→本文の繰り返し - 方眼紙カードは画面幅いっぱいでわずかに傾ける - 装飾線画は端からはみ出して配置 ## Elevation & Depth - パッケージ写真に柔らかいドロップシャドウ - 方眼紙カードに薄い影で紙が浮いた表現 - ボタンは影を少しつけて浮かせる - それ以外はフラット ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸ほぼなしの横長矩形。商品は切り抜きで食材と重ねる - **セクション境界**: 黄色と生成りの大きな有機的な波形カーブ - 帯見出しは少し傾けた黄色の短冊 - 情報ボックスは黄色の太枠+角丸 - ボタンは黒細線のピル型 - チェックボックス型アイコンで手順を表示 ## Components - **ピル型詳細ボタン**（`button-view-more`）: 白地に黒細線のピル型。欧文ラベルと右矢印 - **罫線付き欧文見出し**（`heading-en-lined`）: 小さな和文ラベルの下に大きな欧文、左右に細い罫線 - **黒帯ラベル**（`label-black-band`）: FV上部の告知を黒帯に白文字で載せる - **黄色短冊の番号見出し**（`feature-band-heading`）: 傾いた黄色帯に太字見出し、左上に手書き風番号 - **方眼紙カード**（`grid-paper-card`）: 白い方眼紙を少し傾け、紙クリップ装飾を付ける - **黄色枠の説明ボックス**（`info-box-yellow`）: 黄色の太枠角丸。罫線付き見出し、本文、橙の注意文、写真 - **チェック付き手順**（`check-step`）: 黄色の小ラベル+橙チェックアイコン+太字の手順文 - **黄色マーカー**（`text-marker`）: 本文の要点に下半分だけ黄色を敷く ## Do's and Don'ts **Do** - 黄色と生成りを波形で大胆に切り替える - 食材の線画を余白に散らして手作り感を出す - 見出しは欧文大+和文小の組み合わせにする - 本文は中央揃えで短く改行する - 商品写真は切り抜いて食材写真と重ねる **Don't** - 黄色を文字色に使わない - 直線的な色面の区切りにしない - 寒色やビビッドな別の色を足さない - 本文を長い段落で詰めない - 装飾に重い影やグラデーションを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（再販告知と商品・味の提示）: 黄色波形の地に黒帯ラベル、大型欧文商品名、2袋の切り抜きと料理写真、下に2フレーバー名を縦線で区切る 2. **開発者の想い**（商品開発の背景を伝える）: 線画料理イラスト、罫線付き欧文見出し、中央揃え短文にマーカー、横長の商品棚写真 3. **お召し上がり方**（飲み方を2通り示す）: 傾いた方眼紙カードにチェック手順2つ、線画のボトルとカップ、手書き風吹き出し 4. **作り方**（分量と注意点の説明）: 黄色太枠ボックスに本文、橙の注意文、マスキングテープ風の写真 5. **特長**（3つの強みを提示）: 生成り地に番号付き黄色短冊見出し→横長写真→マーカー入り本文を3回繰り返す 6. **フレーバー紹介**（各味の魅力と詳細誘導）: 黄色と生成りの面で味ごとに切り替え、パッケージと料理写真、欧文名、本文、ピル型ボタン 7. **フッター**（サイト導線と規約）: 白地に欧文ナビ4列、SNSアイコン、規約リンク、ロゴ、コピーライト ## Imagery - 料理写真は木のテーブルやグレーの石の上で暖色光の真俯瞰・斜め俯瞰 - 商品パッケージは黒基調で切り抜き、影を付けて浮かせる - コーンや野菜、クラッカーなど食材を切り抜いて周囲に散らす - 食材や器のモノクロ線画を余白に大きく配置 - 写真の上に手描きの湯気・きらめき線を添える - 紙クリップやマスキングテープでアナログ感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため SP 基準で推奨を示す - PC では本文幅を 960px 程度に収め、波形の背景は全幅に広げる - 特長は写真と本文を左右 2 カラムで交互に配置 - フレーバー紹介は 2 列で横に並べる - 欧文見出しは 56〜72px まで拡大 - フッターのナビは 1 行の横並びにする ## 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-a96ecddd`（元 LP の URL から採番） - **元 LP**: https://ultora.co.jp/shop/pages/soup_protein?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。