--- version: alpha name: Navy and Milk Beige Flavor Protein LP description: 深い紺の地に、シズル感のあるミルクティー写真と白い細長サンセリフの大きな英字を重ねた、ドリンク系プロテインの単品 LP。途中にミルクベージュの円弧セクションを挟んで価格を見せ、最後は成分表カードで締める。 colors: primary: '#2B3364' on-primary: '#EEF2F9' secondary: '#E6D1B2' text: '#3D310F' cta: '#F6FDFD' on-cta: '#1A1F34' marker: '#F4E46B' surface: '#E9EAEE' background-alt: '#FAFBFC' background: '#FFFFFF' text-body: '#393A3D' accent-1: '#565E88' line: '#C8CBDA' typography: display: fontFamily: Bebas Neue fontSize: 96px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Oswald fontSize: 44px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.3 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Lato fontSize: 36px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Playfair Display fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 62px hero-display: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 700px vertical-copy: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 300px marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.body-lg}' height: 28px stat-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 80px price-block: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.accent}' height: 800px nutrition-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1400px footer-nav: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' height: 400px --- # DESIGN.md — 紺×ミルクベージュのフレーバープロテイン LP（Navy and Milk Beige Flavor Protein LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、クール・先進的、力強い・インパクト - **キーワード**: 深い紺・ミルクティー色・液体のシズル・細長い大英字・縦書きコピー・余白多め - **地の質感**: マットな紺の単色地に、光沢ある液体写真と飛び散るしぶきを切り抜いて重ねる - **形**: ピル型の白いボタン、大きな楕円弧で切り抜いたベージュ面、角丸の成分表カード - **温度感**: 紺で冷たく締め、ミルクティーの暖色写真で温度を足す中間〜やや暖色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2B3364` | メイン地色の紺 | 45% | 画素の実測 | | `on-primary` | `#EEF2F9` | 紺地上の白文字 | 4% | 画素の実測 | | `secondary` | `#E6D1B2` | ミルクベージュの価格セクション地 | 15% | 画素の実測 | | `text` | `#3D310F` | ベージュ地上の焦げ茶見出し | 1% | 画素の実測 | | `cta` | `#F6FDFD` | 白いピル型ボタン面 | 1% | 画素の実測 | | `on-cta` | `#1A1F34` | ボタン文字・矢印 | 0% | 画素の主要色に補正 | | `marker` | `#F4E46B` | キーワードの黄色マーカー | 0% | 画素の実測 | | `surface` | `#E9EAEE` | 成分表カード地 | 13% | 画素の実測 | | `background-alt` | `#FAFBFC` | 成分表の交互行の白 | 4% | 画素の実測 | | `background` | `#FFFFFF` | フッター地の白 | 8% | 画素の実測 | | `text-body` | `#393A3D` | 成分表の本文文字 | 1% | 画素の実測 | | `accent-1` | `#565E88` | 背景に敷く半透明の大英字 | 1% | 画素の実測 | | `line` | `#C8CBDA` | 紺地上の細い区切り線 | 0% | 推定 | - 地はほぼ紺で通し、明るい面は価格セクションのベージュだけにする - 紺地の文字は白。ベージュ地の文字は焦げ茶にする - 黄色マーカーはキーワード 1 か所だけに使う - ボタンは白のピル型。紺地でもベージュ地でも同じ形で浮かせる - 装飾の大英字は紺より少し明るいトーンにし、背景になじませる - 成分表は薄グレーのカードに白とグレーの交互行を敷く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と区切りに入る大英字 | 欧文サンセリフ | Bebas Neue | 400 | 96px | 1.0 | 0.02em | | `headline-lg` | 商品名見出し（ベージュ地） | 欧文サンセリフ | Oswald | 600 | 44px | 1.1 | 0.02em | | `headline-md` | 数値訴求の見出し（大きな数字＋和文） | ゴシック | Noto Sans JP | 700 | 36px | 1.3 | 0.08em | | `headline-sm` | 縦書きのキャッチ・縦書き見出し | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.6 | 0.15em | | `body-lg` | 紺地のリード文（一部の語を大きくして強調） | ゴシック | Noto Sans JP | 500 | 14px | 2.3 | 0.15em | | `body-md` | 成分表・原材料の本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.03em | | `accent` | 価格の数字 | 欧文サンセリフ | Lato | 700 | 36px | 1.2 | 0.0em | | `label-button` | ボタンの英字ラベル | 欧文セリフ | Playfair Display | 700 | 17px | 1.2 | 0.06em | - 大英字は縦長の細いサンセリフで、画面幅いっぱいに置く - 和文本文は字間を広め（0.15em）にし、行間 2 以上でゆったり組む - リード文では大事な語だけ 1.3 倍の大きさにする - キャッチは縦書きにし、横に大英字を縦向きで添える - 数値は和文の約 1.5 倍の太字欧文にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面幅いっぱいか左右にはみ出させる - 本文は左寄せで、左右に約 9% の余白をとる - 見出しの下に右へ伸びる細い線を引いて区切る - 装飾の英字を画面の端で縦向きに切って置く - 成分表カードは左右 24px 内側に置く ## Elevation & Depth - ボタンは白地に紺の細い枠線を入れ、下に柔らかい影を付ける - 商品パッケージには落ち影を付けて浮かせる - カードには影を付けず、色の差だけで分ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 液体・グラス・パッケージは背景を抜いた切り抜き。しぶきは画面外へはみ出させる - **セクション境界**: ベージュ面は上下を大きな楕円の弧で切り、紺地に浮かぶ形にする - 直線の帯は使わず、弧と切り抜きで動きを出す - ボタンは二重線風のピル型にし、右端に細い山形の矢印を置く - 成分表カードの角丸は 12〜16px ## Components - **白ピルボタン**（`button-primary`）: 白地に紺の細い枠のピル型ボタン。中央にセリフ体の英字ラベル、右端に細い矢印、下に影 - **大英字ヒーロー**（`hero-display`）: グラス写真の上下に、画面幅いっぱいの白い大英字を重ねる - **縦書きキャッチ**（`vertical-copy`）: 白の縦書き 2 行のキャッチと、半透明の縦向き英字を並べる - **黄色マーカー**（`marker-highlight`）: キーワードを黄色のベタ面で囲み、紺の文字で載せる - **数値見出し＋下線**（`stat-heading`）: 縦書きの項目名の横に大きな数字の見出しを置き、下に細い線を右端まで引く - **価格ブロック**（`price-block`）: ベージュの弧の面に、英字の商品名・パッケージ・大きな価格・ボタンを縦に並べる - **成分表カード**（`nutrition-card`）: 角丸のグレーカード。上に原材料の文章、下に白とグレーの交互行で 2 列の表 - **白フッター**（`footer-nav`）: 小さな英字ナビを 4 列、その下に SNS アイコン、規約リンク、ロゴ、コピーライト ## Do's and Don'ts **Do** - 紺の地を基本にし、明るい面は 1 か所に絞る - 液体のしぶきや注ぐ瞬間の写真でシズル感を出す - 大英字は画面の端まで大きく置く - 本文は字間を広くとり、短い行で余白を多めにする - どのボタンも同じ白ピル型にそろえる **Don't** - 赤や蛍光色の派手な CTA にしない - 四角い帯の見出しや吹き出しを多用しない - 写真を四角い枠に収めない - 太い角ゴシックの和文見出しをたくさん並べない - マーカーを何か所にも使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（味と商品を一目で伝える）: 紺の地に、注がれるグラスとパッケージの写真。上下に白の大英字を置き、白ピルボタンを添える 2. **キャッチコピー**（ありきたりな飲み物との違いを印象づける）: 白の縦書き 2 行と、半透明の縦向き英字。下にミルクのしぶき写真 3. **コンセプト**（味へのこだわりを語る）: 字間の広い白い本文を左寄せで置き、強調語を大きくし、1 語に黄色マーカーを引く 4. **特長（数値）**（タンパク質量を示す）: 俯瞰のグラス写真の下に、縦書きの項目名と大きな数値の見出しを置き、下線と説明文を続ける 5. **特長（容量）**（試しやすさを伝える）: パッケージとミルクのしぶき、縦の英字。数値見出しと下線、短い説明文 6. **価格・購入**（価格を示して購入へ誘導する）: 楕円弧のベージュ面。英字の商品名、パッケージ、大きな価格、白ピルボタン。茶葉の乗ったスプーン写真を添える 7. **成分・原材料**（安心材料を細かく示す）: 白の大英字見出しの下に角丸グレーカード。原材料の文章と、交互の色の栄養成分表 8. **ブランドロゴ・フッター**（ブランドを記憶させ、関連ページへ案内する）: 紺地に白のロゴ。その下に白地のフッター（英字ナビ、SNS、規約、コピーライト） ## Imagery - グラスに注ぐ瞬間やミルクが渦巻く様子を高速シャッターで撮り、背景を抜く - しぶきやミルクの帯を画面の端から斜めに流し込む - 黒いマットなパッケージを正面から撮り、影を付けて置く - 茶葉やスプーンなど素材の写真を小物として添える - 背景は無地の紺かベージュにし、柄やテクスチャは入れない - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では紺の地を全幅に敷き、本文は中央の 1000px 前後に収める - FV は左に写真、右に大英字と縦書きコピーを置く 2 カラムにしてもよい - 数値の特長は写真と文を左右交互に並べる - 成分表カードは最大 720px で中央に置く - 大英字は vw 単位で画面幅に合わせて大きくする ## 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-09dc16d6`（元 LP の URL から採番） - **元 LP**: https://ultora.co.jp/lp?u=new-milktea?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。