--- version: alpha name: Bright Aqua Illustrated Health Awareness LP description: 明るい水色を主役に、黄色のマーカーとドット装飾で軽やかさを出した疾患啓発LP。薄グレーの地に白い角丸カードを置き、カード背面に水色の傾いた板を重ねて立体感を出す。手描き風の線画イラストとマスコット犬が親しみやすさを担い、統計グラフや注釈で信頼性を補う。 colors: primary: '#15ACCC' secondary: '#42C1E3' background: '#F5F5F5' surface: '#FEFEFE' cta: '#2BB3DB' on-cta: '#EBFEFF' text: '#242221' text-muted: '#535C60' marker: '#FCF365' tint-1: '#F4FDFC' tint-2: '#AAE4F4' accent-1: '#FEF333' line: '#F5F5F5' background-alt: '#FFFFFF' cta-accessible: '#1A7D9A' primary-accessible: '#108199' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Barlow fontSize: 80px fontWeight: 800 lineHeight: 1.0 label-button: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px ribbon-heading: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px worry-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 400px tilted-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 600px marker-text: backgroundColor: '{colors.marker}' textColor: '{colors.text}' height: 24px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 116px label-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 64px anchor-nav: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 56px --- # DESIGN.md — 水色×黄色マーカーの疾患啓発ヘルスケアLP（Bright Aqua Illustrated Health Awareness LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、ポップ・元気 - **キーワード**: 水色・黄色マーカー・線画イラスト・白カード・ドット装飾・啓発 - **地の質感**: フラットな薄グレー地に白カードと水色グラデーション帯。ドット・円・斜線の装飾を散らす - **形**: 大きめ角丸カード、ピル型ボタン、カード背面の傾いた水色板、上辺が弧を描く帯 - **温度感**: 爽やかでやや涼しいが、イラストと黄色で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#15ACCC` | 見出し文字・アイコン・ブランド水色 | 4% | 画素の実測 | | `secondary` | `#42C1E3` | 水色グラデーション帯 | 7% | 画素の主要色に補正 | | `background` | `#F5F5F5` | ページ地の薄グレー | 40% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード | 38% | 画素の実測 | | `cta` | `#2BB3DB` | 主CTAボタン（水色グラデ） | 1% | 画素の実測 | | `on-cta` | `#EBFEFF` | CTAボタン上の白文字 | 0% | 画素の実測 | | `text` | `#242221` | 本文の濃いグレー黒 | 3% | 画素の実測 | | `text-muted` | `#535C60` | 注釈・調査情報 | 1% | 画素の主要色に補正 | | `marker` | `#FCF365` | 強調語の黄色マーカー | 1% | 画素の主要色に補正 | | `tint-1` | `#F4FDFC` | イラスト背景の淡い水色 | 4% | 画素の実測 | | `tint-2` | `#AAE4F4` | イラスト枠の影色の水色 | 2% | 画素の実測 | | `accent-1` | `#FEF333` | Qアイコン・装飾の黄色 | 1% | 画素の実測 | | `line` | `#F5F5F5` | 区切り線・カード影 | 0% | 画素の主要色に補正 | | `background-alt` | `#FFFFFF` | 背景の巨大英字透かし | 2% | 画素の主要色に補正 | | `cta-accessible` | `#1A7D9A` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#108199` | AA を満たす補正値（計算） | | 計算 | - 地は薄グレー、内容は白カードに載せる - 見出しと強調語は水色文字で統一 - 本文中の重要語は太字＋黄色の下半分マーカー - 誘導・アプリ紹介は水色グラデ帯で区切り、上に白文字 - 黄色はQアイコン・マーカー・装飾点に限定し面では使わない - セクション見出しの引用符“”は黄色で添える - `button-primary` は文字 `#EBFEFF` × 背景 `#2BB3DB` のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1A7D9A`、4.53:1）を使う。 - `button-outline` は文字 `#15ACCC` × 背景 `#FEFEFE` のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#108199`、4.5:1）を使う。 - `ribbon-heading` は文字 `#15ACCC` × 背景 `#FEFEFE` のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#108199`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.5 | 0.05em | | `headline-md` | カード内見出し・悩みタイトル | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.03em | | `headline-sm` | リボン型サブ見出し | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.08em | | `body-md` | 本文（中央揃え） | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.1 | 0.05em | | `note` | 注釈・調査概要 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.03em | | `accent` | 背景透かし英字・Method番号 | 欧文サンセリフ | Barlow | 800 | 80px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.05em | - 本文は中央揃えで行間を広く取る - 見出しは2行に分け、キーワードを“”で囲み黄色で強調 - 背景に巨大な英字を白で薄く敷き、画面外へはみ出させる - 数値は大きく太く、単位は小さく - 注釈は※付きで小さく左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩みカードも縦積み - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算） - カードは左右に約6%の余白 - セクション頭は透かし英字→リボン見出し→大見出し→リード文の順 - カードの下端中央に丸い矢印ボタンを半分はみ出させる - CTAはカード外に中央配置で幅85% ## Elevation & Depth - カードは影ではなく背面に傾いた水色板やグレー板をずらして重ねる - イラスト枠は右下に水色のオフセット影 - 黄色ラベル箱は黒枠＋右下グレーオフセット影 - ぼかし影は使わない ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: イラストは角丸矩形に淡い水色地で収める。写真は角丸なし白枠付き - **セクション境界**: 水色帯の上辺を大きな弧で盛り上げ、マスコットを頂点に乗せる。他は直線切替 - カード背面板は-3度ほど傾ける - カード上部にクリップのイラストを留める - リボン見出しは左に巻き端、右に切り込みの線画 ## Components - **主CTAボタン**（`button-primary`）: 水色グラデのピル型、白太字と右端に＞ - **アウトラインボタン**（`button-outline`）: 白地に水色グラデ太枠のピル型、水色文字と＞ - **リボン型サブ見出し**（`ribbon-heading`）: 水色線のリボン枠に人物やマスコットを左に重ねる - **悩みカード**（`worry-card`）: 上にイラスト枠、水色見出し、チェックアイコン付き箇条書き、下に丸矢印 - **傾き板付き情報カード**（`tilted-card`）: 背面に傾いた水色板、上にクリップ、Method番号を細線で挟む - **黄色マーカー強調**（`marker-text`）: 太字の下半分に黄色の帯 - **Q&A行**（`faq-item`）: 黄色吹き出しQアイコン、質問文、右に水色＋。上下に細線 - **薬剤ラベル箱**（`label-box`）: 黒枠白箱、左端に黄色の帯、右下オフセット影 - **目次リンク**（`anchor-nav`）: 水色丸の下矢印アイコンと太字、点線区切り ## Do's and Don'ts **Do** - 強調は水色文字か黄色マーカーの2種に絞る - イラストは黒の太い線画に淡い彩色で統一 - 白カードを薄グレー地に浮かべて区切る - マスコットを各セクションの端に覗かせる - ドット円・リング・斜線の水色黄色装飾をセクション境目に置く **Don't** - 濃い影やグラデの多用で重く見せない - 赤や警告色で不安を煽らない - 本文を左揃えの長文にしない - 写真を多用しイラストの世界観を崩さない - 黄色を大きな面で使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（人物がボードを掲げキャッチと名称を提示）: 明るい室内写真全面、ボード上に水色見出しと立体ロゴ 2. **導入リードと目次**（問題提起と読み進め方を示す）: 背面水色板付き白カード、中央揃え本文、マーカー強調、目次リンク3つ 3. **悩みの提起**（当事者の悩みを3場面で共感）: 透かし英字、リボン見出し、イラスト付き悩みカードを3枚縦積み 4. **疾患の解説と統計**（患者数と再発頻度で深刻さを示す）: クリップ付き傾きカードに大きな数字と水色系円グラフ、調査注釈 5. **セルフチェック誘導**（自己診断ページへ送る）: 上辺が弧の水色グラデ帯、頂点にマスコット、白ピルボタン 6. **治療法の紹介**（治療の選択肢を段階別に説明）: Method番号付き傾きカード2枚、黄色帯ラベル箱、主CTA、注釈 7. **よくある質問**（受診の疑問を解消）: 白地、医師イラスト付きリボン見出し、Qアイコンのアコーディオン 8. **アプリ・特集動画**（関連コンテンツへ回遊）: 水色グラデ地、バナー、吹き出し枠見出し、白枠サムネのカルーセルと左右丸矢印 ## Imagery - 黒い太めの線画に淡い水色・ピンク・黄の塗りの人物イラスト - 白いふわふわの犬マスコットを各所に配置 - クリップや紙の質感を線画で添える - ドット塊・リング・点線円・斜めのストライプを水色と黄色で散らす - FV写真は白く明るい室内で人物が正面を向く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはFVを角丸の写真パネルにし右にコピーとボタンを置く2カラム - PCの悩みカードはイラストと本文を左右交互の横並びに - PCの目次リンクは3列横並び - PCのコンテンツ幅は約75%に絞り中央寄せ - 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-3833b277`（元 LP の URL から採番） - **元 LP**: https://www.maruho.co.jp/kanja/herpes/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。