DESIGN.md — 濃紺×金の明朝で魅せる医療解説コンテンツ LP（Deep Navy Medical Academy Content LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、上品・高級、情報量多め・訴求型
• キーワード: 濃紺・明朝見出し・金のセクションラベル・白カード・イラストタイル・医師監修
• 地の質感: FV は濃紺に幾何学的な多角形パターンと光のきらめき。以降は濃紺ベタ面と白面を交互に置くフラットな構成。
• 形: ピル型ナビボタン、角丸大きめの枠線カード、斜めカットと大きな角丸カーブのセクション境界。
• 温度感: 寒色中心でクール。金色と人物イラストの暖色で少し温度を足す。

Colors

• 地は濃紺と白を交互に置き、セクションのリズムを作る。
• 濃紺の地の上には白カードを浮かせて、情報のまとまりを見せる。
• 金色は SECTION 番号ラベルと FV の強調文だけに使い、量を絞る。
• 見出しは紺文字。本文は黒に近いグレー、注釈は明るいグレーにする。
• イラストは紫系トーンでそろえて、濃紺と調和させる。
• 赤やオレンジなど暖色の CTA は使わない。

Typography

• 見出しは明朝で字間を広めにとる。
• セクション見出しは、上に英字の金ラベル、下に小さな問いかけのサブコピーを付けて 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

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

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