クリーム地×えんじの絵本調食品 LP

Picture Book Warm Cream Food LP

淡いクリーム地に白い角丸カードを重ね、えんじ色の手書き風見出しと線画イラストで絵本のような温かさを出した食品ブランド LP。写真は自然光の家庭のキッチン、ボタンはえんじのピル型で統一する。

食品・飲料やさしい・柔らかい親しみ・手作り感ナチュラルかわいいSPPC

ダウンロード

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

COLORS

配色

地はクリーム色、読ませる塊は白カードに載せる
見出し・ボタン・枠線・表の項目名はえんじ1色に絞る
本文は真っ黒にせず茶黒を使う
商品情報セクションだけ白地に切り替えて区切る
黄色・ピンクはイラストと写真の中だけで使う

TYPOGRAPHY

書体

displayFV の商品名ロゴ風タイトル丸ゴシック／ Zen Maru Gothic 900 ／ 34px ／行間 1.3

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

headline-lg手書き風のセクション見出し手書き・筆／ Yomogi 400 ／ 28px ／行間 1.6

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

headline-md商品情報などの通常見出し丸ゴシック／ M PLUS Rounded 1c 800 ／ 24px ／行間 1.4

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

headline-sm下線付き小見出し・人物名丸ゴシック／ M PLUS Rounded 1c 700 ／ 15px ／行間 1.5

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

body-md本文（中央揃えのリード文）丸ゴシック／ M PLUS Rounded 1c 500 ／ 12px ／行間 2.0

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

note注釈・コピーライトゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.6

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

label-buttonボタンのラベル丸ゴシック／ M PLUS Rounded 1c 700 ／ 11px ／行間 1.2

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

情緒的な見出しは手書き風、情報系の見出しは太めの丸ゴシックにする
見出しは2行に分け中央揃えにする
本文は行間を広めに取り中央揃えで短く改行する
見出しの色はえんじ、本文は茶黒
ボタンの文字は短く、左に小さな矢印を付ける

PAGE STRUCTURE

セクション構成

ファーストビュー商品名とシズルを一目で伝える左上に小さなロゴ。中央に太い丸ゴシックの2行タイトル、その下に鉄フライパンの大きな商品写真
コンセプト家族の食卓という世界観を伝える白カードに手書き見出しと家族の線画、中央揃えの短文
特長改良点を3つ示す手書き見出しと円形アイコン3つの横並び。右下に注釈
イメージ写真生活の中の商品を見せる全幅でキッチンに商品を置いた写真
パッケージ紹介デザインの魅力を伝える手書き見出し、大きな角丸写真1枚、一文、2列の写真
クリエイター紹介作り手の信頼感を出す下線付き小見出し、丸写真と名前・紹介文・リンクを縦に2人
マンガキャラで親しみを出すカード上端にキャラがはみ出す白カード。太枠コマ2列と読むボタン
商品情報仕様と安全情報を示す白地。商品パッケージ画像、2列仕様表、アレルゲンタイル、ボタン、注釈
SNS投稿紹介利用者の声を見せる線画キャラの区切り、SNSロゴ、写真2×2グリッドと動画2列、もっと見るボタン
レシピ誘導とフッター次の行動へつなぐえんじ枠のバナーリンク、SNSアイコン、小さなコピーライト

COMPONENTS

部品

ピル型ボタン button-primaryえんじ塗り・白文字。左に小さな山形矢印
白い大カード story-cardクリーム地の上に置く角丸の白カード。手書き見出し・イラスト・本文を入れる
円形の特長アイコン feature-circle白い円にえんじの細線。上にイラスト、下に2行の短い文
下線付き小見出し underline-headingえんじ文字の下に同じ色の細い横線
マンガのコマ枠 comic-frame線画をえんじの太枠で囲み、下に話数とタイトル、ボタン
仕様表 spec-table灰色の横線で区切る2列表。項目名はえんじ
アレルゲンタイル allergen-tile淡灰の正方形にイラスト、下にラベル
バナーリンク banner-link白地にえんじ枠の横長カード。左にイラスト、右に丸い矢印

守ること

見出しのうち情緒的なものは手書き風フォントにする
えんじ以外の強調色は増やさない
線画イラストを各セクションに置いて絵本感を保つ
写真は自然光で家庭のキッチンを写す
余白を広く取り中央揃えでゆったり見せる

DON'T

避けること

真っ白な地をページ全体に使わない
鮮やかな赤や原色のCTAを使わない
濃い影やグラデーションボタンを入れない
角張った四角ボタンを使わない
本文を左詰めで長く詰め込まない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — クリーム地×えんじの絵本調食品 LP（Picture Book Warm Cream Food LP）

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

Overview

業種: 食品・飲料／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル、かわいい
キーワード: 絵本・クリーム地・えんじ色・手書き見出し・線画イラスト・家族の朝ごはん
地の質感: フラットな淡いクリームの面。影はほぼなく、イラストの線と写真で質感を出す
形: 角丸の白カード、円形のアイコン枠、ピル型ボタン、手描き風の太枠
温度感: 暖色寄り。焼き色とバターを思わせるやわらかい温度感

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#FFF5D4`	ページ地のクリーム色	45%	画素の実測
`surface`	`#FFFFFF`	白いカード・商品情報の地	28%	画素の実測
`primary`	`#70282C`	見出し・アクセントのえんじ色	3%	画素の実測
`cta`	`#7C2223`	ピル型ボタンの塗り	2%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の白文字	0%	画素の主要色に補正
`text`	`#373738`	本文の濃い茶黒	3%	画素の実測
`text-muted`	`#928F7E`	注釈の灰色文字	0%	画素の実測
`line`	`#D0CDC5`	仕様表の区切り線	0%	画素の主要色に補正
`background-alt`	`#F2F2F3`	アレルゲンアイコンの淡灰地	0%	画素の実測
`accent-1`	`#E9A23A`	パンケーキの焼き色	2%	推定
`accent-2`	`#E8A3A8`	イラストのエプロンのピンク	0%	推定
`dark-section`	`#3D342F`	フライパンの鉄色	2%	画素の主要色に補正

地はクリーム色、読ませる塊は白カードに載せる
見出し・ボタン・枠線・表の項目名はえんじ1色に絞る
本文は真っ黒にせず茶黒を使う
商品情報セクションだけ白地に切り替えて区切る
黄色・ピンクはイラストと写真の中だけで使う

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の商品名ロゴ風タイトル	丸ゴシック	Zen Maru Gothic	900	34px	1.3	0.02em
`headline-lg`	手書き風のセクション見出し	手書き・筆	Yomogi	400	28px	1.6	0.08em
`headline-md`	商品情報などの通常見出し	丸ゴシック	M PLUS Rounded 1c	800	24px	1.4	0.04em
`headline-sm`	下線付き小見出し・人物名	丸ゴシック	M PLUS Rounded 1c	700	15px	1.5	0.04em
`body-md`	本文（中央揃えのリード文）	丸ゴシック	M PLUS Rounded 1c	500	12px	2.0	0.04em
`note`	注釈・コピーライト	ゴシック	Noto Sans JP	400	9px	1.6	0.02em
`label-button`	ボタンのラベル	丸ゴシック	M PLUS Rounded 1c	700	11px	1.2	0.05em

情緒的な見出しは手書き風、情報系の見出しは太めの丸ゴシックにする
見出しは2行に分け中央揃えにする
本文は行間を広めに取り中央揃えで短く改行する
見出しの色はえんじ、本文は茶黒
ボタンの文字は短く、左に小さな矢印を付ける
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。特長アイコン3列、写真・マンガは2列グリッド
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
白カードは左右に約16pxの余白を残して置く
特長は円形アイコン3つを横並びにする
クリエイター紹介は左に丸写真、右に名前と文
仕様表は左に項目名、右に値の2列
イラストをカードの上端にはみ出させて重ねる

Elevation & Depth

基本は影なしのフラット
白カードはクリーム地との色差だけで浮かせる
SNS カードはえんじの細い枠線で囲む

Shapes

角丸: 小 6px ／中 10px ／大 12px。ボタンはピル型。
写真の切り抜き: 写真は角丸 8px 程度の長方形、人物は円形。マンガのコマは角なしの太枠
セクション境界: 直線で色を切り替える。波形や斜めは使わない
特長アイコンはえんじの細線の円で囲む
マンガのコマはえんじの手描き風太枠
ボタンはすべてピル型

Components

ピル型ボタン（button-primary）: えんじ塗り・白文字。左に小さな山形矢印
白い大カード（story-card）: クリーム地の上に置く角丸の白カード。手書き見出し・イラスト・本文を入れる
円形の特長アイコン（feature-circle）: 白い円にえんじの細線。上にイラスト、下に2行の短い文
下線付き小見出し（underline-heading）: えんじ文字の下に同じ色の細い横線
マンガのコマ枠（comic-frame）: 線画をえんじの太枠で囲み、下に話数とタイトル、ボタン
仕様表（spec-table）: 灰色の横線で区切る2列表。項目名はえんじ
アレルゲンタイル（allergen-tile）: 淡灰の正方形にイラスト、下にラベル
バナーリンク（banner-link）: 白地にえんじ枠の横長カード。左にイラスト、右に丸い矢印

Do's and Don'ts

Do - 見出しのうち情緒的なものは手書き風フォントにする - えんじ以外の強調色は増やさない - 線画イラストを各セクションに置いて絵本感を保つ - 写真は自然光で家庭のキッチンを写す - 余白を広く取り中央揃えでゆったり見せる

Don't - 真っ白な地をページ全体に使わない - 鮮やかな赤や原色のCTAを使わない - 濃い影やグラデーションボタンを入れない - 角張った四角ボタンを使わない - 本文を左詰めで長く詰め込まない

Page Structure

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

ファーストビュー（商品名とシズルを一目で伝える）: 左上に小さなロゴ。中央に太い丸ゴシックの2行タイトル、その下に鉄フライパンの大きな商品写真
コンセプト（家族の食卓という世界観を伝える）: 白カードに手書き見出しと家族の線画、中央揃えの短文
特長（改良点を3つ示す）: 手書き見出しと円形アイコン3つの横並び。右下に注釈
イメージ写真（生活の中の商品を見せる）: 全幅でキッチンに商品を置いた写真
パッケージ紹介（デザインの魅力を伝える）: 手書き見出し、大きな角丸写真1枚、一文、2列の写真
クリエイター紹介（作り手の信頼感を出す）: 下線付き小見出し、丸写真と名前・紹介文・リンクを縦に2人
マンガ（キャラで親しみを出す）: カード上端にキャラがはみ出す白カード。太枠コマ2列と読むボタン
商品情報（仕様と安全情報を示す）: 白地。商品パッケージ画像、2列仕様表、アレルゲンタイル、ボタン、注釈
SNS投稿紹介（利用者の声を見せる）: 線画キャラの区切り、SNSロゴ、写真2×2グリッドと動画2列、もっと見るボタン
レシピ誘導とフッター（次の行動へつなぐ）: えんじ枠のバナーリンク、SNSアイコン、小さなコピーライト

Imagery

イラストは黒の細い線画に、ピンク・黄色・肌色を少し塗る絵本タッチ
人物は丸い顔のデフォルメで家族や子ども
商品写真は真上から撮り、鉄フライパン・バター・シロップで温かく見せる
生活写真は自然光で木のテーブルや台所。浅い被写界深度
音符などの小さな手描き装飾を添える
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央に約 850px の幅でまとめ、左右はクリーム地
PC の商品情報はパッケージ画像を左、仕様表を右の2カラム
PC では Instagram と TikTok を左右に並べる
クリエイター紹介は PC で丸写真と文の横並びを広めに取る
文字サイズは PC でもほぼ同じで、余白で調整する

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: Picture Book Warm Cream Food LP
description: 淡いクリーム地に白い角丸カードを重ね、えんじ色の手書き風見出しと線画イラストで絵本のような温かさを出した食品ブランド LP。写真は自然光の家庭のキッチン、ボタンはえんじのピル型で統一する。
colors:
  background: '#FFF5D4'
  surface: '#FFFFFF'
  primary: '#70282C'
  cta: '#7C2223'
  on-cta: '#FFFFFF'
  text: '#373738'
  text-muted: '#928F7E'
  line: '#D0CDC5'
  background-alt: '#F2F2F3'
  accent-1: '#E9A23A'
  accent-2: '#E8A3A8'
  dark-section: '#3D342F'
typography:
  display:
    fontFamily: Zen Maru Gothic
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Yomogi
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.08em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: M PLUS Rounded 1c
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 12px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 10px
  lg: 12px
  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: 36px
  story-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 440px
  feature-circle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 100px
  underline-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 30px
  comic-frame:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 125px
  spec-table:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 220px
  allergen-tile:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 56px
  banner-link:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 75px
---

# DESIGN.md — クリーム地×えんじの絵本調食品 LP（Picture Book Warm Cream Food LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、ナチュラル、かわいい
- **キーワード**: 絵本・クリーム地・えんじ色・手書き見出し・線画イラスト・家族の朝ごはん
- **地の質感**: フラットな淡いクリームの面。影はほぼなく、イラストの線と写真で質感を出す
- **形**: 角丸の白カード、円形のアイコン枠、ピル型ボタン、手描き風の太枠
- **温度感**: 暖色寄り。焼き色とバターを思わせるやわらかい温度感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFF5D4` | ページ地のクリーム色 | 45% | 画素の実測 |
| `surface` | `#FFFFFF` | 白いカード・商品情報の地 | 28% | 画素の実測 |
| `primary` | `#70282C` | 見出し・アクセントのえんじ色 | 3% | 画素の実測 |
| `cta` | `#7C2223` | ピル型ボタンの塗り | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#373738` | 本文の濃い茶黒 | 3% | 画素の実測 |
| `text-muted` | `#928F7E` | 注釈の灰色文字 | 0% | 画素の実測 |
| `line` | `#D0CDC5` | 仕様表の区切り線 | 0% | 画素の主要色に補正 |
| `background-alt` | `#F2F2F3` | アレルゲンアイコンの淡灰地 | 0% | 画素の実測 |
| `accent-1` | `#E9A23A` | パンケーキの焼き色 | 2% | 推定 |
| `accent-2` | `#E8A3A8` | イラストのエプロンのピンク | 0% | 推定 |
| `dark-section` | `#3D342F` | フライパンの鉄色 | 2% | 画素の主要色に補正 |

- 地はクリーム色、読ませる塊は白カードに載せる
- 見出し・ボタン・枠線・表の項目名はえんじ1色に絞る
- 本文は真っ黒にせず茶黒を使う
- 商品情報セクションだけ白地に切り替えて区切る
- 黄色・ピンクはイラストと写真の中だけで使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の商品名ロゴ風タイトル | 丸ゴシック | Zen Maru Gothic | 900 | 34px | 1.3 | 0.02em |
| `headline-lg` | 手書き風のセクション見出し | 手書き・筆 | Yomogi | 400 | 28px | 1.6 | 0.08em |
| `headline-md` | 商品情報などの通常見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.4 | 0.04em |
| `headline-sm` | 下線付き小見出し・人物名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.5 | 0.04em |
| `body-md` | 本文（中央揃えのリード文） | 丸ゴシック | M PLUS Rounded 1c | 500 | 12px | 2.0 | 0.04em |
| `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em |
| `label-button` | ボタンのラベル | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 1.2 | 0.05em |

- 情緒的な見出しは手書き風、情報系の見出しは太めの丸ゴシックにする
- 見出しは2行に分け中央揃えにする
- 本文は行間を広めに取り中央揃えで短く改行する
- 見出しの色はえんじ、本文は茶黒
- ボタンの文字は短く、左に小さな矢印を付ける
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長アイコン3列、写真・マンガは2列グリッド
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- 白カードは左右に約16pxの余白を残して置く
- 特長は円形アイコン3つを横並びにする
- クリエイター紹介は左に丸写真、右に名前と文
- 仕様表は左に項目名、右に値の2列
- イラストをカードの上端にはみ出させて重ねる

## Elevation & Depth

- 基本は影なしのフラット
- 白カードはクリーム地との色差だけで浮かせる
- SNS カードはえんじの細い枠線で囲む

## Shapes

- **角丸**: 小 6px ／ 中 10px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸 8px 程度の長方形、人物は円形。マンガのコマは角なしの太枠
- **セクション境界**: 直線で色を切り替える。波形や斜めは使わない
- 特長アイコンはえんじの細線の円で囲む
- マンガのコマはえんじの手描き風太枠
- ボタンはすべてピル型

## Components

- **ピル型ボタン**（`button-primary`）: えんじ塗り・白文字。左に小さな山形矢印
- **白い大カード**（`story-card`）: クリーム地の上に置く角丸の白カード。手書き見出し・イラスト・本文を入れる
- **円形の特長アイコン**（`feature-circle`）: 白い円にえんじの細線。上にイラスト、下に2行の短い文
- **下線付き小見出し**（`underline-heading`）: えんじ文字の下に同じ色の細い横線
- **マンガのコマ枠**（`comic-frame`）: 線画をえんじの太枠で囲み、下に話数とタイトル、ボタン
- **仕様表**（`spec-table`）: 灰色の横線で区切る2列表。項目名はえんじ
- **アレルゲンタイル**（`allergen-tile`）: 淡灰の正方形にイラスト、下にラベル
- **バナーリンク**（`banner-link`）: 白地にえんじ枠の横長カード。左にイラスト、右に丸い矢印

## Do's and Don'ts

**Do**
- 見出しのうち情緒的なものは手書き風フォントにする
- えんじ以外の強調色は増やさない
- 線画イラストを各セクションに置いて絵本感を保つ
- 写真は自然光で家庭のキッチンを写す
- 余白を広く取り中央揃えでゆったり見せる

**Don't**
- 真っ白な地をページ全体に使わない
- 鮮やかな赤や原色のCTAを使わない
- 濃い影やグラデーションボタンを入れない
- 角張った四角ボタンを使わない
- 本文を左詰めで長く詰め込まない

## Page Structure

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

1. **ファーストビュー**（商品名とシズルを一目で伝える）: 左上に小さなロゴ。中央に太い丸ゴシックの2行タイトル、その下に鉄フライパンの大きな商品写真
2. **コンセプト**（家族の食卓という世界観を伝える）: 白カードに手書き見出しと家族の線画、中央揃えの短文
3. **特長**（改良点を3つ示す）: 手書き見出しと円形アイコン3つの横並び。右下に注釈
4. **イメージ写真**（生活の中の商品を見せる）: 全幅でキッチンに商品を置いた写真
5. **パッケージ紹介**（デザインの魅力を伝える）: 手書き見出し、大きな角丸写真1枚、一文、2列の写真
6. **クリエイター紹介**（作り手の信頼感を出す）: 下線付き小見出し、丸写真と名前・紹介文・リンクを縦に2人
7. **マンガ**（キャラで親しみを出す）: カード上端にキャラがはみ出す白カード。太枠コマ2列と読むボタン
8. **商品情報**（仕様と安全情報を示す）: 白地。商品パッケージ画像、2列仕様表、アレルゲンタイル、ボタン、注釈
9. **SNS投稿紹介**（利用者の声を見せる）: 線画キャラの区切り、SNSロゴ、写真2×2グリッドと動画2列、もっと見るボタン
10. **レシピ誘導とフッター**（次の行動へつなぐ）: えんじ枠のバナーリンク、SNSアイコン、小さなコピーライト

## Imagery

- イラストは黒の細い線画に、ピンク・黄色・肌色を少し塗る絵本タッチ
- 人物は丸い顔のデフォルメで家族や子ども
- 商品写真は真上から撮り、鉄フライパン・バター・シロップで温かく見せる
- 生活写真は自然光で木のテーブルや台所。浅い被写界深度
- 音符などの小さな手描き装飾を添える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に約 850px の幅でまとめ、左右はクリーム地
- PC の商品情報はパッケージ画像を左、仕様表を右の2カラム
- PC では Instagram と TikTok を左右に並べる
- クリエイター紹介は PC で丸写真と文の横並びを広めに取る
- 文字サイズは PC でもほぼ同じで、余白で調整する

## 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-a827dd46`（元 LP の URL から採番）
- **元 LP**: https://www.showa-sangyo.co.jp/special/manmaru/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（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://www.showa-sangyo.co.jp/special/manmaru/（公開状況により表示できない場合があります）
この 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