DESIGN.md — 赤×チョコ茶の斜めカット菓子 LP（Playful Red Chocolate Angular LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい
• キーワード: 斜めカット・吹き出し・手書き風・赤×茶・デスクの休憩・ごほうび
• 地の質感: フラットな単色の面にリアルな商品写真を重ねる。グラデーションや影は使わない。
• 形: 四角の一角や二角を斜めに切った多角形。吹き出しは三角のしっぽ付き。角丸はほぼ使わない。
• 温度感: 温かい。赤と茶の暖色が中心で、特長セクションだけクリーム地×水色で軽くする。

Colors

• 赤と茶の吹き出しを交互に並べてリズムを作る
• セクションごとに地の色を白、クリーム、薄グレーと切り替える
• 特長セクションだけは水色とクリームで爽やかにする
• 白地の見出しは赤・茶・水色のどれかで縁取った枠に入れ、セクションの色と合わせる
• 色付きの面の上の文字は白だけにする
• 商品名は、その商品のパッケージの色で書く
• feature-card-number は文字 #FFF0EE × 背景 #5CA5DC のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2674AF、4.51:1）を使う。

Typography

• 見出しは手書き風の書体、本文は太めのゴシックと分ける
• 見出しの前後に大きな「」を付け、強調として見せる
• 本文は中央揃えで短く改行する
• 英字のセクション名の下に、赤い線と赤い小さな副題を置く
• 見出しの一部の文字を色付きや大きめにして、手書きの揺らぎを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長とラインナップは 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 吹き出しは画面幅の約 90% で左右交互に寄せる
• 写真とテキストカードを少し重ね、ずらして配置する
• セクションの境目は斜めのカットでつなぐ
• 見出しの枠は横幅いっぱいの斜め角の多角形にする

Elevation & Depth

• 影は使わない
• 奥行きは面の重ね方とずらし方だけで出す
• ページトップボタンだけは赤の小さな斜めカット形にする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形を基本に、一角だけを斜めに切り落とす
• セクション境界: 斜めの直線カット。三角の差し込み
• カードは対角の二角を斜めに切る
• 吹き出しのしっぽは三角形にする
• 吹き出しの横に三本線の効果線を添える
• 見出しの枠は 3〜4px の太い線で描き、角を斜めにする

Components

• 斜め角の枠見出し（heading-frame）: 白地に太い色線の多角形の枠を描き、小さいリード行と大きい手書き見出しの 2 段で構成する
• 交互の吹き出し帯（speech-band）: 赤と茶が交互に並ぶ吹き出し。「」付きの見出しと 2 行の本文、三角のしっぽと効果線を付ける
• 番号付きの特長カード（feature-card-number）: 水色のカードに大きな白抜きの斜体数字を重ね、下に写真を付ける
• 写真とずらしカード（photo-text-card）: 写真の右下に、角を斜めに切った茶色のテキストカードを重ねる
• 枠線の補足吹き出し（outline-callout）: 白地に茶の枠線の吹き出し。“ ”付きの小見出しを入れる
• 英字のセクション名（section-title-en）: 太い英字の下に赤い線と赤い副題を置く
• 赤枠のボタン（button-outline）: 白地に赤い 2px 枠と赤い太字の長方形ボタン
• 商品ラインナップ（lineup-item）: パッケージ画像の下に、パッケージ色の商品名と中央揃えの説明・注釈を置く

Do's and Don'ts

Do - 面はすべて斜めカットの多角形で統一する - 赤と茶を交互に使ってテンポを出す - 見出しは手書き風の書体と「」で親しみを出す - 商品写真は日常のデスクや手元のシーンで撮る - 写真とカードを少し重ねて動きを作る

Don't - 角丸のボタンやカードを使わない - ドロップシャドウやグラデーションを使わない - 色付きの面の上に黒い文字を置かない - 見出しに明朝体や細い書体を使わない - 長い本文を左揃えで詰め込まない

Page Structure

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

1. ファーストビュー（休憩シーンでブランドを印象づける）: 赤地にデスクの写真を斜めに切って置き、白の手書きキャッチを重ねる
2. リード（ごほうび感を伝える）: 赤地に白の手書き文を 6 行ほど並べ、パッケージを 2 つ置く。手元の写真へ斜めにつなぐ
3. 利用シーン（食べる瞬間の気分を 4 段階で見せる）: 赤枠の見出しの下に、赤と茶の吹き出し帯を交互に 4 つ並べる
4. シズル帯（おいしさを演出する）: 溶けたチョコの写真を全幅で入れ、斜めにカットする
5. 特長（3 つの魅力を説明する）: クリーム地に水色の番号付きカードを置き、1 は全幅、2 と 3 は 2 カラムにする
6. 使いやすさ（パッケージの利便性を伝える）: 茶枠の見出しの下に、写真と茶色カードのずらし配置を繰り返す
7. ラインナップ（商品の種類を紹介する）: 斜めカットの薄グレー地に 2 カラムで並べる
8. お知らせ（話題や取り組みを紹介する）: 英字見出しの下にバナー画像と説明文を並べる
9. レシピ（アレンジを提案する）: 写真とタイトルを縦に並べ、最後に赤枠ボタンを置く
10. フッター（SNS とリンク）: SNS アイコン 3 つを中央に並べ、細い線の下に小さな文字を置く

Imagery

• 自然光のデスクで、手元と商品を写す生活感のある写真
• ひと粒を指でつまむ寄りのカット
• 溶けたチョコやミルクなどのシズル写真
• パッケージは正面から切り抜く
• 写真は四角形を基本に、角を斜めに切る
• 装飾は効果線や三角だけの最小限にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅に収め、左右に白地を大きく取る
• PC の FV はデスクの写真を横長にし、リードを写真と左右 2 カラムにする
• PC の特長は 3 つのカードを商品写真のまわりに放射状に置く
• PC の使いやすさは写真とカードを左右ジグザグに並べる
• PC のレシピは 3 カラム、お知らせは 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 行書くと起動時に読み込まれる。