DESIGN.md — 柑橘イエロー×ティールの栄養サプリ LP（Vivid Citrus Yellow and Teal Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト、清潔・爽やか
• キーワード: 柑橘イエロー・ティール・黒板風ダーク・極太ゴシック・成分表・球体アイコン
• 地の質感: 果物写真の背景、黒板のようなざらついた暗い地、白い地に薄いグレーのグラデーションを組み合わせる
• 形: 角丸は小さめのカード、光沢のある球体バッジ、斜めに切った見出しタブ、吹き出し
• 温度感: 暖色の黄色・オレンジが主役で、ティールで清涼感を足した明るく温かい印象

Colors

• 地の色はイエロー、黒板ダーク、白〜ライトグレーの 3 種類をセクションごとに切り替える
• ビタミン系はオレンジ、ミネラル系はティールと決め、表・バッジ・強調文字の色をそろえる
• 赤は不足・注意・見出しタブにだけ使い、多用しない
• 暗い地の上の文字は白、イエロー地の上のカードは白にして読みやすさを保つ
• 大見出しの強調語はオレンジやティールの塗り文字にし、残りは墨色にする
• nutrient-orb は文字 #FEFEFE × 背景 #F3BD1E のコントラスト比が 1.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#947008、4.55:1）を使う。
• speech-bubble は文字 #FEFEFE × 背景 #EC941C のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A8670E、4.52:1）を使う。

Typography

• 見出しは極太にして、1〜2 文字の強調語を約 2 倍の大きさにしてメリハリを出す
• 助詞は小さく、強調語は大きくする大小差のある組み方にする
• 数値は等幅に近い太字で右にそろえ、成分表の読みやすさを優先する
• 暗い地の白文字の見出しには薄い影を付けて浮かせる
• 注釈は 11px 前後のグレーで、本文と区別する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分表だけはビタミンとミネラルの 2 列を並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の地色で区切り、中央に白いカードを置く
• 成分表は 2 列を左右対称に並べ、行の高さをそろえる
• 大見出しは中央ぞろえ、本文カードの中は左ぞろえにする
• イエロー地の左右の端に果物写真をのぞかせて縁取りにする

Elevation & Depth

• 白いカードには柔らかい影 0 4px 16px rgba(0,0,0,0.12) を付ける
• 球体バッジは光沢ハイライトとドロップシャドウで立体的に見せる
• 暗いセクションの写真は白枠と軽い影でポラロイド風にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形か、白枠を付けて少し傾けた切り抜き。人物は背景を抜いた切り抜きにする
• セクション境界: 直線で地色を切り替える。黒板セクションの端はざらついたにじみにし、カードの上端にはギザギザのタブを付ける
• 品質カードは右下だけ大きく丸めた非対称の角丸にする
• 見出しタブは斜めに傾けた赤い長方形にする
• 吹き出しには三角のしっぽを付ける
• 成分を表すバッジは正円の球体にする

Components

• 球体バッジ（nutrient-orb）: 光沢のある正円の中に成分名や種類の数を入れる。色は成分ごとに変える
• 2 列の成分表（nutrient-table）: オレンジとティールの見出し帯の下に、点線でつないだ項目名と数値を並べる
• 斜めの見出しタブ（tab-label）: 赤やオレンジの傾けたラベルを見出しの左上に重ねる
• 吹き出しラベル（speech-bubble）: オレンジ地に白文字で短く逆接を示し、しっぽを付ける
• 悩みのチェックリスト（check-list）: オレンジの丸いチェックアイコンと太字の短文を 2 つ並べる
• 不足を示す棒グラフ（bar-chart）: 暗い地に、摂取量はオレンジとティール、不足分は赤で縦棒を描き、波線で軸を省略する
• レビューカード（review-card）: ティールのタイトル帯と人物アイコン、黄色い星、マーカーを引いた本文、グレーのメタ情報で作る
• 栄養の説明ボックス（info-box）: 白い長方形に、成分名だけをオレンジやティールにした説明文を入れる
• 品質訴求カード（quality-card）: 白〜グレーのカードに極太の見出し、写真 3 枚、線のアイコン付きのリストを並べる

Do's and Don'ts

Do - ビタミンはオレンジ、ミネラルはティールという色の対応を全セクションで守る - 大見出しは強調語だけ大きくする大小のジャンプ率で組む - 数値の情報は表・グラフ・球体にして目で見て伝える - 注釈を必ずそばに小さく添える - 明るいセクションと暗いセクションを交互に置いてリズムを作る

Don't - くすんだ色やパステルだけで組んで、元気さを弱めない - 細い明朝体を見出しに使わない - 赤を広い面に使わない - 成分表を 1 列に崩して冗長にしない - 白いカードに影を付けずに地色へ埋もれさせない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品と主なベネフィットを一目で伝える）: 柑橘と青空のグラデーションを背景に、パッケージを中央に置き、極太の縦書きの強調語を両脇に配置する。下に球体バッジを 3 つ並べる
2. 配合成分の一覧（入っている成分の多さを示す）: 野菜と果物の写真を全面に敷き、白い大見出しと 2 列の成分表を重ねる
3. 問題の提起（食事だけでは栄養が不足しがちだと示す）: 黒板風の暗い地に白黒の帯見出しを置き、特大の強調語と不足を示す棒グラフを入れる
4. 悩みへの共感（読み手が自分ごととして捉えられるようにする）: 困った表情の人物の切り抜き、吹き出し、チェックリスト、傾けた写真を白枠に収める
5. 解決の提示（商品で栄養を補えることを伝える）: イエローの全幅地に特大の白抜き文字を置き、球体バッジで錠剤を円形に囲む
6. 成分の詳細（配合量の考え方を説明する）: ギザギザの上端を持つ白いカードに斜めタブ、英字ラベル、2 列の成分表、下線付きの強調文を入れる
7. 商品の仕様（食品の区分や摂取の目安、粒の小ささを示す）: パッケージ写真、丸いバッジ、錠剤をつまむ手、手書き風の吹き出しで構成する
8. 栄養の機能表示（成分ごとの働きを示す）: イエロー地に白い説明ボックスを縦に 6 つ並べ、下に注意文を置く
9. お客様の声（実際の購入者の評価で信頼を得る）: 赤い斜めタブの見出しに続けて、レビューカードを 2 枚並べる
10. 品質と価格のこだわり（製造の品質と安さの理由を説明する）: 白い研究所の写真を背景に、品質カードとコスト削減のアイコンリストを置く
11. 締めのビジュアル（使ったあとのイメージで背中を押す）: 元気な人物の切り抜きと柑橘を明るい背景に配置し、縦書きの大見出しと球体バッジを重ねる

Imagery

• 柑橘の断面や色鮮やかな野菜・果物を、ボケ味を残して大胆に配置する
• 球体はガラス玉のような光沢、ハイライト、グラデーションで描く
• 人物は白背景に切り抜き、悩みは困った表情、締めは笑顔で拳を上げたポーズにする
• 黒板風の背景にはチョークのような粗いテクスチャを入れる
• アイコンは黒い線画のシンプルなものにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元の画像は縦長の 1 カラムで組まれているので、SP でもそのまま縦に積む
• SP では大見出しを 56〜64px、成分表の文字を 13〜14px にする
• PC では本文の幅を 750px 程度に固定し、左右には果物写真の背景を広げる
• 2 列の成分表は SP でも 2 列のままにし、余白を詰めて収める

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 行書くと起動時に読み込まれる。