DESIGN.md — コーラル×淡黄の漫画体験談サプリ LP（Manga Story Pastel Coral Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 親しみ・手作り感、かわいい、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 漫画体験談・手描き線画・コーラルピンク・マーカー強調・記事型LP・ストーリー起承転結
• 地の質感: ドット柄・斜線柄の薄い地紋に、グレーの太線で描いた手描きイラストを重ねる。全体はフラットに仕上げる。
• 形: 角丸の漫画コマと、黒枠の四角いナレーション箱。円形の成分バッジ、ギザギザの見出し帯、ピル型の特長ラベルを使う。
• 温度感: 暖色寄り。苦労を描く場面だけブルーグレーと濃紺グレーで冷たくする。

Colors

• 地の色を物語の流れで切り替える。明るい場面はクリームかピンク、苦労はブルーグレー、どん底は濃いグレーにする
• 強調語はコーラルの太字にするか、淡黄のマーカーを文字下に敷く
• 暗い地の上では、強調語を白抜き文字＋ブルーグレーの帯にする
• 緑はCTAだけに使う。ほかの部品には使わない
• イラストはグレーの線＋コーラルの服＋くすんだ緑の亀など、3色程度に抑える
• button-primary は文字 #FFFFFF × 背景 #34EB3C のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#575757、4.51:1）を使う。
• marker-text は文字 #F26B6B × 背景 #FFFBD2 のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E31414、4.57:1）を使う。
• feature-pill は文字 #FFFFFF × 背景 #F26B6B のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E31414、4.55:1）を使う。

Typography

• 本文は中央揃えにし、1行15字前後で改行する
• 強調語は本文より1〜2px大きい太字のコーラルにする
• ナレーション箱には縦書きも使う
• セリフは手書き風フォントにし、イラストの横に斜めや縦で置く
• 感情のピークの見出しは極太ゴシックで大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コマは左右に交互にずらして配置する
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 語りテキスト→イラスト→語りテキストの順に繰り返す
• 漫画のコマは少し傾けたり重ねたりして並べる
• ナレーション箱はコマの角に重ねる
• セクションの境は地の色を全幅で切り替えて示す
• 成分は円形バッジを3-2-3で配置する

Elevation & Depth

• 影はほぼ使わずフラットに仕上げる
• 立体感はCTAボタンだけに付ける（ベベルとハイライト）
• コマとカードは黒線の枠で区切る

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 切り抜きイラストを淡黄の円や不定形ブロブの上に置く。漫画コマは角丸の矩形にする
• セクション境界: 大半は直線。ほかに緩い曲線、下向き三角、ギザギザ帯を使う
• コマ枠は太めの黒線と角丸にする
• ナレーション箱は角丸なしの白地＋黒枠にする
• 成分バッジは淡いピーチの正円にする
• 特長ラベルはピル型にする

Components

• 緑の公式サイトCTA（button-primary）: 立体感のある緑のピル型ボタン。右端に＞を付ける
• 黒枠ナレーション箱（narration-box）: 白地＋黒枠の四角い箱。縦書きや横書きで、コマの角に重ねる
• 漫画コマ（manga-panel）: 角丸＋黒枠のイラストコマ。録画画面風の装飾も入れる
• マーカー強調（marker-text）: 文字下に淡黄の帯を敷き、文字はコーラルの太字にする
• ギザギザ見出し帯（jagged-banner）: 暗い場面の転換点を示す黒いトゲ形の帯に、白文字を載せる
• 成分の円形バッジ（ingredient-badge）: 淡いピーチの円。中に成分名と短い効能を入れる
• 特長のピル型ラベル（feature-pill）: コーラルのグラデーションのピル。白文字の太字で特長を書く
• 感想の吹き出し（speech-bubble）: 白地＋黒枠の楕円吹き出し。人物の驚きの声を入れる

Do's and Don'ts

Do - 一人称の語り口で物語を進める - 強調語はマーカーかコーラル文字で必ず目立たせる - 暗いパートを挟んで、商品と出会う場面で明るい地に戻す - イラストは同じ人物で統一する - 集中線やキラキラで感情を表現する

Don't - 実写写真を多用しない - 緑をCTA以外に使わない - 本文を左揃えの長文にしない - 高彩度の色を何色も並べない - 角張った企業的なカードデザインにしない

Page Structure

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

1. ファーストビュー（驚きのコピーと商品・人物で興味を引く）: コーラルのグラデーション地に極太の見出しを置く。商品を掲げる人物イラストを添え、下端は白い曲線で切る
2. 自己紹介（語り手の親近感をつくる）: 白地に中央揃えの語りテキストとマーカー強調を置き、集中線付きの人物イラストを添える
3. 生い立ちの回想（素材との縁を伝える）: クリームのドット地に漫画コマとナレーション箱を交互に並べる
4. 悩みの発生（共感できる苦労を描く）: ブルーグレー地にする。反転マーカーと黒枠のナレーション箱で状況悪化を示す
5. 限界の場面（感情の底を見せる）: 濃いグレー地にギザギザの帯を置き、暗いトーンのコマを並べる
6. 転機・商品との出会い（解決策として商品を登場させる）: 下向き三角でつないでピンクのブロブ地へ移る。クリーム地で商品イラストを見せる
7. 使用後の変化（ビフォーアフターを示す）: ピンクと淡黄のコマを3段に重ね、角丸の黒枠の箱を添える
8. 成分訴求（根拠を示す）: コーラル地に数字を大きく強調し、円形バッジ8個と注釈を並べる
9. 商品紹介（商品を印象付ける）: 白地に商品パッケージを置き、マスコットと雲の装飾を添える
10. 推しポイント（特長を3つにまとめる）: 淡黄の放射地から斜線のピンク地へ移る。イラストとピル型ラベルを3組並べる
11. CTA（公式サイトへ送客する）: 人物の呼びかけ吹き出しの下に、緑のピル型ボタンを置く

Imagery

• グレーの太い線画に、コーラルと淡いくすみ色でベタ塗りした漫画イラストにする
• 頬の赤みと大きな表情で感情をはっきり見せる
• マスコットの動物を随所に小さく配置する
• 背景には集中線・キラキラ・ドット・斜線を薄く敷く
• 商品パッケージもイラストのタッチに合わせて描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではコンテンツ幅を約480〜600pxに固定し、中央寄せにする
• 左右の余白には淡いピンクやドット地を広げる
• 漫画コマの縦の流れは維持し、横並びにはしない
• CTAボタンは最大幅を400px程度にする

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