DESIGN.md — 紫×金の誠実な市販薬シリーズ LP（Trustworthy Purple and Gold OTC Medicine LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、清潔・爽やか、上品・高級、情報量多め・訴求型
• キーワード: 濃紫・金のスラッシュ装飾・明朝見出し・斜めカット・線画イラスト・黄色マーカー
• 地の質感: フラットな面。影はごく弱く、通販ボタンにだけ薄い影を付ける
• 形: 角丸は使わず直角が基本。ボタンや帯は斜めにカットし、カードの左上に三角を付ける
• 温度感: やや寒色で落ち着いた印象。金と黄色のマーカーで温かみを足す

Colors

• 地は白を基本にし、購入エリア・補足・Q&A は淡いグレーの地に切り替える
• 濃紫は見出し文字・ボタン・帯・線画に限って使い、ブランドの色として統一する
• 金はスラッシュ装飾や Q 記号など小さな面だけに使う
• 強調したい本文には黄色のマーカーを下半分ではなく文字全体に引く
• シリーズの商品帯だけは、商品ごとの色（赤・橙・緑）を使ってよい
• グラフで強調する項目は紫の棒と紫の点線枠、その他はグレーにする

Typography

• 訴求見出しは明朝で中央揃えにし、2〜3 行に改行する
• 本文・カード・ボタンはゴシックで統一する
• 見出しの強調語は紫、または黄色マーカーで目立たせる
• 注釈は※印と番号を付け、小さなグレー文字にする
• 導入語は「＼ ／」の形の金スラッシュで挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC の購入ボタンは 4 列、予防カードは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 20px
• 商品ブロックは見出し→バッジ→ロゴ→注釈→商品画像→ボタンの順に縦へ積む
• 予防カードは枠線を共有し、縦に連結する
• 購入エリアはグレーの地に白いロゴボタンを縦に並べる
• Q&A は白いカードを 16px 間隔で並べる

Elevation & Depth

• 基本は影なし。境界は枠線か地の色の差で作る
• 通販ロゴのボタンだけに、薄いぼかし影（0 2px 6px 程度、透明度 10%）を付ける
• 商品パッケージの写真には自然な落ち影を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を切り抜いて置く。人物は FV で右側に切り抜いて配置する
• セクション境界: 直線で地の色を切り替える。シリーズ帯は右上がりの斜めカット。フッター上は斜線の点線
• 詳細ボタンは平行四辺形にし、左端に金の斜め帯、右端に横矢印を付ける
• カードの左上に紫の直角三角形を付ける
• ラベル帯は右端を斜めにカットする
• 吹き出しは丸型で紫の線で描く

Components

• 斜めカットの詳細ボタン（button-detail）: 紫の平行四辺形。左端に金の斜め帯、右端に細い横矢印を付ける
• 販売店検索ボタン（button-store）: 幅いっぱいの紫ボタン。斜めにグラデーションの陰影を入れ、右に矢印を付ける
• 通販ロゴボタン（button-ec）: 白い長方形の中央にロゴを置き、薄い影を付ける
• 金スラッシュの導入語（slash-lead）: 短い導入語を金の太い斜線で左右から挟む
• 角三角付きの枠線カード（corner-card）: 紫の 1px 枠。左上に三角を置き、紫の見出し・線画・本文を中央揃えで並べる
• 斜めカットのラベル帯（label-tab）: 左端から伸びる黒い帯に白文字。右端を斜めにカットする
• Q&A カード（faq-card）: グレーの地に白いカード。金の明朝で Q を付け、問いは紫の太字、答えは本文で書く
• シリーズの商品帯（series-band）: 商品の色で塗った斜めカットの帯。左に効能と商品名、右に商品写真を置く
• 強調付きの横棒グラフ（bar-chart）: グレーの棒の中で、強調する項目だけを紫の棒と点線枠で目立たせる
• 医薬品区分バッジ（badge-category）: 黒枠の小さなボックスと、黒い丸の対象マークを並べる

Do's and Don'ts

Do - 見出しは明朝、本文はゴシックで役割を分ける - 紫を主に、金は少量の差し色に留める - ボタンや帯は斜めカットにして動きを出す - 注釈と根拠データを近くに添えて誠実さを示す - イラストは紫一色の線画に淡紫の面を少しだけ入れて統一する

Don't - 角丸やピル型のボタンを使わない - 派手なグラデーションや強い影を多用しない - 金を広い面に使わない - 見出しに丸ゴシックやポップな書体を使わない - 効能を誇張するような装飾（爆発マークなど）を使わない

Page Structure

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

1. ヘッダー・お知らせ帯（ブランドの表示と購入への導線）: 白いヘッダーの右に紫の購入ボタンとメニューを置き、下に淡いピンクのお知らせ帯を敷く
2. ファーストビュー（主力商品と効能を伝える）: 明るい室内写真の上に明朝のキャッチを置き、右に人物、左下に紫の斜め帯と商品を配置する
3. シリーズの商品帯（症状別の商品を一覧で見せる）: 商品の色ごとに斜めカットの帯を縦に重ね、左に効能、右に商品写真を置く
4. 市場背景・データ（ニーズを根拠と一緒に示す）: 明朝の大見出し、マーカー付きの本文、強調付き横棒グラフ、調査概要の順に置く
5. 商品紹介（各商品の特長と詳細への導線）: 金スラッシュの導入語、紫の明朝見出し、区分バッジ、ロゴ、商品写真、斜めの詳細ボタンの順に置く
6. 付加機能の紹介（パッケージの工夫を伝える）: 淡いグレーのボックスに見出しと三角マーカーの箇条書きを入れ、下に淡紫グラデーションのイラストを置く
7. 購入先（通販と店舗への導線）: 黒いラベル帯の下のグレー地に、白い通販ロゴボタンを縦に並べ、最後に紫の販売店検索ボタンを置く
8. 予防・生活提案（症状のケアを啓発して好感を得る）: マーカー付きの導入文と明朝見出しの下に、角三角付きの線画カードを縦に連結する
9. マナーの提案（せきエチケットを示す）: 同じ型のカードに吹き出し付きの線画を入れる
10. よくある質問（服用の不安を解消する）: グレー地に白い Q&A カードを並べる。見出しはロゴと金の明朝を組み合わせる
11. フッター（企業情報とリンク）: 右端に紫の正方形の TOP ボタン、斜線の区切り、ロゴ、矢印付きのテキストリンクを置く

Imagery

• 商品パッケージは正面やや斜めの切り抜きにし、落ち影を付ける
• 人物は清潔な白シャツの中年男性。明るくぼかした室内を背景にする
• イラストは濃紫一色の線画にし、服だけ淡いラベンダーで塗る
• 説明図は灰色の箱とスマホを手に持つ図にし、淡紫のグラデーション地に金の効果線を添える
• アイコンは金の地球と家の小さなシンボルを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 960px のコンテンツ幅を取り、左右に余白を設ける
• PC のシリーズ帯は上段に主力商品、下段に 3 商品を横に並べる
• PC の市場背景は本文とグラフを左右 2 カラムにする
• PC の商品紹介はロゴと商品写真を左右に並べる
• PC の通販ボタンは 4 列、予防カードは 3 列のグリッドにする
• 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 行書くと起動時に読み込まれる。