栗皮色×金の和モダン季節スイーツ LP
Japanese Autumn Sweets Campaign LP
深い栗皮色と柿色の地に金の帯と雲文様を重ねた、和モダンな秋の新商品告知 LP。毛筆風の見出しと市松模様の透かしで季節感を出し、シズル感のある商品写真を大きく見せる。
菓子・スイーツ和風上品・高級力強い・インパクトSPPC
Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。
COLORS
配色
- 地は栗皮色と柿色の2色を交互に使い、セクション境界は斜めの金ラインで区切る
- 金は帯・ボタン・枠にのみ使い、面積は1割以下
- 本文は濃色地上に白で置く
- 見出しの一部の漢字だけを藍や赤の筆色で強調し温冷を表す
- 市松模様は地色より少し濃い同系色で透かす
- 雲文様は黄金色で余白のアクセントにする
TYPOGRAPHY
書体
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
- 見出しは筆書体と明朝を組み合わせ、頭文字だけ大きくする
- 特長名の頭文字は筆の円弧で囲む
- 本文は明朝で中央または左寄せ、行間広め
- 番号は地色より少し濃い色で大きく透かす
- 注釈は最下部に小さくまとめる
PAGE STRUCTURE
セクション構成
- ファーストビュー商品と価格を一目で伝える暖色背景に商品写真を大きく、太い商品名、縦書きキャッチ、円バッジと価格
- 発売日帯発売時期の告知淡い金の横帯に明朝で日付
- コンセプト商品の魅力を一言で栗皮色地に市松透かし、筆見出しと十字線で挟んだ短文
- 特長素材のこだわりを3点紹介柿色地に筆円弧見出し、切り抜き写真、番号透かし、左右交互
- CTA店舗への来店誘導栗皮色地に呼びかけ見出し、商品写真、金CTAと白サブボタン
- 注釈価格・販売条件の補足濃色地に小さな白文字で箇条
COMPONENTS
部品
- 金枠CTA button-primary金地に濃茶の明朝文字、左に丸矢印、右に店舗アイコン
- 情報リンクボタン button-secondary白地ピル型、左に濃茶丸矢印
- 発売日帯 date-band淡い金のグラデ帯に明朝で日付を横一行
- 円形バッジ badge-circle濃紺の円に白文字で特徴を2行
- 価格表示 price-tag税抜を大きく、税込を括弧付きで太字、白縁取り
- 筆円弧見出し heading-brush頭文字を大きく白で、筆の円弧で囲む
- 其ノ番号 number-watermark地色の濃い同系色で番号を透かす
- 提供形態カード info-card濃茶地に金枠、写真と短文
DO
守ること
- 地色は栗皮色と柿色で交互に切り替える
- 境界は斜めの金ライン帯を使う
- 見出しは筆書体と明朝を組み合わせる
- 商品写真は切り抜いて大きく端まで見せる
- 雲や市松の和柄を控えめに散らす
DON'T
避けること
- 寒色の背景を広く使わない
- 丸ゴシックやポップ書体を使わない
- 金を大面積で塗らない
- 白い平坦な背景セクションを作らない
- 和柄を濃くして写真を邪魔しない
DESIGN.MD
design.md 全文
読みやすい形で表示する
DESIGN.md — 栗皮色×金の和モダン季節スイーツ LP(Japanese Autumn Sweets Campaign LP)
AI コーディングツール(Claude Code / Cursor / v0 など)に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML(トークン)が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。
Overview
- 業種: 菓子・スイーツ / 雰囲気: 和風、上品・高級、力強い・インパクト
- キーワード: 和モダン・秋の味覚・金箔の帯・市松透かし・毛筆見出し・シズル写真
- 地の質感: 和紙のような細かいざらつきに、市松模様を低コントラストで透かす
- 形: 斜めに切った金のライン帯、筆で描いた円弧、瑞雲モチーフ
- 温度感: 暖色。焼き芋のような温かみと濃い茶の重厚感
Colors
| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
primary |
#692515 |
栗皮色のメイン地 | 30% | 画素の実測 |
secondary |
#D36B44 |
柿色の特長セクション地 | 30% | 画素の実測 |
accent-1 |
#E3A653 |
金の帯・ボタン地 | 5% | 画素の主要色に補正 |
tint-1 |
#F7E8BE |
発売日帯の淡い金 | 4% | 画素の主要色に補正 |
on-dark |
#FFFFFF |
濃色地上の白文字 | 2% | 推定 |
text |
#330B03 |
金地上の濃茶文字 | 1% | 画素の実測 |
accent-2 |
#5A8FB8 |
冷を表す藍の筆色 | 0% | 推定 |
accent-3 |
#E8B83A |
雲文様の黄 | 1% | 推定 |
cta |
#ECD474 |
店舗検索ボタン金地 | 2% | 画素の実測 |
on-cta |
#310900 |
CTA文字 | 0% | 画素の実測 |
surface |
#FEFDFC |
サブボタンの白地 | 1% | 画素の実測 |
background |
#FBDDBB |
FV上部の淡い肌色 | 3% | 画素の実測 |
dark-section |
#2E2440 |
商品カップの濃紺紫 | 3% | 推定 |
- 地は栗皮色と柿色の2色を交互に使い、セクション境界は斜めの金ラインで区切る
- 金は帯・ボタン・枠にのみ使い、面積は1割以下
- 本文は濃色地上に白で置く
- 見出しの一部の漢字だけを藍や赤の筆色で強調し温冷を表す
- 市松模様は地色より少し濃い同系色で透かす
- 雲文様は黄金色で余白のアクセントにする
Typography
| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ(375px 幅) | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
display |
FVの商品名 | ゴシック | Dela Gothic One | 900 | 44px | 1.2 | 0.0em |
headline-lg |
コンセプト見出し(筆風) | 手書き・筆 | Yuji Syuku | 700 | 36px | 1.3 | 0.02em |
headline-md |
特長名・セクション見出し | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.05em |
headline-sm |
発売日帯 | 明朝 | Shippori Mincho | 800 | 18px | 1.4 | 0.02em |
body-md |
特長の説明文 | 明朝 | Noto Serif JP | 500 | 13px | 1.8 | 0.05em |
accent |
其ノ壱などの透かし番号 | 明朝 | Shippori Mincho | 800 | 28px | 1.2 | 0.0em |
label-button |
CTAボタン文字 | 明朝 | Shippori Mincho | 700 | 20px | 1.3 | 0.02em |
note |
注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em |
- 見出しは筆書体と明朝を組み合わせ、頭文字だけ大きくする
- 特長名の頭文字は筆の円弧で囲む
- 本文は明朝で中央または左寄せ、行間広め
- 番号は地色より少し濃い色で大きく透かす
- 注釈は最下部に小さくまとめる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。
Layout
- カラム: SP は 1 カラム、写真と文を左右にずらして交互配置
- 本文ブロックの幅: 画面幅の約 85%
- 余白: セクション間 64px、基本単位 8px、カード内 16px(375px 幅換算)
- 写真は画面端に食い込ませて大きく置く
- 特長は見出し→写真→説明文を左右交互にずらす
- コンセプト文は細い十字線の装飾で上下を挟む
- CTAは最下部に縦2段で配置
Elevation & Depth
- 影はほぼ使わずフラット
- 商品写真の下に柔らかな落ち影のみ
- 金ボタンは縁取りとわずかな立体感
Shapes
- 角丸: 小 4px / 中 8px / 大 20px。ボタンはピル型。
- 写真の切り抜き: 背景を切り抜いた商品写真を画面端にはみ出させる
- セクション境界: 右下がりの斜めの金ライン帯
- 主CTAは角丸小の金枠長方形
- サブボタンはピル型の白地
- バッジは円形の濃紺地
- 見出し頭文字は筆の円弧で囲む
Components
- 金枠CTA(
button-primary): 金地に濃茶の明朝文字、左に丸矢印、右に店舗アイコン - 情報リンクボタン(
button-secondary): 白地ピル型、左に濃茶丸矢印 - 発売日帯(
date-band): 淡い金のグラデ帯に明朝で日付を横一行 - 円形バッジ(
badge-circle): 濃紺の円に白文字で特徴を2行 - 価格表示(
price-tag): 税抜を大きく、税込を括弧付きで太字、白縁取り - 筆円弧見出し(
heading-brush): 頭文字を大きく白で、筆の円弧で囲む - 其ノ番号(
number-watermark): 地色の濃い同系色で番号を透かす - 提供形態カード(
info-card): 濃茶地に金枠、写真と短文
Do's and Don'ts
Do - 地色は栗皮色と柿色で交互に切り替える - 境界は斜めの金ライン帯を使う - 見出しは筆書体と明朝を組み合わせる - 商品写真は切り抜いて大きく端まで見せる - 雲や市松の和柄を控えめに散らす
Don't - 寒色の背景を広く使わない - 丸ゴシックやポップ書体を使わない - 金を大面積で塗らない - 白い平坦な背景セクションを作らない - 和柄を濃くして写真を邪魔しない
Page Structure
LP 独自の章。上から順に、カッコ内が各セクションの役割。
- ファーストビュー(商品と価格を一目で伝える): 暖色背景に商品写真を大きく、太い商品名、縦書きキャッチ、円バッジと価格
- 発売日帯(発売時期の告知): 淡い金の横帯に明朝で日付
- コンセプト(商品の魅力を一言で): 栗皮色地に市松透かし、筆見出しと十字線で挟んだ短文
- 特長(素材のこだわりを3点紹介): 柿色地に筆円弧見出し、切り抜き写真、番号透かし、左右交互
- CTA(店舗への来店誘導): 栗皮色地に呼びかけ見出し、商品写真、金CTAと白サブボタン
- 注釈(価格・販売条件の補足): 濃色地に小さな白文字で箇条
Imagery
- 素材と商品を切り抜き写真で、断面や湯気でシズル感を出す
- 濃い陶器皿など和の器を背景に使う
- 瑞雲モチーフを黄金色のフラットイラストで
- 市松模様を同系色で薄く透かす
- 筆の円弧や掠れを白で描く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。
Responsive Behavior
- PCは中央固定幅で背景を左右に延長
- FVは商品写真を中央、商品名を左下、価格を右下へ
- コンセプト見出しは1行に横並び
- 特長は写真と文を左右2カラムで交互配置
- CTAは左に写真、右に見出しとボタンの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 行書くと起動時に読み込まれる。
SOURCE
出典と注意
- 元の LP: https://www.ministop.co.jp/syohin/sweets/parfait/doublemitsuimo2026/(公開状況により表示できない場合があります)
- この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
- 元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
- 色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
- 元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。
似た LP の design.md
菓子・スイーツ山吹色×えんじの絵本風お菓子 LPWarm Picture-Book Confectionery Campaign LP
菓子・スイーツピンク×水色ストライプのポップなスイーツ LPPop Pastel Stripe Dessert Topping LP
菓子・スイーツ桃色×金箔の季節限定スイーツドリンク LPPeach Pink and Gold Premium Dessert Drink LP
菓子・スイーツ金色きらめきの新作フローズンスイーツ LPGolden Shimmer Frozen Dessert LP
菓子・スイーツクラフト紙とチョコ色のサステナ菓子 LPKraft Chocolate Sustainability LP
菓子・スイーツ星空ネイビー×ゴールドのコラボスイーツ LPCosmic Night Collab Dessert Campaign LP