DESIGN.md — 紺×金文字の医薬品貼付剤 LP（Deep Navy Pharma Patch Product LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 濃紺グラデーション・金色の立体見出し・白カード・番号付き特長・水色の人体イラスト・医薬品の信頼感
• 地の質感: 地はフラットな紺と青のグラデーション。背景の端に、植物のシルエットを線画で薄く透かす。
• 形: 角丸の白カード、丸い番号バッジ、ギザギザの星形バッジ、吹き出し型の枠
• 温度感: 寒色の紺がベース。金色と温感を表すオレンジで暖かさを差す。

Colors

• セクションの地は紺と青のグラデーションにし、内容は白いカードに載せる。
• セクション見出しは金色の文字に、オレンジ系の縁取りと影を付けて立体にする。
• 特長のタイトルは紫、ポイントのタイトルは青と、ブロックごとに強調色を変える。
• 番号バッジは使い方では紫の丸、特長ではベージュの丸、ポイントでは黄の丸にする。
• 緑はヘッダーとフッターだけに使う。
• 温感の表現にはオレンジのグラデーションを使う。

Typography

• 本文も含めて、ほぼすべての文字を太字にする。
• 見出しは短く大きくする。数字は特に大きく強調する。
• 立体見出しには縁取りとドロップシャドウを重ねる。
• 説明文は1項目あたり2〜3行に収める。
• 登録商標の記号は、小さい丸囲みの文字で添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。使い方ステップのみ 2 列グリッドにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約90%で、中央に置く。
• 特長は、左に番号バッジ、右にタイトルと本文を置く横並びにする。
• 手順は2×2のグリッドで並べ、カードの間に三角の矢印を入れる。
• セクション見出しはカードの上に中央揃えで置く。
• セクションの間は、紺の地を広めに見せて区切る。

Elevation & Depth

• 白カードは影なしのフラットにする。
• 金色の見出しにだけドロップシャドウを付ける。
• 固定の購入ボタンには、薄い影と白枠を付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは白の角丸枠に入れる。イラストは切り抜きで配置する。
• セクション境界: グラデーションの地を直線で切り替える。
• ポイント一覧は、吹き出しのしっぽ付きの角丸枠に入れる。
• 星形のギザギザバッジを、枠の右上に重ねる。
• タブはピル型にする。
• 項目間の区切りは点線にする。

Components

• 商品詳細ボタン（button-detail）: 白枠でアイコン付きの小型ボタン。紺の地の上に置く。
• 購入誘導ボタン（button-purchase）: 画面下に固定する、青地に白文字・白枠のボタン。
• 通販誘導バナー（banner-shop）: 薄黄のピル型。左にロゴ、右に誘導文を置く。
• 金色の立体見出し（heading-gold）: 金色の文字にオレンジの縁取りと影を付ける。背景に植物の線画を添える。
• 星形ポイントバッジ（badge-star）: 黄色のギザギザの星形。中に濃紺の文字で数とキーワードを入れる。
• 吹き出しポイントカード（card-point）: 紺の枠線を付けた白い角丸の吹き出し。番号付きの3項目を点線で区切る。
• 番号付き特長（feature-item）: 「特長」の小ラベルとベージュの丸数字を左に置き、右に紫のタイトルと本文を並べる。
• 手順カード（step-card）: 左上に紫の丸番号を付けた水色のイラストに、本文を添える。
• 部位切替タブ（tab-position）: 薄紫のピル型。選択中は濃い紫地に白文字にする。

Do's and Don'ts

Do - 地は紺と青のグラデーションにし、内容は白カードにまとめる。 - 見出しは金色の立体文字に統一する。 - 番号付きリストで要点を短く示す。 - 効能や使い方は、水色の人体イラストで図解する。 - 法定表記と注釈は、小さな文字でも省略しない。

Don't - 淡いパステル系の地にしない。 - 見出しを細い書体や明朝にしない。 - 白カードに強い影や装飾を付けない。 - ブランドの緑を本文エリアに多用しない。 - 人体イラストを写真に置き換えない。

Page Structure

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

1. ヘッダー（ブランドの提示とナビゲーション）: 白地にロゴを置き、緑のメニューアイコンを添える。
2. ファーストビュー（容量の訴求と商品の印象づけ）: 紺紫のグラデーション地に金色の大見出しを置く。人物と商品ロゴを左右に配置し、商品詳細ボタンを添える。
3. 商品紹介とポイント（おすすめの容量と3つの利点を示す）: 青地に白枠の商品画像を置く。吹き出し型のカードに番号付きで3項目を並べ、星形バッジを重ねる。
4. 別容量の紹介（大容量の選択肢を示す）: 商品パッケージの画像の下に、詳細ボタンを置く。
5. 通販誘導（購入先への誘導）: ピル型のバナーを中央に置く。
6. 特長（6つの特長を説明する）: 紺地に金色の見出しを置き、白カードに番号付きの縦リストとイラストを並べる。
7. 使い方（貼り方を4ステップで示す）: 2×2のイラストグリッドに矢印と紫の丸番号を付ける。
8. 貼る位置の参考例（部位ごとの貼り方を示す）: 薄紫のパネルに部位タブを並べ、全身の人体図に貼る位置の点を示す。
9. 注記・関連バナー（法定表記と関連コンテンツへの誘導）: 紺地に小さな注記を置く。その下は白地に横長バナーを縦に並べ、SNSアイコンを添える。
10. フッター（サイト内リンクと購入ボタン）: 緑地に白のリンクを並べ、青の購入ボタンを下部に固定する。

Imagery

• 商品パッケージは正面から撮り、白い角丸の台紙に載せる。
• 人体は水色のなめらかな3D風イラストで描き、貼る位置をベージュの小さな丸で示す。
• 温感はオレンジの同心円グラデーションで表現する。
• 生薬は水彩風の植物イラストで描く。
• 背景の端に、植物の葉のシルエットを紺の濃淡で透かす。
• FVの人物は明るい表情の上半身にし、商品を手に持たせる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約70%幅のコンテンツを置き、左右に紺地と植物の装飾を見せる。
• PCのヘッダーは緑のロゴバーとタブ型のグローバルナビにする。
• PCの商品紹介は2容量を2カラムで並べ、ポイントは横3列のカードにする。
• PCの特長は2カラムのグリッド、手順は横4列にする。
• 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 行書くと起動時に読み込まれる。