DESIGN.md — 赤地×白アーチの漫画コラボ医療啓発 LP（Bold Red Manga Collaboration Health Education LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、信頼・誠実
• キーワード: 鮮やかな赤地・白いアーチ型パネル・巨大な欧文見出し・漫画キャラクター・線画イラスト・六角形の装飾
• 地の質感: ベタ塗りが基本。白パネルにはごく薄いドット柄を敷く。漫画のスクリーントーンの質感を差し色として使う。
• 形: 上辺が半円のアーチ型パネル、ピル型ボタン、卵形のポイントカード、六角形の線画装飾。
• 温度感: 赤で熱量を出しつつ、淡黄と水色で中和する明るく元気な温度感。

Colors

• ページ地は赤一色。中身は白のアーチ型パネルに載せ、赤の上には白文字の見出しだけを置く。
• 白パネル内の補足情報は淡黄の面でまとめる。
• 主ボタンは濃い水色、サブボタンは淡い水色にして、赤い地と補色の関係にする。
• 強調は黄色の下線マーカーを基本とし、特に大事な一文だけ赤文字にする。
• 表の見出しセルは淡い水色、罫線は水色系で統一する。
• ミントは PICK UP の巨大見出しだけに使う。
• button-red は文字 #FEFEFE × 背景 #ED1B24 のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E9121C、4.56:1）を使う。

Typography

• 各章は「小さな英字ラベル → 巨大な欧文見出し」の 2 段で始める。
• 和文見出しは太いゴシックで中央揃えにし、下に波線を添える。
• 本文は左揃えで、行間を広めにとる。
• 難しい漢字にはルビを振る（若年層向け）。
• PICK UP の巨大文字は縦長のコンデンス体で、画面幅からはみ出させる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントカードだけ 3 列。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 赤地の左右に約 12px の余白を残し、白パネルを置く。
• パネルの上辺は半円のアーチ型にする。
• 医師アイコン＋説明文の横並びを、解説ごとに繰り返す。
• ボタンは主・サブの 2 つを縦に並べたセットで、章の終わりに繰り返す。
• 表は 2 列で、左の見出しセルは幅を固定する。

Elevation & Depth

• ボタンは下方向に濃い影（オフセット約 4px）をつけ、押せる感じを出す。
• カードと吹き出しは影なし。細い線だけで囲む。
• SNS ボタンの丸には柔らかい影をつける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 症状写真は円形に切り抜く。キャラクターは切り抜きにして、パネルの境界からはみ出させる。
• セクション境界: 赤地の上に白いアーチ型パネルが乗る。斜めストライプの帯で区切る箇所もある。
• ポイントカードは縦長の卵形にする。
• 吹き出しボックスは角丸で、下に小さな三角のしっぽをつける。
• 問いかけ枠は、左右だけに括弧状の角丸線を引く。
• 六角形の線画を、章タイトルの左右にあしらう。

Components

• 検索主ボタン（button-primary）: 濃い水色のピル型。左に白丸の虫眼鏡アイコン、黒の太字 2 行、下に小さな注記。黒い枠線と濃い影をつける。
• 検索サブボタン（button-secondary）: 淡い水色のピル型。黒枠で、アイコンはなし。
• 漫画を読む赤ボタン（button-red）: 赤地のピル型。白丸のアイコンと白文字で、黒い影をつける。
• アーチ型白パネル（arch-panel）: 上辺が半円の白パネル。中央に英字ラベル、和文見出し、波線を置く。
• 卵形ポイントカード（point-card）: 3 列並びの縦長楕円。上に黄色い丸で番号を置く。パネル内では淡黄地に点線の枠にする。
• ケース問いかけ枠（case-box）: 上に黒いピル型のラベルを置き、括弧状の枠線の中に太字の問いかけを中央揃えで入れる。
• PICK UP 吹き出しカード（pickup-bubble）: 淡黄地に細い黒枠の角丸カード。上部に番号、下部にしっぽをつける。
• 医師コメント（doctor-note）: 左に丸い医師の線画アイコン、右に本文。要点は黄色の下線マーカーで示す。
• 2 列情報表（info-table）: 左は淡い水色の見出しセル、右は白セル。水色の罫線で、外枠は角丸にする。
• 黄色ピル見出し（pill-label）: 黄色のピル型に、黒の太字で小見出しを入れる。

Do's and Don'ts

Do - 赤地＋白アーチの構造を全章で守る。 - 章の頭には巨大な欧文見出しを白で置く。 - キャラクターやイラストは、パネルの枠からはみ出させて動きを出す。 - 解説の後には、必ず主ボタンとサブボタンのセットを置く。 - 要点は黄色のマーカーで強調する。

Don't - 赤地の上に長い本文を直接置かない。 - ボタンを赤にしない（主 CTA は水色）。 - 影の柔らかいリアルなカードにしない。 - 細い明朝体を使わない。 - 淡黄・水色以外の淡色を増やさない。

Page Structure

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

1. ヘッダー・目次ナビ（章へのジャンプ）: 白地に 2 分割のアンカーリンクを置き、それぞれに紺の丸い矢印をつける。
2. ファーストビュー（コラボと課題を一目で伝える）: 薄グレー地に漫画キャラクターを大きく置き、赤い縦組みの極太キャッチを重ねる。下に青い 2 行のサブコピー。
3. 特別コンテンツ（漫画で興味を引く）: 赤地に巨大な欧文見出し。白アーチの中に限定ラベル、漫画のコマ、赤い読むボタンを入れる。
4. 3 つのポイント（要点の要約）: 斜めストライプの帯の下に白い卵形カードを 3 枚並べ、下に監修者を表記する。
5. 課題提起（ケース）（誤解を正す）: ケースの問いかけ枠、人物イラスト、医師コメント、グラフを繰り返す。
6. 症状の段階（種類の理解）: 淡黄のボックスに、円形写真と説明を矢印でつないで縦に並べる。
7. 相談の促し・検索 CTA（行動喚起）: 赤地に医師イラストを置き、左右に縦書きの吹き出し。水色の主・サブボタンを並べる。
8. 特徴の詳細（メリットの深掘り）: アーチパネルに点線の卵形カードを並べる。巨大なミント見出しの下に PICK UP 吹き出しを 3 つ置く。
9. 治療薬の解説（具体情報）: 黄色のピル見出し、2 列の表、薬の線画、医師コメントの順に並べる。
10. 経過の説明（継続を促す）: 矢印帯の期間ラベル、曲線グラフ、期間別の 2 列表で構成する。
11. 最終 CTA・シェア（行動と拡散）: 主・サブボタン、SNS の丸いボタンを置く。
12. 関連サイトバナー・フッター（回遊）: 空色の写真バナー、白地にロゴとトップへ戻るボタン、濃グレーのリンク一覧。

Imagery

• 漫画の原画（モノクロのトーンとカラーのキャラクター）を、大胆な切り抜きで使う。
• 人物は紺の太い主線に、パステル（水色・ピンク・緑）でベタ塗りした線画にする。
• 人物の背後に黄色の円や小さなキラキラを置いて、明るさを演出する。
• 症状写真は、肌のアップを円形に切り抜く。
• 白抜きの六角形をセクション見出しの周辺に散らす。
• マスコット動物は手描き風の線画にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 420px）のカラムを固定し、左右は赤地のまま残す。
• PC では左側に FV キャラクターと目次ボタンを固定表示する。
• PC の右側には SNS シェアと、丸い検索ボタンを固定する。
• フッターは 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 行書くと起動時に読み込まれる。