DESIGN.md — 赤×黒の劇画調 飲食新メニュー LP（Fiery Red Manga Impact Food Campaign LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 赤と黒・斜め帯・爆発吹き出し・シズル写真・劇画イラスト・紙風カード
• 地の質感: 赤地に筆の跡や煙のかすれ模様、生成りカードは和紙風のざらつき、後半は木目板。
• 形: 平行四辺形の黒帯、ギザギザの爆発形、角丸ほぼなしのカード。
• 温度感: 非常に熱い。赤・オレンジ・黄の暖色が中心。

Colors

• 基本の地は真っ赤、見出しは黒の斜め帯に白文字。
• 商品ごとに地色をオレンジ・黄・茶と切り替え、味の違いを色で示す。
• 黄は擬音・強調語・ボタン文字に限定して使う。
• 商品詳細は生成りカードに黒文字で読みやすくする。
• ソース系は赤ラベル、塩系は青ラベルで分類する。
• 最後のブランド紹介は淡いクリームで落ち着かせる。

Typography

• 見出しは極太で斜体をかけ、勢いを出す。
• 語尾の「ッ」「!!」は小さめに組み、リズムを出す。
• 大事な語だけ大きく、助詞は小さくする。
• 本文は太めのゴシックで行間を広めにとる。
• 店舗・ブランドの静かなパートだけ明朝の縦組みにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2 列のタイル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
• 黒帯見出しは画面幅いっぱいに少し傾けて置く。
• 商品カードの上に皿写真をはみ出させる。
• 写真と見出しを交互に重ねて縦に流す。
• 動画一覧は左サムネ・右タイトルの横並び。
• CTA は各商品ブロックの最後に置く。

Elevation & Depth

• カードは影をほぼ使わず、地色との差で浮かせる。
• 爆発吹き出しや帯には黒の縁取りやずらし影を使う。
• ボタンは平行四辺形に白い縁取りを付ける。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理は鉄板ごと切り抜いて円形に見せる。シーン写真は四角
• セクション境界: 斜めの黒帯と地色の直線切り替え
• ボタンは平行四辺形。
• 強調はギザギザの爆発形吹き出し。
• カードは直角か角丸ごく小さめ。
• ラベルは斜めの小さい帯。

Components

• 斜め黒帯見出し（heading-slant-band）: 画面幅いっぱいに少し傾けた黒帯。上に小さい前置きの行、下に極太の白い大見出し。
• 店舗確認ボタン（button-primary）: 黒の平行四辺形に白縁、黄色い斜体の文字と右向き三角。
• 爆発吹き出し（burst-bubble）: ギザギザ形に煽りの言葉。味ごとに暗赤・青・黄を使う。
• 商品紙カード（product-card）: 生成りのカードに切り抜き皿写真・商品名・価格・区切り線・説明文を縦に並べる。
• 持ち帰り可バッジ（takeout-badge）: 赤い四角の袋アイコンに白文字。
• ラインアップタイル（lineup-tile）: 生成りの横長枠に皿写真と味名を2列で置き、左に縦の分類ラベル、右下に赤い矢印。
• トッピング誘導バナー（topping-banner）: 上に赤帯、下に生成り地。左右に食材写真、右下に黒い＋マーク。
• 動画リスト行（video-row）: 左にサムネイルと赤丸の再生ボタン、右に白い太字のタイトル。

Do's and Don'ts

Do - 見出しは必ず傾けて、極太で置く。 - 料理は湯気と照りが見えるアップの写真を使う。 - 擬音は黄色の手書き風で写真の近くに散らす。 - 味ごとに地色を変えてブロックを分ける。 - 説明文は生成りのカードで落ち着かせる。

Don't - 淡いパステルや寒色だけで構成しない。 - ピル型や大きい角丸のボタンにしない。 - 細い明朝を訴求パートに使わない。 - 余白を広げすぎて勢いを殺さない。 - 説明文を赤地に直接長く載せない。

Page Structure

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

1. ファーストビュー（出演者と新商品のインパクトで注目させる）: ほおばる人物写真、縦書き極太ロゴ、筆の放射模様、英字の筆文字。
2. 発売告知（発売日と新しさを伝える）: 赤い煙の背景に、黒帯の日付と白い大きなキャッチ。
3. コンセプト（商品の世界観を煽る）: 料理写真を暗くして、白い中央揃えの短い文を重ねる。
4. おいしさの秘訣（調理工程のシズル感を伝える）: 動画風の写真と白い大見出し、黄色い擬音、爆発吹き出しを交互に並べる。
5. 店舗誘導CTA（販売店舗へ送る）: 黒い斜めバナーに店舗写真と矢印。
6. ラインアップ（全メニューを一覧で見せる）: 黒帯見出しと分類ラベル付きの2列タイル。
7. 商品詳細（味ごとの特徴と価格を伝える）: 地色を切り替え、紙カード、出演者のおすすめ吹き出し、トッピングバナー、CTAを置く。
8. 注意事項（販売条件を示す）: 暗赤の地に、斜めの枠ボタンと白い注釈リスト。
9. 持ち帰り紹介（利用シーンを広げる）: 集中線と爆発吹き出し、赤黒の劇画イラストを3コマ並べる。
10. 動画（CMやメイキングを見せる）: 赤地に、カテゴリ別の黒い斜めラベルと動画リスト。
11. 期間限定店舗（イベント情報を伝える）: 木目の背景に明朝の詩的な文、店舗写真、和紙風の品書きカード。
12. ブランド紹介・フッター（企業のこだわりで締める）: クリーム地に明朝の縦書き、粉の写真、チャコールのフッター。

Imagery

• 料理は鉄板ごと真上か斜め上から撮り、湯気と照りを強める。
• 人物は大口でほおばる瞬間を、彩度とコントラストを高くして撮る。
• 背景に赤・橙・黄の筆の飛沫と集中線を入れる。
• 利用シーンは赤黒2色の劇画風イラストで描く。
• 後半は木目板と和紙の質感で手作り感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを置き、左右に赤地の背景を伸ばす構成を推奨する。
• PC ではラインアップを4列に広げる。
• 黒帯見出しは PC でも全幅にし、傾きを保つ。
• 動画リストは PC で2〜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 行書くと起動時に読み込まれる。