--- version: alpha name: Deep Navy Medical Academy Content LP description: 濃紺のグラデーション地に白カードと金の小見出しを組み合わせた、頭痛などの医療情報を解説する啓発コンテンツ型 LP。見出しは明朝体で知的・信頼感を出し、医師キャラのイラストと症状別のイラストタイルで親しみやすさを加える。 colors: primary: '#010894' background: '#FFFFFF' background-alt: '#FAFAFA' secondary: '#0A2679' accent-1: '#B8A04A' marker: '#F2D46B' text: '#1C1A65' text-body: '#222222' text-muted: '#777777' tint-1: '#B9A8D6' accent-2: '#24238B' line: '#0E1184' on-primary: '#FFFFFF' dark-section: '#042B0C' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.15em rounded: sm: 6px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px category-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 400px illust-tile: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 82px accordion-row: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 60px supervisor-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 300px column-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 135px pagetop-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 60px --- # DESIGN.md — 濃紺×金の明朝で魅せる医療解説コンテンツ LP（Deep Navy Medical Academy Content LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 信頼・誠実、上品・高級、情報量多め・訴求型 - **キーワード**: 濃紺・明朝見出し・金のセクションラベル・白カード・イラストタイル・医師監修 - **地の質感**: FV は濃紺に幾何学的な多角形パターンと光のきらめき。以降は濃紺ベタ面と白面を交互に置くフラットな構成。 - **形**: ピル型ナビボタン、角丸大きめの枠線カード、斜めカットと大きな角丸カーブのセクション境界。 - **温度感**: 寒色中心でクール。金色と人物イラストの暖色で少し温度を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#010894` | ブランド濃紺・セクション地 | 30% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 45% | 画素の実測 | | `background-alt` | `#FAFAFA` | 関連リンク帯の薄グレー地 | 5% | 画素の実測 | | `secondary` | `#0A2679` | ヘッダー・ページトップ帯の紺 | 3% | 画素の実測 | | `accent-1` | `#B8A04A` | SECTION ラベル・強調文の金色 | 0% | 推定 | | `marker` | `#F2D46B` | FV 内の黄色強調テキスト | 0% | 推定 | | `text` | `#1C1A65` | 見出しの紺文字 | 1% | 画素の実測 | | `text-body` | `#222222` | 本文の黒文字 | 1% | 推定 | | `text-muted` | `#777777` | 注釈・抜粋文のグレー | 0% | 推定 | | `tint-1` | `#B9A8D6` | イラスト背景の薄紫 | 4% | 推定 | | `accent-2` | `#24238B` | イラストタイルのラベル帯・コラム番号帯 | 1% | 画素の実測 | | `line` | `#0E1184` | カード枠線・区切り線 | 0% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 濃紺地上の白文字 | 1% | 画素の主要色に補正 | | `dark-section` | `#042B0C` | クッキーバナーの深緑 | 2% | 画素の実測 | - 地は濃紺と白を交互に置き、セクションのリズムを作る。 - 濃紺の地の上には白カードを浮かせて、情報のまとまりを見せる。 - 金色は SECTION 番号ラベルと FV の強調文だけに使い、量を絞る。 - 見出しは紺文字。本文は黒に近いグレー、注釈は明るいグレーにする。 - イラストは紫系トーンでそろえて、濃紺と調和させる。 - 赤やオレンジなど暖色の CTA は使わない。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインタイトル | 明朝 | Shippori Mincho | 700 | 34px | 1.3 | 0.05em | | `headline-lg` | セクション見出し（# 付き） | 明朝 | Shippori Mincho | 700 | 28px | 1.3 | 0.08em | | `headline-md` | カード内のカテゴリ見出し | 明朝 | Noto Serif JP | 500 | 15px | 1.5 | 0.08em | | `headline-sm` | アコーディオン項目・コラムタイトル | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.05em | | `body-md` | リード文・本文 | 明朝 | Noto Serif JP | 400 | 11px | 1.8 | 0.03em | | `note` | 監修者の経歴・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.9 | 0.03em | | `accent` | SECTION 番号・英字サブタイトル | 欧文セリフ | Cormorant Garamond | 500 | 11px | 1.2 | 0.05em | | `label-button` | ナビボタン・ラベル帯 | 明朝 | Noto Serif JP | 500 | 13px | 1.4 | 0.15em | - 見出しは明朝で字間を広めにとる。 - セクション見出しは、上に英字の金ラベル、下に小さな問いかけのサブコピーを付けて 3 段で組む。 - 見出しの頭に「#」を付けて、ハッシュタグ風に見せる。 - アコーディオンと監修情報はゴシックにして、読みやすさを優先する。 - 本文は中央揃えの短い行を基本にする。説明文は左揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。イラストタイルは 4 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算） - 濃紺の地の中に白カードを左右 14px 程度の余白で置く。 - カード同士の間は 36px ほどあけて、紺地を見せる。 - イラストタイルは正方形に近い比率で並べ、下部にラベル帯を付ける。 - アコーディオンは区切り線だけのリストにし、右端に丸いプラスアイコンを置く。 - 見出しブロックは中央揃えにし、下に医師イラストを添える。 ## Elevation & Depth - 影はほとんど使わず、フラットに作る。 - 白カードは紺地とのコントラストだけで浮かせる。 - FV のナビボタンは白ベタで、影は付けない。 ## Shapes - **角丸**: 小 6px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: イラストは角丸 6px の正方形タイル。監修者写真は角丸の長方形。医師キャラは切り抜きで配置する。 - **セクション境界**: FV 下端は右上がりの斜めカット。紺から白への切り替えは大きな角丸カーブにする。 - ナビボタンは完全なピル型にする。 - コラムカードは角丸 24px の細い紺枠にする。 - コラム番号ラベルは、左端に付く右側だけ角丸のタブにする。 - FV のリード枠は、左右だけを細い線で角ブラケット状に囲む。 ## Components - **目次ピルボタン**（`nav-pill`）: 白いピル型。上段に # 付きの見出し、下段に小さなサブコピー、右に下向き矢印を置く。 - **セクション見出し**（`section-heading`）: 金色の SECTION 番号、紺の明朝の大見出し、小さなサブコピーを中央に積む。 - **カテゴリ白カード**（`category-card`）: 濃紺地に置く白カード。左に紫の縦バーを付けた見出しと、イラストタイルのグリッドを入れる。 - **症状イラストタイル**（`illust-tile`）: 紫トーンの人物イラストの下に、紺帯の白ラベルを付けたタイル。 - **アコーディオン行**（`accordion-row`）: 濃紺地に白文字と下線を引き、右に白丸のプラスアイコンを置く。 - **監修者カード**（`supervisor-card`）: 白カード。左に役職と名前、右に顔写真を置き、区切り線の下に経歴と注釈を入れる。 - **コラムカード**（`column-card`）: 細い紺枠の角丸カード。左上に番号タブ、タイトル、抜粋文、右下に Read more を置く。 - **ページトップ帯**（`pagetop-bar`）: 全幅の紺帯に白文字と、白丸の上矢印アイコンを置く。 ## Do's and Don'ts **Do** - 濃紺と白の面を交互に置いて、章立てを明確にする。 - 見出しは明朝で字間を広くし、学術的な雰囲気を保つ。 - 金色は SECTION ラベルにだけ使う。 - 医師キャラのイラストを見出しの近くに添えて、案内役にする。 - 症状は短い単語ラベルのイラストタイルでそろえる。 - 監修者情報と注釈を必ず入れる。 **Don't** - 赤やオレンジの派手な購入ボタンを置かない。 - 見出しを丸ゴシックにしない。 - 影やグラデーションのボタンで装飾過多にしない。 - イラストの色調を紫系から外さない。 - 効果効能を断定する大きなコピーを置かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューの導線）: 紺帯に白ロゴと、ハンバーガーメニュー。下にパンくずを置く。 2. **ファーストビュー**（コンテンツのテーマと案内役の提示）: 濃紺の幾何学模様。吹き出しバッジ付きの明朝タイトル、ブラケット枠のリード文、医師アイコンを置き、下端は斜めカット。 3. **目次ナビ**（3 つの章への誘導）: 白いピルボタンを縦に 3 つ並べる。 4. **図鑑（分類一覧）**（症状を原因別に見せて共感させる）: 白地の見出しと医師イラストに続き、濃紺地に白カードを 3 枚。各カードに 4 列のイラストタイルを入れる。 5. **対処方法**（原因別の対処の解説）: 白地の見出しに続き、濃紺地にアコーディオンを 5 行並べる。 6. **監修者紹介**（信頼性の担保）: 濃紺地の白カードに、顔写真・肩書き・経歴・注釈を入れる。 7. **コラム**（関連記事への回遊）: 大きな角丸カーブで白地に切り替え、枠線カードを縦に並べる。 8. **関連リンク**（商品ページへの送客）: 薄グレー地に、紺のバナーを 1 枚置く。 9. **フッター**（サイト内リンクと規約）: ページトップ帯、紺文字の区切り線リスト、言語切替、SNS アイコン、規約リンクの順に並べる。 ## Imagery - 人物は太めの主線で描く漫画風イラスト。頭を押さえるなどの仕草で症状を表す。 - イラスト背景は紫と薄紫の 2 トーンで、街や室内をシルエット風に描く。 - 医師キャラは白衣・眼鏡・聴診器の線画調で、ポーズ違いを使い分ける。 - FV 背景は濃紺の多角形パターンに、光のフレアを少し入れる。 - 監修者写真は白背景の明るいバストアップ。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 70% の中央寄せにする。 - イラストタイルは PC で 6 列にする。 - 目次ピルボタンは PC で横 3 つ並びにする。 - セクション見出しの医師イラストは、PC では見出しの右横に置く。 - 監修者カードは PC で写真を左、テキストを右の横並びにする。 - コラムカードは PC で 2 列にする。 ## 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-1732825a`（元 LP の URL から採番） - **元 LP**: https://www.ssp.co.jp/eve/mystery-headache-manual/ - **解析に使った画像**: 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/）からご連絡ください。