--- version: alpha name: Cream Yellow and Cocoa Brown Playful Body Care LP description: 淡いクリームイエローの地に、ココアブラウンの帯と円、ピンクの手書き風見出しを重ねたポップで親しみやすいボディケア商品LP。動物キャラクターのイラストを散らして楽しさを出し、丸窓写真と吹き出しで使い方や仕組みを説明する。後半は商品スペック表と、ピンクの装飾枠に入れた利用者の声で締める。 colors: primary: '#7B4B1A' background: '#FFFFFF' background-alt: '#FFF7C9' tint-1: '#FDF3F4' tint-2: '#F1EEE5' accent-1: '#E2348A' secondary: '#1E8FD0' cta: '#FE7B02' on-cta: '#FFFFFF' text-body: '#333333' text: '#794129' accent-2: '#C9A75E' line: '#DC9D8B' on-dark: '#FFFFFF' cta-accessible: '#BD5B01' secondary-accessible: '#1A7DB5' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 700 lineHeight: 1.35 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Yomogi fontSize: 15px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 8px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 56px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px circle-photo: backgroundColor: '{colors.background}' rounded: '{rounded.full}' height: 140px brown-circle-callout: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 160px cloud-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 120px type-caption-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 44px voice-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 240px spec-tag: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px --- # DESIGN.md — クリーム色×ココア茶のポップなボディケアLP（Cream Yellow and Cocoa Brown Playful Body Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感 - **キーワード**: クリームイエロー・ココアブラウン・ピンク見出し・キャラクター散らし・丸窓写真・吹き出し - **地の質感**: ほぼフラットな塗り面。キラキラの星や点々、紙ふうの縁取りを少し加える - **形**: 円形の写真窓、斜めに傾いたリボン帯の見出し、雲形の吹き出し、レースのような装飾枠 - **温度感**: 暖色寄り。クリーム・茶・ピンクで甘くやさしい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7B4B1A` | ブランドを代表するココアブラウン。帯・円・アイコンに使う | 12% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白い地 | 21% | 画素の実測 | | `background-alt` | `#FFF7C9` | クリームイエローのセクション地 | 22% | 画素の実測 | | `tint-1` | `#FDF3F4` | 利用者の声の淡いピンク地 | 10% | 画素の実測 | | `tint-2` | `#F1EEE5` | メディア掲載のベージュグレー地 | 6% | 画素の実測 | | `accent-1` | `#E2348A` | 見出しのキーワードを強調するピンク | 2% | 推定 | | `secondary` | `#1E8FD0` | 商品名見出しのブルー | 0% | 推定 | | `cta` | `#FE7B02` | 購入・お知らせボタンのオレンジ | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `text` | `#794129` | 見出しの茶色文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#C9A75E` | 帯見出しの縁やキラキラのゴールドベージュ | 1% | 推定 | | `line` | `#DC9D8B` | 声カードの装飾枠ピンク | 3% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 茶色面の上の白文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#BD5B01` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1A7DB5` | AA を満たす補正値（計算） | | 計算 | - 地はクリームイエロー・白・淡ピンクをセクションごとに切り替える - 仕組みを説明する区間だけ茶色の全面帯にして白文字を載せる - 見出しの最重要語だけピンクで大きく、他は茶色で組む - セクション見出しは茶色のリボン帯に白文字で載せる - CTAはオレンジのみ。他の要素にオレンジを使わない - 商品スペックの見出しは青文字で、物販らしい情報区間と分ける - `button-primary` は文字 `#FFFFFF` × 背景 `#FE7B02` のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BD5B01`、4.51:1）を使う。 - `spec-tag` は文字 `#1E8FD0` × 背景 `#FFFFFF` のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1A7DB5`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・セクション大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.2 | 0.02em | | `headline-lg` | リボン帯見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.3 | 0.05em | | `headline-md` | 悩み提起の見出し・円内の短文 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | 特長円バッジ内・商品名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.35 | 0em | | `body-md` | 説明文・声の本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | 成分・スペック・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0em | | `accent` | 手書き風の小見出し・ラベル | 手書き・筆 | Yomogi | 400 | 15px | 1.4 | 0.03em | | `label-button` | CTAボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 大見出しは2〜3行に分け、キーワードの行だけ大きくする - 強調語はピンク、他は茶色で色分けする - 大見出しは少し傾けたり白フチを付けたりして、ポップに見せる - 本文は短めの行で中央寄りに置き、行間を広くとる - 声の本文は一部をピンク文字にして感想の要点を示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真とテキストは縦に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 写真とテキストは左右交互に置き、SPでは写真を上にする - 特長は円バッジ3つを横並びにし、SPでは縦に積むか横スクロールにする - キャラクターのイラストを余白に散らして、空いた場所を埋める - セクション見出しは中央に置き、リボン帯は画面幅いっぱいに近づける - 声カードは1人ずつ縦に並べ、写真の位置を左右交互にする ## Elevation & Depth - 影は基本使わない - 円形の写真窓には白い太フチを付ける - ポラロイド風の人物写真にだけ薄い影を付ける - リボン帯は少し回転させて、浮いて見えるようにする ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 円形の丸窓が中心。人物は切り抜き、声は白フチのポラロイド風 - **セクション境界**: 背景色を直線で切り替える。茶色の帯の上端は雲形・波形にする - 説明用の写真は正円に切り抜き、白か茶の太フチを付ける - 吹き出しは雲形やモコモコの形にする - 見出しの帯は平行四辺形のリボン形にする - 声カードはレース風の装飾枠で囲む - CTAは角丸の小さい長方形にする ## Components - **CTAボタン**（`button-primary`）: オレンジの長方形に白文字2行（主文＋小さい補足） - **リボン帯見出し**（`ribbon-heading`）: 少し傾けた茶色の帯に白文字。両端にキラキラを付ける - **特長円バッジ**（`circle-badge`）: 白地の円に金茶の二重リング。中に数字やキーワードを茶色で入れる - **丸窓写真**（`circle-photo`）: 白フチの正円写真に、キャラクターをかぶせて置く - **茶色円コピー**（`brown-circle-callout`）: 大きな茶色の円に、白文字の短いコピーを3行入れる - **雲形吹き出し**（`cloud-bubble`）: 白い雲形に、茶色で悩みのセリフを入れる - **タイプ説明帯**（`type-caption-band`）: 商品写真の下に置く茶色の小帯で、白文字の説明を2行入れる - **声カード**（`voice-card`）: 淡クリーム地をピンクのレース枠で囲み、ポラロイド写真と本文を並べる - **認証タグ**（`spec-tag`）: 青い細枠の小さなタグ。テスト済みなどの情報を示す ## Do's and Don'ts **Do** - キーワードはピンク、それ以外の見出しは茶色で組む - 動物キャラクターを各セクションに1〜3体置き、楽しさを出す - 仕組みの説明は、丸窓写真と短文の組み合わせで見せる - セクションごとに地の色を切り替え、リズムをつくる - 数字（期間・成分数）は大きく、円バッジで目立たせる **Don't** - 黒や寒色を広い面に使わない - 角ばったシャープなカードや細い線だけの装飾にしない - CTA以外にオレンジを使わない - 長い本文を幅いっぱいに流さない - 写真を四角いまま並べるだけにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（使用感と商品を一目で伝える）: クリーム地に人物と商品2色を置く。傾けた大見出しとピンクの手書き風コピーを添える 2. **悩みの提起**（保湿の面倒さに共感させる）: 白い雲形吹き出しに茶色で悩みを書き、考え込む人物写真を置く 3. **解決の提示**（商品の価値を式で示す）: 茶色の円コピーと、商品＝アイコン＋アイコンの図式を置く 4. **使い方の流れ**（手順を直感的に見せる）: 黒地の丸窓写真を3つ並べ、手書き風ラベルと白い説明ボックスを添える 5. **仕組みの説明**（変化する理由を解説する）: ピンクの大見出しで導入し、茶色の全面帯に丸窓写真と白文字の説明を交互に置く 6. **成分訴求**（保湿成分を示す）: 白地に大見出しを置き、成分を円アイコン3つで並べる 7. **特長**（3つの利点を示す）: 茶色のリボン帯見出しの下に円バッジ3つと短い説明文を並べる 8. **タイプ紹介**（2種類から選ばせる）: 商品写真を2つ並べ、ピンクの円ラベルと茶色の説明帯を付ける 9. **メディア掲載**（信頼性を補強する）: ベージュ地に誌面を斜めに置き、ティール色の円ラベルを添える 10. **商品詳細・購入**（スペックと購入導線）: 白地で、左に商品写真、右に青見出し・箇条書き・タグ・オレンジCTAを置く 11. **お客様の声**（利用者の実感を伝える）: 淡ピンク地にレース枠のカードを3枚置き、写真の位置を左右交互にする 12. **フッター**（会社情報とリンク）: 白地に小さいテキストリンクと会社情報を並べる ## Imagery - 人物は明るい自然光で撮る。白タオルを巻いた素肌の女性など、清潔でやわらかい雰囲気にする - 商品は白背景で切り抜き、正面から撮る - テクスチャーはクローズアップで撮り、丸窓に収める - 動物キャラクターは茶と白の丸っこいイラストで描き、商品を持たせたりのぞき込ませたりする - 装飾は金色のキラキラ、点々、小さな星を余白に散らす - 声の人物は白フチのポラロイド風に収め、少し傾ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅約730px固定で中央寄せ。左右の余白は各セクションの地の色で埋める - SPでは写真とテキストの左右配置を縦積みにする - 特長の円バッジ3つは、SPで縦積みまたは2＋1配置にする - 商品詳細の2カラムは、SPで写真が上、情報が下になる - 大見出しはSPで28〜34pxに縮める。傾きと色分けはそのまま残す - SPでは画面下にCTAを固定表示するのがおすすめ ## 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-1697ee4e`（元 LP の URL から採番） - **元 LP**: http://panna.cc/lineup/pannam.html - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-21、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。