--- version: alpha name: Festive Red Knit Party Food LP description: 赤いセーター柄の地に、劇場カーテンと金の指アイコンを散らしたホリデー向け食品紹介 LP。白抜きの太字見出し、深緑のピル型ボタン、黒丸の発売日バッジを使い、商品カードを縦に繰り返して並べる。 colors: primary: '#BD010A' background-alt: '#A8382C' dark-section: '#750004' on-primary: '#FFFFFF' cta: '#014C34' on-cta: '#F4FEFC' accent-1: '#D4A93A' line: '#E0B84A' accent-2: '#020202' tint-1: '#D0020F' background: '#D0D0D0' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 17px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 8px lg: 9999px full: 999px spacing: unit: 8px card: 0px section: 70px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px badge-release: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px icon-finger: height: 100px ribbon-banner: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 80px heading-ruled: textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 44px card-product: textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 400px curtain-frame: backgroundColor: '{colors.dark-section}' height: 520px --- # DESIGN.md — 赤ニット柄×金の聖夜パーティ食品 LP（Festive Red Knit Party Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: クリスマス・ニット柄・劇場カーテン・金の装飾・白抜き太字・商品カードの繰り返し - **地の質感**: 赤地全面に、うっすら見える雪の結晶・ツリーのノルディック柄を敷く。金はグラデーションで箔のような光沢を出す - **形**: 写真は角丸なしの長方形。ボタンはピル型で金の縁取り。バッジは黒い正円 - **温度感**: 暖色が中心で、お祭りのにぎやかさと温かみがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BD010A` | ページ全体の赤地 | 70% | 画素の実測 | | `background-alt` | `#A8382C` | 帯リボンの濃い赤 | 4% | 画素の主要色に補正 | | `dark-section` | `#750004` | カーテンの深紅の影 | 3% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 白抜き見出し・本文 | 4% | 推定 | | `cta` | `#014C34` | もっと見るボタンの深緑 | 2% | 画素の実測 | | `on-cta` | `#F4FEFC` | ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#D4A93A` | 金の指アイコン・ボタン縁・罫線 | 2% | 推定 | | `line` | `#E0B84A` | 小見出し上下の金罫線 | 0% | 推定 | | `accent-2` | `#020202` | 発売日バッジの黒丸 | 1% | 画素の実測 | | `tint-1` | `#D0020F` | 地に浮かぶニット柄の淡い赤 | 6% | 画素の主要色に補正 | | `background` | `#D0D0D0` | ヘッダー写真まわりの明るいグレー | 3% | 推定 | - 地は全面を赤で塗り、白は文字だけに使う - 金は指アイコン・リボンの縁・罫線・ボタンの縁取りに限る - ボタンは深緑の一色にし、赤と緑の補色でクリスマスらしさを出す - 発売日バッジは黒丸に白文字で、写真の右上に重ねる - ニット柄は地の赤より少し明るい赤で描き、コントラストを低く保つ ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し（手描き風の角張った文字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.3 | 0.02em | | `headline-lg` | カテゴリ見出し | ゴシック | Noto Sans JP | 900 | 32px | 1.25 | 0.02em | | `headline-sm` | 見出し上のリード文 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.03em | | `headline-md` | 商品名 | ゴシック | Noto Sans JP | 700 | 21px | 1.4 | 0.03em | | `note` | 商品名の上のシリーズ名 | ゴシック | Noto Sans JP | 500 | 12px | 1.5 | 0.03em | | `body-md` | コンセプト本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.05em | | `accent` | 英字のアーチ状ラベル | 欧文サンセリフ | Montserrat | 600 | 17px | 1.2 | 0.05em | | `label-button` | ボタンラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em | - 文字はすべて中央揃え - 見出しは白の極太ゴシックで、リード文→大見出しの 2 段に組む - 商品名は 2〜3 行に改行し、補足の味名は【】や（）で囲んで一回り小さくする - 本文は短い行で区切り、行間を 2.0 前後と広く取る - 見出しには影や縁取りを付けない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。中央に寄せて縦に積む - **本文ブロックの幅**: 画面幅の約 76% - **余白**: セクション間 70px、基本単位 8px、カード内 0px（375px 幅換算） - 商品は写真→シリーズ名→商品名→ボタンの順に並べ、これを繰り返す - 商品ブロックどうしの間隔は約 60px - カテゴリの切り替わりには金の指アイコンを置いてから見出しを出す - 写真は幅 76% で中央に置き、縦横比は約 16:9.5 - サブカテゴリは上下を金罫線ではさんだ帯見出しにする ## Elevation & Depth - 影はほとんど使わず、平面的に見せる - 金のリボン帯だけ、グラデーションで立体感を出す - ボタンは金の縁取りで少し浮いて見せる ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 9999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの横長長方形 - **セクション境界**: 境界線は引かず、赤地を連続させる。冒頭は金縁のリボン帯で区切る - ボタンは幅 150px 程度のピル型にし、金の 2px 縁を付ける - バッジは直径約 60px の黒い正円 - 写真に枠は付けない ## Components - **もっと見るボタン**（`button-primary`）: 深緑のピル型ボタン。金の縁取りがあり、右端に山形の矢印を付ける - **発売日バッジ**（`badge-release`）: 黒い正円に日付と発売の 2 行を白字で入れる。写真の右上にはみ出して重ねる - **金の指アイコン**（`icon-finger`）: 人差し指を立てた金の手に、放射状の光線を添える。カテゴリ見出しの頭に置く - **金縁リボン帯**（`ribbon-banner`）: 画面幅いっぱいの濃い赤の帯。上下に金の波縁を付け、ロゴ風の文字を乗せる - **金罫線の帯見出し**（`heading-ruled`）: 上下を金の細線ではさんだ白字の小見出し - **商品ブロック**（`card-product`）: 写真、小さなシリーズ名、大きな商品名、ボタンを縦に並べる - **劇場カーテン**（`curtain-frame`）: コンセプト部の左右に、金の房付きの赤いドレープを垂らす ## Do's and Don'ts **Do** - 赤のニット柄の地をページ全体で途切れさせない - カテゴリが変わるごとに、金の指アイコンとリード付き見出しをセットで置く - ボタンは深緑×金縁の一種類にそろえる - 料理写真は暖かい光で、湯気やツヤを感じるシズル感を出す - テキストは白で中央揃えにする **Don't** - 白や淡色の地のセクションを挟まない - ボタンに赤や金の塗りを使わない - 写真を角丸や円で切り抜かない - 細い明朝体で見出しを組まない - 金を広い面の塗りに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（パーティ料理の華やかさを一目で伝える）: 食卓を俯瞰した写真に、ロゴ風文字の金縁リボン帯を重ねる 2. **コンセプト**（失敗への不安に共感し、解決策を示す）: 左右に劇場カーテンを置き、アーチ状の英字と大見出し、短い行の本文を中央揃えで組む。最後に金の指アイコンを置く 3. **目印の提示**（シンボルを覚えてもらう）: リボン帯をもう一度入れ、指アイコンを大きく見せる 4. **カテゴリ別の商品紹介（オーブン料理）**（手軽に作れるメイン料理を提案する）: リードと大見出しの後に、発売日バッジ付きの商品ブロックを繰り返す 5. **カテゴリ別の商品紹介（肉・魚）**（食材ごとにパーティでの使い方を提案する）: 指アイコン→見出し→商品ブロックの流れで並べる 6. **お供の紹介（パン・飲料）**（一緒に買ってほしい商品を勧める）: 金罫線の帯見出しでサブテーマを分けてから商品を並べる 7. **スイーツ**（食後のデザートまで提案する）: 帯見出しの下に、写真 1 枚と複数の商品名、ボタンを置く ## Imagery - 料理写真は斜め上から撮り、暖色の照明を当てる - 木の板やリネンの上に料理を置き、ワインやパンを添えてパーティ感を出す - 赤地に淡い赤で、雪の結晶・ツリー・ジグザグのノルディックニット柄を描く - 放射状の光線と星を添えた金の手描き風アイコンを使う - 赤いベルベットのカーテンに金の房とフリンジを付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも中央に幅 600〜750px の 1 カラムを置き、左右は柄入りの赤地で埋める - PC では商品を 2 カラムのグリッドにしてもよい - カーテン装飾は PC では画面の両端に固定して見せる - 見出しは PC で 1.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-e976dbe5`（元 LP の URL から採番） - **元 LP**: https://www.topvalu.net/tv-machigainaiyatu/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（4/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。