DESIGN.md — ココア茶×生成りの手描き線画お菓子 LP（Warm Cocoa Hand-drawn Confectionery LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル、上品・高級
• キーワード: ココアブラウン・生成り・手描き線画・ずらし影フレーム・カテゴリ別カード
• 地の質感: 紙のようなマットな地色。グラデーションや光沢は使わず、手描きの線と太いオフセット影で手作り感を出す
• 形: 角丸の小さいカード、角の立った茶色ボタン、丸い番号バッジ、斜めに傾けたタブ見出し
• 温度感: 暖色寄り。ミルクチョコのような温かい中間色

Colors

• 地は生成りグレージュ。セクションは白カードと濃いめのベージュカードを交互に並べる
• 強調はこげ茶の一色だけにする。ボタン・見出し帯・番号バッジに使う
• カードやボタンには赤茶の太いオフセット影を付ける
• 赤はブランド帯・フッター・NEWバッジだけに使い、本文には使わない
• 商品名には黄色の細いマーカーを敷いて軽く目立たせる
• 文字は真っ黒にせず、濃茶で書く

Typography

• セクション見出しは欧文 1 語にし、線画イラストか横線を添える
• カテゴリ名は小文字の斜体欧文にして、白いタブに入れる
• 商品名は字間を広めにとり、2 行に分けて黄色マーカーを敷く
• 本文は 13px 前後。長くても 3〜4 行で切る
• 質問文は太字にして、文末に下向きの矢印を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは写真の下に説明、レシピは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードの中は写真と説明文を左右に並べ、SP では縦に積む
• 関連商品のサムネイルはカード下部に横一列で並べる
• Q&A の質問は左右に互い違いに配置して、動きを出す
• レシピのカードは縦にずらしてジグザグに並べる
• レビューは横スクロールのカルーセルにする

Elevation & Depth

• ぼかしの影は使わず、右下に 4〜6px ずらした赤茶の平らな影を付ける
• 写真はベージュの台紙に入れて、台紙ごと影を付ける
• カードは基本フラットにし、面の色の差で区切る

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き。レシピ写真は角の立った矩形で、台紙付き
• セクション境界: 直線で切り替える。区切りには手描きの線画モチーフを添える
• 主ボタンは角の小さい茶色の長方形にする
• 補足のリンクボタンは白地で、茶色の枠線を付けた角丸にする
• 番号は丸いバッジに入れる
• 選択中のサムネイルの背後には白い円を敷く

Components

• 商品詳細ボタン（button-primary）: こげ茶の長方形に白い太字。左にアイコンを付ける
• POINT 番号付きボタン（point-card）: 丸バッジに番号を入れ、茶色ボタンに重ねる。赤茶のずらし影付き
• カテゴリタブ（category-tab）: カード上端に重ねる白いタブ。中に斜体の欧文を入れる
• 商品カテゴリカード（product-card）: 白とベージュを交互に使う大きなカード。角に線画イラストを置く
• Q&A 質問ボタン（faq-pill）: 茶色の丸に Q 番号を入れ、白いボックスと矢印を付ける。ずらし影付き
• レビューカード（review-card）: 上半分に線画イラスト、下に感想文と年代・性別を入れる
• レシピ写真カード（recipe-card）: ベージュの台紙に写真を入れ、下に料理名を置く。ずらし影付き
• リード帯（heading-bar）: こげ茶の細い帯に白い小さな文字を入れた、説明用の見出し

Do's and Don'ts

Do - 地は生成りとベージュの 2 色だけにし、カードで区切る - 線画イラスト（お菓子・調理器具）を見出しやカードの角に添える - ボタンとカードにはずらしの平らな影を揃えて付ける - 商品は切り抜き写真にして、光をやわらかく当てる - 茶色は濃淡 2〜3 段の中だけで使う

Don't - 鮮やかな原色や青系の色を入れない - ぼかしの大きいドロップシャドウを使わない - 完全なピル型の丸いボタンにしない - 文字を真っ黒にしない - 写真の上に長い文章を重ねない

Page Structure

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

1. ファーストビュー（シリーズ全体と主な効能を一目で伝える）: ベージュ地にチョコ・アイスのシズル写真を置き、大ロゴと商品パッケージを散らす
2. ブランド紹介（シリーズの歴史とこだわりを伝える）: 白カードにリード文を置き、茶枠で囲んだ商品写真と POINT ボタン 2 つを並べる
3. 専門家推奨バナー（信頼を上げる）: 医師の線画イラストと、大きい数字のコピーを入れた横長バナー
4. 商品ラインナップ（カテゴリ別に商品を紹介する）: タブ付きのカードを白とベージュで交互に並べる。主商品の説明と詳細ボタン、関連商品のサムネイルを入れる
5. お客様の声（実際の味の評価を伝える）: 線画イラスト付きのカードを横に並べたカルーセル。左右に丸い矢印
6. よくある質問（疑問を解消する）: 白カード内に、番号付きの質問ボタンを互い違いに配置する
7. レシピ（使い方を広げて楽しさを伝える）: 茶色のリード帯の下に、台紙付き写真カードを 2 列ジグザグで並べる
8. 外部誘導バナー（SNS 登録と通販へ誘導する）: ベージュ帯にバナー画像を 2 つ横に並べる
9. フッター（シェアとサイト内のリンク）: 白地にシェアアイコン、その下は赤い帯に白文字のリンク

Imagery

• 商品はパッケージを切り抜き、少し傾けて配置する
• シズル写真はチョコが溶ける・割れる瞬間を、暖色の光で撮る
• イラストは濃茶の単色線画。少し揺らぎのある手描き線で描く
• レシピ写真は木の板や白い皿の上で、自然光で俯瞰か斜めから撮る
• 人物は塗りの少ない線画で、親しみのある表情にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 約 70% 幅のカード列。SP は画面幅の 90% に広げる
• 商品カードは PC では写真と文章を左右に並べ、SP では縦に積む
• レシピは PC の 2 列ジグザグを、SP では 2 列の均等グリッドか 1 列にする
• レビューは SP では 1.2 枚見せのスワイプにする
• Q&A の互い違いは SP では左寄せの縦並びにする

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