DESIGN.md — 木漏れ日と金茶の波で彩るカフェ系スイーツ LP（Airy Leaf-Light Cafe Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: やさしい・柔らかい、ナチュラル、上品・高級、清潔・爽やか
• キーワード: 木漏れ日・ボケ背景・波形リボン・キャラメル色・手描き線・ゆったり
• 地の質感: ボケた葉と光の写真背景。白地には淡い水彩風の葉シルエットを薄く重ねる。
• 形: 波打つ帯とライン、手描き風の楕円、片側だけ大きく丸めたリーフ形ボタン。
• 温度感: 爽やかな寒色の背景に、温かいコーヒー色の文字と帯を重ねた中間の温度感。

Colors

• 地は白にし、ファーストビューと中盤のこだわりセクションだけをボケ写真の背景にする。
• 文字はすべて茶色系で統一し、黒は使わない。
• セクションの境目にはキャラメル〜オレンジのグラデーションで波形ラインを入れる。
• CTA だけをティールグリーンで塗り、背景の緑とつなげる。
• えんじ茶は限定注記のような小さなバッジにだけ使う。
• 写真の上に置く文字は白にする。
• button-primary は文字 #FFFFFF × 背景 #509B8A のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#428072、4.6:1）を使う。
• wave-ribbon は文字 #FFFFFF × 背景 #DEB986 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9D6D2B、4.51:1）を使う。
• top-link-tag は文字 #FFFFFF × 背景 #509B8A のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#428072、4.6:1）を使う。

Typography

• 文字間は広め、行間は 1.8〜2.0 にしてゆったり見せる。
• リードとこだわりの本文は中央揃えにし、短く改行する。
• ファーストビューのキャッチは 2 列の縦書きにし、上下にずらして置く。
• 小見出しは手書き風の書体にし、下に曲線のアンダーラインを付ける。
• 太い黒ゴシックは使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央に 375px 幅の SP カラムを置き、左右には背景写真を敷く。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 説明文のブロックは左に 25% ほど空けて寄せ、そこへ矢印の線が伸びる配置にする。
• 写真の帯は画面の端から端まで裁ち落とす。
• 吹き出しは左右交互に少しずつずらし、互いに重ねる。
• セクション間は波形の線で区切る。

Elevation & Depth

• 影はほとんど使わず、平らに見せる。
• 奥行きは写真のボケと、半透明の葉のシルエットを重ねて出す。

Shapes

• 角丸: 小 4px ／ 中 14px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形で裁ち落とす。商品は切り抜きで配置する。
• セクション境界: キャラメル〜オレンジのグラデーションで描いた、二重の波形ライン（帯）
• CTA は左上と右下を大きく丸めた、リーフ形の非対称な形にする。
• 吹き出しは手描き風のゆがんだ楕円を線だけで描く。
• 注記バッジはピル型にする。

Components

• リーフ形 CTA（button-primary）: ティールで塗った非対称のリーフ形ボタン。白い文字で中央に置く。
• 波形タイトル帯（wave-ribbon）: キャラメル色のグラデーションで描いた、うねる帯。上に白い手書き風のサブタイトルを載せる。
• 限定注記バッジ（badge-note）: えんじ茶のピル型に、白文字で注記を入れる。
• 曲線アンダーライン見出し（heading-underline）: 手書き風の見出しに、茶色の曲線を下線として添える。
• 手描き矢印（pointer-arrow）: 細い茶色の曲線矢印。説明文から図解の各部分を指す。
• 楕円の声吹き出し（voice-bubble）: 薄茶の手描き楕円線の中に、茶色の本文を中央揃えで入れる。左右交互に置く。
• SNS シェアアイコン（sns-icons）: 丸いアイコンを 3 つ横に並べる。
• 情報リンクタグ（top-link-tag）: 左上に置く、濃いティールの小さなピル型リンク。

Do's and Don'ts

Do - 背景には木漏れ日のボケ写真を使い、軽やかさを出す。 - 文字は茶色系に統一し、温かみを保つ。 - 区切りは波形の帯やラインで、曲線を基調にする。 - 余白と行間を大きく取り、ゆったりした時間を感じさせる。 - 白地にも淡い葉のシルエットを透かしで重ねる。

Don't - 直線の罫線や角ばった箱型のカードは使わない。 - 黒い文字や原色の赤は使わない。 - 価格訴求の派手なバッジで画面を埋めない。 - 影の強いボタンは使わない。 - 文字をぎっしり詰めない。

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: 水色のボケ背景の中央に商品の切り抜きを置き、左右に縦書きのコピーを 2 列配置する。下に欧文の大きなタイトルを置き、波形帯でサブタイトルを載せる。
2. 販売注記とリード（販売条件と商品の概要を伝える）: えんじ茶のバッジの下に、茶色の中央揃えリードを 4 行並べる。
3. 構成要素の説明（素材のこだわりを図解で示す）: アンダーライン見出しと左揃えの本文を置き、手描き矢印で写真と中身のイラストへつなぐ。上下 2 つの要素で同じ型を繰り返す。
4. 開発者のこだわり（作り手の想いを伝える）: 緑のボケ写真の帯を上下の波形ラインで挟み、白文字の中央揃えで本文を置く。
5. お客様の声（味の評価で安心感を与える）: 手描き楕円の吹き出しを 3 つ左右交互に重ね、最後に注釈を添える。
6. CTA・シェア（他の商品への回遊とシェアを促す）: リーフ形のティール CTA を置き、その下に SNS の丸アイコンを 3 つ並べる。

Imagery

• 背景は木の葉越しの光を大きくぼかし、水色と緑のトーンで撮る。
• 商品は切り抜きにし、ハートやラテアートのような温かいモチーフと組み合わせる。
• 飲料やゼリーは、暗めの背景で質感を寄りで見せる。
• 中身の構造は、ベージュの単純な図形と焦げ茶のドットのイラストで示す。
• 白地の端には、水彩風の淡い葉のシルエットを散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも SP と同じ幅のカラムを中央に固定し、レイアウトは変えない。
• 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 行書くと起動時に読み込まれる。