--- version: alpha name: Clean Aqua and Gold Aesthetic Clinic LP description: 白と淡い水色を地にして、くすんだティールとゴールドをアクセントにした美容クリニックの LP。中央に細い本文カラムを置き、間に何度も挟む水色グラデーションの CTA ブロックで予約へ誘導する。料金・比較表・リスク表記を丁寧に並べる、情報量の多い信頼重視の構成。 colors: primary: '#2593B4' secondary: '#91C1C4' background: '#FFFFFF' background-alt: '#EAFCFF' tint-1: '#FEFBF6' accent-1: '#C3AA6D' dark-section: '#6DBCDA' cta: '#0BC354' on-cta: '#FFFFFF' accent-2: '#FCC23C' accent-3: '#E4335A' text: '#444444' surface: '#FDFDEB' line: '#E5F8FD' cta-accessible: '#08893B' accent-2-accessible: '#9D6E02' primary-accessible: '#20809D' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 500 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px 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: 44px button-secondary: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px cta-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 320px promise-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 600px badge-circle: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 72px price-accordion: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 88px point-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px faq-item: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 64px heading-label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 32px --- # DESIGN.md — 水色×ゴールドの清潔感ある美容医療 LP（Clean Aqua and Gold Aesthetic Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 清潔・爽やか、信頼・誠実、上品・高級、情報量多め・訴求型 - **キーワード**: 淡い水色・ゴールドの帯・白衣の医師写真・中央の細いカラム・繰り返す CTA・料金アコーディオン - **地の質感**: 白と水色の淡いグラデーション。光が差すような柔らかいボケ背景で、ゴールドは金箔風のグラデーションにする - **形**: 角丸は小さめで矩形が基本。円形バッジと六角形を一部に使う - **温度感**: やや寒色寄りで清潔な印象。金色で温かさと高級感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2593B4` | 見出し文字・表ヘッダー・料金帯のくすんだティール | 4% | 画素の実測 | | `secondary` | `#91C1C4` | 比較表ヘッダーの灰水色 | 5% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページの基本地 | 41% | 画素の実測 | | `background-alt` | `#EAFCFF` | 淡い水色の帯セクション | 12% | 画素の実測 | | `tint-1` | `#FEFBF6` | サポート体制などの生成りの地 | 6% | 画素の実測 | | `accent-1` | `#C3AA6D` | ゴールドの見出し文字・番号・帯 | 3% | 画素の実測 | | `dark-section` | `#6DBCDA` | CTA ブロックの水色グラデーション地 | 7% | 画素の実測 | | `cta` | `#0BC354` | 無料カウンセリング予約ボタンの緑 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#FCC23C` | 相談・問い合わせボタンの黄 | 0% | 画素の実測 | | `accent-3` | `#E4335A` | 強調文字の赤ピンク | 0% | 推定 | | `text` | `#444444` | 本文の濃いグレー | 2% | 推定 | | `surface` | `#FDFDEB` | Point ボックスの淡い黄地 | 1% | 画素の実測 | | `line` | `#E5F8FD` | 表罫線・区切り線 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#08893B` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#9D6E02` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#20809D` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色を交互に置き、生成りは安心・サポート系のセクションだけに使う - 見出しはティール、番号と約束系の強調はゴールドに分ける - CTA ブロックは上から下へ水色が濃くなるグラデーション地に白いカードを置く - 主ボタンは緑、副ボタンは黄で、2 段に並べる - 赤ピンクは本文中の重要語だけに使い、面には使わない - 電話番号は大きなティールの数字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#0BC354` のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#08893B`、4.51:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#FCC23C` のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#9D6E02`、4.5:1）を使う。 - `cta-block` は文字 `#2593B4` × 背景 `#6DBCDA` のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `promise-card` は文字 `#2593B4` × 背景 `#FFFFFF` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#20809D`、4.53:1）を使う。 - `badge-circle` は文字 `#2593B4` × 背景 `#EAFCFF` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#20809D`、4.59:1）を使う。 - `price-accordion` は文字 `#2593B4` × 背景 `#EAFCFF` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#20809D`、4.59:1）を使う。 - `heading-label-band` は文字 `#FFFFFF` × 背景 `#2593B4` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#20809D`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の悩みワード（円の中の明朝） | 明朝 | Shippori Mincho | 600 | 26px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.05em | | `headline-md` | 約束の小見出し・料金の施術名 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.04em | | `headline-sm` | 原因の帯見出し・表見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | 注釈・リスク表記・表内文字 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 番号 01〜03・料金数字・Point 見出し | 欧文セリフ | Cormorant Garamond | 500 | 40px | 1.0 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 見出しは中央揃えで 2 行に収める - セクション見出しの脇に英字ラベルを縦書きで薄く添える - 数字（番号・料金・電話）は細めのセリフ体で大きく出す - Point 見出しは金色のイタリック体にする - 本文は行間を 1.8 程度にとってゆったり組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較表は横スクロールにし、医師紹介は 2〜3 列のグリッドにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 本文ブロックは中央の細いカラムに置く（PC で約 360px） - 約束カードは左右に交互にずらした白いパネルにする - CTA ブロックは 3〜4 セクションおきに挟む - 料金はアコーディオンを縦に積む - 表は罫線区切りにして余白を詰める ## Elevation & Depth - 白いカードには薄い影（0 2px 8px rgba(0,0,0,.06)）をつける - CTA カードは影なしの白い面で地から浮かせる - 表とアコーディオンはフラットにし、罫線だけで区切る ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 人物は白背景の切り抜きか矩形。医師は正方形の証明写真風に並べる - **セクション境界**: 直線を基本にする。V 字の矢印や緩い弧を一部に使う - CTA ボタンだけピル型にする - 特長のバッジは円形の淡い水色にする - 認証系の表示は六角形を組み合わせる - 見出し枠は金色の細い矩形枠にする ## Components - **無料カウンセリング予約ボタン**（`button-primary`）: 緑のピル型ボタン。左にアイコン、右に矢印を置く - **相談・問い合わせボタン**（`button-secondary`）: 主ボタンのすぐ下に置く黄色のピル型ボタン - **水色グラデーションの CTA ブロック**（`cta-block`）: 医師の切り抜き写真と吹き出しの見出しを上に、白いカードにボタン 2 つと電話番号 2 つを入れる - **番号付きの約束カード**（`promise-card`）: 金色の大きな番号、ティールの見出し、下線、円形バッジ 3 つ、本文の順に並べる - **円形の特長バッジ**（`badge-circle`）: 淡い水色の円に短い特長語を入れて 3 つ横に並べる - **料金アコーディオン**（`price-accordion`）: ティールの帯にキャッチ、淡い水色の地に施術名と大きな料金、右に下向き矢印を置く - **Point 解説ボックス**（`point-box`）: 淡い黄の地。左上に金色のイタリックで Point と入れ、右に医師のイラストを添える - **Q&A アコーディオン**（`faq-item`）: 淡い水色の地にティールの Q を付け、右に＋アイコンを置く - **ティール帯の小見出し**（`heading-label-band`）: 原因などに使う白抜き文字の帯見出し ## Do's and Don'ts **Do** - 白と淡い水色を基調にし、余白を広くとる - 金色は番号・約束・枠線に絞って高級感を出す - 医師・専門医の写真を多く並べて信頼を示す - 料金・比較表・リスクは表形式で明示する - CTA ブロックは同じ型で繰り返す **Don't** - 濃い原色や黒を広い面に使わない - 角丸を大きくしすぎてポップに寄せない - 主ボタンを緑以外の色にしない - リスクや副作用の記載を省かない - 装飾フォントを本文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みと対応範囲を示す）: 右に笑顔の女性、左に円の中の悩みワードを散らす。下に金色の帯ラベルとティールの大見出しを置く 2. **実績バッジ**（実績を数字で示す）: 数字入りの短い実績を縦線で区切って 3 つ並べる 3. **症例写真**（施術の効果を見せる）: タブ切り替えで Before/After を並べたカードのスライダーにする 4. **CTA**（予約へ誘導する）: 水色グラデーションの地に白いカードを置き、ボタン 2 つと電話番号を入れる 5. **悩みの提起**（施術前の不安に共感する）: グレーの霧のような地に、白い多角形とチェックリストを置く 6. **3 つの約束**（不安を解消する強みを示す）: 金色の枠の見出しの下に、番号付きの白いパネルを左右交互に置く 7. **サポート体制**（アフターケアで安心させる）: 生成りの地に金色のパネルを置き、写真と項目リストを続ける 8. **原因の解説**（悩みの原因を教える）: 写真の下にティール帯の小見出しを付けた原因を 3 つ並べ、Point ボックスで締める 9. **施術比較表**（施術を比べられるようにする）: 灰水色のヘッダーを付け、◎○△ の記号で示す表にする 10. **料金**（価格を明示する）: 料金アコーディオンを縦に積む 11. **ドクター紹介**（医師の顔を見せて信頼を得る）: 正方形の写真の下に役職と名前を入れたグリッドにする 12. **施術の流れ**（来院から施術までの手順を示す）: 淡い水色の帯に STEP カードを置いたスライダーにする 13. **よくある質問**（疑問を解消する）: Q 付きのアコーディオンを縦に並べる 14. **院一覧・リスク・注意事項**（院の所在と法令上の表記を示す）: 日本地図の線画、リスクの見出しと本文、罫線表で構成する ## Imagery - 人物は白い背景の明るい自然光で撮り、素肌感のある笑顔の女性にする - 医師は白衣でグレー背景の正面バストアップにし、揃えた構図で並べる - 背景は水色と白のボケや光の筋で透明感を出す - 金色は箔のグラデーションにして帯やパネルに使う - 日本地図や薬瓶は淡い水色の線画・写真で控えめに見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも本文カラムは約 360〜400px の中央寄せのままにし、左右は背景のグラデーションを見せる - SP では約束パネルの左右交互のずらしをやめ、全幅にする - 比較表は SP で横スクロールにする - 医師グリッドは PC で 5 列、SP で 2〜3 列にする - CTA カードは SP で画面幅の 90% にする ## 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-41a10bf4`（元 LP の URL から採番） - **元 LP**: https://www.seishin-biyou.jp/lp/around_eyes/under/lp2/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。