DESIGN.md — 緑×黄の漫画風・投資入門ストーリーLP（Pop Comic Green Finance Story LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: コミック調・会話劇・太い黒線・原色ベタ塗り・ステップ解説・連載記事
• 地の質感: フラットなベタ塗り。グラデーションや影ぼかしはなく、黒の太い輪郭線とずらし影で立体感を出す。
• 形: 角の小さい矩形カード、フォルダ型タブ、円形アバター、波打つ帯、雲形装飾。
• 温度感: 明るく賑やかで温度高め。コミカルで親しみやすい。

Colors

• 地は全面緑で統一し、白カード・紺ボックス・黄色帯を島として置く。
• 黄色はタイトル帯・フォルダ・見出しラベル・矢印・フッターに限定し強調専用にする。
• 会話のセリフはキャラごとに淡黄／淡橙のマーカー背景で色分けする。
• 重要ポイントは紺地＋白太字＋黄色下線、黄色のずらし影で浮かせる。
• 輪郭はすべて黒の太線で、色面同士を区切る。

Typography

• 本文もほぼ太字で、細字は使わない。
• 見出しは極太ディスプレイ書体で漫画の描き文字のような勢いを出す。
• セリフは行ごとにマーカー背景が付くインライン表示。
• 結論見出しには黄色の下線を引く。
• 帯には英字やローマ字をループ風に並べて装飾にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC も中央に SP 幅の柱を置く）
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 会話は左に円形アバター約44px、右にセリフを並べ行間12px程度。
• 場面転換は縦三点リーダーで示す。
• ポイント枠・ステップカードは左右約10%の余白を取って中央配置。
• ステップは番号→説明→下向き矢印の縦流れ。
• 大きなイラストは画面幅いっぱいに置いて区切りにする。

Elevation & Depth

• ぼかし影は使わない。
• カードは黒の太枠＋右下に黄色のずらし影（約6px）。
• フォルダ型は背面に灰・白の紙を重ねて奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物は円形アバター、イラストは切り抜きで背景なし配置。
• セクション境界: 斜めに波打つ白帯や雲形、フッター前は黄色の大きな円弧。
• 枠線は2〜3pxの黒。
• ポイント枠は左上にタブ付きのフォルダ型。
• バッジはギザギザ星形や楕円形を傾けて置く。
• 回番号はピル型の白ラベル。

Components

• タイトル帯（title-band）: 黄色の帯に極太タイトル、上下に英字が流れる白い細帯。上にイラストがかぶる。
• フォルダ型あらすじカード（episode-folder）: 黄色のフォルダ形に小見出し・回数ピル・回タイトルを入れる。
• 会話行（chat-row）: 円形アバター＋行単位マーカー付きセリフ。キャラで淡黄／淡橙を切替。
• ポイント枠（point-box）: 紺地のタブ付きボックス。タブに黄文字ラベル、本文は白極太＋黄下線、黄ずらし影。
• ステップ解説カード（step-card）: 白地黒枠カード。紺×黄の見出しラベル、丸数字と紺矢印で手順を縦に並べる。
• 方法ラベル（method-label）: 左が濃紺に白文字、右が黄色に黒文字の2色見出しバー。
• 波打ち見出し帯（wave-ribbon）: 斜めにうねる白帯に極太見出し、上下に英字ループ文字。
• 楕円吹き出し（speech-bubble）: 黄色の楕円吹き出しに黒枠、横にキャラのイラスト。
• 前回リンク（back-link）: 白丸矢印アイコン＋白太字のテキストリンク。
• SNSシェアボタン（sns-share）: 黒丸に白アイコンを4つ横並び。

Do's and Don'ts

Do - 黒の太い輪郭線を全要素で統一する。 - 解説は会話劇で進め、要点だけポイント枠でまとめる。 - 手順は番号と下向き矢印で縦に区切る。 - 原色のベタ塗りで面を大きく取る。 - 紙吹雪のような黄色い線を地に散らす。

Don't - グラデーションやソフトシャドウを使わない。 - 細い明朝体や繊細な書体を使わない。 - 写真素材を主役にしない。 - 緑地の上に長い細字の本文を置かない。 - 色数を増やしすぎて緑・黄・紺の軸を崩さない。

Page Structure

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

1. ファーストビュー（シリーズの世界観とタイトルを示す）: 雲に乗るキャラのイラストの下に黄色のタイトル帯、傾いたバッジを散らす。
2. あらすじ（回数とこの回のテーマを示す）: フォルダ型カード＋前回リンク＋白太字のあらすじ文。
3. 場面イラスト（物語に引き込む）: 全幅の線画イラストで場面を描く。
4. 登場人物紹介（キャラ設定を伝える）: 黄色カードを2枚並べ、名前見出し・イラスト・短い紹介。
5. 会話パート（操作の流れを会話で追う）: アバター＋マーカー付きセリフの連続、三点リーダーで場面転換。
6. 画面イラスト（操作箇所を図示）: 黒枠スマホのイラストに集中線で注目箇所を強調。
7. 章見出し（話の区切り）: 波打つ白帯に極太見出し。
8. ポイント解説（要点を整理）: 紺のタブ付き枠＋白カードに箇条書き、黄色矢印でステップへつなぐ。
9. 手順解説（具体的な方法を示す）: 白カード内に方法ラベルと丸数字ステップ・矢印。
10. 補足吹き出し（関連情報を足す）: 黄色の楕円吹き出し＋キャラ。
11. 締め（オチとまとめ）: 雲形装飾に囲まれた白枠に大きな一文字とキャラ、黄色の円弧背景。
12. フッター（シェアと運営表記）: 黄色地に黒丸SNSアイコン、ロゴ、コピーライト。

Imagery

• 太い黒の主線で描いたコミック調イラスト。塗りは水色・黄・白などのフラットなベタ。
• キャラは誇張した表情とポーズで、ツッコミ役との掛け合いを描く。
• 雲・草・花・紙吹雪などの装飾も同じ線画タッチで統一。
• UIは実画面ではなく黒枠の簡略イラストにし、集中線で強調。
• アイコンは紺ベタ＋黒線のシンプルな図。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも中央にSP幅（約480px）の柱を置き、左右は緑で埋める。
• PCの左右余白に紙吹雪状の装飾を広げてもよい。
• 登場人物カードはPCで横並び数を増やす余地がある。
• 文字サイズはPCで1.1倍程度にとどめ、漫画のテンポを崩さない。

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