山吹色×赤の冷凍宅配弁当LP

Warm Yellow Frozen Meal Delivery LP

クリーム地に山吹色とオレンジを重ね、価格や数値を赤で強調する食品通販のLP。英字の大見出し、角丸の白カード、波形の区切り、何度も出てくる料金ボックスで、親しみやすさとお得感を両立させている。

食品・飲料ポップ・元気情報量多め・訴求型親しみ・手作り感やさしい・柔らかいSP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地はクリームと白を交互に使い、セクションの切れ目を見分けやすくする
山吹色の全面帯は、信頼や理念を伝えるセクションに1回だけ使う
価格や数値、強調したい語は赤にし、それ以外の強調はオレンジ文字にする
料金ボックスは、オレンジ枠＋赤ヘッダー＋白の表＋淡黄の下部、の構成で統一する
主CTAは緑の立体ボタンにし、ページ内の暖色と補色の関係で目立たせる
英字の大見出しは黒、その下の日本語サブ見出しは黒かオレンジにする

TYPOGRAPHY

書体

display英字のセクション大見出し欧文サンセリフ／ Montserrat 800 ／ 46px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg日本語の訴求見出しゴシック／ Zen Kaku Gothic New 900 ／ 24px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdカード見出し・オレンジのサブ見出しゴシック／ Zen Kaku Gothic New 700 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm価格などの数値ゴシック／ Noto Sans JP 900 ／ 22px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・※書きゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent手順イラストに添える手書き風の英字欧文スクリプト／ Dancing Script 600 ／ 18px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの文字ゴシック／ Zen Kaku Gothic New 900 ／ 17px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

各セクションは、英字の大見出し＋日本語のサブ見出し2行で始める
日本語見出しは字間を広め（0.08em）にする
見出し内の強調語だけを一回り大きくし、赤かオレンジにする
見出しの左右には「＼／」の斜線を添える
価格の数字は大きく、単位や（税込）は小さく添える
本文中の重要な一文には点線の下線か赤い下線を引く

PAGE STRUCTURE

セクション構成

ファーストビュー初回価格で興味を引く山吹色の帯に大きな白文字で価格を入れ、その下に食卓の人物写真と弁当の切り抜きを置く
CTA最初に購入へ誘導するオレンジ地の中央に、緑の立体ボタンを置く
悩みの提起ターゲットに共感させる黄色の付箋のような見出しのあと、写真と黄色のラベルを左右交互に組む
商品紹介サービスを一言で伝えるクリーム地に英字の大見出しを置き、パッケージを斜めに並べる。その下にメニューカードのカルーセル
専門家の監修おいしさと栄養への信頼を示すオレンジの吹き出し見出しの下に、白いカードで円形の顔写真と吹き出しコメントを入れる
栄養数値と手軽さ具体的な基準と簡単さを示す赤い吹き出しの下に数値の円バッジを3つ並べ、写真2枚を矢印でつないで手順を見せる
キャンペーン告知と料金特典と価格を見せる青い告知バナーのあとに料金ボックスを置き、茶色の文字で注意書きを添える
お得な理由3つ価格の妥当性を裏付ける黒丸の番号付き白カードを3枚。中に棒グラフ、段階的な割引の図、比較表を入れる
メニュー選べる豊富さを伝える英字の大見出しの下に弁当の横スクロールを置き、山吹色のボタンで一覧へ誘導する
体験インタビュー利用者の実感を伝えるサーモンピンクのキャッチ枠を人物写真に重ね、Q&Aの本文とプロフィールカードを続ける
お客様の声社会的な証明英字の見出しの左右に紙吹雪の装飾を散らす
品質・安全性企業としての信頼を示すV字で始まる山吹色の全面帯に白文字を置き、白いカードと角丸写真を入れる
ご利用の流れ購入までの不安をなくす番号付きのクリーム色カードにフラットなイラストと手書き風の英字を入れ、オレンジの見出しを添える
よくある質問疑問を解消するアコーディオンを並べ、その下に青枠の注意事項を置く。最後にフッターと固定の緑CTA

COMPONENTS

部品

緑の立体CTA button-primary光沢のある緑のピル型ボタン。上に小さな赤文字のマイクロコピーを添え、左に赤い矢印を置く
山吹色のピルボタン button-secondary一覧へ誘導する横長の山吹色ボタン
料金お知らせボックス price-boxオレンジの角丸枠の中に、赤ヘッダーの白い3列料金表、白線で縁取ったボタン、淡黄の特典帯を重ねる
黒丸の番号 number-badgeカードの左上にかかる黒い正円に、白の英数字で番号を入れる
数値の円バッジ stat-circle白い円に、赤い太字で数値、小さく単位を入れて3つ並べる
赤い吹き出し見出し speech-heading赤い角丸の帯に白抜きの見出しを入れ、下にしっぽをつける。周りに野菜の切り抜きを散らす
悩みのラベル worry-label写真に重ねる黄色の矩形ラベルに、手書き風の文字で悩みを短く書く
FAQアコーディオン faq-item白い行に、山吹色の「Q.」と右端の▼を置く。見出しは二重線で縁取った黄色の帯にする

守ること

価格の数字を赤い太字で大きく見せる
料金ボックスとCTAは主要なセクションのあとに毎回置く
料理写真は明るく暖かい色調で使う
英字の大見出しで、セクションのリズムを揃える
数値は円バッジにして3つ並べる

DON'T

避けること

寒色系を主役にしない（青は告知帯のみ）
カードを直角にしない
強い影やグラデーションを多用しない
本文を細い書体や明朝体にしない
赤を広い面積の地色に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 山吹色×赤の冷凍宅配弁当LP（Warm Yellow Frozen Meal Delivery LP）

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

Overview

業種: 食品・飲料／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、やさしい・柔らかい
キーワード: 山吹色・クリーム地・価格訴求・角丸カード・英字見出し・波形区切り
地の質感: フラットな単色面。料理写真は暖色寄りで明るく、角丸のカードを重ねて構成する
形: 大きめの角丸カード、円形の数値バッジ、吹き出し、波形やV字のセクション境界
温度感: 暖色中心で温かく、食欲をそそる

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#F5B400`	ブランドの山吹色（帯セクション・ボタン）	9%	画素の実測
`secondary`	`#FFAD2C`	料金ボックスのオレンジ地	8%	画素の実測
`accent-1`	`#BC2C2C`	強調の赤（価格・見出し帯・吹き出し）	3%	画素の実測
`background`	`#FDF4D3`	クリームのベース地	27%	画素の実測
`background-alt`	`#FFFFFF`	白のセクション地	27%	画素の実測
`surface`	`#FFFFFE`	手順カードの淡いクリーム	8%	画素の実測
`tint-1`	`#FFEB64`	料金ボックス下部の淡い黄色	2%	画素の実測
`text`	`#121212`	英字大見出しと本文の黒	3%	画素の実測
`text-muted`	`#666666`	注釈のグレー	1%	推定
`accent-2`	`#A07934`	注意書きの茶色文字	1%	画素の実測
`accent-3`	`#FEAEA9`	インタビューのサーモンピンク	1%	画素の実測
`cta`	`#0CA939`	主CTAボタンの緑	1%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の白文字	0%	画素の主要色に補正
`dark-section`	`#1E1E1E`	番号の丸と表見出しの黒	1%	推定
`cta-accessible`	`#0A882E`	AA を満たす補正値（計算）		計算
`primary-accessible`	`#976F00`	AA を満たす補正値（計算）		計算

地はクリームと白を交互に使い、セクションの切れ目を見分けやすくする
山吹色の全面帯は、信頼や理念を伝えるセクションに1回だけ使う
価格や数値、強調したい語は赤にし、それ以外の強調はオレンジ文字にする
料金ボックスは、オレンジ枠＋赤ヘッダー＋白の表＋淡黄の下部、の構成で統一する
主CTAは緑の立体ボタンにし、ページ内の暖色と補色の関係で目立たせる
英字の大見出しは黒、その下の日本語サブ見出しは黒かオレンジにする
button-primary は文字 #FFFFFF × 背景 #0CA939 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0A882E、4.59:1）を使う。
button-secondary は文字 #FFFFFF × 背景 #F5B400 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#976F00、4.58:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	英字のセクション大見出し	欧文サンセリフ	Montserrat	800	46px	1.1	0.02em
`headline-lg`	日本語の訴求見出し	ゴシック	Zen Kaku Gothic New	900	24px	1.4	0.08em
`headline-md`	カード見出し・オレンジのサブ見出し	ゴシック	Zen Kaku Gothic New	700	20px	1.4	0.08em
`headline-sm`	価格などの数値	ゴシック	Noto Sans JP	900	22px	1.2	0.0em
`body-md`	本文	ゴシック	Noto Sans JP	500	14px	1.8	0.05em
`note`	注釈・※書き	ゴシック	Noto Sans JP	400	10px	1.6	0.02em
`accent`	手順イラストに添える手書き風の英字	欧文スクリプト	Dancing Script	600	18px	1.2	0.0em
`label-button`	ボタンの文字	ゴシック	Zen Kaku Gothic New	900	17px	1.2	0.06em

各セクションは、英字の大見出し＋日本語のサブ見出し2行で始める
日本語見出しは字間を広め（0.08em）にする
見出し内の強調語だけを一回り大きくし、赤かオレンジにする
見出しの左右には「＼／」の斜線を添える
価格の数字は大きく、単位や（税込）は小さく添える
本文中の重要な一文には点線の下線か赤い下線を引く
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。数値と料金は 3 列のグリッドにする
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
カードは画面幅の約88%で中央に置く
番号付きカードは、左上に黒い丸の番号がはみ出すように置く
料金ボックスはページ内で4回ほど繰り返して設置する
悩みの項目は、写真と黄色のラベルを左右交互に組む
料理の写真は横にスクロールするカルーセルで見せる

Elevation & Depth

カードは影なしで、地色との差だけで浮かせる
主CTAは光沢と下方向の影をつけた立体ボタンにする
円形の数値バッジに薄い影をつける

Shapes

角丸: 小 6px ／中 16px ／大 24px。ボタンはピル型。
写真の切り抜き: 料理写真は角丸の矩形か円形で切り抜く。商品パッケージは切り抜きで斜めに配置する
セクション境界: 上下をゆるい波形にするか、下向きのV字で区切る
ボタンはピル型にする
見出しの帯には吹き出しのしっぽをつける
数値は白い正円の中に入れる

Components

緑の立体CTA（button-primary）: 光沢のある緑のピル型ボタン。上に小さな赤文字のマイクロコピーを添え、左に赤い矢印を置く
山吹色のピルボタン（button-secondary）: 一覧へ誘導する横長の山吹色ボタン
料金お知らせボックス（price-box）: オレンジの角丸枠の中に、赤ヘッダーの白い3列料金表、白線で縁取ったボタン、淡黄の特典帯を重ねる
黒丸の番号（number-badge）: カードの左上にかかる黒い正円に、白の英数字で番号を入れる
数値の円バッジ（stat-circle）: 白い円に、赤い太字で数値、小さく単位を入れて3つ並べる
赤い吹き出し見出し（speech-heading）: 赤い角丸の帯に白抜きの見出しを入れ、下にしっぽをつける。周りに野菜の切り抜きを散らす
悩みのラベル（worry-label）: 写真に重ねる黄色の矩形ラベルに、手書き風の文字で悩みを短く書く
FAQアコーディオン（faq-item）: 白い行に、山吹色の「Q.」と右端の▼を置く。見出しは二重線で縁取った黄色の帯にする

Do's and Don'ts

Do - 価格の数字を赤い太字で大きく見せる - 料金ボックスとCTAは主要なセクションのあとに毎回置く - 料理写真は明るく暖かい色調で使う - 英字の大見出しで、セクションのリズムを揃える - 数値は円バッジにして3つ並べる

Don't - 寒色系を主役にしない（青は告知帯のみ） - カードを直角にしない - 強い影やグラデーションを多用しない - 本文を細い書体や明朝体にしない - 赤を広い面積の地色に使わない

Page Structure

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

ファーストビュー（初回価格で興味を引く）: 山吹色の帯に大きな白文字で価格を入れ、その下に食卓の人物写真と弁当の切り抜きを置く
CTA（最初に購入へ誘導する）: オレンジ地の中央に、緑の立体ボタンを置く
悩みの提起（ターゲットに共感させる）: 黄色の付箋のような見出しのあと、写真と黄色のラベルを左右交互に組む
商品紹介（サービスを一言で伝える）: クリーム地に英字の大見出しを置き、パッケージを斜めに並べる。その下にメニューカードのカルーセル
専門家の監修（おいしさと栄養への信頼を示す）: オレンジの吹き出し見出しの下に、白いカードで円形の顔写真と吹き出しコメントを入れる
栄養数値と手軽さ（具体的な基準と簡単さを示す）: 赤い吹き出しの下に数値の円バッジを3つ並べ、写真2枚を矢印でつないで手順を見せる
キャンペーン告知と料金（特典と価格を見せる）: 青い告知バナーのあとに料金ボックスを置き、茶色の文字で注意書きを添える
お得な理由3つ（価格の妥当性を裏付ける）: 黒丸の番号付き白カードを3枚。中に棒グラフ、段階的な割引の図、比較表を入れる
メニュー（選べる豊富さを伝える）: 英字の大見出しの下に弁当の横スクロールを置き、山吹色のボタンで一覧へ誘導する
体験インタビュー（利用者の実感を伝える）: サーモンピンクのキャッチ枠を人物写真に重ね、Q&Aの本文とプロフィールカードを続ける
お客様の声（社会的な証明）: 英字の見出しの左右に紙吹雪の装飾を散らす
品質・安全性（企業としての信頼を示す）: V字で始まる山吹色の全面帯に白文字を置き、白いカードと角丸写真を入れる
ご利用の流れ（購入までの不安をなくす）: 番号付きのクリーム色カードにフラットなイラストと手書き風の英字を入れ、オレンジの見出しを添える
よくある質問（疑問を解消する）: アコーディオンを並べ、その下に青枠の注意事項を置く。最後にフッターと固定の緑CTA

Imagery

料理は自然光で明るく撮り、真上か斜め上からトレーごと写す
パッケージは切り抜きにして少し傾け、散らすように配置する
人物は白っぽいキッチンで笑顔を見せるナチュラルなライフスタイル写真にする
ブロッコリーやトマト、レモンなどの切り抜きを装飾として添える
手順は黒の太い線とイエローのフラットなイラストで描く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC画像はないため、SPのレイアウトを基準にする
PCでは本文の幅を最大720pxにして中央寄せし、外側は背景色で埋める
メニューのカルーセルは、PCでは4〜5枚を同時に見せる
料金ボックスと番号カードは最大幅を640pxにする
悩みの項目は、PCでは2列のグリッドに広げてもよい

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

---
version: alpha
name: Warm Yellow Frozen Meal Delivery LP
description: クリーム地に山吹色とオレンジを重ね、価格や数値を赤で強調する食品通販のLP。英字の大見出し、角丸の白カード、波形の区切り、何度も出てくる料金ボックスで、親しみやすさとお得感を両立させている。
colors:
  primary: '#F5B400'
  secondary: '#FFAD2C'
  accent-1: '#BC2C2C'
  background: '#FDF4D3'
  background-alt: '#FFFFFF'
  surface: '#FFFFFE'
  tint-1: '#FFEB64'
  text: '#121212'
  text-muted: '#666666'
  accent-2: '#A07934'
  accent-3: '#FEAEA9'
  cta: '#0CA939'
  on-cta: '#FFFFFF'
  dark-section: '#1E1E1E'
  cta-accessible: '#0A882E'
  primary-accessible: '#976F00'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 46px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.2
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Dancing Script
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.06em
rounded:
  sm: 6px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 60px
  button-secondary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  price-box:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 300px
  number-badge:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 48px
  stat-circle:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 110px
  speech-heading:
    backgroundColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 100px
  worry-label:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 36px
  faq-item:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 44px
---

# DESIGN.md — 山吹色×赤の冷凍宅配弁当LP（Warm Yellow Frozen Meal Delivery LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、やさしい・柔らかい
- **キーワード**: 山吹色・クリーム地・価格訴求・角丸カード・英字見出し・波形区切り
- **地の質感**: フラットな単色面。料理写真は暖色寄りで明るく、角丸のカードを重ねて構成する
- **形**: 大きめの角丸カード、円形の数値バッジ、吹き出し、波形やV字のセクション境界
- **温度感**: 暖色中心で温かく、食欲をそそる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F5B400` | ブランドの山吹色（帯セクション・ボタン） | 9% | 画素の実測 |
| `secondary` | `#FFAD2C` | 料金ボックスのオレンジ地 | 8% | 画素の実測 |
| `accent-1` | `#BC2C2C` | 強調の赤（価格・見出し帯・吹き出し） | 3% | 画素の実測 |
| `background` | `#FDF4D3` | クリームのベース地 | 27% | 画素の実測 |
| `background-alt` | `#FFFFFF` | 白のセクション地 | 27% | 画素の実測 |
| `surface` | `#FFFFFE` | 手順カードの淡いクリーム | 8% | 画素の実測 |
| `tint-1` | `#FFEB64` | 料金ボックス下部の淡い黄色 | 2% | 画素の実測 |
| `text` | `#121212` | 英字大見出しと本文の黒 | 3% | 画素の実測 |
| `text-muted` | `#666666` | 注釈のグレー | 1% | 推定 |
| `accent-2` | `#A07934` | 注意書きの茶色文字 | 1% | 画素の実測 |
| `accent-3` | `#FEAEA9` | インタビューのサーモンピンク | 1% | 画素の実測 |
| `cta` | `#0CA939` | 主CTAボタンの緑 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `dark-section` | `#1E1E1E` | 番号の丸と表見出しの黒 | 1% | 推定 |
| `cta-accessible` | `#0A882E` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#976F00` | AA を満たす補正値（計算） |  | 計算 |

- 地はクリームと白を交互に使い、セクションの切れ目を見分けやすくする
- 山吹色の全面帯は、信頼や理念を伝えるセクションに1回だけ使う
- 価格や数値、強調したい語は赤にし、それ以外の強調はオレンジ文字にする
- 料金ボックスは、オレンジ枠＋赤ヘッダー＋白の表＋淡黄の下部、の構成で統一する
- 主CTAは緑の立体ボタンにし、ページ内の暖色と補色の関係で目立たせる
- 英字の大見出しは黒、その下の日本語サブ見出しは黒かオレンジにする
- `button-primary` は文字 `#FFFFFF` × 背景 `#0CA939` のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#0A882E`、4.59:1）を使う。
- `button-secondary` は文字 `#FFFFFF` × 背景 `#F5B400` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#976F00`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 英字のセクション大見出し | 欧文サンセリフ | Montserrat | 800 | 46px | 1.1 | 0.02em |
| `headline-lg` | 日本語の訴求見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.4 | 0.08em |
| `headline-md` | カード見出し・オレンジのサブ見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.08em |
| `headline-sm` | 価格などの数値 | ゴシック | Noto Sans JP | 900 | 22px | 1.2 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.05em |
| `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 手順イラストに添える手書き風の英字 | 欧文スクリプト | Dancing Script | 600 | 18px | 1.2 | 0.0em |
| `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 900 | 17px | 1.2 | 0.06em |

- 各セクションは、英字の大見出し＋日本語のサブ見出し2行で始める
- 日本語見出しは字間を広め（0.08em）にする
- 見出し内の強調語だけを一回り大きくし、赤かオレンジにする
- 見出しの左右には「＼ ／」の斜線を添える
- 価格の数字は大きく、単位や（税込）は小さく添える
- 本文中の重要な一文には点線の下線か赤い下線を引く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。数値と料金は 3 列のグリッドにする
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- カードは画面幅の約88%で中央に置く
- 番号付きカードは、左上に黒い丸の番号がはみ出すように置く
- 料金ボックスはページ内で4回ほど繰り返して設置する
- 悩みの項目は、写真と黄色のラベルを左右交互に組む
- 料理の写真は横にスクロールするカルーセルで見せる

## Elevation & Depth

- カードは影なしで、地色との差だけで浮かせる
- 主CTAは光沢と下方向の影をつけた立体ボタンにする
- 円形の数値バッジに薄い影をつける

## Shapes

- **角丸**: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 料理写真は角丸の矩形か円形で切り抜く。商品パッケージは切り抜きで斜めに配置する
- **セクション境界**: 上下をゆるい波形にするか、下向きのV字で区切る
- ボタンはピル型にする
- 見出しの帯には吹き出しのしっぽをつける
- 数値は白い正円の中に入れる

## Components

- **緑の立体CTA**（`button-primary`）: 光沢のある緑のピル型ボタン。上に小さな赤文字のマイクロコピーを添え、左に赤い矢印を置く
- **山吹色のピルボタン**（`button-secondary`）: 一覧へ誘導する横長の山吹色ボタン
- **料金お知らせボックス**（`price-box`）: オレンジの角丸枠の中に、赤ヘッダーの白い3列料金表、白線で縁取ったボタン、淡黄の特典帯を重ねる
- **黒丸の番号**（`number-badge`）: カードの左上にかかる黒い正円に、白の英数字で番号を入れる
- **数値の円バッジ**（`stat-circle`）: 白い円に、赤い太字で数値、小さく単位を入れて3つ並べる
- **赤い吹き出し見出し**（`speech-heading`）: 赤い角丸の帯に白抜きの見出しを入れ、下にしっぽをつける。周りに野菜の切り抜きを散らす
- **悩みのラベル**（`worry-label`）: 写真に重ねる黄色の矩形ラベルに、手書き風の文字で悩みを短く書く
- **FAQアコーディオン**（`faq-item`）: 白い行に、山吹色の「Q.」と右端の▼を置く。見出しは二重線で縁取った黄色の帯にする

## Do's and Don'ts

**Do**
- 価格の数字を赤い太字で大きく見せる
- 料金ボックスとCTAは主要なセクションのあとに毎回置く
- 料理写真は明るく暖かい色調で使う
- 英字の大見出しで、セクションのリズムを揃える
- 数値は円バッジにして3つ並べる

**Don't**
- 寒色系を主役にしない（青は告知帯のみ）
- カードを直角にしない
- 強い影やグラデーションを多用しない
- 本文を細い書体や明朝体にしない
- 赤を広い面積の地色に使わない

## Page Structure

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

1. **ファーストビュー**（初回価格で興味を引く）: 山吹色の帯に大きな白文字で価格を入れ、その下に食卓の人物写真と弁当の切り抜きを置く
2. **CTA**（最初に購入へ誘導する）: オレンジ地の中央に、緑の立体ボタンを置く
3. **悩みの提起**（ターゲットに共感させる）: 黄色の付箋のような見出しのあと、写真と黄色のラベルを左右交互に組む
4. **商品紹介**（サービスを一言で伝える）: クリーム地に英字の大見出しを置き、パッケージを斜めに並べる。その下にメニューカードのカルーセル
5. **専門家の監修**（おいしさと栄養への信頼を示す）: オレンジの吹き出し見出しの下に、白いカードで円形の顔写真と吹き出しコメントを入れる
6. **栄養数値と手軽さ**（具体的な基準と簡単さを示す）: 赤い吹き出しの下に数値の円バッジを3つ並べ、写真2枚を矢印でつないで手順を見せる
7. **キャンペーン告知と料金**（特典と価格を見せる）: 青い告知バナーのあとに料金ボックスを置き、茶色の文字で注意書きを添える
8. **お得な理由3つ**（価格の妥当性を裏付ける）: 黒丸の番号付き白カードを3枚。中に棒グラフ、段階的な割引の図、比較表を入れる
9. **メニュー**（選べる豊富さを伝える）: 英字の大見出しの下に弁当の横スクロールを置き、山吹色のボタンで一覧へ誘導する
10. **体験インタビュー**（利用者の実感を伝える）: サーモンピンクのキャッチ枠を人物写真に重ね、Q&Aの本文とプロフィールカードを続ける
11. **お客様の声**（社会的な証明）: 英字の見出しの左右に紙吹雪の装飾を散らす
12. **品質・安全性**（企業としての信頼を示す）: V字で始まる山吹色の全面帯に白文字を置き、白いカードと角丸写真を入れる
13. **ご利用の流れ**（購入までの不安をなくす）: 番号付きのクリーム色カードにフラットなイラストと手書き風の英字を入れ、オレンジの見出しを添える
14. **よくある質問**（疑問を解消する）: アコーディオンを並べ、その下に青枠の注意事項を置く。最後にフッターと固定の緑CTA

## Imagery

- 料理は自然光で明るく撮り、真上か斜め上からトレーごと写す
- パッケージは切り抜きにして少し傾け、散らすように配置する
- 人物は白っぽいキッチンで笑顔を見せるナチュラルなライフスタイル写真にする
- ブロッコリーやトマト、レモンなどの切り抜きを装飾として添える
- 手順は黒の太い線とイエローのフラットなイラストで描く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC画像はないため、SPのレイアウトを基準にする
- PCでは本文の幅を最大720pxにして中央寄せし、外側は背景色で埋める
- メニューのカルーセルは、PCでは4〜5枚を同時に見せる
- 料金ボックスと番号カードは最大幅を640pxにする
- 悩みの項目は、PCでは2列のグリッドに広げてもよい

## 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-42edf9b7`（元 LP の URL から採番）
- **元 LP**: https://st.l-meal.com/lp
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://st.l-meal.com/lp（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

食品・飲料木目×ミルクベージュのカフェ風紅茶 LPWarm Wood Cafe Milk Tea LP 食品・飲料はちみつ色グラデの季節ドリンク LPHoney Gradient Seasonal Drink LP 食品・飲料レモン黄×銀灰の左右分割コラボ飲料 LPLemon Yellow Split Collab Beverage LP 食品・飲料赤白テントの食品ギフトブーケ LPRed Awning Gift Bouquet Food Shop LP 食品・飲料白地×赤細線の明朝縦書き食品記念日LPRed Hairline Editorial Food Heritage LP 食品・飲料オレンジと湯気の鍋レシピ食品 LPWarm Orange Hot-Pot Food Brand LP