DESIGN.md — 白黒漫画コマ×黄色爆発のスナック企画 LP（Monochrome Manga Panel Snack Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 漫画コマ割り・太い黒枠・集中線・手描き擬音・黄色の爆発バッジ・モノクロ
• 地の質感: ベタ塗りのフラットな面。漫画のスクリーントーン調の薄い背景と、集中線を重ねる。
• 形: 角丸なしの太い黒枠を傾けて切り、コマの境界を斜めにする。吹き出しは雲形とギザギザ形。
• 温度感: 明るく賑やか。モノクロなのに遊び心がある。

Colors

• 基本は白・黒・薄グレーの 3 色だけで組む
• 黄色は番号バッジとキャラ背景にだけ使う
• 黒ベタ面には白文字。コマ内は白地に黒文字
• ボタンは黒地に白文字、右端に白い丸矢印を付ける
• 有彩色は写真とキャラ絵に任せ、UI には足さない

Typography

• 見出しは極太ディスプレイ書体を画面いっぱいまで大きく組む
• 大見出しには白フチ＋黒の太い縁取りを付け、漫画のタイトルのように見せる
• 擬音は手描きの斜め文字にし、見出しの角に重ねて置く
• 英字は幅広の極太サンセリフ
• 本文は太めのゴシック。行間は広めに取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、クリエイター一覧だけ 4 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 28px（375px 幅換算）
• 各セクションを黒枠のコマに入れ、コマどうしを 16〜24px 空けて縦に積む
• コマの上下辺は斜めに切り、隣のコマと平行にする
• 番号バッジはコマの左上から枠の外にはみ出させる
• ステップカードは左右 30px 程度内側に入れて、背景のグレーを見せる

Elevation & Depth

• 影は使わない。奥行きは黒枠の太さと重なりで出す
• 吹き出しやバッジをコマの枠に重ねて、レイヤー感を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真を白い不定形の丸（ゆがんだ円）で切り抜く。拡大部分は吹き出し形の丸窓にする
• セクション境界: 太い黒線を斜めに切ったコマ境界
• 枠線は 5〜7px の黒ベタ
• カード・ボタンは角を立てて角丸なし
• 番号は黄色のギザギザ爆発形
• STEP ラベルは雲形の思考吹き出し（小さな丸 2 つ付き）

Components

• 黒の矢印ボタン（button-primary）: 黒い長方形の中に白文字と白い下線、右端に白い丸囲み矢印を置く
• 爆発番号バッジ（badge-number）: 黄色のギザギザ形に黒い太枠を付け、中に 2 桁の番号を英字で入れる
• 漫画コマ枠（panel-frame）: 白地に太い黒枠。辺の一部を斜めに切る
• 手順カード（step-card）: 黒枠の白カードに、雲形の STEP 吹き出し・不定形に切り抜いた写真・太字見出し・説明文を縦に並べる
• キャラアイコンタイル（creator-tile）: 正方形のカラー背景にイラストを置き、下に黒帯で名前と白い＋アイコンを付ける
• 黒ベタ告知コマ（dark-banner）: 黒地に白い極太英字を置き、白い点線の四角にはてなマークを添える
• 手描き擬音（onomatopoeia）: 斜めの手描き文字を見出しの角に重ね、後ろに灰色のギザギザを敷く
• 集中線の完成コマ（finish-panel）: 放射状の集中線の背景の中央に写真と黒枠の結果ラベル、角にギザギザの FINISH 吹き出しを置く

Do's and Don'ts

Do - 黒枠を太くして、すべての情報をコマの中に入れる - 番号バッジと擬音でセクションの始まりを派手に見せる - 黄色はアクセントだけに抑える - 写真は白背景で撮り、不定形の丸で切り抜く - ページの四隅にトンボ（裁ち線）風の細線を置き、原稿用紙らしさを出す

Don't - 角丸やドロップシャドウを使わない - 赤や青など黄色以外の UI 色を足さない - 細い明朝体や繊細な書体を使わない - 枠のない浮いたカードを置かない - グラデーション背景を使わない

Page Structure

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

1. ファーストビュー（企画の驚きと内容をひと目で伝える）: モノクロ漫画のコラージュを薄く敷き、両側に集中線の付いた小見出し、極太の 2 行コピー、中央揃えの説明文 4 行を重ねる
2. 対象商品（対象になる商品を示す）: 番号バッジ付きの大見出しコマの下に、商品写真・ロゴ・商品名・黒ボタン・注釈を入れたコマを置く
3. 今後の予告（続きへの期待を作る）: 黒ベタのコマに英字の告知とはてなマークの枠を入れ、白フチ見出しで追加予定を告げる
4. 参加クリエイター（作者の一覧と回遊を促す）: 4 列のアイコンタイルを 2 段並べ、操作を促す案内文を添える
5. 作者詳細と漫画見本（選んだ作者の作品を見せる）: 黒地のプロフィール帯にアイコンを大きく置き、その下のグレー地のコマに縦長の漫画と商品画像を並べる
6. 取り組みの説明（パッケージの活用方法を伝える）: グレー地に番号バッジと大見出し、長めの本文、黒ボタン 2 本を縦に並べる
7. 手順ステップ（折り方を順番に案内する）: 雲形の STEP ラベル付きの白カードを 6 枚縦に積む
8. 完成（達成感で締める）: 集中線のコマに完成写真、擬音、FINISH のギザギザ吹き出しを置く

Imagery

• 商品と手元の写真は白背景で明るく撮り、不定形の丸で切り抜く
• 手順の要点は円形の拡大窓を吹き出しで添える
• キャラは太い黒線のフラットなイラストにし、単色の背景の上に置く
• 背景や装飾は白黒の漫画のコマ・集中線・スピード線で作る
• 擬音・雲・爆発は手描きの太い黒線にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部を 2 カラムにし、左に FV、右に目次とキャラ一覧を置く
• PC では見出しを縦書きにして左に寄せ、コマを横長に組む
• 商品と予告のコマは PC で横に並べ、斜めの境界でつなげる
• クリエイター一覧は PC でも 4 列のまま大きく表示する
• 手順カードは PC で 3 列グリッドにし、完成コマもグリッドに含める

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