--- version: alpha name: Playful Red and Cocoa Diet Supplement LP description: 朱赤と焦げ茶を軸に、料理写真とゆるいキャラクターイラストを組み合わせた機能性表示食品の LP。黒板風の暗いセクション、クラフト紙風の地、白カードを交互に重ねる。グラフや作用の図解で根拠を見せつつ、楽しい食事のイメージで親しみやすさも出している。 colors: primary: '#E03C2A' secondary: '#41210A' background: '#FEFEFE' background-alt: '#FFF7E2' tint-1: '#ECF5F4' tint-2: '#CBAB7D' dark-section: '#1A1C1C' on-dark: '#FEFE9E' accent-1: '#EA9D1C' accent-2: '#9ABC23' text: '#331B0A' text-body: '#4A3A30' marker: '#F6EE7A' surface: '#FEFEFE' primary-accessible: '#D6311F' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Klee One fontSize: 15px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.04em label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 6px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' kanji-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 44px section-band: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 64px check-list: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px bar-chart: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 260px mechanism-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 520px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 140px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 330px outline-label: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 160px --- # DESIGN.md — 朱赤×焦げ茶のポップな機能性サプリ LP（Playful Red and Cocoa Diet Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、信頼・誠実 - **キーワード**: 朱赤・焦げ茶・料理写真・キャラクター・図解とグラフ・白カード - **地の質感**: 黒板・木目・クラフト紙・ドット柄の地紋の上に、白い角丸カードを重ねる - **形**: 角丸カード、円形バッジ、赤い四角に白抜きの一文字、波線の下線 - **温度感**: 暖色寄りでにぎやか。終盤は水色と緑で爽やかに落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E03C2A` | 強調文字・バッジ・帯の朱赤 | 7% | 推定 | | `secondary` | `#41210A` | 見出し帯・暗い帯の焦げ茶 | 6% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 27% | 画素の実測 | | `background-alt` | `#FFF7E2` | 淡いクリーム地のセクション | 8% | 画素の実測 | | `tint-1` | `#ECF5F4` | 品質セクションの淡い水色地 | 4% | 画素の実測 | | `tint-2` | `#CBAB7D` | クラフト紙風の地 | 5% | 画素の実測 | | `dark-section` | `#1A1C1C` | 黒板風の暗いセクション | 6% | 画素の実測 | | `on-dark` | `#FEFE9E` | 暗い地の上のキャッチ文字（黄色） | 0% | 画素の実測 | | `accent-1` | `#EA9D1C` | グラフの比較バー・年代バッジのオレンジ | 2% | 画素の実測 | | `accent-2` | `#9ABC23` | 図解の吹き出しに使う若草色 | 1% | 画素の実測 | | `text` | `#331B0A` | 見出しの濃い茶黒 | 3% | 画素の実測 | | `text-body` | `#4A3A30` | 本文のダークブラウン | 3% | 推定 | | `marker` | `#F6EE7A` | 本文中の黄色マーカー | 0% | 推定 | | `surface` | `#FEFEFE` | 灰色地紋の上の白カード | 10% | 画素の実測 | | `primary-accessible` | `#D6311F` | AA を満たす補正値（計算） | | 計算 | - 朱赤は大事なキーワード、白抜きの一文字バッジ、注意書きの枠線だけに使う。 - 焦げ茶はセクション見出しの帯と大きな見出し文字に使い、ブランドの重さを出す。 - 地の色は白・クリーム・クラフト紙・黒板・水色を順に切り替え、単調にしない。 - グラフでは比較対象を灰色、推したい成分をオレンジにして差を見せる。 - 暗い地のキャッチは黄色、キーワードは朱赤にする。 - 終盤の品質セクションは水色と緑にして、清潔感と安心感で締める。 - `kanji-badge` は文字 `#FEFE9E` × 背景 `#E03C2A` のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D6311F`、4.6:1）を使う。 - `mechanism-card` は文字 `#E03C2A` × 背景 `#FEFEFE` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D6311F`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ・大きなブランド見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.04em | | `headline-md` | 帯の見出し・カードの見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em | | `headline-sm` | 質問・チェックリスト | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 本文・お客様の声 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.04em | | `note` | 試験の概要・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 手書き風の添え文・吹き出し | 手書き・筆 | Klee One | 600 | 15px | 1.5 | 0.04em | | `label-button` | バッジ・ラベル | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.3 | 0.04em | - 見出しは極太のゴシックにし、キーワードだけを朱赤にして大きくする。 - キーワードを赤い四角に白抜きで入れ、見出しの中に混ぜて使う。 - 見出しの下には赤い波線を引いて強調する。 - 吹き出しや添え文は手書き風の書体にし、斜めに置いてもよい。 - 本文は 14px 前後、行間 1.8 で読みやすくする。 - 試験の概要は 10px の小さな文字でまとめて置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分カードの一部は 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは全幅の背景にし、中身は左右 5% の余白をとる。 - 白カードは背景の地紋より一段手前に重ねて置く。 - グラフ・図解はカードの横幅いっぱいに置き、下に注釈を添える。 - 料理写真は画面の端からはみ出させ、にぎやかさを出す。 - お客様の声は本文、写真、年代バッジの順で縦に並べる。 ## Elevation & Depth - 白カードには下方向に薄い影（0 4px 8px rgba(0,0,0,.08)）をつける。 - 商品パッケージの写真は少し影を落として浮かせる。 - 重ねて置く写真は傾けて、影をつける。 ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 料理は円形の皿ごと切り抜く。体験の写真は角丸、終盤の写真は傾けた矩形 - **セクション境界**: 基本は直線で切り替える。焦げ茶の帯の下だけ三角の矢印を出し、次へつなぐ - バッジは円形かピル型にする。 - 成分カードの間には赤い丸に白いプラス記号を置く。 - 利用シーンの番号は焦げ茶の丸に入れる。 - ラベル見出しは朱赤の枠線のピル型にし、カードの上辺にまたがせる。 ## Components - **一文字バッジ**（`kanji-badge`）: キーワードの一文字を朱赤の四角に白抜きで入れ、見出しや写真の上に置く - **焦げ茶の見出し帯**（`section-band`）: 全幅か、カード上部の焦げ茶の帯に白文字の見出しを入れる - **チェックリスト**（`check-list`）: 赤いチェックマークの後に太字の悩みを並べ、点線で区切る - **比較グラフ**（`bar-chart`）: 灰色とオレンジの円柱バーを赤い矢印でつなぎ、オレンジの吹き出しで効果を示す - **作用の図解カード**（`mechanism-card`）: 焦げ茶の帯の見出しの下にイラストの図解を置き、赤い波線つきの結論を添える - **成分カード**（`ingredient-card`）: 左に水彩の素材イラスト、右に成分名と説明を置く。カードの間はプラス記号でつなぐ - **お客様の声カード**（`voice-card`）: 太字の本文の下に食事写真を置き、右下にオレンジの円で年代を示す - **枠線つきの説明ボックス**（`outline-label`）: 朱赤の枠線ボックスで、ピル型の見出しを上辺にまたがせる - **Q&A カード**（`faq-card`）: 質問のキーワードだけ朱赤にし、本文を続ける白カードを縦に並べる ## Do's and Don'ts **Do** - 効果の主張には必ずグラフ・図解・注釈をセットにする。 - キーワードは朱赤にし、一文字バッジや波線で視覚的に強調する。 - 料理写真とゆるいキャラクターを各所に置き、楽しい食事の印象を保つ。 - 地の質感（黒板・クラフト紙・ドット）をセクションごとに変える。 - 白カードは角丸 16〜24px にして、薄い影をつける。 **Don't** - 朱赤を広い面の地色に使わない。 - 寒色を前半に多用しない。前半は暖色でまとめる。 - 注釈を省いたり、本文と同じ大きさにしたりしない。 - 角の鋭いカードや細い明朝で、ポップさを崩さない。 - 写真を無機質な白抜きだけで並べない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（食事を楽しむ人物と商品で第一印象をつくる）: 笑顔の人物写真に極太のキャッチを重ねる。朱赤の円形バッジ、商品、成分の白ボックス 4 つを置く 2. **悩みの提起**（対象の読者に自分ごと化させる）: 料理写真を周りに散らし、中央にチェックリストを 5 項目並べる 3. **共感**（我慢したくない気持ちに寄り添う）: 黒板風の地に、角砂糖と油のアイコン、料理写真、黄色の大きなキャッチを置く 4. **主張と根拠**（働きと届出の情報を示す）: 一文字バッジの見出し、白い帯のコピー、皿の上の商品、届出表示の本文で構成する 5. **試験データ**（数値で信頼させる）: OFF バッジの見出し、比較グラフ、小さな試験概要を 2 セット並べる 6. **利用シーン**（使う場面を想像させる）: 斜めに切った料理写真の帯を 3 段重ね、短いコピーを添える 7. **成分紹介**（主成分の由来を伝える）: 木目の暗い地に果実の写真、金のメダルバッジ、キャラクターの吹き出しを置く 8. **作用の図解**（仕組みを図で理解させる）: ドット地に、焦げ茶の帯の白カードを 2 つ並べ、イラストの図解を入れる 9. **サポート成分**（独自の処方を見せる）: 焦げ茶の帯から矢印で続け、白木目の地に成分カード 4 つをプラス記号でつなぐ 10. **制度の説明**（機能性表示食品とは何かを説明する）: クラフト紙の地に紙吹雪を散らし、商品と朱赤の枠線の説明ボックスを置く 11. **お客様の声**（利用者の実感を伝える）: 緑のリボン見出しの下に、写真つきの白カードを 3 枚並べる 12. **飲み方**（続け方を示す）: クリーム地に、SCENE 番号つきの線画カードを 3 枚並べる 13. **品質**（製造の安心感を伝える）: 水色の地と葉の装飾、研究者の写真、円形の認証バッジ 2 つ 14. **ブランドメッセージ**（価値観に共感させる）: 水彩の皿とカトラリーのイラストに中央揃えの本文を添え、傾けた写真をコラージュする 15. **よくある質問**（不安を解消する）: ドット地にキャラクターと見出しを置き、Q&A の白カードを縦に並べる ## Imagery - 料理は真上か斜め上から撮り、皿ごと切り抜いて端からはみ出させる。 - 人物は自然光で、食事中の笑顔を撮る。 - キャラクターは太い線のレトロな漫画調で、リボンをつけた女の子や動物にする。 - 成分は水彩タッチのイラストで描く。 - 利用シーンは茶色の線画に、淡いオレンジを差して描く。 - 品質のパートは白衣の研究者の写真と、新緑の葉の装飾を組み合わせる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 480〜600px の SP レイアウトを置き、背景を全幅に広げることを推奨する。 - PC では、成分カードやお客様の声を 2〜3 カラムにしてもよい。 - グラフと図解は最大幅を 600px 程度にする。 - PC ではファーストビューの人物写真を左、キャッチと商品を右に分けて配置する。 ## 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-5bcc55f3`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/aequalis/caloqutto/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。