--- version: alpha name: Green Trust Medical App LP with Yellow Markers description: 濃い緑を主役に、薄い緑と生成りのクリーム色の地を交互に敷いた医療・ヘルスケア系 LP。見出しの強調語には黄色の下線マーカーを引き、主 CTA は黄色グラデーションのピル型ボタンにしている。手描き風の線画イラストと、生活の様子を写した写真を組み合わせ、信頼感と親しみやすさを両立させている。 colors: primary: '#25824B' on-primary: '#FFFFFF' secondary: '#74A249' cta: '#FECC15' on-cta: '#2B2B2B' background: '#FEFEFE' background-alt: '#FFF7E0' tint-1: '#EEF5F1' surface: '#FFFFFF' marker: '#FDCC13' text: '#24221A' accent-1: '#34744D' tint-2: '#BDE9AD' text-muted: '#555555' secondary-accessible: '#5C813A' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px phone-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 180px marker-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 700px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 240px axis-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 56px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px price-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 460px --- # DESIGN.md — 緑×黄マーカーの医療アプリ治療 LP（Green Trust Medical App LP with Yellow Markers） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 深緑・黄色マーカー・線画イラスト・チェックリスト・保険適用の安心感・段階説明 - **地の質感**: フラットな単色面が中心。カードには薄い影を付け、点線の囲み枠も使う。 - **形**: 角丸は小〜中の四角カード。ボタンとラベルはピル型。下向きのシェブロンと台形の矢印で話の流れを示す。 - **温度感**: 緑と生成りでやや温かい中間の色温度。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#25824B` | ブランド緑（帯見出し・電話相談ボックス） | 10% | 画素の実測 | | `on-primary` | `#FFFFFF` | 緑の面の上の白文字 | 1% | 画素の主要色に補正 | | `secondary` | `#74A249` | 黄緑（「病院で」ラベル・料金表の見出し帯） | 4% | 画素の実測 | | `cta` | `#FECC15` | 主 CTA の黄色 | 2% | 画素の実測 | | `on-cta` | `#2B2B2B` | CTA の文字色 | 0% | 推定 | | `background` | `#FEFEFE` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#FFF7E0` | 生成りのクリーム地 | 10% | 画素の実測 | | `tint-1` | `#EEF5F1` | 薄緑のカード地 | 11% | 画素の実測 | | `surface` | `#FFFFFF` | 薄グレーのセクション地 | 8% | 画素の実測 | | `marker` | `#FDCC13` | 見出しの黄色マーカー | 0% | 画素の実測 | | `text` | `#24221A` | 見出しの濃いグレー | 2% | 画素の実測 | | `accent-1` | `#34744D` | 本文中の強調語の緑文字 | 1% | 画素の実測 | | `tint-2` | `#BDE9AD` | 淡い黄緑の吹き出しバッジ | 0% | 画素の実測 | | `text-muted` | `#555555` | 注釈のグレー文字 | 1% | 推定 | | `secondary-accessible` | `#5C813A` | AA を満たす補正値（計算） | | 計算 | - 地の色は白、薄グレー、クリームをセクションごとに切り替え、境界を作る。 - カードの地は薄緑か白にし、帯見出しは濃い緑にする。 - 主 CTA だけを黄色にし、ほかの要素に黄色の面は使わない。黄色はマーカーと料金表のラベルにだけ使う。 - 本文中の強調語は太字の緑文字にし、赤系の色は使わない。 - 「病院で」は黄緑、「自宅で」は濃い緑のラベルにして、2 つの軸を色で区別する。 - `axis-label` は文字 `#FFFFFF` × 背景 `#74A249` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#5C813A`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し（緑地に白文字） | ゴシック | Noto Sans JP | 900 | 44px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（黄マーカー付き） | ゴシック | Noto Sans JP | 700 | 28px | 1.4 | 0.03em | | `headline-md` | カード見出し・STEP 見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `headline-sm` | 帯見出し・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文・チェックリスト | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | ※印の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.8 | 0.03em | | `accent` | STEP 番号などの英字ラベル | 欧文サンセリフ | Montserrat | 600 | 12px | 1.4 | 0.05em | | `label-button` | CTA ボタンの文字（上に小さな前置き＋太字 2 段） | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.03em | - 見出しは小さめの前置き 1 行と大きな主見出しの 2 段で組む。 - 主見出しのキーワードには、文字の下半分に重なる黄色マーカーを敷く。 - 本文中の強調語は 1.3 倍程度に大きくし、太字の緑文字にする。 - 注釈は ※番号で小さく、ぶら下げインデントで並べる。 - 見出しは中央揃え、本文とリストは左揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較や 2 軸の説明は 2 カラム、内訳は 3 カラムのカード。 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - カードは画面幅の 92〜94% で中央に置く。 - 帯見出し付きのカードを縦に並べ、ステップを見せる。 - 区切り線は点線のグレーにする。 - セクション間はシェブロンや台形の矢印でつなぐ。 - CTA と電話相談ボックスは、数セクションごとに繰り返し配置する。 ## Elevation & Depth - カードには薄いぼかしの影（0 2px 8px rgba(0,0,0,.08)）を付ける。 - 黄色の CTA には下側に白縁と影を付け、押せそうな立体感を出す。 - そのほかの要素はフラットにする。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は円形か四角で切り抜く。生活写真は大 1 枚＋小 2 枚のグリッドにする。 - **セクション境界**: 直線で地の色を切り替える。帯見出しは片側だけ大きく丸める。 - ボタンとラベルはピル型にする。 - 補足情報は緑の点線で囲む。 - 価格の対比には右向きの矢印形の帯を使う。 ## Components - **黄色の主 CTA**（`button-primary`）: 黄色グラデーションのピル型。左に盾形のアイコン、右に矢印。文字は小さな前置きと太字の 2 段。 - **電話相談ボックス**（`phone-box`）: 緑地の四角いボックス。中に淡い色のピル型ボタンと受付時間を入れる。 - **黄マーカーの見出し**（`marker-heading`）: 前置き 1 行と、黄色下線マーカーを敷いた主見出しの 2 段。 - **番号付きステップカード**（`step-card`）: 上部に緑の帯。左に黄緑の番号ブロック、地は薄緑のカード。 - **チェックリスト**（`check-list`）: 黄色のチェックアイコンを付けた項目を点線で区切る。強調語は緑の太字。 - **2 軸ラベル**（`axis-label`）: 黄緑と濃い緑のピル型ラベルを左右に並べ、下に円形の地に描いた線画を置く。 - **片丸の帯見出し**（`band-heading`）: 緑の横帯で、右上だけ大きく丸める。セクションの導入に使う。 - **声のカルーセルカード**（`voice-card`）: 白いカードに円形の顔写真、吹き出しアイコン付きの属性、短い感想。左右に丸い矢印ボタン。 - **料金比較の図表**（`price-table`）: 黄色のラベル列と、緑またはグレーの矢印帯を組み合わせ、期間ごとの価格を対比する。 ## Do's and Don'ts **Do** - 強調は「緑の太字」と「黄色マーカー」の 2 種類に限る。 - 線画イラストは緑と黄をアクセントにした手描き調でそろえる。 - 保険適用などの根拠には必ず ※注釈を付ける。 - CTA は 3〜4 回繰り返し、毎回同じ見た目にする。 - 地の色を交互に切り替え、セクションの区切りを明確にする。 **Don't** - 赤や原色の警告色で煽らない。 - 黄色を CTA とマーカー以外の大きな面に使わない。 - 明朝体や装飾書体を使わない。 - 濃い影や光沢を付けすぎない。 - 写真に強いフィルターをかけない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新しい治療法であることと、保険適用であることを伝える。）: 斜めのグラデーションを付けた緑地に、ラベルと白の大見出し。下に人物写真 2 枚とアプリ画面のモックを配置する。 2. **悩みの提起**（読み手に共感させる。）: 薄緑のカードに見出しと悩む人物の写真。その下に悩みを 4 つ並べたチェックリスト。 3. **解決策の提示**（診療とアプリの組み合わせを示す。）: クリーム地に片丸の帯見出し。2 つの要素を「＋」でつなぐカードを置く。 4. **効果・ベネフィット**（根拠のある利点を示す。）: 台形の矢印のあとに黄マーカーの大見出し。白カードにチェックリストと注釈。 5. **電話相談**（不安な人の受け皿を用意する。）: 緑のボックスにピル型の電話ボタンを置く。 6. **動画紹介**（概要を手早く理解させる。）: グレー地にマーカー見出しと、16:9 の動画枠。 7. **治療のステップ**（始め方の流れを示す。）: 番号付きのステップカード。中に STEP1〜3 の白カードを並べ、2 軸ラベルと線画で説明する。 8. **料金**（費用の安さを比較で伝える。）: 緑の枠で囲んだクリーム地のボックス。3 つの内訳カードと、矢印帯の比較表を置く。 9. **施設検索**（近くの施設へ誘導する。）: 横スクロールの白カードに名前・住所・電話番号を載せ、緑のピル型ボタンを付ける。 10. **マンガ紹介**（親しみやすく理解を深める。）: 黒枠のマンガのコマと、緑の「詳しく見る」ボタン。 11. **お客様の声**（実際の利用者による安心感を出す。）: クリーム地に声のカルーセルカードを並べる。 12. **クロージング**（早めに始めることを後押しする。）: スラッシュで挟んだ前置きとマーカー見出し。写真のグリッドと黄色 CTA。 13. **注意事項・法定表記**（法令に沿った情報を提示する。）: 黄色地に、生成りの角丸ボックスで箇条書き。緑の見出しを付ける。 ## Imagery - 写真はシニアやミドル世代の自然光での日常風景にする。明るく柔らかいトーン。 - 医師は白衣で、患者に説明する場面にする。 - イラストは黒の線画に緑・黄緑・黄の部分塗り。淡緑の円形の地に置く。 - スマホ画面のモックで、アプリが緑基調であることを見せる。 - マンガ調のコマで親しみやすさを加える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 800px の幅で配置し、余白を広く取る。 - ファーストビューは PC で 3 分割（写真｜緑のコピー面｜写真）にする。 - 悩みの提起は PC で写真と見出しを横並びにする。 - 電話相談ボックスは PC で横長 1 行にし、電話番号を表示する。 - 声のカルーセルは PC で 3 枚を同時に表示する。 - 料金表は 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-48397192`（元 LP の URL から採番） - **元 LP**: https://cureapp.co.jp/productsite/ht/media/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/）からご連絡ください。