--- version: alpha name: Slate Gray Elegant Clinic LP description: くすんだブルーグレーと白を基調にした、静かで上品な医療系LPです。明朝体の字間を広く取った見出し、薄い大きな欧文の透かし文字、六角形バッジ、月桂樹付きの白丸メダル、角だけ線を引いたカードで、専門性と高級感を出しています。 colors: primary: '#94A2A3' background: '#FEFEFE' background-alt: '#F7F9F8' secondary: '#9FA3A6' dark-section: '#5B666C' on-dark: '#D8DFE4' text: '#3E342E' text-body: '#5A5A5A' accent-1: '#80898A' cta: '#BAA57B' on-cta: '#FFFFFF' line: '#D3D1CF' tint-1: '#ECEDED' accent-2: '#333434' dark-section-accessible: '#596369' primary-accessible: '#576465' cta-accessible: '#887247' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.12em accent: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em headline-sm: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.06em note: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.3em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hex-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 130px laurel-medal: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 130px corner-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 85px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 180px feature-circle: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 85px title-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 48px merit-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px reserve-label: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.sm}' height: 34px tag-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 42px --- # DESIGN.md — スレートグレー×明朝の上品な矯正歯科LP（Slate Gray Elegant Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 上品・高級、信頼・誠実、シンプル・ミニマル、清潔・爽やか - **キーワード**: ブルーグレー・明朝見出し・欧文透かし・六角バッジ・月桂樹メダル・余白多め - **地の質感**: マットで平坦。ごく薄い影と細い罫線だけで立体感を出す - **形**: 角丸なしの矩形が基本。六角形と正円をアクセントに使う - **温度感**: やや寒色寄りのニュートラル。冷たすぎず静か ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#94A2A3` | ブランドのブルーグレー（帯・見出し帯） | 7% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 42% | 画素の実測 | | `background-alt` | `#F7F9F8` | 淡いグレーのセクション地 | 12% | 画素の実測 | | `secondary` | `#9FA3A6` | FV下の中間グレー地 | 8% | 画素の実測 | | `dark-section` | `#5B666C` | 住所帯・濃いバッジ | 3% | 画素の実測 | | `on-dark` | `#D8DFE4` | 濃色面上の白文字 | 1% | 画素の実測 | | `text` | `#3E342E` | 見出し文字の濃いグレー | 3% | 画素の主要色に補正 | | `text-body` | `#5A5A5A` | 本文の中間グレー | 4% | 推定 | | `accent-1` | `#80898A` | サブ見出しのくすみ青緑文字 | 1% | 画素の実測 | | `cta` | `#BAA57B` | 予約ラベル・PC主CTAの差し色 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#D3D1CF` | 細い罫線・カード枠 | 1% | 画素の主要色に補正 | | `tint-1` | `#ECEDED` | 欧文透かし文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#333434` | 特徴を表す最も濃い丸 | 0% | 画素の実測 | | `dark-section-accessible` | `#596369` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#576465` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#887247` | AA を満たす補正値（計算） | | 計算 | - 白とごく淡いグレーを交互に敷き、セクションの区切りにする - 強調帯や見出し帯はブルーグレーの面に白い明朝文字 - 鮮やかな色は使わない。予約ラベルだけにくすんだ金を少し使う - 特徴の丸は中間グレー→濃グレー→黒の3段階で並べる - 欧文の透かし文字は地の色よりわずかに濃いだけのトーンにする - 本文は真っ黒にせず中間グレーで柔らかくする - `hex-badge` は文字 `#D8DFE4` × 背景 `#5B666C` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#596369`、4.57:1）を使う。 - `band-heading` は文字 `#D8DFE4` × 背景 `#94A2A3` のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#576465`、4.57:1）を使う。 - `feature-circle` は文字 `#D8DFE4` × 背景 `#5B666C` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#596369`、4.57:1）を使う。 - `title-bar` は文字 `#D8DFE4` × 背景 `#94A2A3` のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#576465`、4.57:1）を使う。 - `reserve-label` は文字 `#FFFFFF` × 背景 `#BAA57B` のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#887247`、4.62:1）を使う。 - `tag-box` は文字 `#D8DFE4` × 背景 `#5B666C` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#596369`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチコピー | 明朝 | Shippori Mincho | 600 | 26px | 1.5 | 0.08em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 500 | 24px | 1.6 | 0.15em | | `headline-md` | カード見出し・サブ見出し | 明朝 | Noto Serif JP | 500 | 18px | 1.6 | 0.12em | | `accent` | 欧文の透かし・英字ラベル | 欧文セリフ | Cormorant Garamond | 400 | 40px | 1.1 | 0.15em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.04em | | `headline-sm` | バッジ・メダル内の文字 | 明朝 | Noto Serif JP | 600 | 13px | 1.5 | 0.06em | | `note` | 英字サブラベル（字間を広げる） | 欧文セリフ | Cormorant Garamond | 400 | 12px | 1.4 | 0.3em | - 見出しはすべて明朝。字間を0.1em以上取る - 本文だけゴシックにして読みやすくする - 見出しは中央揃えで2〜3行に折り返す - 大見出しの背面に、薄い大きな欧文セリフを重ねる - 番号は細いセリフ体の大きな数字を薄く置く - 太字は強調したい1行だけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。コンセプトのカードとFVのタグだけ 2〜3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上下に広い余白を取る - 写真は端から端まで敷くか、左右に約16pxの余白を残す - 白カードは淡いグレー地に浮かせて置く - 写真と淡いグレーの面を少しずらして重ねる - 見出しの下に細い罫線を入れて区切る ## Elevation & Depth - 白カードにはぼかし大きめで濃さ5%程度のごく弱い影 - 強い影は使わない。区切りは基本的に罫線と地の色の差で作る - メダルの丸にも薄い影を付ける ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。背面の淡いグレー面とずらして重ねる - **セクション境界**: 直線で区切る。強調帯の下端だけ下向きのV字矢印にする - バッジは六角形にし、内側に細い白線の二重枠を付ける - 資格メダルは白い正円に、王冠と月桂樹の線画を添える - カードの四隅だけにL字の細線を引く - 特徴は円の中に縁取りリングを付けて表す ## Components - **六角形バッジ**（`hex-badge`）: 濃いグレーの六角形に細い白線の内枠。実績や設備の導入を明朝で示す - **月桂樹メダル**（`laurel-medal`）: 白い正円に王冠と月桂樹の淡い線画。所属学会を2列で並べる - **角線カード**（`corner-card`）: 細い枠の中に番号と短い見出しを入れ、四隅にL字の装飾線を引く - **強調帯**（`band-heading`）: ブルーグレーの全幅帯に白い明朝の主張文を置き、下端をV字にする - **特徴の丸**（`feature-circle`）: グレー系の円に外側の淡いリング。短い特徴を3つ並べる - **見出しバー**（`title-bar`）: ブルーグレーの面に白文字で、メリット一覧のタイトルにする - **メリットカード**（`merit-card`）: 淡いグレー地に見出し・罫線・本文の順で縦に積む - **予約ラベル**（`reserve-label`）: くすんだ金の小さな矩形ラベル。予約カレンダーの上に置く - **キーワードタグ**（`tag-box`）: グレー地に白い細枠を付けたタグ。短い価値を3つ並べる ## Do's and Don'ts **Do** - 見出しは明朝で字間を広く取る - 背面に薄い欧文の透かし文字を重ねて奥行きを出す - 色はグレーの濃淡で階層を作る - 余白を大きく取り、静かな印象を保つ - 写真はずらした淡いグレー面と重ねる **Don't** - 原色や蛍光色のボタンを置かない - 大きな角丸やピル型を多用しない - 太いゴシックで煽る見出しにしない - 強いドロップシャドウを付けない - 装飾イラストを賑やかに散らさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と価値を伝える）: 女性の顔のアップ写真を全面に敷き、下部に白い明朝のコピーと欧文を置く。六角バッジを重ねる 2. **権威付け**（専門性と資格を示す）: グレー地にキーワードタグ3つ、見出し、月桂樹メダル2×2、住所帯、アクセス帯を並べる 3. **予約カレンダー**（空き枠から予約へ誘導する）: 白地に見出し、金ラベル、細枠で囲んだ週間カレンダーを置く 4. **特典の紹介**（無料で使える装置を訴求する）: 欧文見出しの下に製品写真、淡いグレー地に明朝見出しと本文を置き、白い吹き出しボックスで締める 5. **コンセプト**（治療方針を4つの言葉で示す）: 番号付きの角線カードを2×2で並べる 6. **問題提起**（他との違いを主張する）: ブルーグレーの強調帯を置き、下端をV字にする 7. **治療紹介**（提供する治療の考え方を伝える）: 大きな欧文見出しの下に、写真背景に重ねた白カードで本文を置く 8. **選ばれる理由**（番号付きで強みを示す）: 薄い大きな数字と縦書きの欧文を置き、写真・六角バッジ・メダル・本文を組み合わせる 9. **設備紹介**（先端設備を詳しく説明する）: 写真とずらした面の下に角線見出し・本文・特徴の丸3つを置き、設備の数だけ繰り返す 10. **メリット**（患者にとっての利点をまとめる）: 見出しバーの下に淡いグレーのカードを3枚積み、細枠のまとめボックスで締める 11. **お問い合わせ**（無料相談へ誘導する）: 欧文の透かし見出し、グレーの説明帯、電話とWEB予約の2つのボタン 12. **悩みの提示**（対象となる悩みを網羅する）: 歯並びの線画アイコンを丸で並べ、写真背景にチェックリストを載せ、V字の強調帯で相談に誘う ## Imagery - 女性モデルは自然光で、柔らかいソフトフォーカスにし、彩度を少し落とす - 設備写真は白背景・白い機器・明るい室内で清潔に撮る - 診療風景は落ち着いた室内で、医師と患者の会話を写す - アイコンは細い白線の線画で、歯や月桂樹を描く - ロゴ風の装飾は細線の紋章で、金やグレーを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を約900pxにして中央に寄せる - FVはPCで写真の左にコピーを置き、メダルを横一列に並べる - 設備紹介はPCで写真とテキストカードを左右交互に配置する - コンセプトやメリットのカードはPCで3〜4列にする - PCのヘッダーには電話番号・WEB予約・LINEの各ボタンを置く ## 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-3c5eb100`（元 LP の URL から採番） - **元 LP**: https://akasaka-kyousei.com/orthodontics/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。