DESIGN.md — 蛍光黄×白黒漫画コマの投稿キャンペーンLP（Neon Yellow Manga Panel Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 漫画コマ割り・スクリーントーン・集中線・蛍光イエロー・擬音文字・黒の太枠
• 地の質感: 網点・ドット・スピード線のモノクロトーンを面に敷き、印刷漫画のざらつきを出す
• 形: 斜めに切ったコマ枠、爆発型の吹き出し、角丸の太枠カード
• 温度感: 明るくにぎやかで、少しユーモラス

Colors

• 地は蛍光イエローと白（またはドット柄の淡グレー）をセクションごとに交互に切り替える
• 装飾はすべて黒・白・グレーのモノクロにし、色は黄色の一色だけにする
• 強調語には黄色マーカー帯を文字の後ろに敷く
• 赤は必須ラベル・回答の『A』・ハートだけに少しずつ使う
• フォームとQ&Aは白地に黒文字で、読みやすさを最優先にする

Typography

• 見出しは極太のゴシックかディスプレイ書体にし、細い書体は使わない
• リード文は太字のまま中央揃えにし、短い行で改行する
• セクション見出しは一文字ずつ白黒の正方形に入れ、市松状に並べる
• 擬音文字は手書き風に傾け、コマ枠からはみ出させる
• フォームの文字は標準の太さで小さく、装飾を入れない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。投稿カードの一覧だけ横スクロールの 6 列グリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• FVは斜めのコマ割りで画面を分け、各コマに別のトーンを敷く
• セクションの地色を黄色と白で交互にして区切りにする
• フォームは黄色地の上に白いパネルを置き、左右に約16pxの余白をとる
• Q&Aはカードを縦に積み、各Q&Aの間を約24px空ける
• フローは縦のタイムラインに台形のコマを積む

Elevation & Depth

• 影はぼかさない。黒または黄色の板を斜め下にずらして重ねる
• 投稿カードやフロー最後のコマは、黄色のずらし影で目立たせる
• フォームパネルは影なしで白をそのまま置く

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は使わず、漫画のコマ形（斜めに切った四角）と爆発型の吹き出しで切り抜く
• セクション境界: 直線で地色を切り替える。白地側には放射状の集中線やドット柄を敷く
• コマ枠は黒の3〜4px線にし、角は直角か斜めにカットする
• Q&Aカードは黒の2px線＋大きめの角丸
• CTAは円形の吹き出しにし、尻尾付きにする
• ふきだしは雲形やトゲ形を使い分ける

Components

• 円形吹き出しの投稿CTA（cta-speech-bubble）: 白い円に黒の太枠と尻尾を付け、中に黄色の筆跡マーカーを敷いた行動喚起と応募期間を入れる
• 黄色マーカー強調文（marker-text）: 太字の訴求文の各行の後ろに、黄色の帯を行ごとに敷く
• 市松の文字箱見出し（checker-heading）: 一文字ずつ白黒の正方形に入れ、2段に並べて交互に反転させる
• 投稿エピソードカード（episode-card）: 黒の太枠に網点を敷き、右上にNEWと番号、下にSNS共有とハートを並べる。一覧では小さいカードを並べる
• POINT吹き出し付き注意ボックス（point-callout）: 黄色の細い枠のボックスの左にPOINTの吹き出しを重ね、黄色マーカー付きの小見出しを置く
• 黒タブのフォーム見出し（form-tab-heading）: 黒の角丸タブに白文字を入れ、吹き出しの尻尾を付けて白パネルの上にのせる
• 必須・任意ラベル（required-badge）: 項目名の左に、赤（任意はグレー）の小さな四角いラベルを置く
• Q&Aカード（qa-card）: 黒Qの質問カードと赤Aの回答カードを少し重ねて縦に置く。どちらも白地に黒の2px枠
• 台形コマのフロー（flow-panel）: 左に月を入れた縦線、右に斜めに切った白コマを積む。最後のコマは大きく、黄色の影を付ける

Do's and Don'ts

Do - 黄色以外の装飾はモノクロの漫画トーンで作る - コマ枠や吹き出しは黒の太線で統一する - 強調したい言葉には黄色マーカーを敷く - 擬音文字を傾けて画面の端にはみ出させ、動きを出す - フォーム・Q&Aは白地でシンプルにし、読みやすさを優先する

Don't - 黄色の他に派手な色を足さない - ぼかしたドロップシャドウやグラデーションを使わない - 細い明朝体や上品な書体を使わない - フォームの中にトーンや擬音を重ねない - 写真をメインのビジュアルにしない

Page Structure

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

1. ファーストビュー（企画内容を一目で伝える）: 爆発形の吹き出しに極太の見出しを入れ、その下で斜めのコマ割り、マーカー付きの訴求文、ロゴの吹き出しを並べる
2. 応募CTA（投稿へ誘導し、応募期間を示す）: 集中線のコマの上に円形の吹き出しCTAを置く
3. 企画の説明（募集の背景と、どう使われるかを伝える）: 白地に放射線を敷き、短い行の太字を中央揃えで並べる
4. 投稿の一覧（実際の投稿を見せて共感を集める）: 黄色地に市松の見出しを置き、大きなカード1枚の下に小さなカードを横スクロールで並べる
5. 投稿の案内（書いてほしい内容と注意点を伝える）: 黄色帯の見出しを置き、マーカー付きの説明文とPOINT吹き出し付きの注意ボックスを続ける
6. 応募フォーム（エピソードを集める）: 黄色地に白パネルを置き、上に黒タブの見出しをのせる。項目には必須ラベルとグレーの入力欄を付ける
7. スケジュール（発表までの流れを示す）: ドット柄の地に、縦のタイムラインと台形のコマを並べる
8. よくある質問（応募前の不安をなくす）: 黄色地にQとAのカードを重ねて縦に並べる
9. フッター（主催者・運営者と各種リンクを示す）: 白地に黄色の下線付きリンクと、主催・運営・協力のロゴを中央に縦に並べ、関連するバナーを置く

Imagery

• 写真は使わず、網点・スクリーントーン・集中線・スピード線のモノクロ素材で面を作る
• 擬音は太い手書きの黒文字にし、白フチを付けて傾ける
• 吹き出しはトゲ形・雲形・円形を使い分ける
• 黄色の筆でこすったようなマーカーを文字の後ろに敷く
• ロゴは黄色の雲形の吹き出しに入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを横長のコマ割りにし、見出しの吹き出しを左、訴求文とCTAを右に置く
• PCでは市松の見出しを左に縦書きで置き、投稿カードを右に広げる
• PCではフォームの項目名を左、入力欄を右の2列にする
• PCではフローを横に3つのコマで並べ、上に月を入れた横のタイムラインを引く
• PCではヘッダーにページ内リンクを横に並べる

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