--- version: alpha name: Iridescent Pastel Gradient Dental Clinic LP description: 白と淡い水色の地に、ピンク〜紫〜水色のオーロラ状グラデーションをあしらった歯科矯正クリニックの LP。明朝の見出しで落ち着きを出し、ピンクのマゼンタで価格や要点を強調する。比較表・流れ・Q&Aで情報をしっかり見せる、清潔で上品な医療系の構成。 colors: primary: '#8E6FE8' secondary: '#1ACEDE' cta: '#E04FD0' on-cta: '#FFFFFF' background: '#FCFDFE' background-alt: '#EEF2F5' accent-1: '#EA648F' accent-2: '#3E8EDB' text: '#202222' text-muted: '#C6CBCE' line: '#8DAFDE' tint-1: '#E0E7ED' dark-section: '#FFFFFF' cta-accessible: '#CE24BB' accent-1-accessible: '#E1215E' accent-2-accessible: '#2577C6' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Cormorant Garamond fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2em accent: fontFamily: Pacifico fontSize: 18px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 999px 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-reserve: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 52px cta-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 140px worry-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px comparison-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 600px flow-step: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px boxed-subheading: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 28px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 70px price-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 280px --- # DESIGN.md — 白地×オーロラグラデの歯科矯正 LP（Iridescent Pastel Gradient Dental Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 清潔・爽やか、上品・高級、情報量多め・訴求型、やさしい・柔らかい - **キーワード**: オーロラグラデーション・白基調・明朝見出し・ピンク強調・比較表・透明感 - **地の質感**: 白地に虹色のぼかし光や水彩状のパステルグラデを薄く重ねた、つるりとした透明感 - **形**: 角丸はほぼなく直線的。円形の悩みバッジや番号丸、グラデーション帯の矩形を写真の背後にずらして配置 - **温度感**: やや寒色寄りの清涼感に、ピンクの暖かみを差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8E6FE8` | ブランドのグラデ基調の紫 | 4% | 推定 | | `secondary` | `#1ACEDE` | 水色（比較表の推奨列上端・グラデ端） | 3% | 画素の実測 | | `cta` | `#E04FD0` | WEB予約ボタン（ピンク→水色グラデ） | 1% | 推定 | | `on-cta` | `#FFFFFF` | 予約ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FCFDFE` | 基本の地色 | 40% | 画素の実測 | | `background-alt` | `#EEF2F5` | 薬機法説明・悩みセクションの淡グレー地 | 12% | 画素の実測 | | `accent-1` | `#EA648F` | 価格・強調文字のマゼンタピンク | 0% | 画素の実測 | | `accent-2` | `#3E8EDB` | 総額価格の青 | 0% | 推定 | | `text` | `#202222` | 見出し・本文の濃紺グレー | 3% | 画素の実測 | | `text-muted` | `#C6CBCE` | 英字サブ見出しのグレー | 0% | 画素の実測 | | `line` | `#8DAFDE` | 小見出し枠・Q&A枠の青線 | 0% | 画素の実測 | | `tint-1` | `#E0E7ED` | 料金表見出しセルの淡ブルーグレー | 3% | 画素の実測 | | `dark-section` | `#FFFFFF` | 比較表項目列の淡色 | 4% | 画素の実測 | | `cta-accessible` | `#CE24BB` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E1215E` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#2577C6` | AA を満たす補正値（計算） | | 計算 | - 地は白が基本、説明や悩みブロックは淡グレー #EEF2F5 で面を分ける - 装飾はピンク→紫→水色のグラデーションに統一し、単色の濃い面は使わない - 価格・重要語はマゼンタピンクで太字にし、本文中に点在させる - 推奨プラン列や予約ボタンなど「選ばせたい所」だけグラデ塗りにする - 小見出し枠・Q&A枠は淡い青の細線で囲む - 背景の隅に虹色のぼかし光を薄く重ねて透明感を出す - `button-reserve` は文字 `#FFFFFF` × 背景 `#E04FD0` のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CE24BB`、4.57:1）を使う。 - `worry-badge` は文字 `#EA648F` × 背景 `#FCFDFE` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E1215E`、4.5:1）を使う。 - `boxed-subheading` は文字 `#3E8EDB` × 背景 `#FCFDFE` のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#2577C6`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大キャッチ | ゴシック | Noto Sans JP | 700 | 34px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.5 | 0.05em | | `headline-md` | 特長・手順のタイトル | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `headline-sm` | 小見出し枠・Q&Aの質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em | | `note` | 注釈・英字サブ見出し | 欧文セリフ | Cormorant Garamond | 400 | 10px | 1.4 | 0.2em | | `accent` | Feature等の筆記体ラベル | 欧文スクリプト | Pacifico | 400 | 18px | 1.2 | 0.0em | | `label-button` | 予約ボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em | - セクション見出しは明朝で中央揃え、下に大文字英字を字間広めのグレーで添える - 本文と小見出しはゴシックで統一 - 番号やFeatureラベルはピンクの筆記体＋グラデ数字を組み合わせる - 価格は数字だけ特大にし、単位と税表記は小さく - 強調語はピンク太字、下線やマーカーは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（PCは写真とテキストの2カラム交互） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 見出しは中央、本文は左揃え - 特長は写真と文章を左右交互にずらして配置 - 写真の背後にグラデ帯を斜め下へずらして敷く - 比較表・料金表は全幅の表組み - CTA帯はページ中盤と末尾に2回入れる ## Elevation & Depth - 影はほぼ使わずフラット - 悩みバッジの円に淡いピンクのぼかしグローを付ける - 奥行きは写真とグラデ帯のずらし重ねで作る ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。人物は切り抜きも使用。悩みは円形バッジ - **セクション境界**: 直線で切り替え。悩み→解決の間に下向きのグラデ三角を置く - ボタンは角ばった長方形のグラデ塗り - 番号は円形のグラデ塗り＋白数字 - 手順は番号丸を縦線でつなぐ ## Components - **WEB予約ボタン**（`button-reserve`）: ピンク→水色のグラデ矩形。左にカレンダーアイコン、上に受付時間の小ラベル - **相談CTA帯**（`cta-band`）: 医師写真＋明朝の訴求文＋電話番号＋予約ボタンを横並び。上に灰色の小タグ - **悩み円形バッジ**（`worry-badge`）: 白い円にピンクのグロー。筆記体のReason番号と悩みを中央に3行で - **明朝セクション見出し**（`section-heading`）: 中央揃えの明朝見出し＋下に字間広い英字グレー - **比較表**（`comparison-table`）: 3列比較。推奨列のみ水色→紫の縦グラデ塗り、○△×の大きなアイコン - **手順ステップ**（`flow-step`）: グラデの番号丸を縦線で連結、右にタイトルと本文、写真を添える - **青線枠の小見出し**（`boxed-subheading`）: 淡い青の細線で囲んだ全幅の小見出し - **Q&A**（`faq-item`）: 青枠内に青字Q、下にピンクのAと回答。回答の要点はピンク - **料金表**（`price-table`）: 左に淡ブルーグレーの項目セル、右に白地の金額。総額はピンク特大 ## Do's and Don'ts **Do** - 白地を広く取り、グラデは帯・ボタン・番号に絞る - 見出しは明朝、本文はゴシックで役割を分ける - 価格と要点はピンク太字で示す - 写真の背後にグラデ帯をずらして重ねる - 比較表では推奨列だけ色付けする - 英字の筆記体ラベルを特長や章の頭に添える **Don't** - 濃い単色や黒背景の面を使わない - 角丸の大きいピル型ボタンにしない - 強い影や立体的な装飾を付けない - ピンク以外の強調色を増やさない - グラデの色相をオレンジや緑に広げない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（治療内容と月額・総額を一目で伝える）: 白とパステル光の背景に笑顔の女性写真。左にグラデのラベル、大キャッチ、ピンクと青の特大価格。右上に予約丸ボタン 2. **悩みの提起**（治療をためらう理由に共感する）: 淡グレー地に考える女性写真、右に円形バッジを5つ配置 3. **解決の提示**（悩みの解消を宣言する）: グラデ三角の下に明朝2行の見出しを中央に 4. **特長**（6つの特長を伝える）: グラデの大数字見出し。写真と文章を左右交互にジグザグ配置 5. **法的な説明**（規制上の位置づけを明示）: 淡グレー地に青線枠の小見出しと小さめ本文を並べる 6. **比較**（他の方法との違いを示す）: 3列比較表。推奨列は水色→紫グラデ 7. **設備・技術紹介**（先進設備で信頼を得る）: 写真と文章の2カラム、背後にグラデ帯、筆記体ラベル 8. **CTA**（無料相談へ誘導）: 医師写真＋明朝訴求＋電話＋グラデ予約ボタン 9. **症例**（実際の変化を見せる）: 前後の口腔写真を矢印で並べ、下に罫線の詳細表 10. **料金**（費用を明示）: 2列の料金表、総額をピンク特大で 11. **治療の流れ**（来院後の流れを説明）: 番号丸を縦線でつないだ7ステップ、右に写真 12. **よくある質問**（不安を解消）: 青枠のQとピンクのAを縦に積む 13. **院長メッセージ**（人柄で信頼を得る）: 左に文章と署名、右に院長写真、下にグラデ帯 14. **アクセス・フッター**（所在地と診療時間）: ロゴ・住所と診療時間表を2カラム、下に地図 ## Imagery - 白い歯の笑顔を見せる女性モデルの明るいハイキー写真 - 清潔な診療室で医師やスタッフが笑顔で施術する写真 - 透明な装置を白背景や暗背景で撮った製品写真 - 背景にピンク・紫・水色のぼかし光やホログラム風の帯 - 筆記体の英字を斜めにあしらう装飾 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPでは2カラムを写真→文章の縦積みにする - 悩みバッジはSPで2列に並べ替える - 比較表はSPで横スクロールか推奨列を目立たせた縦型にする - CTA帯はSPで写真を上、電話と予約ボタンを縦に並べ全幅に - 見出しはSPで22px前後に縮める ## 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-17b3d043`（元 LP の URL から採番） - **元 LP**: https://araishikaclinic.com/lp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。