--- version: alpha name: Magenta Watercolor Illustrated Women's Nutrition LP description: 白地にピンクとオレンジの水彩ぼかしを漂わせ、線画の女性イラストで日常に寄り添う。見出しとボタンは鮮やかなマゼンタで統一し、粗いザラ質感の不定形スタンプ見出しとコの字フレームでセクションを区切る。商品パートは白カードに機能性の根拠グラフをマゼンタ帯で見せる、やさしさと信頼を両立した構成。 colors: primary: '#E3017D' background: '#FFFEFF' on-primary: '#FFFFFF' background-alt: '#FAF5EF' tint-1: '#FEEBED' tint-2: '#FFF8F2' secondary: '#B28956' accent-1: '#F26A1B' accent-2: '#2F395C' accent-3: '#EB6A0A' text: '#2C2B2D' line: '#EBEDEA' text-muted: '#CCCCCC' secondary-accessible: '#947043' typography: display: fontFamily: Dela Gothic One fontSize: 16px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.06em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-nav: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 58px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px section-stamp: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 110px column-list-item: textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 52px product-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 110px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px evidence-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 380px ingredient-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 400px shop-link-grid: backgroundColor: '{colors.background}' textColor: '{colors.text}' height: 68px --- # DESIGN.md — マゼンタ×水彩ぼかしの女性向け栄養食品LP（Magenta Watercolor Illustrated Women's Nutrition LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、かわいい - **キーワード**: マゼンタ・水彩ぼかし・線画イラスト・ザラ質感スタンプ・白カード・女性の日常 - **地の質感**: 白地にピンク・ピーチの柔らかな円形ぼかしが浮かび、見出しスタンプとフレームはノイズの粒子が乗った版画風のザラ質感 - **形**: 大きめ角丸のピルボタン、不定形の雲形スタンプ、上下が開いたコの字フレーム、有機的なブロブ形の背景と写真切り抜き - **温度感**: 暖色寄り。マゼンタの華やかさとピーチの温かみで親しみやすい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E3017D` | 見出し・ナビボタン・強調帯のマゼンタ | 7% | 画素の実測 | | `background` | `#FFFEFF` | ページの地 | 47% | 画素の実測 | | `on-primary` | `#FFFFFF` | マゼンタ上の白文字 | 1% | 画素の主要色に補正 | | `background-alt` | `#FAF5EF` | フッター・成分解説ボックスの生成り | 8% | 画素の実測 | | `tint-1` | `#FEEBED` | 背景の淡いピンクぼかし | 6% | 画素の主要色に補正 | | `tint-2` | `#FFF8F2` | イラスト背後のピーチのブロブ | 7% | 画素の実測 | | `secondary` | `#B28956` | 商品情報・レシピボタンのキャメル | 1% | 画素の実測 | | `accent-1` | `#F26A1B` | スタンプ見出しのオレンジ | 1% | 推定 | | `accent-2` | `#2F395C` | コラムリストの濃紺文字 | 0% | 画素の実測 | | `accent-3` | `#EB6A0A` | NEWバッジのオレンジ | 0% | 推定 | | `text` | `#2C2B2D` | 本文・見出しの黒 | 3% | 画素の実測 | | `line` | `#EBEDEA` | 購入リンク枠・グラフ罫線のグレー | 0% | 画素の主要色に補正 | | `text-muted` | `#CCCCCC` | グラフの比較用グレー | 0% | 画素の実測 | | `secondary-accessible` | `#947043` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本に、ピンクとピーチの大きな円形ぼかしを画面端に散らす - 見出し・ナビボタン・数字バッジ・根拠パネルはすべて同じマゼンタで統一 - 購入以外の遷移ボタン（商品情報・レシピ）はキャメル色で主色と役割を分ける - スタンプ見出しはマゼンタ→オレンジのザラついたグラデーション - 成分解説やフッターは生成りの面で区切り、白カードと区別する - コラムリストの文字は濃紺にして落ち着きを出す - `button-secondary` は文字 `#FFFFFF` × 背景 `#B28956` のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#947043`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | スタンプ内の英字セクションラベル | 装飾・ディスプレイ | Dela Gothic One | 400 | 16px | 1.2 | 0.08em | | `headline-lg` | マゼンタのセクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em | | `headline-md` | 商品カードの黒い商品名見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.7 | 0.02em | | `headline-sm` | リード文・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.7 | 0.02em | | `body-lg` | 中央揃えのメッセージ本文 | ゴシック | Noto Sans JP | 500 | 15px | 2.0 | 0.04em | | `body-md` | 商品説明の左揃え本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.8 | 0.02em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `accent` | 根拠パネル内の手書き風強調コピー | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.8 | 0.06em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.04em | - ストーリー部の本文は中央揃え・短い改行で詩のように並べる - 商品詳細の本文は左揃えに切り替える - セクション見出しの下にマゼンタの短い横線（約30px）を置く - 見出しはマゼンタ、本文は黒の2色で完結させる - 根拠パネルの強調語は白の太字＋波線下線で目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、購入リンクのみ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算） - 各大セクションは不定形スタンプ見出し＋上部コの字フレームで始まり、下部コの字フレームで閉じる - イラストは本文の間に大きく挟み、背後にピーチのブロブを敷く - 商品ごとに白カードを積み重ね、カード内に説明→特長3点→成分→根拠→購入を収める - ナビボタンは幅いっぱいで縦に4つ並べる - コラムは白いピル型リストを縦に並べる ## Elevation & Depth - 商品カードとコラムリストにごく薄いぼかし影 - ナビボタンは下にわずかな影で押せる感 - それ以外はフラット ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 成分写真は有機的なブロブ形に切り抜き、商品パッケージは角版または切り抜き - **セクション境界**: ノイズ質感のマゼンタ極太コの字フレーム（上は下向き、下は上向き）で囲む - ナビボタンは角丸大きめのピル型 - 特長番号はマゼンタの小さな円 - 成分ポイントは白地に細いマゼンタ線の円で重ねる - 機能性ラベルは細い黒線のピル枠 ## Components - **ページ内ナビボタン**（`button-nav`）: マゼンタ地に白太字と下向き矢印、幅いっぱいのピル型を縦に4つ - **詳細リンクボタン**（`button-secondary`）: キャメル地に白文字と右矢印、中央配置のピル型 - **スタンプ見出し**（`section-stamp`）: マゼンタ→オレンジのザラついた雲形に英字ラベル、その下にマゼンタの日本語見出しとコの字フレーム - **コラムリスト**（`column-list-item`）: 白いピル型カードに濃紺太字タイトルと右矢印、新着はオレンジのNEWバッジ - **商品選択タブ**（`product-tab`）: 上に小さな商品画像とマゼンタの訴求文、マゼンタ角丸ボックスに白文字の商品名 - **特長番号**（`number-badge`）: マゼンタの小円に白の2桁数字、中央に置き下に本文 - **根拠パネル**（`evidence-panel`）: マゼンタ角丸パネルに白の丸ゴシック強調コピーと波線、内側に白地グラフ - **成分解説ボックス**（`ingredient-box`）: 生成り地に太字見出しと解説、ブロブ形写真 - **購入先リンク**（`shop-link-grid`）: グレー細枠の白タイルを2列に並べ、各ECロゴを配置 ## Do's and Don'ts **Do** - 線画＋淡い彩色の女性イラストを各セクションに大きく使う - 強調色はマゼンタ1色に絞り、補助にキャメルとオレンジを少量 - 背景にピンク・ピーチの円形ぼかしを散らして柔らかさを出す - 根拠データには出典と注釈を小さく必ず添える - スタンプ見出しにノイズ質感を入れて手作り感を出す **Don't** - 写真主体のクールな構成にしない - 濃い背景色の全面セクションを多用しない - マゼンタ以外の原色を見出しに使わない - 角張った四角ボタンにしない - 本文を詰めた行間で組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コンセプトを情緒的に伝える）: 女性たちの日常イラストのコラージュ中央に白円ロゴマーク、淡いピンクぼかし背景 2. **コンセプト文とナビ**（思いを語り各章へ誘導）: マゼンタ見出し＋中央揃え本文、その下にマゼンタのピル型ナビボタン4つ 3. **悩みへの共感**（忙しい女性の小さな不調に寄り添う）: スタンプ見出しとコの字フレーム、悩みを括弧付きの短文で並べ、ブロブ上のイラスト 4. **データによる課題提示**（栄養不足を客観的に示す）: マゼンタとグレーの棒グラフをピーチのブロブ上に置き、注釈を下に 5. **解決の提案**（商品の存在意義を伝える）: 中央揃え本文と親子イラスト、下部コの字フレームで締める 6. **コラム**（情報提供で信頼と回遊を作る）: イラスト＋本文、白いピル型リンクリストにNEWバッジ 7. **商品ラインナップ**（商品を選ばせる）: マゼンタの角丸タブに商品名、上に訴求ラベル 8. **商品詳細カード**（機能と特長を説明）: 白カードに黒見出し、パッケージ写真と円形ポイント、番号付き特長3点 9. **成分と根拠**（機能性の裏付けを示す）: 生成りボックスに成分解説とブロブ写真、マゼンタの根拠パネルにグラフ 10. **購入導線**（購入先へ誘導）: 商品画像と名前、キャメルの詳細ボタン、EC各社ロゴの2列グリッド 11. **レシピ**（継続利用の楽しみを提案）: スタンプ見出し両脇に料理写真の切り抜き、中央揃え本文とキャメルボタン 12. **フッター**（企業サイトへの導線）: 生成り地に2列のテキストリンクと縦区切り線、ロゴとコピーライト ## Imagery - 黒い細い手描き線に淡いパステルを塗った女性の日常イラスト（家事・仕事・子育て・ガーデニング） - イラストの背後にピーチ色の不定形ブロブを敷く - 成分や食材の写真は明るく自然光、ブロブ形に切り抜く - パッケージは正面の切り抜きで、横に細い線の円で数値ポイントを重ねる - スタンプ見出しはザラついたノイズ質感のマゼンタ〜オレンジのグラデーション - 背景にピンクとピーチの大きなエアブラシ状の円を散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅約800pxを中央に置き、背景ぼかしを左右に広げる - PC のナビボタンは4つを横一列に並べる - PC の共感・データ・解決はイラストと本文を左右交互の2カラムにする - PC の特長3点は横3列、購入リンクは横4列にする - PC のヘッダーはグローバルナビを横並び表示、SP はハンバーガー - 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-80228aca`（元 LP の URL から採番） - **元 LP**: https://www.morinagamilk.co.jp/products/brand/woman-wellness/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。