DESIGN.md — マゼンタ×水彩ぼかしの女性向け栄養食品LP（Magenta Watercolor Illustrated Women's Nutrition LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、かわいい
• キーワード: マゼンタ・水彩ぼかし・線画イラスト・ザラ質感スタンプ・白カード・女性の日常
• 地の質感: 白地にピンク・ピーチの柔らかな円形ぼかしが浮かび、見出しスタンプとフレームはノイズの粒子が乗った版画風のザラ質感
• 形: 大きめ角丸のピルボタン、不定形の雲形スタンプ、上下が開いたコの字フレーム、有機的なブロブ形の背景と写真切り抜き
• 温度感: 暖色寄り。マゼンタの華やかさとピーチの温かみで親しみやすい

Colors

• 地は白を基本に、ピンクとピーチの大きな円形ぼかしを画面端に散らす
• 見出し・ナビボタン・数字バッジ・根拠パネルはすべて同じマゼンタで統一
• 購入以外の遷移ボタン（商品情報・レシピ）はキャメル色で主色と役割を分ける
• スタンプ見出しはマゼンタ→オレンジのザラついたグラデーション
• 成分解説やフッターは生成りの面で区切り、白カードと区別する
• コラムリストの文字は濃紺にして落ち着きを出す
• button-secondary は文字 #FFFFFF × 背景 #B28956 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#947043、4.51:1）を使う。

Typography

• ストーリー部の本文は中央揃え・短い改行で詩のように並べる
• 商品詳細の本文は左揃えに切り替える
• セクション見出しの下にマゼンタの短い横線（約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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。