白×黒のモード系美容整形クリニック LP

Monochrome Editorial Beauty Clinic LP

白地に黒い帯カードと細い欧文見出しを組み合わせた、モード誌のようなモノトーンの美容整形 LP。全面に敷いた顔のアップ写真と、グレー背景で撮った医師の写真、症例写真のグリッドで信頼感と洗練さを出している。色はほぼ白黒だけにして、SNS ボタンのグラデーションだけを差し色にしている。

医療・クリニック・ヘルスケアシンプル・ミニマル上品・高級クール・先進的信頼・誠実SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白にして、強調は黒の面だけで出す
メニューは黒い帯カードに白文字で並べる
彩度のある色は SNS ボタンのグラデーションだけに使う
人物写真はグレー背景でそろえる
フッターは濃いグレーにして白文字で締める
有彩色は写真の肌色と唇の赤に任せる

TYPOGRAPHY

書体

displayセクションの欧文大見出し欧文サンセリフ／ Montserrat 300 ／ 30px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-md医師の名前ゴシック／ Noto Sans JP 300 ／ 19px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-smカードの施術名と、縦線付きの小見出しゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-mdカードの説明文と症例の情報ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

note見出し下の和文副題と肩書きゴシック／ Noto Sans JP 300 ／ 9px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

accentロゴ風の欧文や名前のローマ字表記欧文サンセリフ／ Montserrat 200 ／ 8px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonピル型ボタンの文字ゴシック／ Noto Sans JP 500 ／ 10px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

大見出しは極細の欧文にし、下に小さい和文の副題を添える
名前は細いウエイトを大きく使う
情報ラベルは太字、値は通常の太さにする
本文は小さめにして余白で読ませる
小見出しは左に黒い縦線を付ける

PAGE STRUCTURE

セクション構成

ファーストビュー美しさを印象づけ、専門サイトであることを示す顔のアップ写真を全面に敷き、白い極細の欧文ロゴと小さい和文コピーを重ねる
診療メニュー施術を選びやすくする欧文見出しの下に縦線付きの分類見出しを置き、黒い帯カードを縦に並べる
メニューの続き（第 2 分類）関連する施術を案内する同じ黒カードを 4 枚並べる
医師紹介医師の実績で信頼感を出す欧文見出しの下に、グレー背景の医師写真と名前・ボタンを置く
医師ごとの症例仕上がりと価格を見せる3 列の症例カードをスライダーにして、ページ表示を付ける
医師紹介の繰り返し複数の医師を比べられるようにするプロフィールと症例グリッドの組を医師の人数分繰り返す
フッターのリンク一覧サイト内を回遊させる濃いグレーの地に、白文字のテキストリンクを分類ごとに縦に並べる

COMPONENTS

部品

施術メニューの黒カード menu-card黒い帯に、太字の施術名と 2 行の説明を入れる。右端に細い山形の矢印を置く
欧文見出しと和文副題 section-title中央に極細の欧文を大きく置き、下に小さい和文を添える
縦線付きの小見出し bar-heading左に黒い縦線を付けた太字の見出し
詳細を見るボタン button-primary黒いピル型ボタンに白文字
SNS ボタン button-sns赤から紫へのグラデーションのピル型ボタン。アイコンとアカウント名を入れる
医師プロフィール doctor-profileグレー背景の白衣姿の写真を左に置き、右下に肩書き・名前・ローマ字・ボタンを重ねる
症例カード case-cardビフォー・アフターの写真の下に、太字ラベルと値を 4 組並べる
スライダーのページ表示 slider-pager数字の間に細い線を引き、下に左右の矢印を置く

守ること

白黒を基本に、写真で彩りを加える
欧文見出しは細いウエイトで大きく置く
人物写真はグレー背景・白衣でトーンをそろえる
症例には施術名・説明・リスク・価格をそろえて書く
余白は広めにとり、高級感を保つ

DON'T

避けること

鮮やかな色の背景や、グラデーションの面を多用しない
カードや写真に角丸を付けない
太くて重い欧文書体を使わない
ドロップシャドウや立体的な装飾を付けない
ポップなアイコンやイラストを入れない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 白×黒のモード系美容整形クリニック LP（Monochrome Editorial Beauty Clinic LP）

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

Overview

業種: 医療・クリニック・ヘルスケア／ 雰囲気: シンプル・ミニマル、上品・高級、クール・先進的、信頼・誠実
キーワード: モノトーン・モード誌風・細い欧文見出し・黒帯カード・症例グリッド・余白多め
地の質感: 装飾のないフラットな面。写真の質感だけで高級感を出す
形: 角丸なしの長方形が基本。ボタンだけピル型
温度感: クールでやや無機質。肌色の写真で人肌の温かみを足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#000000`	メニューカードとボタンの黒	6%	画素の実測
`background`	`#FFFFFF`	ページの地色	45%	画素の実測
`on-primary`	`#FFFFFF`	黒カード上の白文字	1%	画素の主要色に補正
`cta`	`#020202`	詳細を見るボタンの黒	0%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の文字	0%	画素の主要色に補正
`text`	`#494949`	見出しと本文の文字	3%	画素の実測
`text-muted`	`#464646`	欧文見出しと副題のグレー	0%	画素の実測
`surface`	`#7D7B84`	医師写真の背景のグレー	7%	画素の実測
`accent-1`	`#E0115F`	SNS ボタンのグラデーション（赤→紫）	0%	推定
`accent-2`	`#B5179E`	グラデーションの紫側	0%	推定
`dark-section`	`#333333`	フッターのリンク一覧の地	11%	画素の実測
`on-dark`	`#FFFFFF`	フッター文字	1%	画素の主要色に補正
`tint-1`	`#DDBEB2`	症例写真の肌色	12%	画素の主要色に補正
`line`	`#333333`	見出し下の短い線と縦線	0%	画素の主要色に補正
`surface-accessible`	`#B9B8BD`	AA を満たす補正値（計算）		計算

地は白にして、強調は黒の面だけで出す
メニューは黒い帯カードに白文字で並べる
彩度のある色は SNS ボタンのグラデーションだけに使う
人物写真はグレー背景でそろえる
フッターは濃いグレーにして白文字で締める
有彩色は写真の肌色と唇の赤に任せる
doctor-profile は文字 #494949 × 背景 #7D7B84 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#B9B8BD、4.57:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	セクションの欧文大見出し	欧文サンセリフ	Montserrat	300	30px	1.2	0.02em
`headline-md`	医師の名前	ゴシック	Noto Sans JP	300	19px	1.4	0.05em
`headline-sm`	カードの施術名と、縦線付きの小見出し	ゴシック	Noto Sans JP	700	13px	1.5	0.02em
`body-md`	カードの説明文と症例の情報	ゴシック	Noto Sans JP	400	10px	1.6	0.0em
`note`	見出し下の和文副題と肩書き	ゴシック	Noto Sans JP	300	9px	1.5	0.05em
`accent`	ロゴ風の欧文や名前のローマ字表記	欧文サンセリフ	Montserrat	200	8px	1.3	0.2em
`label-button`	ピル型ボタンの文字	ゴシック	Noto Sans JP	500	10px	1.2	0.05em

大見出しは極細の欧文にし、下に小さい和文の副題を添える
名前は細いウエイトを大きく使う
情報ラベルは太字、値は通常の太さにする
本文は小さめにして余白で読ませる
小見出しは左に黒い縦線を付ける
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。症例は 3 列のグリッド
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 100px、基本単位 8px、カード内 14px（375px 幅換算）
メニューカードは左右に 20px ずつ余白をとり、16px 間隔で縦に積む
医師写真は左に寄せて画面幅の約 60% で置き、右側に肩書き・名前・ボタンを重ねる
症例は 3 列で、カード同士の間隔は約 10px
症例のスライダーは下に「01 —— 03」形式のページ表示と矢印を置く
セクションの間は 100px 前後の広い余白をとる

Elevation & Depth

影は基本的に使わず、フラットにする
ピル型ボタンだけ、うっすら影を付ける

Shapes

角丸: 小 0px ／中 0px ／大 20px。ボタンはピル型。
写真の切り抜き: 人物は縦長の長方形。症例はほぼ正方形で、上下にビフォー・アフターを並べる
セクション境界: 区切り線は使わず、余白と背景の切り替えで区切る
カードと写真は角丸なし
ボタンだけ完全なピル型にする
症例写真の中央に白い細枠の透過ボタンを重ねる

Components

施術メニューの黒カード（menu-card）: 黒い帯に、太字の施術名と 2 行の説明を入れる。右端に細い山形の矢印を置く
欧文見出しと和文副題（section-title）: 中央に極細の欧文を大きく置き、下に小さい和文を添える
縦線付きの小見出し（bar-heading）: 左に黒い縦線を付けた太字の見出し
詳細を見るボタン（button-primary）: 黒いピル型ボタンに白文字
SNS ボタン（button-sns）: 赤から紫へのグラデーションのピル型ボタン。アイコンとアカウント名を入れる
医師プロフィール（doctor-profile）: グレー背景の白衣姿の写真を左に置き、右下に肩書き・名前・ローマ字・ボタンを重ねる
症例カード（case-card）: ビフォー・アフターの写真の下に、太字ラベルと値を 4 組並べる
スライダーのページ表示（slider-pager）: 数字の間に細い線を引き、下に左右の矢印を置く

Do's and Don'ts

Do - 白黒を基本に、写真で彩りを加える - 欧文見出しは細いウエイトで大きく置く - 人物写真はグレー背景・白衣でトーンをそろえる - 症例には施術名・説明・リスク・価格をそろえて書く - 余白は広めにとり、高級感を保つ

Don't - 鮮やかな色の背景や、グラデーションの面を多用しない - カードや写真に角丸を付けない - 太くて重い欧文書体を使わない - ドロップシャドウや立体的な装飾を付けない - ポップなアイコンやイラストを入れない

Page Structure

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

ファーストビュー（美しさを印象づけ、専門サイトであることを示す）: 顔のアップ写真を全面に敷き、白い極細の欧文ロゴと小さい和文コピーを重ねる
診療メニュー（施術を選びやすくする）: 欧文見出しの下に縦線付きの分類見出しを置き、黒い帯カードを縦に並べる
メニューの続き（第 2 分類）（関連する施術を案内する）: 同じ黒カードを 4 枚並べる
医師紹介（医師の実績で信頼感を出す）: 欧文見出しの下に、グレー背景の医師写真と名前・ボタンを置く
医師ごとの症例（仕上がりと価格を見せる）: 3 列の症例カードをスライダーにして、ページ表示を付ける
医師紹介の繰り返し（複数の医師を比べられるようにする）: プロフィールと症例グリッドの組を医師の人数分繰り返す
フッターのリンク一覧（サイト内を回遊させる）: 濃いグレーの地に、白文字のテキストリンクを分類ごとに縦に並べる

Imagery

女性の顔の極端なアップを撮り、肌のツヤと赤いリップを際立たせる
背景は淡いグレーや水色にしたスタジオ撮影
医師はグレー無地の背景で、白衣の上半身を撮る
症例は目元を横長に切り取り、ビフォー・アフターを上下に重ねる
装飾のイラストは使わない
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はメニューを写真の上に重ねて、左右交互に配置する
PC は医師写真を左、症例グリッドを右に置く 2 カラムにする
PC のファーストビューは横長の写真で、ロゴは右寄せにする
フッターは PC では 4 列に分ける

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

---
version: alpha
name: Monochrome Editorial Beauty Clinic LP
description: 白地に黒い帯カードと細い欧文見出しを組み合わせた、モード誌のようなモノトーンの美容整形 LP。全面に敷いた顔のアップ写真と、グレー背景で撮った医師の写真、症例写真のグリッドで信頼感と洗練さを出している。色はほぼ白黒だけにして、SNS ボタンのグラデーションだけを差し色にしている。
colors:
  primary: '#000000'
  background: '#FFFFFF'
  on-primary: '#FFFFFF'
  cta: '#020202'
  on-cta: '#FFFFFF'
  text: '#494949'
  text-muted: '#464646'
  surface: '#7D7B84'
  accent-1: '#E0115F'
  accent-2: '#B5179E'
  dark-section: '#333333'
  on-dark: '#FFFFFF'
  tint-1: '#DDBEB2'
  line: '#333333'
  surface-accessible: '#B9B8BD'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 19px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 8px
    fontWeight: 200
    lineHeight: 1.3
    letterSpacing: 0.2em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 0px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 14px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  menu-card:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 68px
  section-title:
    textColor: '{colors.text-muted}'
    typography: '{typography.display}'
    height: 60px
  bar-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 20px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 22px
  button-sns:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 22px
  doctor-profile:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 280px
  case-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 240px
  slider-pager:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 40px
---

# DESIGN.md — 白×黒のモード系美容整形クリニック LP（Monochrome Editorial Beauty Clinic LP）

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

## Overview

- **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: シンプル・ミニマル、上品・高級、クール・先進的、信頼・誠実
- **キーワード**: モノトーン・モード誌風・細い欧文見出し・黒帯カード・症例グリッド・余白多め
- **地の質感**: 装飾のないフラットな面。写真の質感だけで高級感を出す
- **形**: 角丸なしの長方形が基本。ボタンだけピル型
- **温度感**: クールでやや無機質。肌色の写真で人肌の温かみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#000000` | メニューカードとボタンの黒 | 6% | 画素の実測 |
| `background` | `#FFFFFF` | ページの地色 | 45% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 黒カード上の白文字 | 1% | 画素の主要色に補正 |
| `cta` | `#020202` | 詳細を見るボタンの黒 | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#494949` | 見出しと本文の文字 | 3% | 画素の実測 |
| `text-muted` | `#464646` | 欧文見出しと副題のグレー | 0% | 画素の実測 |
| `surface` | `#7D7B84` | 医師写真の背景のグレー | 7% | 画素の実測 |
| `accent-1` | `#E0115F` | SNS ボタンのグラデーション（赤→紫） | 0% | 推定 |
| `accent-2` | `#B5179E` | グラデーションの紫側 | 0% | 推定 |
| `dark-section` | `#333333` | フッターのリンク一覧の地 | 11% | 画素の実測 |
| `on-dark` | `#FFFFFF` | フッター文字 | 1% | 画素の主要色に補正 |
| `tint-1` | `#DDBEB2` | 症例写真の肌色 | 12% | 画素の主要色に補正 |
| `line` | `#333333` | 見出し下の短い線と縦線 | 0% | 画素の主要色に補正 |
| `surface-accessible` | `#B9B8BD` | AA を満たす補正値（計算） |  | 計算 |

- 地は白にして、強調は黒の面だけで出す
- メニューは黒い帯カードに白文字で並べる
- 彩度のある色は SNS ボタンのグラデーションだけに使う
- 人物写真はグレー背景でそろえる
- フッターは濃いグレーにして白文字で締める
- 有彩色は写真の肌色と唇の赤に任せる
- `doctor-profile` は文字 `#494949` × 背景 `#7D7B84` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `surface-accessible`（`#B9B8BD`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの欧文大見出し | 欧文サンセリフ | Montserrat | 300 | 30px | 1.2 | 0.02em |
| `headline-md` | 医師の名前 | ゴシック | Noto Sans JP | 300 | 19px | 1.4 | 0.05em |
| `headline-sm` | カードの施術名と、縦線付きの小見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.02em |
| `body-md` | カードの説明文と症例の情報 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `note` | 見出し下の和文副題と肩書き | ゴシック | Noto Sans JP | 300 | 9px | 1.5 | 0.05em |
| `accent` | ロゴ風の欧文や名前のローマ字表記 | 欧文サンセリフ | Montserrat | 200 | 8px | 1.3 | 0.2em |
| `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 500 | 10px | 1.2 | 0.05em |

- 大見出しは極細の欧文にし、下に小さい和文の副題を添える
- 名前は細いウエイトを大きく使う
- 情報ラベルは太字、値は通常の太さにする
- 本文は小さめにして余白で読ませる
- 小見出しは左に黒い縦線を付ける
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。症例は 3 列のグリッド
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 100px、基本単位 8px、カード内 14px（375px 幅換算）
- メニューカードは左右に 20px ずつ余白をとり、16px 間隔で縦に積む
- 医師写真は左に寄せて画面幅の約 60% で置き、右側に肩書き・名前・ボタンを重ねる
- 症例は 3 列で、カード同士の間隔は約 10px
- 症例のスライダーは下に「01 —— 03」形式のページ表示と矢印を置く
- セクションの間は 100px 前後の広い余白をとる

## Elevation & Depth

- 影は基本的に使わず、フラットにする
- ピル型ボタンだけ、うっすら影を付ける

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 人物は縦長の長方形。症例はほぼ正方形で、上下にビフォー・アフターを並べる
- **セクション境界**: 区切り線は使わず、余白と背景の切り替えで区切る
- カードと写真は角丸なし
- ボタンだけ完全なピル型にする
- 症例写真の中央に白い細枠の透過ボタンを重ねる

## Components

- **施術メニューの黒カード**（`menu-card`）: 黒い帯に、太字の施術名と 2 行の説明を入れる。右端に細い山形の矢印を置く
- **欧文見出しと和文副題**（`section-title`）: 中央に極細の欧文を大きく置き、下に小さい和文を添える
- **縦線付きの小見出し**（`bar-heading`）: 左に黒い縦線を付けた太字の見出し
- **詳細を見るボタン**（`button-primary`）: 黒いピル型ボタンに白文字
- **SNS ボタン**（`button-sns`）: 赤から紫へのグラデーションのピル型ボタン。アイコンとアカウント名を入れる
- **医師プロフィール**（`doctor-profile`）: グレー背景の白衣姿の写真を左に置き、右下に肩書き・名前・ローマ字・ボタンを重ねる
- **症例カード**（`case-card`）: ビフォー・アフターの写真の下に、太字ラベルと値を 4 組並べる
- **スライダーのページ表示**（`slider-pager`）: 数字の間に細い線を引き、下に左右の矢印を置く

## Do's and Don'ts

**Do**
- 白黒を基本に、写真で彩りを加える
- 欧文見出しは細いウエイトで大きく置く
- 人物写真はグレー背景・白衣でトーンをそろえる
- 症例には施術名・説明・リスク・価格をそろえて書く
- 余白は広めにとり、高級感を保つ

**Don't**
- 鮮やかな色の背景や、グラデーションの面を多用しない
- カードや写真に角丸を付けない
- 太くて重い欧文書体を使わない
- ドロップシャドウや立体的な装飾を付けない
- ポップなアイコンやイラストを入れない

## Page Structure

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

1. **ファーストビュー**（美しさを印象づけ、専門サイトであることを示す）: 顔のアップ写真を全面に敷き、白い極細の欧文ロゴと小さい和文コピーを重ねる
2. **診療メニュー**（施術を選びやすくする）: 欧文見出しの下に縦線付きの分類見出しを置き、黒い帯カードを縦に並べる
3. **メニューの続き（第 2 分類）**（関連する施術を案内する）: 同じ黒カードを 4 枚並べる
4. **医師紹介**（医師の実績で信頼感を出す）: 欧文見出しの下に、グレー背景の医師写真と名前・ボタンを置く
5. **医師ごとの症例**（仕上がりと価格を見せる）: 3 列の症例カードをスライダーにして、ページ表示を付ける
6. **医師紹介の繰り返し**（複数の医師を比べられるようにする）: プロフィールと症例グリッドの組を医師の人数分繰り返す
7. **フッターのリンク一覧**（サイト内を回遊させる）: 濃いグレーの地に、白文字のテキストリンクを分類ごとに縦に並べる

## Imagery

- 女性の顔の極端なアップを撮り、肌のツヤと赤いリップを際立たせる
- 背景は淡いグレーや水色にしたスタジオ撮影
- 医師はグレー無地の背景で、白衣の上半身を撮る
- 症例は目元を横長に切り取り、ビフォー・アフターを上下に重ねる
- 装飾のイラストは使わない
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はメニューを写真の上に重ねて、左右交互に配置する
- PC は医師写真を左、症例グリッドを右に置く 2 カラムにする
- PC のファーストビューは横長の写真で、ロゴは右寄せにする
- フッターは PC では 4 列に分ける

## 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-558c91bc`（元 LP の URL から採番）
- **元 LP**: https://www.tokyoisea.com/eye/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.tokyoisea.com/eye/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

医療・クリニック・ヘルスケア氷色ブルーと白熊イラストの処方薬 LPIcy Blue Polar Bear Prescription Care LP 医療・クリニック・ヘルスケア生成り地に緑と青の曲線が走る地域クリニックLPFresh Green Community Clinic LP 医療・クリニック・ヘルスケア空色×コーラルの医療啓発ポップLPFriendly Medical Education Pop Blue LP 医療・クリニック・ヘルスケア青×オレンジの医療ダイエットクリニック LPClinical Blue Medical Diet Clinic LP 医療・クリニック・ヘルスケア白×青の清潔な医療検査案内 LPClean Blue Clinical Test Info LP 医療・クリニック・ヘルスケア桜色×白のやさしい女性向けオンライン診療LPSoft Pink Women's Online Clinic LP