DESIGN.md — 濃紺×金帯の一般用医薬品 LP（Royal Blue and Gold OTC Medicine LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、力強い・インパクト、クール・先進的
• キーワード: 濃紺グラデーション・金色の帯見出し・POINT 番号バッジ・成分図解・アコーディオン情報
• 地の質感: 光沢のある金グラデーションと、放射状の光が差す青グラデーションの面。写真以外はフラットに塗る
• 形: 角丸が小さい長方形カードと、ピル型の成分ラベルを組み合わせる。FV の人物は円形に切り抜く
• 温度感: 寒色が中心で、金色とピンクを差し色にして少し温かみを足す

Colors

• 上から明るい青、濃紺、王道の青、白と、地の色を段階的に切り替える
• POINT 見出しは必ず金のグラデーション帯にし、文字は濃紺にする
• 成分は主成分を黄金、補助成分をピンクで色分けする
• 青地の文字は白に限る。強調は文字の太さとサイズで付ける
• ボタンは白地に濃紺の文字で、外部リンクのアイコンを添える
• 白地のエリアでは、枠線と見出しに水色の線と青を使う

Typography

• 全体を太めのゴシックで統一する
• 大見出しは中央揃えにし、2〜4 行に改行して積む
• 本文は左揃えで、13px 前後にする
• 補足の語は、見出しの中で一回り小さくする
• セクション名には、金のグラデーション文字に下線の光る線を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分比較のみ 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• POINT 帯は画面幅いっぱいに敷く
• 図解カードは左右 16px 内側に置く
• 画像と説明文は左右に並べ、画像は幅 30% にする
• アコーディオンの各行の間は 60px 前後空ける
• ボタンは幅 60% で中央に置く

Elevation & Depth

• 基本はフラットにする
• 白ボタンにだけ、ごく薄い影を付ける
• 金帯は上下に濃い金の縁を入れ、光沢を表現する

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: FV の人物はピンクの円形背景で切り抜く。成分写真は角丸の小さい四角
• セクション境界: 直線で切り替える。金帯で区切る
• 成分の結論ラベルは楕円・ピル型にする
• カードの角丸は 6〜10px にする
• ボタンは角丸 4px の長方形にする
• 上向き矢印で、作用の因果を示す

Components

• POINT 金帯見出し（point-band）: 金グラデーションの横帯。左に白い角丸四角の POINT 番号を置き、右に濃紺の太字見出しを置く
• POINT 番号バッジ（point-number）: 白い四角の中に、小さな英字 POINT と大きな数字を置く
• 成分ラベル（ingredient-label）: 主成分は黄金の大きな四角、補助成分はピンクの四角にし、＋でつなぐ
• 作用図解カード（mechanism-card）: 青いカードの中に、原因の見出し、上向き矢印、楕円の成分、白文字の説明を縦に並べる
• 白リンクボタン（button-link）: 白地に濃紺の太字。外部リンクのアイコンを付ける
• 情報アコーディオン（accordion）: 明るい青の帯で、左に項目名、右に＋を置く
• 関連商品カード（related-card）: 白地に水色の枠線。中に見出し、区分バッジ、商品画像を並べる
• 金文字セクション名（section-title-gold）: 濃紺地に、金グラデーションの文字と下線の光を置く

Do's and Don'ts

Do - POINT は番号付きの金帯に統一する - 成分は色分けしたラベルと矢印で図解する - 青地の階調は上から下へ暗くしていく - 医薬品の区分と使用上の注意を明記する - 詳細情報はアコーディオンにまとめる

Don't - 暖色の背景を全面に使わない - 金帯の上に白文字を置かない - 角丸を大きくしてポップにしない - 効能を誇張する装飾文字を使わない - 写真の上に長い本文を載せない

Page Structure

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

1. ファーストビュー（人物と商品で、用途を一目で伝える）: 明るい青のグラデーション地に、円形ピンク背景の人物を置く。左上に縦積みのコピー、下に商品名ロゴと箱を置く
2. 誕生告知（商品の位置付けを宣言する）: 放射状の光が差す濃紺地に、白い極太の中央揃えテキストを 4 行置く
3. 製品特長 POINT1（処方設計を説明する）: 金帯の見出し、本文、成分ラベル比較、作用図解カード 2 枚、成分写真付きの説明の順に並べる
4. POINT2〜4（胃へのやさしさ・眠くならない・飲みやすさを訴求する）: 金帯の見出しのあとに、小さな画像と本文を左右に並べる
5. 医薬品区分と注意（法令上の告知）: 白い中央見出しと本文を置き、白ボタンで注意事項へ誘導する
6. 製品情報（成分・効能・用法・価格を示す）: 青いアコーディオンを 4 つ置き、FAQ ボタンを添える
7. 関連リンク（シリーズ商品へ送客する）: 白地に枠線付きのカードとバナー画像を縦に並べる
8. フッター（ブランドとシェア、規約）: ロゴ、SNS アイコン、2 列のリンク、コピーライトを並べる

Imagery

• 中年男性が錠剤をつまみ、OK サインで微笑む広告写真
• 人物の背後にパステルピンクの円を敷く
• 生薬は白背景の切り抜き写真に、イメージの注記を入れる
• 胃は柔らかいピンクの断面イラストで描く
• 商品パッケージは正面の切り抜きで並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP の幅のカラムを画面中央に固定する
• PC の左側には商品ロゴ・パッケージ・販売店ボタンを固定表示する
• PC の右側には目次のナビゲーションを置く
• 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 行書くと起動時に読み込まれる。