DESIGN.md — 黒×金の明朝で魅せる高級コンタクトレンズ LP（Black Gold Mincho Premium Medical Device LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、清潔・爽やか、信頼・誠実
• キーワード: 黒×金・明朝体・縦書き・水滴・余白・静謐
• 地の質感: 白い面には淡い水面の揺らぎテクスチャを敷く。黒い面には水滴とボケの粒を散らし、しっとりした質感を出す。
• 形: 細い金線の円枠、1px の区切り線、角丸は小さめにする。シャープで繊細な形が基本。
• 温度感: クールな黒と白をベースに、温かい金色でアクセントを入れる

Colors

• 白いテクスチャ地とチャコール・黒地のセクションを交互に置き、場面の切り替えを示す
• 金色は見出しの一部の語、番号、大きな数値、罫線、CTA に限って使う
• 金はベタ塗りにせず、薄い金から濃い金へのグラデーションでメタリック感を出す
• 黒地の本文は白、白地の本文は墨色にする。中間グレーは注釈だけに使う
• 青緑や水色は下部の関連案内エリアだけで使い、本編には持ち込まない

Typography

• 見出しから本文までほぼ全て明朝体で統一する
• 問いかけや締めのコピーは縦書きにし、2〜3 行を右から左へ並べる
• 強調したい語だけを金色にし、残りは墨色か白のままにする
• 番号・パーセント・倍数は欧文セリフ体で大きく扱い、単位は小さくする
• 注釈記号（※1 など）を上付きの小さな文字で添える
• 下部の関連案内エリアだけはゴシック体を使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。製品ラインアップのみ 2 カラムのカード
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 120px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px
• 縦書きコピーや円枠の前後には 100px 以上の大きな余白を取る
• 特長は番号・小見出し・大見出し・金の罫線・図版・本文の順に縦に積む
• 悩みの円は左右に少しずらして配置し、リズムを出す
• 仕様表は左にラベル、右に値を置く 2 列にし、グレーの 1px 線で区切る

Elevation & Depth

• 影はほとんど使わず、面の色の切り替えで階層を表現する
• CTA ボタンには、ごく薄い影とグラデーションだけを付ける
• 円形の図版は白いフチ付きで、黒地から浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 拡大図は円形に切り抜き、製品パッケージは切り抜き画像で置く。動画は 16:9 の矩形にする。
• セクション境界: 直線で背景色を切り替える。黒地の内側には上下方向のグラデーションも使う。
• 悩みは金色の細い線の円で囲む
• 数値は細い白線の円の中に入れる
• 保証バナーは金色の太枠の矩形にする
• 見出しの下には金色の 1px 横線を引く

Components

• 店舗検索 CTA（button-primary）: 幅いっぱいの横長ボタン。シャンパンゴールドのグラデーションを敷き、中央に明朝の文字、右端に細い矢印を置く。
• 悩みの円枠（case-circle）: 小さな縦書きの CASE 番号と、金色の細い線の円を組み合わせる。円の中の 2 行の文のうち一部の語を金色にする。
• 特長見出しセット（feature-heading）: 金色の欧文数字、小見出し、白い大見出しの順に重ね、下に金の罫線を引く。
• 数値の円（stat-circle）: 黒い円の中に、説明文・縦線・金色の巨大な数字を縦に並べる。
• 保証バナー（guarantee-banner）: 黒地に金の太枠を付け、金色の大見出しと製品画像を入れる。
• 仕様表（spec-table）: 白地に、左にラベル、右に値を置く。行はグレーの 1px 線で区切り、補足は小さな文字で添える。
• ガイドカード（guide-card）: 上半分にイラストや写真、下半分の白帯にタイトルと右矢印を置く。
• 資料ボタン（button-outline）: 白地にグレーの枠線を付け、左に小さな濃灰色のラベル、中央にテキストを置く。

Do's and Don'ts

Do - 見出しと本文は明朝体で統一する - 強調は金色の語だけで行い、太字や赤字は使わない - 黒地のセクションには水滴の装飾を散らす - 縦書きコピーの前後に大きな余白を取る - 数値には必ず注釈記号を付け、出典をページ下部にまとめる

Don't - 本編で原色やポップな色を使わない - 角丸の大きなピル型ボタンにしない - 金色を広い面のベタ塗りに使わない - 白地にフラットな純白だけを使わず、テクスチャを敷く - 1 つの画面に情報を詰め込まない

Page Structure

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

1. ファーストビュー（世界観と商品を提示する）: 暗い背景に人物写真を置き、金色のグラデーションの大コピーと縦書きの問いかけを重ねる。下部に製品画像を置く。
2. CTA（店舗検索へ誘導する）: 黒い帯の上に金色のボタンを置く。
3. スペシャル動画（CM で印象づける）: 白いテクスチャ地に欧文セリフの見出しと 16:9 の動画を置く。
4. 関連コンテンツバナー（記事・漫画へ誘導する）: 上部にラベル帯を付けた横長バナーを 2 枚縦に並べる。
5. 悩みの提起（共感を得る）: 縦書きの問いかけの後に、金線の円で囲んだ悩みを 3 つ並べる。
6. 解決提案（商品を提示する）: 縦書きのコピー、製品パッケージ、短い説明文の順に置く。
7. 特長（テクノロジー）（根拠を示す）: チャコール地に番号付きの特長を 3 つ置く。円形の拡大図、数値の円、動画を組み合わせる。
8. 締めのコピーと CTA（体感を促す）: 黒へのグラデーション地に縦書きコピーと金の縦線を置き、その下に製品画像と金色のボタンを並べる。
9. 保証（不安を払拭する）: 金枠の黒いバナーにする。
10. 使い方動画（使い方の不安を解消する）: 見出し、本文、キャプション付きの動画 2 本を置く。
11. 製品基本情報（仕様を開示する）: 罫線区切りの 2 列の表、資料ボタン、CTA、注釈リストの順に置く。
12. 注意事項（医療機器としての注意を伝える）: 漆黒地に金色の見出しと白文字の箇条書きを置く。
13. 利用ガイド・関連案内（回遊を促す）: 画像付きのカード、バナー、水色地の 2 カラムのラインアップを並べる。

Imagery

• 人物は暗い背景の前でスタジオ撮影し、ボルドー系の衣装で品よくまとめる
• 背景に金の粒子やボケを散らし、きらめきを出す
• 黒地には透明な水滴とボケ玉を散りばめる
• レンズの構造は青い 3D イラストで描き、円形に拡大して見せる
• 製品パッケージは影のない切り抜き画像で、正面から見せる
• 白地には淡い水面の揺らぎを灰色で薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を約 65% に絞って中央に寄せる
• PC のファーストビューは横長にし、人物を左、コピーと製品を右に置く
• PC では縦書きの問いかけを横書きの中央揃えに変える
• PC の特長は、左に縦書きの番号と小見出し、右に内容を置く 2 カラムにする
• PC では動画とガイドカードを横に並べ、2〜3 列にする
• PC には上部のグローバルナビとサブナビ、下部に大きな青いフッターサイトマップが付く

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