焦げ茶×和紙ベージュの煮込み肉通販LP

Rustic Soy-Brown Braised Meat LP

濃い焦げ茶と和紙調ベージュの地を大きな曲線で切り替えるLP。照りのある肉料理の写真を大きく見せ、白い丸の吹き出しと臙脂色の太い丸ゴシックで食欲を誘う。説明はグレーの半透明パネルにまとめ、温かく素朴な和の通販の印象を作っている。

食品・飲料和風親しみ・手作り感力強い・インパクトナチュラルSP

ダウンロード

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

COLORS

配色

地は焦げ茶とベージュを大きな曲線で交互に切り替える
臙脂は吹き出しのキャッチと商品内容の帯だけに使う
黄色は重量など数字を目立たせる所だけ
説明は明るいグレーパネル、物語系は濃いグレーパネルで分ける
文字は黒ではなく焦げ茶にする

TYPOGRAPHY

書体

displayFVの商品名手書き・筆／ Yuji Syuku 700 ／ 64px ／行間 1.1

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

headline-lg吹き出し内のキャッチ丸ゴシック／ M PLUS Rounded 1c 800 ／ 30px ／行間 1.35

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

headline-mdピル型セクション見出し丸ゴシック／ Zen Maru Gothic 700 ／ 22px ／行間 1.3

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

headline-smベージュ地のリード文丸ゴシック／ Zen Maru Gothic 700 ／ 18px ／行間 1.6

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

body-md手順・説明文ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.6

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

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

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

accent重量の数字欧文サンセリフ／ Montserrat 900 ／ 48px ／行間 1.0

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

見出しは字間を広めにして丸ゴシックで温かくする
見出しの助詞だけ小さくして強弱を付ける
数字は太い欧文を極太で、白い縁取りを付ける
本文は中央揃えを基本に、手順は左揃えにする

PAGE STRUCTURE

セクション構成

ファーストビュー商品と量を一目で伝える焦げ茶地に筆文字の商品名、臙脂の丸バッジ、切り抜いた皿の写真
ボリューム訴求大きさを見せるベージュ地に塊肉の写真を全幅で置き、黄色の重量表記を重ねる
おいしさの訴求食べ飽きない味を伝える白丸の吹き出しと縦書き風の短文、箸で持ち上げた肉の写真
味の決め手タレのこだわりピル見出しと白文字の短文、タレに浸った皿の写真
歴史・こだわり受け継いだ味で信頼を作る濃いグレーのボックスにストーリー、ベージュ地に太字のリード
アレンジ提案使い道を広げる吹き出しと料理写真を互い違いに縦に並べる
召し上がり方調理手順の説明グレーのパネルに丸数字の手順と注釈、イラストの皿
品質・配送鮮度と保存の安心パネルに説明、工場の写真、真空パックの商品を3つ並べる
商品内容セット内容と重量の明示臙脂の枠と帯の見出し、写真、点線リーダーの表記と注釈

COMPONENTS

部品

ピル型見出し heading-pill白いピル帯の中に焦げ茶の丸ゴシック。助詞だけ小さくする
白丸吹き出し catch-bubble直径約170pxの白い円の中に臙脂の太字を3行。両側に斜線の装飾
重量の丸バッジ weight-badge臙脂の円に白い大きな数字と本数
説明パネル info-panel明るいグレーの面に丸数字付きの手順と☆の注釈
濃色ストーリーボックス story-box濃いグレーの面に白文字を中央揃え。強調語に傍点
商品内容の枠 contents-frame臙脂の細い枠と見出し帯。写真の下に商品名と重量を点線リーダーでつなぐ
サブ名の白帯 name-tagFVの商品名の下に置く白い角丸の帯

守ること

料理写真は照りと断面がわかる大きさで見せる
地色の切り替えは大きな曲線にする
強調は臙脂と黄色の2色だけにする
ベージュ地には細かい紙のテクスチャを敷く

DON'T

避けること

寒色や原色の青・緑を面に使わない
細い明朝だけで見出しを組まない
強い影やグラデのボタンで装飾しすぎない
真っ白な無地の背景にしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 焦げ茶×和紙ベージュの煮込み肉通販LP（Rustic Soy-Brown Braised Meat LP）

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

Overview

業種: 食品・飲料／ 雰囲気: 和風、親しみ・手作り感、力強い・インパクト、ナチュラル
キーワード: 焦げ茶・和紙テクスチャ・大胆な曲線・照りのある肉写真・白丸吹き出し・臙脂の強調
地の質感: ベージュ地に和紙や石のような細かいざらつき。焦げ茶の面はほぼ単色。
形: 大きなS字カーブで地色を切り替える。見出しはピル型、パネルは角丸を小さく。
温度感: 暖色寄り。醤油・焼き色を思わせる温かさ

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#552613`	地の焦げ茶	30%	画素の実測
`background`	`#DAD5CB`	和紙調ベージュ地	30%	画素の実測
`accent-1`	`#7C2126`	強調見出しの臙脂	2%	画素の実測
`secondary`	`#97262C`	内容表示の帯の赤	1%	画素の実測
`surface`	`#DCDDDB`	説明パネル（明るいグレー）	8%	画素の実測
`background-alt`	`#DCDDDA`	見出しピル・吹き出しの白	4%	画素の実測
`dark-section`	`#5E5650`	濃いグレーの説明ボックス	3%	推定
`on-dark`	`#EFEFED`	濃い地上の白文字	2%	画素の主要色に補正
`text`	`#4B3216`	見出し・本文の茶色文字	3%	画素の実測
`marker`	`#F2E23A`	重量表記の黄色	1%	推定
`text-muted`	`#644C36`	注釈のグレー茶	1%	画素の主要色に補正
`line`	`#8E2A2A`	内容枠・点線	0%	推定

地は焦げ茶とベージュを大きな曲線で交互に切り替える
臙脂は吹き出しのキャッチと商品内容の帯だけに使う
黄色は重量など数字を目立たせる所だけ
説明は明るいグレーパネル、物語系は濃いグレーパネルで分ける
文字は黒ではなく焦げ茶にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの商品名	手書き・筆	Yuji Syuku	700	64px	1.1	0.02em
`headline-lg`	吹き出し内のキャッチ	丸ゴシック	M PLUS Rounded 1c	800	30px	1.35	0.05em
`headline-md`	ピル型セクション見出し	丸ゴシック	Zen Maru Gothic	700	22px	1.3	0.08em
`headline-sm`	ベージュ地のリード文	丸ゴシック	Zen Maru Gothic	700	18px	1.6	0.1em
`body-md`	手順・説明文	ゴシック	Noto Sans JP	500	14px	1.6	0.03em
`note`	注釈	ゴシック	Noto Sans JP	400	10px	1.6	0.03em
`accent`	重量の数字	欧文サンセリフ	Montserrat	900	48px	1.0	-0.02em

見出しは字間を広めにして丸ゴシックで温かくする
見出しの助詞だけ小さくして強弱を付ける
数字は太い欧文を極太で、白い縁取りを付ける
本文は中央揃えを基本に、手順は左揃えにする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム
本文ブロックの幅: 画面幅の約 75%
余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
写真は画面幅いっぱい、またははみ出して大きく置く
テキストパネルは左右に約12%の余白を取る
吹き出しの円は写真の左側に重ねて置く
見出しピルは中央にパネルより少し狭く置く

Elevation & Depth

影はほぼ使わず、平らに重ねる
パネルは半透明に近い色で地に溶け込ませる
切り抜き料理写真にだけ軽い影をつける

Shapes

角丸: 小 4px ／中 6px ／大 9999px。ボタンはピル型。
写真の切り抜き: 皿ごと切り抜いて画面端からはみ出させる。一部は角丸なしの矩形
セクション境界: 画面幅をまたぐ大きなS字カーブで地色を切り替える
見出しはピル型の帯にする
吹き出しは正円にする
パネルの角丸は4〜6pxに抑える

Components

ピル型見出し（heading-pill）: 白いピル帯の中に焦げ茶の丸ゴシック。助詞だけ小さくする
白丸吹き出し（catch-bubble）: 直径約170pxの白い円の中に臙脂の太字を3行。両側に斜線の装飾
重量の丸バッジ（weight-badge）: 臙脂の円に白い大きな数字と本数
説明パネル（info-panel）: 明るいグレーの面に丸数字付きの手順と☆の注釈
濃色ストーリーボックス（story-box）: 濃いグレーの面に白文字を中央揃え。強調語に傍点
商品内容の枠（contents-frame）: 臙脂の細い枠と見出し帯。写真の下に商品名と重量を点線リーダーでつなぐ
サブ名の白帯（name-tag）: FVの商品名の下に置く白い角丸の帯

Do's and Don'ts

Do - 料理写真は照りと断面がわかる大きさで見せる - 地色の切り替えは大きな曲線にする - 強調は臙脂と黄色の2色だけにする - ベージュ地には細かい紙のテクスチャを敷く

Don't - 寒色や原色の青・緑を面に使わない - 細い明朝だけで見出しを組まない - 強い影やグラデのボタンで装飾しすぎない - 真っ白な無地の背景にしない

Page Structure

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

ファーストビュー（商品と量を一目で伝える）: 焦げ茶地に筆文字の商品名、臙脂の丸バッジ、切り抜いた皿の写真
ボリューム訴求（大きさを見せる）: ベージュ地に塊肉の写真を全幅で置き、黄色の重量表記を重ねる
おいしさの訴求（食べ飽きない味を伝える）: 白丸の吹き出しと縦書き風の短文、箸で持ち上げた肉の写真
味の決め手（タレのこだわり）: ピル見出しと白文字の短文、タレに浸った皿の写真
歴史・こだわり（受け継いだ味で信頼を作る）: 濃いグレーのボックスにストーリー、ベージュ地に太字のリード
アレンジ提案（使い道を広げる）: 吹き出しと料理写真を互い違いに縦に並べる
召し上がり方（調理手順の説明）: グレーのパネルに丸数字の手順と注釈、イラストの皿
品質・配送（鮮度と保存の安心）: パネルに説明、工場の写真、真空パックの商品を3つ並べる
商品内容（セット内容と重量の明示）: 臙脂の枠と帯の見出し、写真、点線リーダーの表記と注釈

Imagery

照りのある肉料理を少し上から近くで撮る
陶器や石目の和食器を使い、皿ごと切り抜く
パセリや卵黄など色の差し色を少し入れる
食材をデフォルメした簡単なイラストを補助に置く
商品パッケージは3本並べて量を見せる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCでは幅375〜480pxの中央カラムを固定し、左右に焦げ茶か紙テクスチャを敷く
曲線の切り替えはカラム内で保つ
文字サイズはSPと同じか少し大きくする

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: Rustic Soy-Brown Braised Meat LP
description: 濃い焦げ茶と和紙調ベージュの地を大きな曲線で切り替えるLP。照りのある肉料理の写真を大きく見せ、白い丸の吹き出しと臙脂色の太い丸ゴシックで食欲を誘う。説明はグレーの半透明パネルにまとめ、温かく素朴な和の通販の印象を作っている。
colors:
  primary: '#552613'
  background: '#DAD5CB'
  accent-1: '#7C2126'
  secondary: '#97262C'
  surface: '#DCDDDB'
  background-alt: '#DCDDDA'
  dark-section: '#5E5650'
  on-dark: '#EFEFED'
  text: '#4B3216'
  marker: '#F2E23A'
  text-muted: '#644C36'
  line: '#8E2A2A'
typography:
  display:
    fontFamily: Yuji Syuku
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.35
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Maru Gothic
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  accent:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
rounded:
  sm: 4px
  md: 6px
  lg: 9999px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  heading-pill:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 36px
  catch-bubble:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 170px
  weight-badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 100px
  info-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 260px
  story-box:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 140px
  contents-frame:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 400px
  name-tag:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 30px
---

# DESIGN.md — 焦げ茶×和紙ベージュの煮込み肉通販LP（Rustic Soy-Brown Braised Meat LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 和風、親しみ・手作り感、力強い・インパクト、ナチュラル
- **キーワード**: 焦げ茶・和紙テクスチャ・大胆な曲線・照りのある肉写真・白丸吹き出し・臙脂の強調
- **地の質感**: ベージュ地に和紙や石のような細かいざらつき。焦げ茶の面はほぼ単色。
- **形**: 大きなS字カーブで地色を切り替える。見出しはピル型、パネルは角丸を小さく。
- **温度感**: 暖色寄り。醤油・焼き色を思わせる温かさ

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#552613` | 地の焦げ茶 | 30% | 画素の実測 |
| `background` | `#DAD5CB` | 和紙調ベージュ地 | 30% | 画素の実測 |
| `accent-1` | `#7C2126` | 強調見出しの臙脂 | 2% | 画素の実測 |
| `secondary` | `#97262C` | 内容表示の帯の赤 | 1% | 画素の実測 |
| `surface` | `#DCDDDB` | 説明パネル（明るいグレー） | 8% | 画素の実測 |
| `background-alt` | `#DCDDDA` | 見出しピル・吹き出しの白 | 4% | 画素の実測 |
| `dark-section` | `#5E5650` | 濃いグレーの説明ボックス | 3% | 推定 |
| `on-dark` | `#EFEFED` | 濃い地上の白文字 | 2% | 画素の主要色に補正 |
| `text` | `#4B3216` | 見出し・本文の茶色文字 | 3% | 画素の実測 |
| `marker` | `#F2E23A` | 重量表記の黄色 | 1% | 推定 |
| `text-muted` | `#644C36` | 注釈のグレー茶 | 1% | 画素の主要色に補正 |
| `line` | `#8E2A2A` | 内容枠・点線 | 0% | 推定 |

- 地は焦げ茶とベージュを大きな曲線で交互に切り替える
- 臙脂は吹き出しのキャッチと商品内容の帯だけに使う
- 黄色は重量など数字を目立たせる所だけ
- 説明は明るいグレーパネル、物語系は濃いグレーパネルで分ける
- 文字は黒ではなく焦げ茶にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの商品名 | 手書き・筆 | Yuji Syuku | 700 | 64px | 1.1 | 0.02em |
| `headline-lg` | 吹き出し内のキャッチ | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.35 | 0.05em |
| `headline-md` | ピル型セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.3 | 0.08em |
| `headline-sm` | ベージュ地のリード文 | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.6 | 0.1em |
| `body-md` | 手順・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.03em |
| `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em |
| `accent` | 重量の数字 | 欧文サンセリフ | Montserrat | 900 | 48px | 1.0 | -0.02em |

- 見出しは字間を広めにして丸ゴシックで温かくする
- 見出しの助詞だけ小さくして強弱を付ける
- 数字は太い欧文を極太で、白い縁取りを付ける
- 本文は中央揃えを基本に、手順は左揃えにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 75%
- **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
- 写真は画面幅いっぱい、またははみ出して大きく置く
- テキストパネルは左右に約12%の余白を取る
- 吹き出しの円は写真の左側に重ねて置く
- 見出しピルは中央にパネルより少し狭く置く

## Elevation & Depth

- 影はほぼ使わず、平らに重ねる
- パネルは半透明に近い色で地に溶け込ませる
- 切り抜き料理写真にだけ軽い影をつける

## Shapes

- **角丸**: 小 4px ／ 中 6px ／ 大 9999px。ボタンはピル型。
- **写真の切り抜き**: 皿ごと切り抜いて画面端からはみ出させる。一部は角丸なしの矩形
- **セクション境界**: 画面幅をまたぐ大きなS字カーブで地色を切り替える
- 見出しはピル型の帯にする
- 吹き出しは正円にする
- パネルの角丸は4〜6pxに抑える

## Components

- **ピル型見出し**（`heading-pill`）: 白いピル帯の中に焦げ茶の丸ゴシック。助詞だけ小さくする
- **白丸吹き出し**（`catch-bubble`）: 直径約170pxの白い円の中に臙脂の太字を3行。両側に斜線の装飾
- **重量の丸バッジ**（`weight-badge`）: 臙脂の円に白い大きな数字と本数
- **説明パネル**（`info-panel`）: 明るいグレーの面に丸数字付きの手順と☆の注釈
- **濃色ストーリーボックス**（`story-box`）: 濃いグレーの面に白文字を中央揃え。強調語に傍点
- **商品内容の枠**（`contents-frame`）: 臙脂の細い枠と見出し帯。写真の下に商品名と重量を点線リーダーでつなぐ
- **サブ名の白帯**（`name-tag`）: FVの商品名の下に置く白い角丸の帯

## Do's and Don'ts

**Do**
- 料理写真は照りと断面がわかる大きさで見せる
- 地色の切り替えは大きな曲線にする
- 強調は臙脂と黄色の2色だけにする
- ベージュ地には細かい紙のテクスチャを敷く

**Don't**
- 寒色や原色の青・緑を面に使わない
- 細い明朝だけで見出しを組まない
- 強い影やグラデのボタンで装飾しすぎない
- 真っ白な無地の背景にしない

## Page Structure

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

1. **ファーストビュー**（商品と量を一目で伝える）: 焦げ茶地に筆文字の商品名、臙脂の丸バッジ、切り抜いた皿の写真
2. **ボリューム訴求**（大きさを見せる）: ベージュ地に塊肉の写真を全幅で置き、黄色の重量表記を重ねる
3. **おいしさの訴求**（食べ飽きない味を伝える）: 白丸の吹き出しと縦書き風の短文、箸で持ち上げた肉の写真
4. **味の決め手**（タレのこだわり）: ピル見出しと白文字の短文、タレに浸った皿の写真
5. **歴史・こだわり**（受け継いだ味で信頼を作る）: 濃いグレーのボックスにストーリー、ベージュ地に太字のリード
6. **アレンジ提案**（使い道を広げる）: 吹き出しと料理写真を互い違いに縦に並べる
7. **召し上がり方**（調理手順の説明）: グレーのパネルに丸数字の手順と注釈、イラストの皿
8. **品質・配送**（鮮度と保存の安心）: パネルに説明、工場の写真、真空パックの商品を3つ並べる
9. **商品内容**（セット内容と重量の明示）: 臙脂の枠と帯の見出し、写真、点線リーダーの表記と注釈

## Imagery

- 照りのある肉料理を少し上から近くで撮る
- 陶器や石目の和食器を使い、皿ごと切り抜く
- パセリや卵黄など色の差し色を少し入れる
- 食材をデフォルメした簡単なイラストを補助に置く
- 商品パッケージは3本並べて量を見せる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは幅375〜480pxの中央カラムを固定し、左右に焦げ茶か紙テクスチャを敷く
- 曲線の切り替えはカラム内で保つ
- 文字サイズはSPと同じか少し大きくする

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

SOURCE

出典と注意

元の LP: https://item.rakuten.co.jp/f232092-hekinan/h166-001/?sp=1（公開状況により表示できない場合があります）
この 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