DESIGN.md — 若草色と焼き菓子茶の絵本風お菓子キャラクターLP（Hand-drawn Forest Character Snack LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、ポップ・元気、親しみ・手作り感、ナチュラル
• キーワード: 絵本風・森のジオラマ・クレヨン質感・動物キャラクター・焼き菓子カラー・六角形モチーフ
• 地の質感: 背景・カード・見出しすべてにクレヨンや色鉛筆のようなザラつきがあり、手描きのにじんだ縁取りが入る
• 形: 角丸の大きいカード、端が不揃いな木札型の見出しプレート、商品形状を思わせる六角形のアイコン
• 温度感: 黄緑と黄色が中心の、暖かく明るい春の森

Colors

• 地は黄緑の森イラスト。単色で塗りつぶさず、クレヨン調の質感を残す
• 情報を載せるカードは淡黄、見出しプレートは焼き菓子茶に白文字
• 補助見出しやボタンは濃緑で、黄緑の地から浮かせる
• 文字は黒を使わず濃茶にする
• キャラクターの背景は六角形にパステル色（黄・紫・ピンク・水色）を割り当てる
• コーポレート赤はフッターだけに使い、本編には持ち込まない
• subheading-band は文字 #FEFBEA × 背景 #049334 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#04842F、4.65:1）を使う。
• comic-tile は文字 #FEFBEA × 背景 #9C6A6E のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#99666A、4.53:1）を使う。
• button-primary は文字 #FEFBEA × 背景 #059333 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#04842E、4.65:1）を使う。
• coming-soon-tile は文字 #FEFBEA × 背景 #C6804B のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#A36334、4.6:1）を使う。

Typography

• 本文も太めの丸ゴシックにして、子ども向けの親しみを出す
• 見出しの難しい漢字には小さなルビを振る
• 物語の本文は中央揃えにし、短い行で改行する
• プロフィール本文は左揃えにする
• 英字のキャラクター名は極太で太さに強弱がある書体を使い、オレンジにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。漫画は 2 列、動画サムネは 3 列、キャラクターアイコンは 5 個と 4 個を交互に並べたハニカム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 背景イラストは途切れずにつながる 1 枚の森として描き、セクションは道や木で区切る
• 見出しプレートは左端から少しはみ出させて配置する
• カードの左右にスライダー用の六角形矢印を置く
• 装飾の木・家・どんぐりはカードの外側の余白に散らす
• 4コマ漫画のエリアは黄色い道の上に載せる

Elevation & Depth

• 影はほとんど使わず、手描きの縁取りで面を区切る
• 漫画のコマは茶色の太い縁取りで額装する
• サブ見出しの帯は少し暗い緑の縁で厚みを出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターは切り抜きか六角形、漫画は角丸の四角に縁取り
• セクション境界: 直線では区切らず、イラストの地形（道・森・池）で区切る。フッターだけ直線
• 見出しプレートは端が不揃いな木札の形
• 話数ラベルはカプセル型にし、黄色い丸の番号を重ねる
• ボタンは角丸の長方形で、右端に矢印を入れる
• ラベルは雲のような白い楕円にする

Components

• 木札見出し（heading-plank）: 焼き菓子茶の手描き木札に白い丸文字の見出しを載せ、ルビを添える
• 緑のサブ見出し帯（subheading-band）: 更新日などの補足を濃緑の帯に白文字で載せる
• キャラクター紹介カード（character-card）: 淡黄の大きな角丸カード。イラスト、英字の名前、和名、本文、担当と夢のラベルを順に並べる
• 六角形キャラアイコン（hex-icon）: パステル色の六角形にキャラクターの顔を入れ、ハニカム状に並べる
• 漫画サムネイル（comic-tile）: 茶色の縁取りをした角丸の絵。下にカプセル型のタイトルと黄色い丸の話数を付ける
• もっとみるボタン（button-primary）: 濃緑の角丸ボタン。白文字で、右端に黄色の矢印を付ける
• 近日公開タイル（coming-soon-tile）: 赤茶の四角を緑の枠で囲み、白い斜体の英字を入れる
• お知らせ帯（news-bar）: クリーム色の帯。左にラベル、右に白い角丸の箱を置き、日付と下線付きのリンクを入れる
• フッター白枠ボタン（footer-outline-button）: 赤い地に白い枠線と白文字の角丸ボタン

Do's and Don'ts

Do - 背景は手描き質感の森イラストで、ページ全体を 1 つの地図のようにつなげる - 文字は濃茶、カードは淡黄、見出しは茶色の木札に揃える - 商品を六角形や擬人化した妖精のモチーフとして散りばめる - キャラクターごとにパステル色の六角形を割り当てる - 要素の間には木やどんぐりの家などの小さな装飾を置く

Don't - フラットな単色ベタ塗りの背景や直線のセクション区切りにしない - 黒の文字や細い明朝体を使わない - コーポレート赤を本編の強調色に使わない - 写真主体の構成にしない（商品写真はファーストビューの縁取り程度に留める） - 影の強いカードやグラデーションボタンで質感を変えない

Page Structure

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

1. ヘッダー（企業ロゴ・商品ロゴ・メニューの提示）: クリーム色の帯の左に企業ロゴ、中央に商品ロゴ、右にメニューを置く
2. ファーストビュー（世界観とキャラクター全員の紹介）: 森の家の前にキャラクターが集合したイラスト。立体的な黄色のロゴを載せ、商品写真で縁取る
3. お知らせ（最新の更新情報を伝える）: クリーム色の帯に日付とリンクを 1 行で入れる
4. 物語の導入（世界観のあらすじを伝える）: 黄色の円の中に中央揃えの本文を置く。上にウェルカムのアーチ、周りに妖精キャラを配置する
5. アニメ（動画コンテンツへの誘導）: 木札見出しの下に大きなサムネイルと再生アイコン。その下に話数タイルの 3 列グリッド
6. キャラクター紹介（キャラクターのプロフィールを見せる）: 淡黄のスライダーカードと左右の六角形矢印。下に六角形アイコンを一覧で並べる
7. 相関図（キャラクター同士の関係を伝える）: グループごとの色付き角丸パネルを茶色の矢印でつなぎ、矢印の上に関係の言葉を添える
8. 4コマ漫画（連載コンテンツの回遊を促す）: 黄色い道の上に 2 列で漫画サムネイルを並べ、最後に緑のもっとみるボタンを置く
9. SNS・関連バナー（公式アカウントやコラボ企画への誘導）: 森の上に 2 列のバナーを並べる
10. シェア（ページの拡散）: 白地に見出しと SNS の正方形アイコンを 3 つ並べる
11. フッター（企業情報とリンク）: 赤い地に白いロゴ、白枠のボタン 2 つ、三角記号付きのリンクリスト

Imagery

• イラストはクレヨンや色鉛筆の質感で、輪郭線は太めの茶色
• 森は黄緑の芝、丸い木、細長い針葉樹、黄色い道、池で構成する
• キャラクターは二頭身の動物で、頬を赤くした丸い目の表情
• 商品は層が見えるパイの写真を縁飾りに使い、イラストでは顔付きの六角形の妖精として描く
• 小物にどんぐりの家、ミツバチ、花、切り株を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにアンカーメニューを横並びで出し、中央寄せで約 70% 幅
• アニメの話数タイルは PC で 4 列
• PC のキャラクターカードはイラストを左、テキストを右に置く横並び
• 六角形アイコンは PC で 10 個と 9 個の 2 段にする
• 4コマ漫画は PC で 4 列。もっとみるボタンは右寄せ
• 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 行書くと起動時に読み込まれる。