DESIGN.md — 金帯×和紙地の上品な眼科クリニック LP（Gold Frame Washi Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 上品・高級、信頼・誠実、シンプル・ミニマル
• キーワード: くすんだ金・和紙テクスチャ・明朝体・細い金の二重枠・紺の差し色・清潔な院内写真
• 地の質感: 背景にうっすら和紙の繊維が見える生成りテクスチャ。金の帯は単色かわずかなグラデーション。
• 形: 角丸はほぼ使わない直角ベース。帯見出しの内側に細い白線の枠を入れ、カードは金の細線で囲む。
• 温度感: 温かみのある中間色。金と生成りで落ち着かせ、紺と赤は要所だけに使う。

Colors

• 地は生成りの和紙テクスチャ、本文はその上に白カードを置く。
• セクション見出しは必ず金の帯に白い明朝で入れる。
• 金は帯・細枠・ロゴ・項目ラベルに使い、広い面は帯だけにする。
• 赤は割引額や特典の金額だけに使う。
• 紺は予約・問い合わせボタンと強調の見出し文字に限る。
• 写真の上の文字は白に黒い影で読めるようにする。
• section-band-heading は文字 #FFFFFF × 背景 #B9A245 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#857432、4.62:1）を使う。
• news-row は文字 #5B7BA8 × 背景 #FEFEFE のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#5777A4、4.55:1）を使う。

Typography

• 全体を明朝で統一し、ゴシックは混ぜない。
• セクション見出しは中央揃えにし、字間を少し広げる。
• 金額の数字は単位より大きく、赤い太明朝にする。
• 本文は小さめにして行間を広くとり、左揃えにする。
• 人名の下に英字の名前を小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 60% 幅の 1 カラムで、テキストと図を 2 カラムに並べる
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションは『金帯見出し → 白カード → 詳しく見るボタン』の順にする。
• カードは画面端から 8px ほど内側に置く。
• セクションの間に横幅いっぱいの院内イメージ写真を挟む。
• ニュースは日付とタイトルを 2 段にし、下に線を引いた行を並べる。

Elevation & Depth

• 影は使わず、線と面の色の違いで階層をつける。
• 写真の上の文字にだけ濃い文字影をつける。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物写真は金の細枠で額装する
• セクション境界: 直線で区切る。帯見出しの内側に白い細線の枠を入れる
• ボタン・カード・帯はすべて直角にする。
• 金の枠は 1〜2px の細線にする。
• SNS アイコンだけは金線の丸にする。

Components

• 金帯見出し（section-band-heading）: 幅いっぱいの金帯。内側に白い細線の枠があり、白い明朝を中央に置く
• 詳しく見るボタン（button-outline）: 白地に紺の細線で囲んだ横長のボタン。明朝の小さな文字を中央に置く
• 予約・問い合わせボタン（button-primary）: 紺地に白い太字のボタンを 2 つ横に並べる
• キャンペーン枠（campaign-card）: キルト柄の白地を金枠で囲み、赤の大見出し・紺の条件・赤の巨大な金額を置く。下端に金帯で期限を入れる
• 特典カード（benefit-card）: 金のラベル帯の下に、紺の項目名と赤の金額を並べる。金の細枠で囲む
• 金細枠の白カード（content-card）: 本文・図・地図・医師紹介を入れる白いカード
• ニュース行（news-row）: 日付の下に青いリンクのタイトルを置き、下に線を引く
• 【】付きの項目ラベル（info-label）: 住所・電話・診療時間の見出しを金文字の【】で囲む

Do's and Don'ts

Do - 見出しは必ず金帯に白い明朝で統一する。 - 生成りの和紙テクスチャを地に敷き、上に白カードを重ねる。 - 金額は赤い太明朝で大きく見せる。 - 人物写真は金の細枠で額装する。 - セクションごとに詳しく見るボタンを置く。

Don't - ゴシックやポップな丸文字を使わない。 - 角丸やピル型のボタンにしない。 - 鮮やかな黄色や光沢の強い金にしない。 - 赤を本文や見出しに広げて使わない。 - 影の強いカードやグラデーションボタンを使わない。

Page Structure

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

1. ヘッダー（ブランドの認知とメニューへの導線）: 白地の中央に金のロゴ、右上にハンバーガーメニューを置く
2. 実績帯（症例数で信頼を示す）: 金帯に白い明朝で大きな実績数字と注記を置く
3. ファーストビュー（開院の告知と検査予約への誘導）: 院内と外観の写真をコラージュし、その上に影付きの白い明朝コピーを置く
4. 当院の特徴（クリニックの方針と経歴の説明）: 金帯見出しの下に本文を置き、詳しく見るボタンへつなぐ
5. キャンペーン（期間限定の割引を訴求）: キルト柄の金枠カードに赤い大きな金額を入れ、金帯で期限を示す
6. 紹介制度（紹介特典の案内）: 金のグラデーション帯の見出しの下に、紹介者向けと紹介される人向けの特典カードを 2 段に並べる
7. 治療法の解説（手術とレンズの仕組みを理解してもらう）: 白カードに目の断面図、レンズ図、本文、手術風景の写真を順に並べる
8. お知らせ（最新情報の掲載）: 白カードに日付とリンクの行を 3 件並べ、もっと見るリンクを置く
9. イメージ写真（清潔感のある間を作る）: 白い待合椅子の写真を全幅で入れる
10. アクセス（所在地の案内）: 金枠カードに地図を埋め込み、下に住所を置く
11. 医師紹介（執刀医の信頼性を示す）: 金で額装した写真、和名と英字名、資格証の画像を縦に並べる
12. 予約導線と基本情報（予約・問い合わせを促す）: 紺のボタン 2 つの下に、【】ラベル付きで住所・電話・診療時間を並べる
13. フッター（SNS と規約へのリンク）: 金のロゴ、丸い金線の SNS アイコン、金文字のリンク、コピーライトを中央揃えで置く

Imagery

• 院内写真は白と木目のある明るい空間を、自然光ぎみに広角で撮る。
• 人物は白衣で正面を向き、白いカーテンや明るい窓を背景に柔らかく笑う。
• 解説図は淡い青と金系の配色で、細い引き出し線とラベルを付けた医学図にする。
• 区切りには白い椅子が並ぶ、少し青みのあるハイキーな写真を使う。
• キャンペーンには金の唐草飾りとキルト柄の地を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部にロゴ・予約ボタン・SNS を置き、その下に紺のグローバルナビを入れる。
• PC のファーストビューは実績の金ブロックと写真を左右に分け、キャッチは写真の下に大きな金文字で置く。
• PC のコンテンツは中央約 60% 幅に収め、両脇に和紙の地を見せる。
• PC の解説は本文と図を 2 カラムにし、医師紹介は写真と名前を横に並べる。
• PC のフッター情報は縦線で区切った 2 カラムにする。

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