DESIGN.md — 緑×黄マーカーの医療アプリ治療 LP（Green Trust Medical App LP with Yellow Markers）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: 深緑・黄色マーカー・線画イラスト・チェックリスト・保険適用の安心感・段階説明
• 地の質感: フラットな単色面が中心。カードには薄い影を付け、点線の囲み枠も使う。
• 形: 角丸は小〜中の四角カード。ボタンとラベルはピル型。下向きのシェブロンと台形の矢印で話の流れを示す。
• 温度感: 緑と生成りでやや温かい中間の色温度。

Colors

• 地の色は白、薄グレー、クリームをセクションごとに切り替え、境界を作る。
• カードの地は薄緑か白にし、帯見出しは濃い緑にする。
• 主 CTA だけを黄色にし、ほかの要素に黄色の面は使わない。黄色はマーカーと料金表のラベルにだけ使う。
• 本文中の強調語は太字の緑文字にし、赤系の色は使わない。
• 「病院で」は黄緑、「自宅で」は濃い緑のラベルにして、2 つの軸を色で区別する。
• axis-label は文字 #FFFFFF × 背景 #74A249 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5C813A、4.51:1）を使う。

Typography

• 見出しは小さめの前置き 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。