DESIGN.md — 生成り×真紅の手描き絵本風チョコ LP（Warm Cream Crayon Illustration Chocolate Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、かわいい、ポップ・元気
• キーワード: 手描きクレヨン線・生成りの紙地・真紅のブランド面・封筒モチーフ・詩的な縦並びコピー・字間ゆったり
• 地の質感: 前半は細かい紙の粒子感がある生成り地。後半はフラットな赤一色に、斜線のライン装飾と封筒の影を重ねる。
• 形: 波形のセクション境界、ピル型の白ボタン、V字のフタを持つ封筒型カード、角のない白い便箋。
• 温度感: 暖色だけで組む温かい配色。赤とチョコ茶で甘さと気持ちのこもった贈り物感を出す。

Colors

• 前半の情緒的なパートは生成り地にする。後半の企画パートは赤地にして、2 つのトーンに分ける。
• 生成り地の本文はチョコ茶、キャッチだけを赤にする。
• 赤地では文字を白にする。カードは白い便箋と、それより濃い赤の封筒で層をつくる。
• ボタンは白地に赤文字。赤地の中で最も明るい点にする。
• 見出しの下に淡い赤のマーカーを引いて強調する。
• 寒色はロゴや SNS アイコン以外には使わない。
• heading-marker は文字 #CA0822 × 背景 #FD5C5C のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#FFDADA、4.56:1）を使う。
• date-ribbon は文字 #FEF0EE × 背景 #FD5C5C のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#FFDADA、4.59:1）を使う。

Typography

• すべて中央揃え。1 行は短い句で区切って改行する。
• 字間を 0.1〜0.2em と広く取り、ゆっくり読ませる。
• 本文も太めの丸ゴシックにして、手描き線と調和させる。
• 行間は 2 前後と広めにし、段落の間は空ける。
• カード見出しは手書き風の書体にし、下に淡い赤のマーカーを敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、すべて中央揃え
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• イラストとコピーを交互に縦に積む。
• イラストの左右には余白を広く残す。
• 赤地パートの見出しは、上下を斜線のラインで挟む。
• カードは画面幅の 85% で、縦に積む。
• カードとカードの間は 40px 程度空ける。

Elevation & Depth

• 影はほとんど使わない。
• 封筒の重なりは、赤の濃淡と薄い影で奥行きを出す。
• 便箋が封筒から少し浮いて見えるように、ごく弱い影を付ける。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カード内の写真やイラストは角丸なしの長方形。人物イラストは背景なしの切り抜き。
• セクション境界: 生成りから赤へは、緩やかな波形で切り替える。
• カードは角のない白い便箋。下半分は V 字のフタを持つ赤い封筒で包む。
• ボタンは完全なピル型。右端に小さな三角の矢印を付ける。
• 日付ラベルは、カード上端にかかるリボン帯にする。

Components

• 詳細ボタン（button-primary）: 白いピル型。赤文字の中央に文言、右端に三角の矢印を置き、封筒の下に配置する。
• 封筒カード（envelope-card）: 白い便箋に方眼の薄い地紋。中に画像・見出し・説明文を入れ、下半分を濃い赤の封筒で覆う。
• マーカー見出し（heading-marker）: 赤い手書き風の文字の下半分に、淡い赤の帯を敷く。
• 斜線ライン（stripe-divider）: 白い短い斜線を連ねた横ライン。赤地の見出しブロックを上下で挟む。
• 日付リボン（date-ribbon）: カード上端に重ねる淡い赤の帯。記念日などを白文字で入れる。
• 波形境界（wave-divider）: 生成り地の下端を緩い波形に切り、赤地へつなぐ。
• 白ヘッダー（header-bar）: 上端に細い赤線。左にロゴ、右に会社ロゴと濃い茶色のハンバーガーメニューを置く。

Do's and Don'ts

Do - イラストは太さにムラのあるクレヨン調の線で描く。 - コピーは短い句を中央揃えで縦に重ね、字間を広く取る。 - 生成りから赤への切り替えは波形にする。 - 企画の紹介は、贈り物を連想させる封筒カードで包む。 - ボタンは白いピル型にして、赤地の上で目立たせる。

Don't - 写真やイラストに角ばった枠や強い影を付けない。 - 細い明朝体や無機質な欧文で本文を組まない。 - 青や緑など寒色を、装飾の主役に使わない。 - 字間が詰まった長い段落を置かない。 - 派手なグラデーションや光沢を加えない。

Page Structure

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

1. ヘッダー（ブランドを示し、ナビゲーションの入口を置く）: 白地に左右のロゴとメニューを置き、上端に赤線を引く。
2. ファーストビュー（キャンペーンの世界観を伝える）: 生成り地。赤い大きなキャッチを 2 行で置き、その下にキャラクターがチョコを抱く手描きイラストを入れる。
3. ストーリー（気持ちを伝える難しさに共感させる）: チョコでできたハートのイラストを入れる。茶色の短い詩的なコピーと小さなイラストを交互に置く。
4. 商品紹介（商品を印象づける）: パッケージの切り抜き画像を中央に置き、下端を波形にして赤地へ移る。
5. プロジェクト概要（企画の主旨を説明する）: 赤地に白い見出しと本文を置き、上下を斜線ラインで挟む。
6. 企画カード（個別の施策を紹介し、詳細へ誘導する）: 封筒カードを縦に 2 枚並べる。それぞれに画像・マーカー見出し・説明文・白いピル型ボタンを入れる。
7. フッター（SNS での共有と規約への導線を置く）: 赤地に丸い SNS アイコンを並べる。その下の深い赤の帯に、小さな白文字のリンクとコピーライトを置く。

Imagery

• 子どもとふわふわしたキャラクターを、クレヨンや鉛筆の線で描いた絵本風イラストにする。
• イラストは赤・黄・茶を中心に塗り、塗りムラと白い余白を残す。
• 板チョコのブロックをハートなどの形に組んだ、モチーフのイラストを入れる。
• 写真は家庭の自然な笑顔を使い、上に手書き風の白い文字を重ねる。
• 企画のビジュアルは赤背景のポップなキャラクター画とする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も 1 カラムの中央配置で、本文の幅は 600px 程度に抑える。
• PC ではキャッチを 1 行にし、イラストをコピーの左右に散らして置く。
• PC の封筒カードは幅 600px 前後とし、画像とテキストを横に並べる。
• PC では日付リボンをカード左上に斜めにかける。
• PC のフッターリンクは 1 行に並べる。

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 行書くと起動時に読み込まれる。