--- version: alpha name: Black Gold Mincho Premium Medical Device LP description: 黒やチャコールの面と、白い水面テクスチャの面を交互に置く構成。見出しには金色のグラデーションと明朝体の縦書きを使う。上質で静かな雰囲気の医療機器 LP。数値はローマン体風の大きな金色数字で見せ、CTA はシャンパンゴールドのグラデーションを敷いた横長ボタンにする。 colors: primary: '#A08440' background: '#F4F4F5' dark-section: '#222222' background-alt: '#000000' cta: '#D9C08E' on-cta: '#222222' text: '#0F0F0F' on-dark: '#F5F5F5' accent-1: '#E6D3A8' line: '#C9AE72' line-gray: '#A2A39B' accent-2: '#137B77' tint-1: '#E3F3FF' surface: '#FFFFFF' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 60px fontWeight: 400 lineHeight: 1.1 body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 62px case-circle: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 270px feature-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 160px stat-circle: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 170px guarantee-banner: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 230px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 90px guide-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 270px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — 黒×金の明朝で魅せる高級コンタクトレンズ LP（Black Gold Mincho Premium Medical Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、清潔・爽やか、信頼・誠実 - **キーワード**: 黒×金・明朝体・縦書き・水滴・余白・静謐 - **地の質感**: 白い面には淡い水面の揺らぎテクスチャを敷く。黒い面には水滴とボケの粒を散らし、しっとりした質感を出す。 - **形**: 細い金線の円枠、1px の区切り線、角丸は小さめにする。シャープで繊細な形が基本。 - **温度感**: クールな黒と白をベースに、温かい金色でアクセントを入れる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A08440` | 金色の見出し・強調文字 | 2% | 推定 | | `background` | `#F4F4F5` | 白い水面テクスチャ地 | 45% | 画素の実測 | | `dark-section` | `#222222` | テクノロジー紹介のチャコール地 | 25% | 画素の実測 | | `background-alt` | `#000000` | FV・注意事項の漆黒地 | 8% | 画素の実測 | | `cta` | `#D9C08E` | CTA のシャンパンゴールド面 | 2% | 推定 | | `on-cta` | `#222222` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `text` | `#0F0F0F` | 白地の見出し・本文 | 3% | 画素の実測 | | `on-dark` | `#F5F5F5` | 黒地上の白文字 | 3% | 画素の実測 | | `accent-1` | `#E6D3A8` | 大きな数値の淡金 | 0% | 推定 | | `line` | `#C9AE72` | 金の細罫線・円枠 | 0% | 推定 | | `line-gray` | `#A2A39B` | 仕様表の区切り線 | 0% | 画素の主要色に補正 | | `accent-2` | `#137B77` | 関連案内の青緑見出し | 0% | 画素の実測 | | `tint-1` | `#E3F3FF` | 製品ラインアップの淡い水色地 | 5% | 画素の実測 | | `surface` | `#FFFFFF` | ガイドカードの白面 | 4% | 画素の実測 | - 白いテクスチャ地とチャコール・黒地のセクションを交互に置き、場面の切り替えを示す - 金色は見出しの一部の語、番号、大きな数値、罫線、CTA に限って使う - 金はベタ塗りにせず、薄い金から濃い金へのグラデーションでメタリック感を出す - 黒地の本文は白、白地の本文は墨色にする。中間グレーは注釈だけに使う - 青緑や水色は下部の関連案内エリアだけで使い、本編には持ち込まない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きの問いかけ・締めのコピー | 明朝 | Shippori Mincho | 500 | 36px | 1.5 | 0.1em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 500 | 30px | 1.4 | 0.05em | | `headline-md` | 特長のサブ見出し・悩みの文 | 明朝 | Noto Serif JP | 400 | 24px | 1.5 | 0.05em | | `headline-sm` | 英字見出し・動画キャプション | 欧文セリフ | Cormorant Garamond | 500 | 26px | 1.3 | 0.03em | | `accent` | 番号と大きな数値（金色） | 欧文セリフ | Playfair Display | 400 | 60px | 1.1 | 0.0em | | `body-md` | 本文・仕様表 | 明朝 | Noto Serif JP | 400 | 14px | 2.0 | 0.05em | | `note` | 注釈・出典 | 明朝 | Noto Serif JP | 400 | 11px | 1.5 | 0.0em | | `label-button` | CTA ボタン文字 | 明朝 | Noto Serif JP | 400 | 15px | 1.4 | 0.08em | - 見出しから本文までほぼ全て明朝体で統一する - 問いかけや締めのコピーは縦書きにし、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 ```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-7c85f79c`（元 LP の URL から採番） - **元 LP**: https://alcon-contact.jp/products/dailies/dt1/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。