--- version: alpha name: Arched Ivory Minimal Clinic LP description: 白地に細い罫線とアーチ型の写真フレームを重ね、明朝体と欧文セリフで静かな品の良さを出した形成・美容外科クリニックのLP。色は白・淡いグレー・グレージュに絞り、強調色はモカ系の丸い予約ボタンだけに使う。 colors: background: '#FFFFFF' background-alt: '#FFFFFF' primary: '#B59F8F' cta: '#B59F8F' on-cta: '#FFFFFF' text: '#2F3137' text-muted: '#83837C' line: '#BEBFBB' surface: '#F2F2F2' tint-1: '#DED8D1' tint-2: '#FDFDFD' accent-1: '#2E8B3A' cta-accessible: '#8C705C' typography: display: fontFamily: Cormorant Garamond fontSize: 64px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.05em headline-lg: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-md: fontFamily: Shippori Mincho fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em headline-sm: fontFamily: Shippori Mincho fontSize: 16px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.12em label-button: fontFamily: Shippori Mincho fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 200px full: 999px spacing: unit: 8px card: 16px section: 88px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-reserve-fixed: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px button-outline-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px heading-en-ja: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px photo-arch: backgroundColor: '{colors.surface}' rounded: '{rounded.lg}' height: 320px promise-circle-card: backgroundColor: '{colors.background}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 300px vertical-catch: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 200px sns-circle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 100px banner-sub: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 48px news-list: backgroundColor: '{colors.background}' typography: '{typography.note}' height: 36px --- # DESIGN.md — 白×グレージュのアーチ型美容クリニックLP（Arched Ivory Minimal Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 上品・高級、シンプル・ミニマル、信頼・誠実、やさしい・柔らかい - **キーワード**: アーチ・余白・明朝・細線・グレージュ・静謐 - **地の質感**: 白地に極細のグレー罫線を引き、背景に大きな薄い欧文ロゴと墨のにじみを透かして入れる - **形**: アーチ窓・正円・ピル型の細枠ボタンで構成し、角張った面はほとんど使わない - **温度感**: やや暖かいニュートラル。白とベージュグレーで清潔感と柔らかさを両立する ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページ全体の地色 | 67% | 画素の実測 | | `background-alt` | `#FFFFFF` | ページ外側の余白・薄グレー地 | 8% | 画素の実測 | | `primary` | `#B59F8F` | ブランドのグレージュ（予約ボタン・アクセント） | 2% | 画素の主要色に補正 | | `cta` | `#B59F8F` | 固定の予約ボタン | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | 予約ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#2F3137` | 見出し・本文の濃い墨色 | 3% | 画素の主要色に補正 | | `text-muted` | `#83837C` | 補足・欧文サブコピーのグレー | 1% | 画素の主要色に補正 | | `line` | `#BEBFBB` | アーチ枠・区切りの細線 | 1% | 画素の主要色に補正 | | `surface` | `#F2F2F2` | 写真背景や淡いブロック | 2% | 画素の実測 | | `tint-1` | `#DED8D1` | 淡いグレージュ面 | 3% | 画素の主要色に補正 | | `tint-2` | `#FDFDFD` | ごく薄いグレー面 | 2% | 画素の実測 | | `accent-1` | `#2E8B3A` | 外部メディアバナーの緑 | 0% | 推定 | | `cta-accessible` | `#8C705C` | AA を満たす補正値（計算） | | 計算 | - 地は白にして、ページの外側だけ薄グレーにする - 文字は墨色 #2F3137 を基本にし、純黒は使わない - 有彩色はグレージュの予約ボタンだけに使う - 区切りは面で塗らず、#BEBFBB の細線とアーチ枠で表す - 写真は彩度を抑えた白・ベージュ基調でまとめ、配色になじませる - 外部バナーの色は例外として小さく留める - `button-reserve-fixed` は文字 `#FFFFFF` × 背景 `#B59F8F` のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8C705C`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 背景に敷く大きな欧文ワードマーク | 欧文セリフ | Cormorant Garamond | 400 | 64px | 1.0 | 0.05em | | `headline-lg` | セクションの欧文大見出し | 欧文セリフ | Cormorant Garamond | 500 | 26px | 1.2 | 0.1em | | `headline-md` | 欧文見出しの下に置く和文サブ見出し | 明朝 | Shippori Mincho | 500 | 12px | 1.5 | 0.15em | | `headline-sm` | カードの見出し・縦書きキャッチ | 明朝 | Shippori Mincho | 600 | 16px | 1.6 | 0.1em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 13px | 2.0 | 0.05em | | `note` | 注釈・日付・住所 | 明朝 | Noto Serif JP | 400 | 11px | 1.8 | 0.05em | | `accent` | 円弧に沿わせる欧文の飾り文字 | 欧文セリフ | Cormorant Garamond | 400 | 11px | 1.4 | 0.12em | | `label-button` | ピル型ボタンの文字 | 明朝 | Shippori Mincho | 500 | 12px | 1.4 | 0.1em | - 全体を明朝で組み、ゴシックは使わない - 見出しは欧文セリフの大文字と小さな和文の2段で組む - メインキャッチは縦書きの明朝にする - 字間はやや広め（0.05〜0.15em）に取る - 太字は控えめにして、強調はサイズと余白で出す - 本文の行間は2.0前後と広くする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC では特長を3列、施術案内を2列にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 88px、基本単位 8px、カード内 16px（375px 幅換算） - 中央揃えの見出しを基本にする - 大きなアーチ枠で複数セクションをまとめて囲む - 円形写真は少しずつ上下にずらして配置する - 各ブロックの最後に細枠のピル型ボタンを中央に置く - 上下の余白をたっぷり取り、要素の詰め込みを避ける - お知らせとコラムは細線で区切ったリストにする ## Elevation & Depth - 影はほぼ使わず、フラットで線だけの表現にする - 予約ボタンだけ、ごく薄い影で浮かせてよい - 写真の重なりは影でなく、前後のレイヤー配置で表す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 200px。ボタンはピル型。 - **写真の切り抜き**: 上部が半円のアーチ型と正円を主にする。横長の角写真は補助に限る - **セクション境界**: 大きなアーチ形の細線枠と水平の細線で区切る - 写真はアーチか円で切り抜く - ボタンは細線枠のピル型にし、右端に矢印を入れる - SNSリンクは細線の正円の中に置く - 四角いカードの面塗りは避ける - ギャラリーはアーチ・円・角を交互に並べて帯にする ## Components - **固定予約ボタン**（`button-reserve-fixed`）: 画面右に固定するグレージュの正円ボタン。アイコンと短い文字を入れる - **細枠ピルボタン**（`button-outline-pill`）: 白地にグレーの細線枠。文字は中央、矢印は右に置く - **欧文＋和文見出し**（`heading-en-ja`）: 大きな欧文セリフの大文字の下に、小さな和文明朝を添える - **アーチ写真フレーム**（`photo-arch`）: 上部が半円の写真に、外側の細線アーチを重ねる - **円形写真の特長カード**（`promise-circle-card`）: 番号、円形写真、2行の明朝見出し、短い本文の順に縦に並べる - **縦書きキャッチ**（`vertical-catch`）: ファーストビュー右側に置く縦書きの明朝コピーと小さな説明文 - **SNS丸リンク**（`sns-circle`）: 細線の円の中にアイコン、欧文ラベル、和文名を入れ、3つ並べる - **専門サイトバナー**（`banner-sub`）: 細線の横長枠の左に明朝の文字、右にモノクロの顔パーツ写真を置く - **お知らせリスト**（`news-list`）: 日付とタイトルを1行にし、行ごとに細線で区切る ## Do's and Don'ts **Do** - 余白を大きく取り、要素は少なく見せる - 写真はアーチや円で切り抜き、細線の枠を添える - 見出しは欧文セリフと和文明朝を組み合わせる - 色は白・グレー・グレージュの3系統に絞る - ボタンは細線のピル型で統一する **Don't** - 赤や原色の大きな CTA 帯は使わない - 太いゴシックや派手な装飾文字は使わない - 濃い影や光沢のグラデーションは付けない - 四角い色面のカードを敷き詰めない - 写真の彩度やコントラストを上げすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（院内の清潔感と理念を伝える）: 中央に大きなアーチ写真を置く。背景には薄い欧文ロゴを敷き、右に縦書きキャッチ、左に縦並びのナビゲーションを配置する 2. **約束・特長**（3つの安心ポイントを伝える）: 円形写真カードを3つ、上下にずらして並べる。番号と明朝の見出しを添える 3. **診療科目紹介**（形成外科と美容外科を案内する）: 大きなアーチ線の中に2列で配置する。角写真、欧文見出し、本文、ピルボタン2つの順に組む 4. **医師紹介**（院長の人柄と経歴で信頼を得る）: アーチ写真の横に縦書きの名前を置き、下に見出しと本文、ボタンを続ける 5. **メディア掲載**（第三者からの評価を示す）: 薄い欧文見出しを添え、外部バナーを2つ並べる 6. **お知らせ・コラム**（最新情報を伝える）: 2列の細線リストにし、それぞれに一覧へのリンクを付ける 7. **SNS・専門サイト**（外部の導線へ送る）: 丸いリンクを3つ並べ、その下に横長バナーを2つ置く 8. **院内ギャラリー**（雰囲気を視覚的に伝える）: アーチ・円・角の写真を横一列の帯にする 9. **アクセス**（所在地と診療時間を示す）: 受付写真と地図、細線の診療時間表、住所テキストを並べる 10. **フッター**（サイト全体への導線を置く）: 白地にロゴとカテゴリ別のリンクを多列で並べ、ページ上部へ戻る矢印を置く ## Imagery - 白とベージュの院内を自然光で撮り、明るく低コントラストに仕上げる - 医師は紺色のスクラブ姿で、患者やモニターに向き合う自然な姿を撮る - 肌や顔パーツはモノクロ寄りのクローズアップで上品に見せる - 背景に墨のにじみや淡い大理石のテクスチャを薄く透かす - アイコンは細線のシンプルなものに留める - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の3列は、SP では1列に縦積みにする（円形写真は幅60%程度） - PC の2列も SP では縦積みにし、ボタンは全幅に近いピル型にする - SP では縦書きキャッチを写真の下に移すか、短くして縦書きのまま残す - SP ではナビゲーションをハンバーガーメニューにし、予約ボタンは右下に固定する - SP のギャラリーは横スクロールの帯にする ## 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-cf5b417c`（元 LP の URL から採番） - **元 LP**: https://nishiwaki-plasticsurgery.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（4/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。