DESIGN.md — 紅×紺のテック調歯科インプラント LP（Crimson and Navy Tech Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、クール・先進的、上品・高級、情報量多め・訴求型
• キーワード: 紅色CTA帯・濃紺ピクセル柄・明朝見出し・ステップカード・医療の信頼感
• 地の質感: 四角いピクセルのモザイク柄と同心円状の回路風の線を背景に薄く敷いた、デジタルで清潔な質感
• 形: 基本は直角。カードに小さな影、ペナント型の悩みカード、リボン型の番号タグ
• 温度感: 白とグレーを地にした冷たい色調に、紅色で熱量を足す

Colors

• 地は白と薄グレーを基本にし、紅色のCTA帯を各セクション間に挟む
• 紅色は面ではCTA帯、文字では悩みカード内のキーワード強調に使う
• 濃紺はピクセル柄の悩みセクション地と、表見出し・ステップ番号タグに限定
• CTAボタンは白（電話）と黒グラデ（Webフォーム）の2種で、紅地の上で目立たせる
• 注釈は小さな紅色文字で添える
• 医院紹介ボタンだけ水色にして別ブロック扱いにする
• cta-band は文字 #F4F4F4 × 背景 #E52A53 のコントラスト比が 3.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D91A44、4.57:1）を使う。

Typography

• 見出しとキャッチは明朝で字間を広めにし、上品にする
• 本文とボタンはゴシックで読みやすくする
• FVの価格数字だけイタリック風の大きな紅色セリフにする
• 悩みカードは太字ゴシックで、キーワードだけ紅色にする
• セクション見出しは上下に細い線を引いて中央に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、症例のBefore/Afterと医院紹介は 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは左右約20pxの余白で中央寄せ
• CTA帯は全幅で、中身は90%幅
• ステップカードの間に紺の下向き三角を置く
• 悩みカードは縦に並べて中央に置く
• 料金表は横スクロールさせる

Elevation & Depth

• メリット・症例カードは右下に柔らかい影（0 3px 6px rgba(0,0,0,.25)）
• 悩みカードは白い光のにじみ（グロー）
• ステップカードは影なしで紺の1px枠
• ボタンは影なしのフラット

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形のまま切り抜く。角丸なし
• セクション境界: 直線で背景色を切り替える
• 悩みカードは下がV字に尖るペナント型
• 番号タグは下端が尖ったリボン型
• ボタンは角丸4px程度の長方形
• FVの写真は下半分を白へフェードさせる

Components

• 予約CTA帯（cta-band）: 紅地に回路柄。明朝のメッセージ、上下線で挟んだラベル、電話とWebのボタン2つを縦に並べる
• 電話予約ボタン（button-phone）: 白い横長ボタンに電話アイコンと黒文字
• Webフォームボタン（button-primary）: 左が薄いグレー、右が黒の斜め分割グラデ。カレンダーアイコンと白文字
• 24時間受付リボン（badge-ribbon）: 紺グラデで下が尖った小さなリボン。ラベル線の左端に重ねる
• 悩みペナントカード（pennant-card）: 白いペナント型で白く光る。3行の太字の中で一部を紅色にする
• メリットカード（merit-card）: 薄グレーのカードに影。左上に紅色のmerit番号タグ、写真、明朝の説明を中央揃え
• ステップカード（step-card）: 白地に紺枠。左上に紺のstepリボン、横に太字のステップ名、下に本文
• 紺ラベルバー（label-bar）: 症例データ・料金表の見出し用。全幅の紺の帯に白太字を中央に置く
• 線挟み見出し（section-heading）: 上下に細い線を引き、間に明朝見出しを中央に置く

Do's and Don'ts

Do - セクションの切れ目ごとに同じ紅色CTA帯を繰り返す - 背景に淡いピクセルモザイク柄を敷き、デジタルな清潔感を出す - 番号はmerit／stepの欧文と数字でタグ化する - 強調は紅色の文字色だけで行う - 見出しは明朝、情報はゴシックで分ける

Don't - 紅と紺以外の鮮やかな色を増やさない - ボタンをピル型や丸みの強い形にしない - 見出しを太いゴシックにしない（医院名を除く） - カードに大きな角丸や強い影を付けない - 手描きイラストや柔らかい装飾を入れない

Page Structure

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

1. ヘッダー（ロゴと即時予約）: 白地。左にロゴ、右に紅の電話丸ボタンと黒の予約丸ボタン
2. ファーストビュー（価格と治療名を訴える）: 施術写真を白へフェードさせ、紅の大きな価格、黒の明朝コピー、紅の治療名を重ねる。下に線と地域名
3. 悩みの提起（対象者に自分ごとと思わせる）: 濃紺のピクセル柄地に、白く光るペナントカードを6枚縦に並べる。隅に製品の3D画像
4. CTA（初回予約を促す）: 紅色の帯に明朝メッセージと電話・Webのボタン
5. メリット（治療の利点を示す）: 薄グレーのモザイク地に、番号タグ付きの写真カードを4枚
6. 治療の流れ（手順を伝えて不安を減らす）: 紺枠のステップカード7枚を、紺の三角でつなぐ
7. 症例紹介（実績で納得させる）: Before/Afterの写真を2列。下のカードに紺のラベルバーと情報、灰色グラデのサブボタン
8. 料金表（費用を明示する）: 紺ヘッダーの表を横スクロールにし、紺の細い罫線で区切る
9. 医院紹介（代表と沿革で信頼を得る）: 大きな明朝見出しと薄黄の挨拶ボックス。代表写真と点線区切りの沿革リスト
10. 院一覧（通いやすさを示す）: 院ごとに太字の院名、住所、院内写真、アクセス枠、水色ボタン。グレー線で区切る

Imagery

• 明るく清潔な診療室・器具の写真を高めの露出で
• FVは青白い光の中で施術する医師の写真を白へフェード
• インプラント模型の3Dレンダリングを装飾に使う
• 背景装飾は四角いピクセルのモザイクと同心円状の回路線を低い不透明度で
• 人物写真は自然な笑顔で生活シーンを見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約40%幅の狭いコンテナを保ち、背景帯だけ全幅
• PCの悩みカードは3列×2段
• PCのメリットカードは2列×2段
• PCのCTA帯はラベルとボタンを2列横並び
• PCのヘッダーは右に電話とWebの横長ボタン
• PCのFVは写真を全幅にし、コピーを中央、模型を左に置く

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