栗皮色×金の和モダン季節スイーツ LP

Japanese Autumn Sweets Campaign LP

深い栗皮色と柿色の地に金の帯と雲文様を重ねた、和モダンな秋の新商品告知 LP。毛筆風の見出しと市松模様の透かしで季節感を出し、シズル感のある商品写真を大きく見せる。

菓子・スイーツ和風上品・高級力強い・インパクトSPPC

ダウンロード

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

COLORS

配色

TYPOGRAPHY

書体

displayFVの商品名ゴシック / Dela Gothic One 900 / 44px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
headline-lgコンセプト見出し(筆風)手書き・筆 / Yuji Syuku 700 / 36px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
headline-md特長名・セクション見出し明朝 / Shippori Mincho 700 / 26px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
headline-sm発売日帯明朝 / Shippori Mincho 800 / 18px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
body-md特長の説明文明朝 / Noto Serif JP 500 / 13px / 行間 1.8
あなたの LP を、もっと伝わる形に。Aa 123
accent其ノ壱などの透かし番号明朝 / Shippori Mincho 800 / 28px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
label-buttonCTAボタン文字明朝 / Shippori Mincho 700 / 20px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
note注釈ゴシック / Noto Sans JP 400 / 8px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビュー商品と価格を一目で伝える暖色背景に商品写真を大きく、太い商品名、縦書きキャッチ、円バッジと価格
  2. 発売日帯発売時期の告知淡い金の横帯に明朝で日付
  3. コンセプト商品の魅力を一言で栗皮色地に市松透かし、筆見出しと十字線で挟んだ短文
  4. 特長素材のこだわりを3点紹介柿色地に筆円弧見出し、切り抜き写真、番号透かし、左右交互
  5. CTA店舗への来店誘導栗皮色地に呼びかけ見出し、商品写真、金CTAと白サブボタン
  6. 注釈価格・販売条件の補足濃色地に小さな白文字で箇条
COMPONENTS

部品

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 独自の章。上から順に、カッコ内が各セクションの役割。

  1. ファーストビュー(商品と価格を一目で伝える): 暖色背景に商品写真を大きく、太い商品名、縦書きキャッチ、円バッジと価格
  2. 発売日帯(発売時期の告知): 淡い金の横帯に明朝で日付
  3. コンセプト(商品の魅力を一言で): 栗皮色地に市松透かし、筆見出しと十字線で挟んだ短文
  4. 特長(素材のこだわりを3点紹介): 柿色地に筆円弧見出し、切り抜き写真、番号透かし、左右交互
  5. CTA(店舗への来店誘導): 栗皮色地に呼びかけ見出し、商品写真、金CTAと白サブボタン
  6. 注釈(価格・販売条件の補足): 濃色地に小さな白文字で箇条

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 の design.md