DESIGN.md — 黄から紫へ移る秋の芋スイーツ限定 LP（Sweet Potato Yellow-to-Purple Seasonal Donut LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感
• キーワード: 秋限定・紫いも・黄色グラデーション・切り抜き写真・手描き風ロゴ・クリーム色パネル
• 地の質感: 水彩のようににじむ黄の面に、うっすら大きな丸い色斑を重ねる。紙のような柔らかい質感。
• 形: 大きな角丸パネルと白いピル型ボタン。芋や落ち葉のフラットなイラストを散らす。
• 温度感: 暖色寄りで、ほっこり甘い秋の温度感。

Colors

• 地色は上から淡黄→濃黄→焼き色→紫へ縦グラデーションでつなぐ。
• コンテンツはクリーム色の角丸パネルに載せ、地のグラデーションから浮かせる。
• 紫はロゴ見出しとイラストだけに使い、本文には使わない。
• ボタンは白地にこげ茶の文字。目立つ色のボタンは作らない。
• ファーストビューは写真の背景に黄と紫のグラデーションを敷き、ページ全体の色の流れを先に見せる。
• hero-visual は文字 #B53190 × 背景 #FFE151 のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AD2F8A、4.55:1）を使う。
• footer-links は文字 #602532 × 背景 #933A66 のコントラスト比が 1.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#D28DAF、4.52:1）を使う。

Typography

• 大見出しは画像化した手描き風の丸い紫文字にし、太く弾むような形にする。
• 本文は字間を広めにとり、行間は 2.0 前後でゆったり組む。
• 導入のコピーは中央揃えにし、短い行を積み重ねる。
• 商品名と価格は中央揃え、説明文は左揃え。
• 価格の数字はラベルより一回り大きくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は縦に 1 列で並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品パネルは画面幅の約 88%。左右に地色が細く見えるようにする。
• 1 商品の並びは、写真→商品名→価格→点線→説明→注釈→ボタン。
• 商品と商品の間は 60px 前後あけ、区切り線は入れない。
• パネルの上部に、ロゴ見出しと点線区切りを置く。
• 末尾にはピルボタンを 3 つ縦に並べる。

Elevation & Depth

• ピルボタンには薄い茶系の線と、ごく弱い影をつける。
• パネルには影をつけず、地色との差だけで浮かせる。
• 切り抜き写真には落ち影を付けず、そのまま浮かせる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。断面は小さな円形にし、右上に重ねる
• セクション境界: 直線の境目は作らず、背景のグラデーションで連続させる
• パネルは大きめの角丸（20px 前後）。
• ボタンは完全なピル型にし、右端に細い山形の矢印を置く。
• 注意書きのボックスは白地に小さい角丸と細い枠線。

Components

• ファーストビューの合成ビジュアル（hero-visual）: グラデーション背景にロゴ見出しと商品の切り抜き 5 点を散らし、手書きの商品名ラベルを添える。
• 注意書きボックス（notice-box）: 白い角丸の箱に、※の注釈を 4 行並べる。
• スラッシュ挟み見出し（slash-heading）: 短いキャッチの左右を斜線で挟み、その下にアプリ導線のバナーを置く。
• 紫の手描きロゴ見出し（logo-heading）: セクションの大見出し。紫の丸い装飾文字に、小さな芋のアイコンを添える。
• 商品一覧パネル（product-panel）: クリーム色の大きな角丸パネル。中に商品を縦に並べる。
• 価格表記（price-block）: 持ち帰りと店内飲食の税込価格を 2 行で中央揃えにし、下に点線を引く。
• 詳細ピルボタン（button-pill）: 白地のピル型。こげ茶の文字を中央に置き、右端に矢印を付ける。
• 動画パネル（video-panel）: クリーム色の角丸パネルにロゴ見出し、点線、動画のタイトル、16:9 の埋め込みを並べる。
• 末尾リンクボタン群（footer-links）: 紫の地に白いピルボタンを 3 つ縦に並べ、芋のイラストを添える。

Do's and Don'ts

Do - 地色は黄から紫へのグラデーションで物語のようにつなぐ。 - 商品写真は背景を抜いて大きく見せ、断面の円を添える。 - 紫いも・落ち葉・焼き芋のフラットなイラストを余白に散らす。 - 本文は字間と行間を広くとり、やさしい印象を保つ。 - 見出しには手描き風の丸い装飾文字を使う。

Don't - 赤や緑など、秋の芋色から外れる強い色を使わない。 - ボタンを原色で塗りつぶさない。 - 商品写真を四角い枠で切り抜かない。 - パネルに強い影や太い枠線をつけない。 - 明朝体などの硬い書体を見出しに使わない。

Page Structure

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

1. ファーストビュー（季節限定の新商品を一目で伝える）: 黄から紫へのグラデーションに、ロゴ見出しと商品の切り抜き 5 点を散らす。下に注釈を添える。
2. 注意事項（販売条件を事前に知らせる）: 白い角丸ボックスに、※の注釈を 4 行並べる。
3. 注文導線（ネット注文へ誘導する）: スラッシュで挟んだ見出しの下に、アイコン付きの白いバナーボタンを置く。
4. 導入コピー（商品の世界観と期待感をつくる）: 中央揃えの短文を 3 段落に分け、下に芋と落ち葉のイラストを並べる。
5. 特長（生地のこだわりを説明する）: 大きな切り抜き写真、紫のロゴ見出し、左揃えの本文の順に置く。
6. ラインナップ紹介（種類の豊富さを伝える）: 5 商品を集合写真のように配置し、2 行の紫見出しと本文を続ける。
7. 商品一覧（各商品の価格と特徴を示す）: クリーム色のパネルに、写真・商品名・価格・説明・ボタンのセットを縦に繰り返す。
8. 動画（CM で商品の情緒を補強する）: クリーム色のパネルにロゴ見出しと 16:9 の動画を置く。
9. 関連リンク（栄養情報や他の商品へ回遊させる）: 紫の地に白いピルボタンを 3 つ並べ、イラストで締める。

Imagery

• 商品は真上から少し斜めに撮り、背景を抜いた切り抜きにする。
• 断面の写真は小さな円形にし、白いフチを付けて右上に重ねる。
• イラストは紫いも・落ち葉・焼き芋の断面を、フラットな 2〜3 色で描く。
• ファーストビューでは商品を浮遊感のある配置にし、手書きのラベルを添える。
• 背景にはにじんだ大きな丸い色斑を薄く重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは横長にし、ロゴを左、商品を右に並べる。
• PC の特長セクションは写真と文章の 2 カラムにし、左右を交互に入れ替える。
• PC の商品一覧は、左に写真、右に商品名・価格・説明・ボタンを置く横並びにする。
• 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 行書くと起動時に読み込まれる。