--- version: alpha name: Cream and Charcoal Tea Protein LP description: 生成りのクリーム地とチャコールの濃色セクションを交互に置き、紅茶のオレンジとゴールドで差し色を入れた健康食品LP。細い欧文の大見出し、波形の区切り、茶葉や氷の切り抜き写真で、カフェのような軽さと上質さを出している。 colors: primary: '#F3911C' background: '#FFFFFF' background-alt: '#FFFAE7' dark-section: '#282828' on-dark: '#FEFEFE' secondary: '#CEBC90' text: '#1C1C1C' tint-1: '#FFEEDA' tint-2: '#EED2AA' marker: '#FBD86A' accent-1: '#F9C58B' line: '#282828' surface: '#FEFEFE' typography: display: fontFamily: Josefin Sans fontSize: 46px fontWeight: 200 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Open Sans fontSize: 40px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 12px 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}' section-title-en: textColor: '{colors.text}' typography: '{typography.display}' height: 90px check-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 380px circle-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px feature-number: backgroundColor: '{colors.dark-section}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 180px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 360px slash-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 230px faq-item: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 70px button-pill-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 生成り×チャコールの紅茶系プロテイン LP（Cream and Charcoal Tea Protein LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ナチュラル、上品・高級、清潔・爽やか、やさしい・柔らかい - **キーワード**: 生成り・チャコール・紅茶オレンジ・細い欧文見出し・波形区切り・切り抜き写真 - **地の質感**: 平塗りの面に、氷・茶葉・葉っぱの切り抜き写真を浮かせる。紙クリップや柔らかい影で軽い立体感をつける - **形**: 角丸カードと円形バッジ、波形やV字のセクション境界、細い曲線のライン - **温度感**: 暖かめ（クリームとオレンジ）に、チャコールで締めた中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F3911C` | ブランドの紅茶オレンジ（強調・ドット・Q記号） | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白い地 | 25% | 画素の実測 | | `background-alt` | `#FFFAE7` | 生成りクリームの地 | 22% | 画素の実測 | | `dark-section` | `#282828` | チャコールの濃色セクション | 21% | 画素の実測 | | `on-dark` | `#FEFEFE` | 濃色の上の白文字 | 2% | 画素の実測 | | `secondary` | `#CEBC90` | セクション番号のゴールド | 0% | 画素の実測 | | `text` | `#1C1C1C` | 見出しや本文の黒文字 | 3% | 画素の実測 | | `tint-1` | `#FFEEDA` | FAQ項目の淡いピーチ面 | 4% | 画素の実測 | | `tint-2` | `#EED2AA` | 波形の区切りにあるベージュ | 2% | 画素の実測 | | `marker` | `#FBD86A` | 文字下の黄色マーカー | 0% | 推定 | | `accent-1` | `#F9C58B` | 見出しの帯にするアプリコット | 1% | 画素の実測 | | `line` | `#282828` | 細い区切り線と曲線 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | カードの白い面 | 5% | 画素の実測 | - 白・生成り・チャコールの3つの地を、セクションごとに入れ替えてリズムを作る - 強調色の紅茶オレンジは、ドット・Q記号・カード上の帯など小さい面だけに使う - 番号やサブ見出しは、ゴールドやベージュ系で控えめに目立たせる - 本文中の大事な語句は、黄色やアプリコットのマーカーを文字の下半分に敷いて強調する - 濃色セクションの文字は白、生成りセクションの文字はチャコールで統一する - フレーバーごとに写真の色（オレンジ・黄・緑）を変え、見分けやすくする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文サンセリフ | Josefin Sans | 200 | 46px | 1.1 | 0.02em | | `headline-lg` | ファーストビューと訴求の大見出し | ゴシック | Noto Sans JP | 500 | 34px | 1.3 | 0.05em | | `headline-md` | 特長ごとの見出し | ゴシック | Noto Sans JP | 500 | 26px | 1.4 | 0.05em | | `headline-sm` | 日本語のサブ見出しやキャッチの帯 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.2 | 0.08em | | `note` | 注釈や出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | セクション番号やフレーバー名の欧文 | 欧文サンセリフ | Open Sans | 700 | 40px | 1.1 | 0.0em | | `label-button` | 小さいボタンやリンクの文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.05em | - 英字の大見出しは極細ウェイトで大きく置き、すぐ下に日本語の小見出しを添える - 見出しでは大事な語だけ文字を大きくし、助詞は小さくする - 本文は行間を約2.2と広く取り、字間も少し開ける - 数字はほかの文字より大きく太くして目立たせる - ブランドの英字は、太字と細字を組み合わせて強弱をつける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（手順は 2×2 グリッド、お客様の声は横スライダー） - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約24px - セクションの区切りは波形かV字で地の色を切り替える - 利用シーンは写真と文字を左右交互に置き、細い曲線でつなぐ - フレーバー紹介は写真ヘッダー＋商品画像＋説明＋価格の順に縦に並べる - 見出しの前後は64〜96pxあけてゆったりさせる ## Elevation & Depth - カードには下方向にぼかした薄い影をつける - 商品パッケージの画像にはやわらかい影を落とす - 濃色の四角いパネルに紙クリップの画像を重ね、浮かせて見せる - それ以外の面は平塗りで、影をつけない ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 四角か角丸に切り抜き、一部は画面端まで裁ち落とす。氷・茶葉・葉は背景を抜いて配置する - **セクション境界**: なめらかな波形の曲線、またはV字の切り込み - 特長を示すバッジは細線の円形にする - フレーバーのヘッダーは上の左右だけ大きく角を丸める - FAQやカードは12px前後の角丸にする - 直線の区切りは細い1pxの線を使う ## Components - **英字の大見出し**（`section-title-en`）: 極細の欧文を大きく置き、下に日本語の小見出しを添える。英字の下にマーカーを敷く場合もある - **チェックリストのパネル**（`check-panel`）: チャコールの四角いパネルに白文字の項目を並べ、オレンジのチェックアイコンをつける。紙クリップを重ねる - **番号つきの円形バッジ**（`circle-badge`）: 細い線の円の中に、ゴールドの番号と短い特長を入れる。少しずつずらして重ねる - **特長の番号見出し**（`feature-number`）: 小さな欧文を円弧状に並べ、その下にゴールドの大きな数字、見出し、短い線を縦に置く - **お客様の声のカード**（`voice-card`）: 上辺に色帯がある白いカード。中央にイラストのアバター、属性、本文を入れ、ドットとページ番号で送る - **斜線つきのキャッチ帯**（`slash-heading`）: 左右を斜線ではさみ、背景にアプリコットの帯を敷いた短いキャッチ - **手順カード**（`step-card`）: 白い四角に大きな薄グレーの番号と線画イラスト、説明を入れ、2×2で並べる - **FAQのアコーディオン**（`faq-item`）: 淡いピーチの面に、オレンジのQ、質問文、右端の細い＋を置く - **黒いピル型のラベル**（`button-pill-dark`）: 補足を伝えるチャコールのピル型ラベルに白文字を入れる ## Do's and Don'ts **Do** - 白・生成り・チャコールの地を交互に置き、波形でつなぐ - 英字見出しは極細で大きく、日本語は小さく添える - 氷や茶葉、葉っぱの切り抜き写真を余白に散らして季節感を出す - 強調したい語句には黄色のマーカーを敷く - お客様の声には実写ではなくシンプルなイラストのアバターを使う **Don't** - オレンジを広い面に使わない - 見出しを太いゴシックで埋め尽くさない - セクションの境界を直線ばかりにしない - 本文の行間を詰めない - 原色の青や赤を差し色に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の新しさと価格を伝える）: クリーム地に英字ロゴと黒帯の小見出しを置き、氷入りの飲み物写真に商品パッケージ3つを重ねる。価格は白い大きな数字で見せる 2. **コンセプト訴求**（お茶のように飲めることを伝える）: 大小の文字を組み合わせた見出しと細い区切り線を置く。グラスの写真の横にマーカー付きの本文を添える 3. **基礎知識**（商品が果たす役割を整理する）: 紙クリップをつけたチャコールのパネルに、チェック項目を4つ並べる 4. **こだわり概要**（こだわりの3点を一覧で見せる）: 生成り地に円形の番号バッジ3つと商品画像を置き、V字の区切りで濃色へ切り替える 5. **特長の詳細**（特長を1つずつ説明する）: チャコール地に番号見出し、本文、横長の写真、注釈の順で3回繰り返す 6. **美味しさの理由**（原料の独自性を伝える）: 白抜きの英字を背景に敷き、アプリコットのヘッダーがある枠カードに入れる。本文にはマーカーで強調をつける 7. **お客様の声**（SNSでの評判を見せる）: 斜線つきのキャッチ帯の下に、テーマごとの声カードを横スライダーで並べる 8. **利用シーン**（日常の飲むタイミングを想像させる）: 白地に角丸の写真とキャッチを左右交互に置き、細い曲線と英字でつなぐ 9. **飲み方**（簡単な手順を示す）: チャコール地に手順カードを2×2で並べ、注意書きを添える 10. **ラインナップ**（フレーバーと価格を比べてもらう）: フレーバーごとに色の違う写真ヘッダー、大きな欧文名、商品画像、説明、価格、成分表のリンクを並べる 11. **開発ストーリー**（誕生の背景で共感を得る）: チャコール地に吹き出し形のクリーム色ヘッダーがあるカードを置き、矢印で送るスライダーにする 12. **よくある質問**（購入前の不安をなくす）: 白地に英字の見出しを置き、ピーチ色のアコーディオンを縦に並べる ## Imagery - 氷入りの紅茶やグラスを寄りで撮った、つややかな写真 - 茶葉・ミント・レモン・葉っぱを背景から抜き、余白に散らす - 人物は自然光の明るいライフスタイル写真で、ナチュラルな女性を中心にする - アバターや手順の図は、黒い線にオレンジや淡い色を塗った簡素なイラストにする - フレーバーごとに、その色に寄せた液体の写真をヘッダーに使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央寄せで本文の幅を最大960px程度にとどめる - 特長の詳細は、写真と本文を左右2カラムにする - お客様の声は3枚並べて見せ、スライダーをやめる - 手順は4つを横一列に並べる - 英字の大見出しは80px前後まで拡大する ## 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-846e37a0`（元 LP の URL から採番） - **元 LP**: https://ultora.co.jp/shop/products/U0400001?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/）からご連絡ください。