--- version: alpha name: Aqua Blue Stripe & Leaf Green OTC Patch LP description: 斜めストライプの水色・紺の地に、白い紙質カードで特長を積み重ねる一般用医薬品の LP。後半は葉柄パターンの緑地に切り替えて環境配慮を訴求する。極太の丸みゴシックと線画イラストで、清潔さと親しみを両立させている。 colors: primary: '#004CA1' secondary: '#019CE1' accent-1: '#019FE6' accent-2: '#019A44' tint-1: '#66BC86' marker: '#FFE100' surface: '#F5F5F5' background: '#FFFFFF' background-alt: '#EAECEC' cta: '#019BE2' on-cta: '#FFFFFF' text-body: '#313030' on-dark: '#F3FEFE' text-muted: '#3D597F' accent-1-accessible: '#0177AC' accent-2-accessible: '#017433' cta-accessible: '#017DB7' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 36px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.4 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 2.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 28px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' hero-catch-board: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 200px media-box: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px scene-grid: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 420px badge-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 60px symptom-icons: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 150px marker-headline: backgroundColor: '{colors.accent-2}' textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 80px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 58px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#004CA1` | ブランドの青（見出し文字・アイコン線） | 13% | 画素の実測 | | `secondary` | `#019CE1` | 水色のストライプ地 | 14% | 画素の実測 | | `accent-1` | `#019FE6` | 特長カード内の大見出しの水色 | 2% | 画素の実測 | | `accent-2` | `#019A44` | 環境セクションの緑地 | 13% | 画素の実測 | | `tint-1` | `#66BC86` | 葉柄パターンの明るい緑 | 4% | 画素の主要色に補正 | | `marker` | `#FFE100` | 緑地の上の強調語の黄色 | 0% | 推定 | | `surface` | `#F5F5F5` | 紙質の白いカード | 11% | 画素の実測 | | `background` | `#FFFFFF` | 商品紹介・フッターの白地 | 16% | 画素の実測 | | `background-alt` | `#EAECEC` | FV 写真の明るいグレー | 5% | 画素の実測 | | `cta` | `#019BE2` | ブランドサイトへのボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#313030` | カード内の本文 | 1% | 画素の実測 | | `on-dark` | `#F3FEFE` | 青・緑地の上の白文字 | 2% | 画素の実測 | | `text-muted` | `#3D597F` | フッターのリンク・注記 | 0% | 画素の実測 | | `accent-1-accessible` | `#0177AC` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#017433` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#017DB7` | AA を満たす補正値（計算） | | 計算 | - 上から水色→紺→緑→白の順に、セクションごとに地の色を切り替える - 青系の地には白抜き文字だけを置く - 特長は紙質の白カードに入れ、見出しは水色、ラベルと本文は紺と黒にする - 緑地では強調する語だけを黄色にし、大きく組む - 主ボタンは水色の単色塗りに白文字 - イラストは紺の線に水色の面、ポイントに黄色の星 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ・カードの大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（白抜き） | 丸ゴシック | M PLUS Rounded 1c | 800 | 36px | 1.3 | 0.02em | | `headline-md` | 緑地の見出し。強調語を大きくした混植 | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.4 | 0.0em | | `headline-sm` | 特長番号のラベル・利用シーンの名前 | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.4 | 0.05em | | `body-lg` | 青地のリード文（太字・広い行間） | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 2.6 | 0.05em | | `body-md` | カード内の本文（中央揃え） | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em | | `note` | 画像に関する注記・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 400 | 18px | 1.4 | 0.05em | - 見出しは極太の丸ゴシックで、すべて中央揃えにする - 見出しは 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-f1201da7`（元 LP の URL から採番） - **元 LP**: https://www.hisamitsu.info/nobisalo/musyusei_lp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。