DESIGN.md — 絵本イラストと生成り帯の季節チョコ LP（Pastel Illustrated Seasonal Chocolate Collection LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、シンプル・ミニマル
• キーワード: 絵本イラスト・明朝体・余白多め・生成りの帯・パーツ図解・季節感
• 地の質感: フラットな白地と紙のような生成り面。写真は白背景の切り抜きで影は控えめ
• 形: 基本は角のない四角。CTA だけピル型。図解には細い引き出し線を使う
• 温度感: やや暖かい。サーモンピンクやベージュに季節のアクセント色を差す

Colors

• 地は白にして、シリーズが切り替わる場所だけ生成りの全幅帯を敷く
• 商品見出しは商品ごとにテーマ色（若草・苺赤・山吹・りんご赤）で塗り分ける
• 本文と価格は墨色だけにして、色は見出しと注記の点にとどめる
• ヘッダーとフッターは黒に近い濃色＋金色の文字で締める
• CTA は鮮やかなマゼンタのピル型を 1 か所だけ置き、くすんだピンクのバナーの上に乗せる
• limited-badge は文字 #FFFFFF × 背景 #B39456 のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#8D733F、4.51:1）を使う。

Typography

• 見出しは明朝で、字間を広めにとって静かに見せる
• 商品の物語文は中央揃えで 4〜5 行に収める
• シリーズ見出しの下に小さな欧文の英訳を添える
• 価格は『税込』を小さく、数字を大きく、本体価格は括弧で小さく書く
• 図解の中のパーツ名は太めのゴシック 2 行で短く書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品写真と図解を左右 2 カラム、商品一覧は 4 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• シリーズの切れ目に全幅の生成り帯を置き、見出しと説明文を並べる
• 商品 1 つは『色見出し→物語→商品写真→パーツ図解→商品名と価格』の順にする
• 商品同士の間は 60px 以上あけて、余白でくぎる
• パーツ図解はイラスト中央のまわりにパーツ写真を置き、細い線でつなぐ
• 商品一覧は白カードに正方形の写真とロゴ名を入れ、グリッドに並べる

Elevation & Depth

• 基本は影を使わずフラットにする
• 商品一覧のカードと店舗バナーには、ごく薄いドロップシャドウ（0 2px 6px rgba(0,0,0,.12)）をつける
• 商品写真は切り抜きにして、接地影を薄くつけるだけにする

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: 商品は白背景で切り抜き、商品一覧は正方形にトリミングする
• セクション境界: 直線で区切り、全幅の色帯を切り替える
• カードとバナーは角丸なしか 2px にする
• ピル型は CTA だけにする
• 限定バッジは金茶の正円にする
• 新着ラベルは赤い小さなタグにして、カードの左上に重ねる

Components

• 絵本イラストのファーストビュー（fv-illustration）: サーモン色の空に切り絵風の木・人物・動物を描き、中央に明朝のシリーズ名と欧文スクリプトを重ねる
• シリーズ見出し帯（series-band）: 生成りの全幅帯。左に明朝の見出しと欧文の英訳、右に小さな説明文を置く
• 商品テーマ色の見出し（product-color-heading）: 商品ごとのテーマ色で書く中央揃えの太字見出し。下に物語文を続ける
• パーツ図解（parts-diagram）: 中央にパフェのイラストを置き、まわりに 4 つのパーツ写真と名前を並べて細い金線でつなぐ
• 商品名と価格（price-block）: 小さな注記ドット、明朝の商品名、括弧のサブ名、個数、税込価格を縦に積む
• 限定バッジ（limited-badge）: 金茶の正円に白文字 2 行で販路限定を示す
• 通販 CTA（button-primary）: くすんだピンクの全幅バナーに置くマゼンタのピル型ボタン。右端に矢印をつける
• 商品一覧カード（brand-card）: 正方形の写真の下にロゴと読みを入れた白カード。細い枠線をつけ、NEW タグを重ねる
• 濃色フッター（footer-dark）: 黒地に金色の欧文見出し、おすすめ導線 4 枚、SNS 帯を置く

Do's and Don'ts

Do - 見出しは明朝で字間を広げ、余白をたっぷりとる - 商品ごとにテーマ色を 1 色決め、見出しだけに使う - 中身の素材はパーツ図解で見せる - 価格の表記ルールを全商品でそろえる - シリーズの切れ目は生成り帯で示す

Don't - 派手なグラデーションや強い影を使わない - 本文を色付きにしたり、太字を多用したりしない - ピル型ボタンを何個も置かない - 写真の背景を色付きにしない - 文字を詰めて情報を詰め込まない

Page Structure

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

1. ヘッダー（ブランドのナビゲーション）: 黒地の中央にロゴ、下に小さなメニューを横に並べる
2. ファーストビュー（シリーズの世界観を伝える）: 全幅の絵本イラストに明朝のタイトルを重ねる
3. ブランド導入（新ブランドのロゴとコンセプトを示す）: 赤茶の欧文ラベル、線画ロゴ、限定バッジ、中央揃えの短い文
4. シリーズ見出し（商品ラインの区切り）: 生成り帯に見出しと説明文を左右で並べる
5. 商品紹介（繰り返し）（各フレーバーの物語と中身を見せる）: 色見出し、物語、パッケージ写真、パーツ図解、価格の順
6. 缶入りギフト紹介（別ラインを提示する）: 缶の写真を左に、価格ブロックを右に置く
7. フレーバー一覧（詰め合わせの中身を説明する）: 粒の写真に名前と短い説明を添え、6 列のグリッドで並べる
8. 注意事項（販売条件を伝える）: 小さな注記を左揃えで並べる
9. 通販 CTA（購入へ誘導する）: ピンクのバナーに白抜きのロゴとマゼンタのピルボタン
10. 商品一覧（他のブランドへ回遊させる）: 4 列の白カードのグリッドと、店舗導線の横長バナー
11. フッター（おすすめ・SNS・規約への導線）: 黒地に金色の文字と写真のサムネイル

Imagery

• 切り絵や版画のような温かいフラットイラストで、森・動物・女性・果実を描く
• パッケージは淡いパステルの絵本調で、商品ごとに地色を変える
• チョコは真上か斜め上から撮り、白背景で切り抜く
• 商品一覧の写真は自然光のテーブルコーディネートで、正方形にする
• 季節のモチーフ（蝶・花・小鳥）を小さく散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は商品写真と図解を縦に積み、図解は幅いっぱいに縮める
• 生成り帯は SP では見出しを上、説明文を下に縦に並べる
• 商品一覧は PC で 4 列、SP で 2 列にする
• フレーバー一覧は PC で 6 列、SP で 3 列にする
• ヘッダーのメニューは 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 行書くと起動時に読み込まれる。