DESIGN.md — 緑×ミントのやさしいイラスト医療サービスLP（Fresh Green Clinic Cashless Service LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、親しみ・手作り感
• キーワード: ミントグリーン・白カード・線画イラスト・QR付きLINE登録・時短訴求
• 地の質感: フラットな単色の面。影はほぼ使わず、白カードと淡い地の色の差で区切る
• 形: 角丸の白カード、ピル型のサブボタン、楕円形のセクション境界
• 温度感: やや涼しめ。クリーム色の帯で温かみを足す

Colors

• 地は淡いミントが基本。手順セクションだけクリームの楕円帯にする
• コンテンツは必ず白カードに載せ、地の色と分ける
• 見出しと強調文字は緑。本文は濃いグレー
• LINE登録ボタンは明るい緑の面に白文字と黄のバッジ
• FVとフッターは濃い緑のベタ塗りで上下をはさむ
• 黄は見出しの下線と小さなバッジだけに使う
• button-line-qr は文字 #FFFFFF × 背景 #06B33A のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#05892C、4.54:1）を使う。

Typography

• 見出しは太字ゴシックを中央揃えにし、緑で書く
• 小さな前置きのラベルはスラッシュ（\ /）ではさむ
• 数字はひときわ大きくして目立たせる
• 本文は左揃え。強調部分は緑の太字にする
• 明朝体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 2 カラムのカード、便利ポイントは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツの幅を狭くし、中央に寄せる
• カード同士の間は16px
• セクション見出しの上下は広めにとる
• CTAブロックは数セクションごとに挟む
• イラストはカードの中央に置く

Elevation & Depth

• 影はほとんど付けない
• 白カードと淡い地の色の差で奥行きを出す
• FAQの行は白い面を地の上に置くだけにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物イラストは淡い緑の円の中に置き、ほかは切り抜きにする
• セクション境界: 手順セクションは上下が大きな弧の楕円帯。ほかは直線で色を切り替える
• カードは角丸12〜20px
• サブボタンは白地に灰色の線のピル型
• ラベル帯は緑の角丸タブ

Components

• QR付きLINE登録ボタン（button-line-qr）: 緑の角丸の面に、左にQR、右に大きなボタン文字、黄の所要時間バッジと説明文を置く
• サブボタン（button-sub）: 別の方法で登録・ログイン用の白いピル型ボタン。灰色の線で囲む
• 手順カード（step-card）: 上に緑のラベルタブ、番号付きの見出し、イラスト、下向き三角、結果の文を縦に並べた白カード
• 便利ポイントカード（benefit-card）: 緑の見出しの下に、吹き出しラベル・短い見出し・円の中の人物イラストを3列で並べる
• 吹き出しラベル（label-bubble）: 小さな文字を白地と細い線の吹き出しで囲む
• お客様の声カード（voice-card）: アバターと年代、緑の枠の要約吹き出し、緑の強調入りの本文。カードごとに左右を入れ替える
• FAQアコーディオン（faq-row）: 白い横長の行で、左に緑のQ、右に下向き矢印
• FVの時短バッジ（fv-badge-circle）: 白い円の中に番号と短い利点を書き、FVの人物の両側に置く

Do's and Don'ts

Do - 淡いミントの地に白カードを置く構成を守る - 人物は線画にフラットな緑で塗ったイラストで統一する - 登録CTAはFV直後・中盤・最後に繰り返す - 利点は短い言葉にして3列のカードで見せる - 見出しの前置きはスラッシュではさんだ小ラベルにする

Don't - 写真を大きく使わない - 赤やオレンジのような強い暖色を足さない - 濃い影やグラデーションを付けない - 明朝体や装飾の強い書体を使わない - カードを地に直接置かず、本文を色地にそのまま流さない

Page Structure

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

1. ファーストビュー（時短の価値をひと目で伝える）: 濃い緑のベタ地に白の特大コピーと黄の下線。中央に歩く人物、両側に利点の円バッジ、下端に街並みのシルエット
2. サービス名とCTA（すぐに登録してもらう）: ミント地にロゴ、QR付きLINEボタンとサブボタン2つを横に並べる
3. 利用手順（やることが2つだけだと示す）: クリームの楕円帯に大きな数字の見出し。2枚の手順カードと再度のCTA
4. 便利ポイント（具体的な利点を伝える）: 白カード2枚に、吹き出しと円イラストを3列で並べる
5. 機能紹介（機能を詳しく説明する）: 2列の白カードに見出し、スマホのイラスト、本文
6. セキュリティ（安心感を与える）: 2列のカードに、生体認証・盾のアイコンと説明
7. お客様の声（体験談で信頼を高める）: アバター・要約の吹き出し・本文を左右交互に配置し、最後に注釈
8. お知らせ（最新情報やメディア掲載を伝える）: 白地に日付・ラベル・リンクを1行で並べる
9. よくある質問（不安を解消する）: 濃いミント地に白いアコーディオンの行を縦に並べる
10. 最終CTA（最後に登録を促す）: 小ラベルとQR付きLINEボタン、その下にサブボタン
11. フッター（関連サイトへ案内する）: 濃い緑の地に白文字で、6列のリンク一覧とコピーライト

Imagery

• 人物は細い黒の線画に、緑・白・肌色のフラット塗り
• 人物の背景には淡い緑の円を敷く
• スマホやカードはシンプルなアイコン調のイラストにする
• 盾や指紋などのアイコンは緑の線か塗りで描く
• FVの下端は白い街並みのシルエットにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは2列・3列のカードを1列に積む（便利ポイントは横スクロールか縦積み）
• SPのLINEボタンはQRを省き、タップできるボタンにする
• FVのコピーは40px前後に縮め、バッジはイラストの上下に置く
• PCは中央に約60%幅のコンテンツ、地の色は画面幅いっぱいに広げる
• フッターのリンクはSPではアコーディオンか2列にする

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 行書くと起動時に読み込まれる。