--- version: alpha name: Manga Story Pastel Coral Supplement LP description: 手描き漫画のコマと吹き出しで、創業者の半生を語る記事型のサプリLP。コーラルピンク・淡いクリーム・くすんだブルーグレーの地を物語の明暗に合わせて切り替える。強調は文字下のマーカーと色付き文字で入れる。最後は緑のピル型CTAで公式サイトへ送る。 colors: primary: '#FFBBB8' accent-1: '#F26B6B' background: '#FEFEFE' background-alt: '#FEF6E2' tint-1: '#FFFEE2' secondary: '#B6C9D8' dark-section: '#656571' surface: '#FFF1EC' marker: '#FFFBD2' text: '#363636' accent-2: '#748A9B' cta: '#34EB3C' on-cta: '#FFFFFF' line: '#1E2122' on-cta-accessible: '#575757' accent-1-accessible: '#E31414' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.4 accent: fontFamily: Yomogi fontSize: 14px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px narration-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 120px manga-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 220px marker-text: backgroundColor: '{colors.marker}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 28px jagged-banner: backgroundColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px ingredient-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 100px feature-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 100px --- # DESIGN.md — コーラル×淡黄の漫画体験談サプリ LP（Manga Story Pastel Coral Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 親しみ・手作り感、かわいい、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 漫画体験談・手描き線画・コーラルピンク・マーカー強調・記事型LP・ストーリー起承転結 - **地の質感**: ドット柄・斜線柄の薄い地紋に、グレーの太線で描いた手描きイラストを重ねる。全体はフラットに仕上げる。 - **形**: 角丸の漫画コマと、黒枠の四角いナレーション箱。円形の成分バッジ、ギザギザの見出し帯、ピル型の特長ラベルを使う。 - **温度感**: 暖色寄り。苦労を描く場面だけブルーグレーと濃紺グレーで冷たくする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFBBB8` | ブランドを代表するコーラルピンクの面（ファーストビュー・成分紹介） | 12% | 画素の実測 | | `accent-1` | `#F26B6B` | 強調文字・見出し帯の濃いコーラル | 2% | 推定 | | `background` | `#FEFEFE` | 本文の白い地 | 33% | 画素の実測 | | `background-alt` | `#FEF6E2` | 回想パートのドット柄クリーム地 | 10% | 画素の実測 | | `tint-1` | `#FFFEE2` | イラスト背後の淡黄の円・コマの地 | 6% | 画素の実測 | | `secondary` | `#B6C9D8` | 苦労パートのブルーグレー地 | 7% | 画素の実測 | | `dark-section` | `#656571` | 限界を感じる場面の濃いグレー地 | 5% | 画素の実測 | | `surface` | `#FFF1EC` | ピンクのコマ地 | 5% | 画素の実測 | | `marker` | `#FFFBD2` | 文字下に引く淡黄のマーカー | 1% | 画素の主要色に補正 | | `text` | `#363636` | 本文・見出しのチャコール | 4% | 画素の実測 | | `accent-2` | `#748A9B` | ブルーグレー地の上の反転マーカー帯 | 1% | 画素の実測 | | `cta` | `#34EB3C` | 公式サイトへの主CTAの緑 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#1E2122` | コマ枠・ナレーション箱の黒枠線 | 1% | 画素の実測 | | `on-cta-accessible` | `#575757` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E31414` | AA を満たす補正値（計算） | | 計算 | - 地の色を物語の流れで切り替える。明るい場面はクリームかピンク、苦労はブルーグレー、どん底は濃いグレーにする - 強調語はコーラルの太字にするか、淡黄のマーカーを文字下に敷く - 暗い地の上では、強調語を白抜き文字＋ブルーグレーの帯にする - 緑は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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し・感情の爆発コピー | ゴシック | Dela Gothic One | 800 | 36px | 1.3 | 0.02em | | `headline-lg` | セクション見出し・成分訴求 | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.4 | 0.03em | | `headline-md` | 黒枠ナレーション箱・強調行 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em | | `body-lg` | 中央揃えの語り本文 | ゴシック | Noto Sans JP | 500 | 15px | 2.2 | 0.05em | | `note` | ※注釈・出典 | ゴシック | Noto Sans JP | 400 | 9px | 1.4 | 0.0em | | `accent` | コマ内の手書きセリフ | 手書き・筆 | Yomogi | 400 | 14px | 1.3 | 0.05em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.2 | 0.05em | - 本文は中央揃えにし、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 ```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-0cf68093`（元 LP の URL から採番） - **元 LP**: https://www.teinei.co.jp/lp/sp/k/556/aa/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。