DESIGN.md — 生成り水彩×4色ひし形の飲料レシピ LP（Warm Watercolor Chocolate Drink Recipe LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、情報量多め・訴求型
• キーワード: 水彩にじみ地・章ごとの色分け・ひし形しずくエンブレム・白い角丸カード・手描きイラスト・読み物型
• 地の質感: 和紙のような生成り地に水彩のにじみやドット柄スタンプを重ねる。カードはフラットな白。
• 形: 大きな角丸カード、円形の番号カード、ひし形の下にしずくが垂れるエンブレム、ピル型の小ボタン。
• 温度感: 暖色寄り。焦げ茶の文字とクリーム地が温かく、章ごとの色で軽さを足す。

Colors

• 文字と導入部の基調色は焦げ茶。黒は使わない
• 章ごとにテーマ色を 1 色決め、エンブレム・見出し・番号・罫線をその色でそろえる
• 章の背景は生成りか淡いピンクの水彩地にし、その上に白い角丸カードを置く
• 強調したい注意書きは章の色で塗ったピル帯に白文字で入れる
• 彩度の高い色は見出しとエンブレムだけに使い、広い面には淡い色だけを使う
• chapter-emblem は文字 #FFFFFF × 背景 #E8822A のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B75F14、4.51:1）を使う。
• numbered-circle は文字 #E8822A × 背景 #FFFFFF のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B75F14、4.51:1）を使う。
• tool-tab は文字 #33A4DB × 背景 #FFFFFF のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1F7EAD、4.52:1）を使う。
• notice-band は文字 #FFFFFF × 背景 #33A4DB のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1F7EAD、4.52:1）を使う。
• button-link は文字 #33A4DB × 背景 #FFFFFF のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1F7EAD、4.52:1）を使う。
• column-badge は文字 #FFFFFF × 背景 #33A4DB のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1F7EAD、4.52:1）を使う。

Typography

• 見出しは章の色にし、2 行に分けて置く
• 本文は行間を約 1.9 と広めにし、字間も少し空けて読みやすくする
• 冒頭の導入文は中央揃え、カード内は左揃え
• 手順の番号は細い欧文数字を章の色で本文の左に置く
• シーンの添え字には手書き風の筆記体の欧文を斜めに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の写真とテキストは縦に積む。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 章の頭にはエンブレムとリード見出し、導入文をまとめて置く
• 白カードは左右に 16px ほど余白を取って水彩地を見せる
• レシピは図と手順文を 1 組にして縦に 4 段並べる
• 特長は円形カード 3 枚。SP では縦に並べるか 2 列にする
• 写真とテキストは段ごとに左右を入れ替えて交互に配置する

Elevation & Depth

• カードは影を付けず、白い面と地色の差だけで浮かせる
• エンブレムだけに薄いドロップシャドウと光沢を付ける
• レシピ動画の枠には軽い影を付けてもよい

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。レシピ図は細い枠線で囲む。
• セクション境界: 直線の境界の上に水彩のにじみを重ね、ぼかして切り替える
• 大きなカードは角丸 24px
• 番号付きの特長は真円の白いカードにする
• 章のエンブレムはひし形の下にしずくが垂れる形にする
• 道具のアイコンは角丸の四角い枠に入れる

Components

• 章エンブレム（chapter-emblem）: グラデーションのひし形の下にしずくを付け、欧文の章名と小さな日本語を白で入れる。下に章の色で 2 行の説明を添える。
• 白い角丸カード（content-card）: 水彩地の上に置く白い大きなカード。中に写真と文章のブロックを並べる。
• 番号付き円カード（numbered-circle）: 白い円の中に、章の色の大きな数字・見出し・短い説明・イラストを入れる。
• レシピ手順（recipe-step）: 細い枠で囲んだイラストを左に、番号付きの手順文を右に置く。4 段で 1 組。
• 道具選択アイコン（tool-tab）: 角丸の白い枠に道具の写真を入れ、その下に道具名と所要時間の短い説明を入れる。
• 注意書きピル帯（notice-band）: 章の色で塗ったピル型の帯に、白文字 1 行で補足を入れる。
• ピル型リンクボタン（button-link）: 白地に章の色の細い枠を付け、三角アイコンとテキストを入れる。
• 比較の丸図（venn-diagram）: 細い線の円を 3 つ重ね、比較のポイントを短い言葉で入れる。
• コラムバッジ（column-badge）: 楕円の水色バッジに小さなコラムのラベルを入れ、横にドット柄を添える。

Do's and Don'ts

Do - 章ごとに色を 1 色決め、エンブレム・見出し・番号をすべてその色でそろえる - 背景には水彩のにじみやドット柄を淡く入れて、手作りの温かみを出す - 手順はイラストで描き、写真より図で伝える - 本文は焦げ茶にして行間を広く取る - 人物は線画に淡い色を塗ったイラストで添える

Don't - 純黒の文字や濃い色で塗った広い面を使わない - カードに強い影や立体的な装飾を付けない - 1 つの章で複数のテーマ色を混ぜない - 大きくて目立つ販売ボタンを並べて、読み物の雰囲気を壊さない - 角張った硬い書体を見出しに使わない

Page Structure

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

1. ファーストビュー（商品を飲むシーンとプロジェクトの世界観を伝える）: グラスの写真を水彩とドット柄で囲み、ひし形のロゴと手書き風の斜めのコピーを重ねる
2. 導入（企画の趣旨と歴史を紹介する）: 白地に中央揃えの見出しと本文を置き、ピル型ボタンでメンバー紹介へ誘導する
3. 章ナビ（4 つの章へ誘導する）: 4 色のひし形エンブレムを横並びにし、下に章の色で 2 行の説明を入れる
4. 豆知識（歴史）（飲み物としての歴史を物語で伝える）: 生成り地の上の白カードに、写真とテキストを交互に配置する
5. 飲むと食べるの違い（違いを 3 つのポイントで示す）: 人物イラストとリード文の下に、番号付きの円カードを 3 つ並べる
6. 比較（似た商品との違いを図で説明する）: カード内でテキストを左に、3 つの円を重ねた図を右に置く
7. 目的別おすすめ商品（目的に合う商品を紹介する）: ピンク地に商品パッケージを並べ、グラフ 2 点で根拠を示す
8. 作り方の選択（道具ごとの作り方を選んでもらう）: 水色の章。導入文・注意帯・道具アイコン 4 つを並べる
9. レシピ手順（失敗しない手順を見せる）: 道具ごとに白カードを分け、イラストと手順を 4 段で並べる。動画枠とリンクボタンを添える
10. コラム（おすすめの組み合わせを提案する）: 楕円のバッジを付けたカードに文章を左、写真を右に置く
11. 楽しみ方シーン（生活シーンでの飲み方を提案する）: 緑の章。シーンの写真・文・人物イラスト・筆記体の添え字をジグザグに配置する

Imagery

• 写真は自然光で撮り、明るい石目や布の背景に飲み物を置く
• 手順は細い線画に淡い水彩風の色を塗ったイラストで描く
• 人物は丸メガネなどを付けた、親しみのある線画イラストにする
• 装飾には水彩のブルーやオレンジのにじみと、ドット柄の円を使う
• 商品パッケージは切り抜いて、少し傾けて置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文を中央 約 75% 幅にまとめ、左右に水彩地を見せる
• SP では章ナビを 2×2 のグリッドにする
• SP ではエンブレムとリード見出しを縦に積み、エンブレムは 90px 程度にする
• レシピ手順は SP でもイラストを左・テキストを右に置くが、イラストは幅 40% にする
• 円カード 3 枚は SP では縦 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 行書くと起動時に読み込まれる。