DESIGN.md — 白×グレージュのアーチ型美容クリニックLP（Arched Ivory Minimal Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 上品・高級、シンプル・ミニマル、信頼・誠実、やさしい・柔らかい
• キーワード: アーチ・余白・明朝・細線・グレージュ・静謐
• 地の質感: 白地に極細のグレー罫線を引き、背景に大きな薄い欧文ロゴと墨のにじみを透かして入れる
• 形: アーチ窓・正円・ピル型の細枠ボタンで構成し、角張った面はほとんど使わない
• 温度感: やや暖かいニュートラル。白とベージュグレーで清潔感と柔らかさを両立する

Colors

• 地は白にして、ページの外側だけ薄グレーにする
• 文字は墨色 #2F3137 を基本にし、純黒は使わない
• 有彩色はグレージュの予約ボタンだけに使う
• 区切りは面で塗らず、#BEBFBB の細線とアーチ枠で表す
• 写真は彩度を抑えた白・ベージュ基調でまとめ、配色になじませる
• 外部バナーの色は例外として小さく留める
• button-reserve-fixed は文字 #FFFFFF × 背景 #B59F8F のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8C705C、4.58:1）を使う。

Typography

• 全体を明朝で組み、ゴシックは使わない
• 見出しは欧文セリフの大文字と小さな和文の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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。