--- version: alpha name: Fiery Red Manga Impact Food Campaign LP description: 真っ赤な地と斜めの黒帯見出し、極太イタリック書体、爆発形の吹き出しで勢いを出す飲食チェーンの新メニュー告知LP。商品紹介は味ごとに背景色を変え、生成りの紙風カードで値段と説明を見せる。 colors: primary: '#DB020A' dark-section: '#010101' on-primary: '#FDF7EF' surface: '#F4E5CC' text: '#0E0905' cta: '#010100' on-cta: '#FBDC18' accent-1: '#EA5B2E' accent-2: '#ECC401' accent-3: '#2AA0D0' background-alt: '#5C2C22' secondary: '#7A0101' background: '#FCEFCD' text-muted: '#44413C' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.25 headline-md: fontFamily: Dela Gothic One fontSize: 32px fontWeight: 900 lineHeight: 1.2 letterSpacing: -0.02em headline-sm: fontFamily: Montserrat fontSize: 22px fontWeight: 900 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.6 accent: fontFamily: Yuji Syuku fontSize: 26px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-slant-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 110px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 56px burst-bubble: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.accent}' height: 100px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 700px takeout-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 50px lineup-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 120px topping-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 120px video-row: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' height: 110px --- # DESIGN.md — 赤×黒の劇画調 飲食新メニュー LP（Fiery Red Manga Impact Food Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 赤と黒・斜め帯・爆発吹き出し・シズル写真・劇画イラスト・紙風カード - **地の質感**: 赤地に筆の跡や煙のかすれ模様、生成りカードは和紙風のざらつき、後半は木目板。 - **形**: 平行四辺形の黒帯、ギザギザの爆発形、角丸ほぼなしのカード。 - **温度感**: 非常に熱い。赤・オレンジ・黄の暖色が中心。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DB020A` | メインの赤地 | 30% | 画素の実測 | | `dark-section` | `#010101` | 斜め黒帯見出し | 7% | 画素の実測 | | `on-primary` | `#FDF7EF` | 赤地の白文字 | 3% | 画素の主要色に補正 | | `surface` | `#F4E5CC` | 商品紹介の生成りカード | 14% | 画素の実測 | | `text` | `#0E0905` | カード内の見出し・本文 | 2% | 画素の実測 | | `cta` | `#010100` | 店舗確認ボタンの黒面 | 1% | 画素の実測 | | `on-cta` | `#FBDC18` | ボタン上の黄文字 | 0% | 画素の実測 | | `accent-1` | `#EA5B2E` | ソース味セクションのオレンジ地 | 10% | 画素の実測 | | `accent-2` | `#ECC401` | ねぎ塩味セクションの黄地・強調色 | 9% | 画素の実測 | | `accent-3` | `#2AA0D0` | ねぎ塩系の青ラベル・吹き出し | 2% | 推定 | | `background-alt` | `#5C2C22` | 焼きうどん・木目セクションの茶 | 9% | 画素の実測 | | `secondary` | `#7A0101` | 注意事項エリアの暗赤 | 3% | 画素の実測 | | `background` | `#FCEFCD` | ブランド紹介の淡いクリーム | 6% | 画素の実測 | | `text-muted` | `#44413C` | フッターのチャコール | 2% | 画素の実測 | - 基本の地は真っ赤、見出しは黒の斜め帯に白文字。 - 商品ごとに地色をオレンジ・黄・茶と切り替え、味の違いを色で示す。 - 黄は擬音・強調語・ボタン文字に限定して使う。 - 商品詳細は生成りカードに黒文字で読みやすくする。 - ソース系は赤ラベル、塩系は青ラベルで分類する。 - 最後のブランド紹介は淡いクリームで落ち着かせる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（黒帯内） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.0em | | `headline-lg` | 赤地のキャッチ（白・斜体風） | ゴシック | Noto Sans JP | 900 | 34px | 1.25 | 0.0em | | `headline-md` | 商品名 | 装飾・ディスプレイ | Dela Gothic One | 900 | 32px | 1.2 | -0.02em | | `headline-sm` | 価格・小見出し | 欧文サンセリフ | Montserrat | 900 | 22px | 1.2 | 0.0em | | `body-md` | 商品説明文 | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.03em | | `note` | 注意事項・注釈 | ゴシック | Noto Sans JP | 700 | 12px | 1.6 | 0.0em | | `accent` | 擬音・手書き風の煽り | 手書き・筆 | Yuji Syuku | 700 | 26px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 900 | 16px | 1.3 | 0.02em | - 見出しは極太で斜体をかけ、勢いを出す。 - 語尾の「ッ」「!!」は小さめに組み、リズムを出す。 - 大事な語だけ大きく、助詞は小さくする。 - 本文は太めのゴシックで行間を広めにとる。 - 店舗・ブランドの静かなパートだけ明朝の縦組みにする。 - 書体は画像からの推定で、フォント名は近い印象の 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 ```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-1f19098e`（元 LP の URL から採番） - **元 LP**: https://jp.marugame.com/menu/marugameudonmeshi/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。