DESIGN.md — 若草色の森と焼き色の絵本風キャラグッズLP（Storybook Forest Character Collab Goods LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、親しみ・手作り感、ナチュラル、ポップ・元気
• キーワード: 森の絵本・お店めぐり・焼き菓子カラー・手書き文字・スクロール探索
• 地の質感: フラットなイラストに細かいドット柄の若草地。写真は切り抜いてイラストになじませる
• 形: 丸い吹き出し、六角形の菓子モチーフ、ゆるい波形のセクション境界
• 温度感: 暖かく明るい。緑と黄色、焼き色の茶

Colors

• 物語パートは若草色の地にし、濃い緑と黄緑の木々で奥行きをつける
• 導入文と商品紹介は、クリーム色や焼き色の暖色地に切り替える
• 見出しリボンとコピーライト帯にはこげ茶を使い、ページを締める
• 黄色は操作ボタン（矢印）だけに使い、押せる場所を目立たせる
• 文字は黒ではなく濃い茶色にして、菓子らしい温かさを保つ
• 赤はクリック誘導の小さな三角だけに使う

Typography

• 導入文は手書き風の書体で中央揃えにし、行間は広めにとる
• 見出しは太い丸ゴシックで、尖った印象を避ける
• 英字の誘導語は小文字の丸い書体にする
• リンクは太字にして下線を引く
• 価格には（税込）を添え、商品名の下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。イラストは全幅で背景のように敷く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• お店のイラストを1画面に1軒ずつ置き、間に scroll 表記と下向き矢印をはさむ
• お店は中央に置き、左右を木やキャラで埋める
• 商品紹介は中央に1点を大きく見せ、左右に隣の商品を少しだけのぞかせるカルーセルにする
• フッターのバナーは2つ並べ、それぞれ下にテキストリンクを置く

Elevation & Depth

• 影は基本的に使わず、フラットなイラストで見せる
• お店や木の足元に、楕円の淡い影を置く
• click吹き出しには、ごく薄い影で浮いた感じを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は背景を切り抜き、白い六角形の上に置く
• セクション境界: ゆるい波形のカーブで地色を切り替える
• 矢印ボタンは黄色の正円にする
• 見出しは斜めストライプのこげ茶リボンに入れる
• 吹き出しは楕円の白地で、とがった部分を1つつける
• 看板は白地に濃いグレーの枠の長方形にする

Components

• お店イラスト（shop-illustration）: テント屋根のお店。屋根の色を店ごとに変え、上に看板を載せる。タップで商品へ移る
• click吹き出し（click-bubble）: お店の左に置く白い楕円の吹き出し。赤い三角で押せることを示す
• スクロール誘導（scroll-cue）: 小さな scroll の文字と下向きの山形矢印
• リボン見出し（ribbon-heading）: 斜めストライプのこげ茶の帯に白い文字。端にキャラを添える
• 商品カルーセル（product-carousel）: 白い六角形に商品の切り抜きを置き、下に商品名と価格を並べる
• 黄色矢印ボタン（arrow-button）: カルーセルを送る黄色の円ボタン
• 関連バナー（banner-link）: こげ茶の枠つきバナー。下に下線つきの太字リンクを置く
• コピーライト帯（copyright-bar）: こげ茶の細い帯に、小さな白い文字

Do's and Don'ts

Do - 地色を物語パートは若草色、商品パートはクリームと、きっちり分ける - キャラクターや小動物を画面のあちこちに散らし、見つける楽しさを出す - お菓子の写真は切り抜き、イラストの中になじませる - 操作できる場所は黄色の丸ボタンか吹き出しで示す - 文字は濃い茶色にして、温かい印象をそろえる

Don't - 黒地や寒色のメインカラーを使わない - 角ばったゴシックの細い文字を見出しに使わない - 長い本文を詰めて組まない - 写真を四角いまま並べない - 強い影やグラデーションのボタンを使わない

Page Structure

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

1. ファーストビュー（コラボの世界観とロゴを見せる）: 白地の周りを葉と焼き菓子の写真で囲み、中央にロゴ、下に森の丘とキャラクターを置く
2. 導入メッセージ（コラボの趣旨を伝える）: 中央が明るい焼き色の放射グラデ地に、手書き風の文字を中央揃えで6行ほど組む。左右に六角形の菓子アイコンを置く
3. お店めぐり（1軒目）（商品ジャンルへ誘導する）: 若草色の地に、茶色い屋根のお店とclick吹き出しを置き、上にscrollを入れる
4. お店めぐり（2軒目）（別のジャンルへ誘導する）: 屋根をピンクに変えた同じ形のお店を、木々の中に置く
5. お店めぐり（3軒目）（別のジャンルへ誘導する）: 屋根を青に変えたお店。足元にキャラを寝転ばせる
6. 商品紹介（商品と価格を見せる）: 波形の境界からクリーム地に切り替え、リボン見出しと六角形のカルーセルを置く
7. 関連リンク（ブランドサイトへ送る）: 白地にバナーを2つ並べ、下に下線つきのリンクを置く
8. フッター（運営情報と問い合わせ先を示す）: こげ茶のコピーライト帯の下に生成り地を敷き、ナビと問い合わせカードを置く

Imagery

• 太めの線を使わないフラットなイラストで、木や茂み、テント屋根のお店を描く
• 茂みには白い小花をドットで散らす
• 足あとやクローバーの小さなモチーフを、背景にまばらに置く
• 焼き菓子は暖かい光で撮った切り抜き写真を使い、周りに散らす
• キャラクターはぬいぐるみの質感で、リスなどの森の動物と並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでも1カラムのまま、イラストは全幅で縮小して使う
• お店イラストは画面幅の85%ほどにし、click吹き出しをお店に重ねる
• カルーセルはSPでは1点を中心に置き、隣の商品が左右に少しのぞく形にする
• 関連バナーはSPでは縦に積む
• ロゴは画面幅の70%ほどに収める

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