DESIGN.md — 深紅×明朝の信頼系かぜ薬シリーズ LP（Clinical Crimson OTC Medicine LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、上品・高級
• キーワード: 深紅・明朝見出し・エビデンスグラフ・斜めカット・金アクセント・線画イラスト
• 地の質感: フラットな単色面が中心。歴史帯のみ赤のグラデーションと斜めの光沢。
• 形: 角丸はほぼ使わず直角。ボタンと帯は平行四辺形の斜めカット。カードは細い赤枠と左上の三角コーナー。
• 温度感: 赤で温かみがあるが、白とグレーの地と細い線で清潔・理知的に抑えている。

Colors

• 地は白と淡いグレーをセクションごとに交互に切り替える。
• 深紅は見出し文字・グラフ棒・表ヘッダ・ボタンに限定して使う。
• 金色は Q 記号・年表の丸・上位ラインの帯など格を示す箇所だけ。
• 表の項目セルと注意書き枠は淡いピンクで塗る。
• 本文中の重要語は黄色マーカーで強調し、文字色は変えない。
• ライン別の色（紫・橙・緑）はファーストビューの商品帯でのみ使う。

Typography

• 見出しは明朝、本文・ラベル・注釈はゴシックで分ける。
• 見出しは中央揃えで 2〜4 行に改行する。
• 数値は大きく太く、単位（%・年・月）は小さくする。
• 注釈番号は小さな上付きの ※ 番号で示す。
• 本文は左揃えで、行間は広めの 1.8 前後にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はグラフ 2 列、カードは 4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは左右約 20px の余白をとって中央に置く。
• 商品ブロックは見出し→区分バッジ→ロゴ→説明→パッケージ写真→根拠の順に並べる。
• グラフや表は淡いグレーのパネルにまとめて置く。
• 比較表は横スクロールにし、最初にスワイプの案内を重ねて表示する。
• 購入先ボタンは白いカードを縦に並べ、最後に赤い主ボタンを置く。

Elevation & Depth

• 基本はフラット。影はほとんど使わない。
• 購入先の白カードとパッケージ写真には、ごく薄い落ち影をつける。
• Q&A カードは淡いグレー地に影なしの白カードを置き、地との差で浮かせる。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: パッケージは背景を抜いて置く。年表の商品は淡いピンクの楕円の台に載せる。
• セクション境界: 直線で背景色を切り替える。フッター上だけ赤い斜線のライン。
• 主ボタンは平行四辺形で、左端に金のライン、右端に細い矢印を入れる。
• サブボタンは白地に赤枠の平行四辺形。
• カードは 1px の深紅枠で、左上に赤い三角を入れる。
• ラベル帯は右端を斜めに切り落とす。

Components

• 斜めカット主ボタン（button-primary）: 深紅の平行四辺形。左端に金の斜めライン、右端に細い横矢印をつける。
• 斜め枠サブボタン（button-outline）: 白地に深紅の細枠の平行四辺形。右に虫眼鏡アイコンを置く。
• ライン別商品帯（product-band）: 症状を表すコピー、区分バッジ、ロゴ、パッケージを 1 本の帯にまとめる。帯の色はラインごとに変え、右端を斜めにカットする。
• 根拠グラフパネル（evidence-chart）: 淡いグレーのパネルに深紅の棒グラフやドーナツグラフを置き、下に出典の注記を入れる。
• 試験概要表（spec-table）: 左の項目セルは淡いピンク、右の値セルは白。罫線はグレー。
• 成分リスト箱（ingredient-box）: 深紅（上位ラインは金）の見出し帯の下に白い箱を置き、色付きの丸の箇条書きで成分を並べる。
• 生活アドバイスカード（tip-card）: 深紅の細枠カード。左上に三角を入れ、中央に深紅の見出し、赤の線画イラスト、本文の順に並べる。
• Q&A カード（faq-card）: 白カードの左に金色の明朝体の Q を置き、深紅の質問文、グレーの回答の順に並べる。
• 沿革タイムライン（timeline）: 深紅の縦線に金の丸を置き、点線で年号（明朝体・深紅）につなぐ。右に旧パッケージを置く。
• 黒の斜めラベル帯（label-tag）: 左端から伸びる黒帯。右端を斜めに切り、白い太字の短い告知を入れる。

Do's and Don'ts

Do - 見出しは明朝体で、深紅か黒にする。 - 効能の主張には必ずグラフや表と ※ 注釈を添える。 - ボタンと帯は斜めカットで統一する。 - 白とグレーの地をセクションごとに交互にする。 - イラストは深紅の単色線画にそろえる。

Don't - ピル型や大きな角丸のボタンにしない。 - 派手なグラデーションを多用しない（歴史帯だけにとどめる）。 - ライン別の色をファーストビュー以外で使い散らさない。 - 注釈や出典を省略しない。 - ポップな丸ゴシックやカラフルなイラストを使わない。

Page Structure

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

1. ファーストビュー（主力商品と信頼感の提示）: 明るい室内写真に人物を置き、明朝の大コピーを重ねる。下に主力商品の赤帯を斜めカットで敷く。
2. シリーズ商品帯（症状別ラインの一覧）: 紫・橙・緑の帯を縦に積む。各帯は症状コピー、ロゴ、パッケージで構成する。
3. 問題提起（症状が複合的に出ることを伝える）: 明朝の大見出し、マーカー入りの本文、深紅の棒グラフの順に並べる。
4. シリーズ紹介（ブランドロゴとコンセプトの提示）: 斜めのロゴマークと深紅の明朝見出しを置き、斜め枠のサブボタンを添える。
5. 主力商品詳細（成分と効果の根拠を示す）: 区分バッジとロゴの下にパッケージを置き、グレーのパネルにドーナツグラフと棒グラフ、ピンクの表、注釈を続ける。
6. 派生商品紹介（別タイプ・上位ラインの訴求）: グレー地に成分の箱と斜めの主ボタンを置いたブロックを繰り返す。
7. 比較表（シリーズ全体の比較）: 横スクロールの表。ヘッダは深紅、用法の行はサーモンレッド。
8. 付加機能の紹介（パッケージの工夫を伝える）: グレーのパネルに金の三角の箇条書きを置き、ピンク地にフラットなイラストを添える。
9. 購入導線（通販・店舗への誘導）: 黒のラベル帯の下に、白いロゴカードを縦に並べ、最後に深紅の店舗検索ボタンを置く。
10. 生活アドバイス（予防とケアの情報で好感を得る）: マーカー付きの明朝見出しの下に、赤い線画カードを縦に連ねる。
11. よくある質問（服用時の不安を解消する）: グレー地に、金の Q 付きの白カードを並べる。
12. ブランドの歴史（ロングセラーの実績で信頼を得る）: 赤いグラデーションの帯に金の明朝タイトルを置き、下に縦のタイムラインを続ける。
13. フッター（企業情報とリンク）: 赤い斜線の区切りを入れ、ロゴ、矢印付きのテキストリンク、コピーライトを並べる。右上に赤い四角の TOP ボタンを置く。

Imagery

• 人物は白シャツの落ち着いた中年男性。明るくぼかした室内を背景にする。
• パッケージは白背景に切り抜き、薄い落ち影をつける。
• 生活シーンのイラストは、深紅の単色で描いた女性の線画。
• 説明用の図解は、グレーとピンクのフラットなイラスト。
• グラフは深紅の単色で、補助線は細い黒かグレー。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 960px に収め、中央に置く。
• PC のファーストビューは人物を右、商品帯を横 3 列に並べる。
• PC ではグラフ 2 つ、テキストとグラフを横に並べる。
• PC ではアドバイスカードを 4 列のグリッドにする。
• 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 行書くと起動時に読み込まれる。