DESIGN.md — 木目×手書き筆の多色カフェ風食品LP（Woodgrain Cafe Pop Recipe LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 木目テーブル・カフェ・筆塗りボタン・雲形フレーム・水彩イラスト・多色の商品カラー
• 地の質感: 濃い木目の写真地と、かすれた筆のタッチ。白地の部分は水彩イラストで手描きの雰囲気を出す
• 形: 雲形・吹き出し形の写真フレーム、破れた紙のようなセクション境界、筆でなぞった帯状のボタン
• 温度感: 暖色寄り（木の茶色・黄・赤）。冷凍のセクションだけミント系の寒色にする

Colors

• 白地を基本にし、冒頭のコンセプト部分だけ濃い木目の写真地にする
• 商品ごとに黄・赤・ピンクの色を固定し、タブ・ボタン・カードの色を合わせる
• セクションの見出しはテーマ色で塗り分ける（緑＝トッピング、ティール＝冷凍、ピンク＝コツ）
• 淡いミント・水色・ピンクの面は説明ブロックの地だけに使う
• 木目地の上の文字は白にし、太い縁取りや影で読みやすくする
• ribbon-heading は文字 #FFFFFF × 背景 #DC539B のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D53187、4.55:1）を使う。
• tab-product は文字 #FFFFFF × 背景 #F4AB03 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9C6D02、4.56:1）を使う。
• label-country は文字 #FFFFFF × 背景 #D9AE62 のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#996F25、4.51:1）を使う。

Typography

• セクション見出しの背後に、淡い色の大きな欧文スクリプトを透かしで重ねる
• 見出しと本文は中央揃えにする
• 吹き出し内のキャッチは、欧文のポップなセリフ体＋縁取りで斜めに置く
• ボタンには、小さい補足の行と大きい料理名の 2 段で文字を入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。料理カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 料理カードは写真＋その下に筆ボタンを置く 2 列グリッドにする
• 商品ラインナップは、商品画像の下にボタンを 2 つ横に並べる
• タブで商品を切り替え、枠線で囲んだシミュレーターのカードを表示する
• セクションの間はたっぷり白い余白をとる

Elevation & Depth

• 料理写真は角丸にし、ぼかした柔らかい影で少し浮かせる
• 商品パッケージにも薄い影を付ける
• 雲形フレームは影を付けず、太い色の縁取りで目立たせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 雲形・吹き出し形のマスクで切り抜き、黄・赤・緑の太い縁取りを付ける。料理写真は角丸の四角にする
• セクション境界: 破れた紙・筆でかすれたような不規則な境界
• ボタンは筆で塗った不規則な帯の形にし、右端に矢印を付ける
• 見出しのリボンは両端が燕尾になった帯形にする
• ポイントの吹き出しは楕円の雲形にする

Components

• 筆塗りボタン（button-brush）: かすれた筆の帯の上に白い太字の文字と右向きの矢印を置く。色は商品色に合わせる
• 雲形の写真フレーム（cloud-photo-frame）: 写真を雲形で切り抜き、色の縁取りと英語のキャッチの吹き出しを組み合わせる
• リボン見出し（ribbon-heading）: 燕尾の帯の中に白い文字を入れた小見出し。食材名などに使う
• 商品切り替えタブ（tab-product）: 商品色で塗ったタブ。選択中のタブは白地になり、下のカードの枠とつながる
• コツ紹介ボックス（tip-box）: 淡いピンクの面に、ピンクの見出しと下線付きのキーワードを入れる
• ポイント吹き出し（point-bubble）: 白い楕円の雲形の中に、スクリプト体のラベルと本文を入れる
• カテゴリーラベル（label-country）: 中央に置いた細い長方形の色ラベル。中に白い文字を入れる
• 手順のスライダー（slider-step）: 角丸の写真の上に手順番号と説明を重ね、左右にティールの矢印を置く

Do's and Don'ts

Do - 写真には木目・カフェ・食卓の暖かい空気感を出す - 商品色（黄・赤・ピンク）を、商品ごとのボタン・タブ・カードに一貫して割り当てる - 見出しの背後には透かしの欧文スクリプトを入れる - 星・音符・カトラリーなどの手描き線画を余白に散らす - ボタンは筆塗りの帯の形にし、右端に矢印を付ける

Don't - フラットな角丸のピル型ボタンにしない - 画面全体を寒色にしない（寒色は冷凍のセクションだけ） - 写真を単純な四角だけで並べ続けない - 明朝体などの堅い書体を使わない - 木目地の上に、縁取りのない細い文字を置かない

Page Structure

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

1. ファーストビュー（料理の魅力を一目で伝える）: カフェの写真の上にカラフルな皿の料理を 3 つ斜めに配置し、大きな欧文ロゴと手書き風のコピーを重ねる
2. 商品帯（商品の種類を示す）: 木目の帯の上に、商品パッケージを横に並べる
3. ヘッダー（ナビゲーション）: 白地の左にロゴ、右に緑のメニューアイコンを置く
4. コンセプト紹介（商品がどんなものかを説明する）: 木目地の上に白い見出しを置き、雲形写真＋英語キャッチの吹き出しを 3 つジグザグに並べる
5. トッピングシミュレーション（遊びながら関心を高める）: ミントの説明カード、商品別のタブ、水彩イラストの皿、コツのボックス、SNS シェアのボタンを順に並べる
6. トッピング一覧（アレンジの幅を見せる）: 緑のリボン見出しの下に、水彩の食材イラストを散らす
7. アレンジメニュー（活用方法を提案する）: 料理写真と筆ボタンを 2 列グリッドで並べ、ボタンは商品色で塗り分ける
8. 冷凍保存の提案（便利さを訴求する）: 水色の地に雪の結晶を散らし、ステップのスライダーとポイントの吹き出しを置く
9. 商品ラインナップ（購入・詳細への導線）: 商品画像ごとに、商品色の筆ボタンを 2 つ並べる
10. 関連商品（シリーズへの回遊）: カテゴリーの色ラベル、パッケージ、筆ボタンを縦に並べる

Imagery

• 料理は真上か斜め上から撮り、黄・青・緑などビビッドな色の皿に盛る
• 背景は木目テーブルや明るいカフェの店内
• 人物は食事を楽しむ自然な瞬間をとらえる
• 食材は水彩と線画のイラストで描く
• 装飾は星・ハート・音符・カトラリーの手描き線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、ファーストビューの料理 3 皿を横一列に並べる
• PC では、ヘッダーにテキストのナビを横に並べる
• PC のコンセプト部分は雲形写真を 3 つ同時に見せるコラージュにする
• アレンジメニューは PC で 3 列にし、背景にカフェ写真を敷く
• 商品ラインナップは PC で 3〜4 列に横並びにする

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