DESIGN.md — 水色×紺×若草色の湿布薬 LP（Aqua Blue Stripe & Leaf Green OTC Patch LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、ポップ・元気、情報量多め・訴求型
• キーワード: 斜めストライプ地・紙質の白カード・極太丸ゴシック・線画イラスト・葉柄パターン・色帯でセクション分け
• 地の質感: 地は細い斜めストライプが入った単色ブルー。カードは和紙のような微細なノイズ入りの白で、下にやわらかい影がある
• 形: 角丸 20px 前後のカードと写真。直線で色帯を区切る
• 温度感: 寒色中心で涼しく清潔。黄色のマーカー文字で温度を少し足す

Colors

• 上から水色→紺→緑→白の順に、セクションごとに地の色を切り替える
• 青系の地には白抜き文字だけを置く
• 特長は紙質の白カードに入れ、見出しは水色、ラベルと本文は紺と黒にする
• 緑地では強調する語だけを黄色にし、大きく組む
• 主ボタンは水色の単色塗りに白文字
• イラストは紺の線に水色の面、ポイントに黄色の星
• feature-card は文字 #019FE6 × 背景 #F5F5F5 のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0177AC、4.55:1）を使う。
• marker-headline は文字 #FFE100 × 背景 #019A44 のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#017433、4.52:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #019BE2 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#017DB7、4.55:1）を使う。

Typography

• 見出しは極太の丸ゴシックで、すべて中央揃えにする
• 見出しは 1 行 6〜8 文字で改行し、大きく組む
• 強調語だけをひと回り大きくし、助詞は小さくする
• 本文は中央揃えで短く改行する
• 「＼見出し／」のようにスラッシュで小見出しを挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。利用シーンと使用感は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算）
• 特長カードは左右に約 8% の余白を取り、縦に約 40px 間隔で積む
• 写真グリッドは 2 列で間隔 10px。キャプションは写真の下に中央揃え
• 認証ロゴと説明文は 2 列に並べる
• 緑地のセクションは葉柄の帯（高さ約 70px）で区切る

Elevation & Depth

• 特長カードと FV のキャッチ板には、下にぼかしの大きいやわらかい影を付ける
• 商品パッケージの画像には軽いドロップシャドウを付ける
• 写真とボタンには影を付けない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 16px の長方形。人物写真は正方形の色面の上に切り抜いて配置
• セクション境界: 直線で地の色を切り替える。緑地では葉柄パターンの帯を挟む
• カードは角丸 24px の白い紙質の面
• ボタンは角丸 8px の長方形
• メディア掲載の枠は白い 1px 線のみで角は付けない

Components

• キャッチ板（hero-catch-board）: ストライプ地に浮かべた白い紙質の角丸板。小さな水色のリードと、紺の極太見出し 2 行を載せる
• メディア掲載枠（media-box）: 白い細線の枠の中に、写真 2 枚と記事紹介、右寄せの「記事リンク＞」を置く
• 利用シーンの写真グリッド（scene-grid）: 角丸写真を 2 列×4 段に並べ、下に白文字で「〜中に」と短く添える
• 特長カード（feature-card）: 紙質の白カードに、紺の番号ラベル、水色の極太見出し、線画イラスト、中央揃えの本文を順に置く
• 紺枠のバッジ（badge-box）: 紺の塗りに白い二重線の枠を付け、短い機能名を白文字で入れる
• 症状の線画アイコン（symptom-icons）: 紺の線で描いた体のパーツに黄色の星を置き、下に水色の太字ラベルを付けて 2×2 に並べる
• 黄色強調の見出し（marker-headline）: 緑地の白い見出しのうち、強調語だけを黄色で大きくする
• 主ボタン（button-primary）: 水色の単色塗りで、幅約 75% の角丸長方形。白文字で中央に配置

Do's and Don'ts

Do - 地の色をセクションごとに大きく切り替え、内容の区切りを色で示す - 青の地には細い斜めストライプを入れる - 特長は 1 カードに 1 つとし、番号ラベルを付けて縦に並べる - 図解は紺線と水色面の線画イラストで描く - 見出しは極太の丸ゴシックで大きく、中央揃えにする

Don't - 暖色系の地は使わない - 本文を左揃えにしない - カードを鋭い角や細い枠線だけで作らない - 黄色を見出し全体に使わない（強調語だけにする） - 細い明朝体で見出しを組まない

Page Structure

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

1. ファーストビュー（商品が「貼っていても気づかれない」ことを人物写真で示す）: 人物写真を全面に敷き、上端に水色の極太コピー、下部に商品ロゴとバッジを置く
2. キャッチ（一番の価値を一言で伝える）: 水色ストライプ地に、白い紙質の板と紺の極太文字
3. メディア掲載（第三者による信頼を示す）: 白い線枠の記事紹介を 2 件並べる
4. 共感・利用シーン（日常の場面で気になる悩みを提起し、使える場面を示す）: 行間を広く取った白抜きのリード文と、2 列×4 段の角丸写真
5. 商品紹介（パッケージと受賞・認証を示す）: 紺ストライプ地に大きな商品画像を置き、ロゴ 2 つを白いボックスで並べる
6. 使用感（伸びて密着する性能を見せる）: 伸ばしている手元の写真、大きな白い見出し、2×2 の角丸写真にキャプション
7. 特長（特長 5 つを詳しく説明する）: 紺地に白い紙質カードを 5 枚縦に積む。番号、図解、本文の順
8. 環境配慮パッケージ（パッケージの新しさと環境への配慮を伝える）: 葉柄パターンの緑地に、白い極太見出しと水色の白縁ロゴ文字
9. コンパクト化・取り出しやすさ（使いやすさを図解で伝える）: 緑地に黄色の強調見出し、白い図とシェブロン矢印による比較、吹き出し
10. 持ち運び（外出時の便利さを伝える）: 明るい緑の正方形の上に、切り抜いた人物写真を置く
11. ラインナップ・CTA（容量の違いを示し、詳細ページへ誘導する）: 白地に商品 2 つ、特長バッジの一覧、水色のボタン
12. フッター（規約とコピーライトの表示）: グレーの線で区切り、紺のリンクを中央に縦に並べる

Imagery

• 人物写真は自然光で明るく撮り、日常の場面で笑顔の 20〜50 代の男女を写す
• 使用感の写真は白背景の肌のアップに、水色の矢印を重ねる
• 図解のイラストは紺の太い線に水色の面を合わせ、痛む箇所には黄色の星を置く
• 緑地には手描き風の葉のパターンを、明暗 2 色の緑で敷く
• 商品パッケージは正面から撮った切り抜き画像を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も SP と同じ幅約 375px のカラムを画面中央に固定する
• 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 行書くと起動時に読み込まれる。