DESIGN.md — クレヨン調の黄色×こげ茶 幼児食品 LP（Crayon Pop Yellow Kids Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: かわいい、ポップ・元気、親しみ・手作り感、やさしい・柔らかい
• キーワード: クレヨン・黄色・手描き・子ども・星の散らし・まるい
• 地の質感: クレヨンでこすったような星や英字。うすい水玉の地模様。
• 形: 波線のセクション境界、ガタガタ縁の円形カード、ピル型ボタン
• 温度感: 暖色だけの明るく温かい色温度

Colors

• セクションごとに地の色を変える。黄→山吹→クリーム→水玉ベージュ→黄の順。
• 文字は基本こげ茶にする。黒は使わない。
• 強調語は赤にする。料理名はオレンジにする。
• 英字見出しは 1 文字ずつ紫・黄土・緑・朱・ピンクのクレヨン色に塗り分ける。
• 赤の面は CTA と NEW バッジだけに使う。
• 寒色は星とクレヨン英字の差し色だけに使う。
• age-tab は文字 #F36944 × 背景 #FEFEFE のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#DA390E、4.55:1）を使う。

Typography

• 見出しは極太の丸ゴシックで、字間を広めにとる。
• 見出しは中央揃えで 2〜3 行に分けて改行する。
• 見出しの強調語だけ赤に変える。
• 本文は細めのゴシックを使い、強調語は太字にしてオレンジのマーカー下線を引く。
• 英字ラベルの直下に日本語見出しを置き、2 段で組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピも縦に 1 列で並べる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• 要素はすべて中央揃えにする。
• セクションの上下に 60〜100px の余白をとる。
• 円形カードは幅の 85% ほどに収め、左右に少しずらして配置する。
• 漫画コマは黒い枠線で 2 コマに区切り、斜めの線で分割する。
• 星の装飾は余白にランダムに散らす。

Elevation & Depth

• 影はほとんど使わず、平面的に仕上げる。
• 目次カードとタブだけ、黄色い太枠でふちどる。
• 缶の商品写真にだけ、うすい落ち影をつける。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: レシピ写真は角丸 16px の矩形にし、オレンジの太枠をつける。商品は切り抜きで置く。
• セクション境界: ゆるやかな波線でセクションを切り替える
• 特長カードはふちがガタガタの円形で、白いずらし影をつける。
• 目次カードは角丸 32px で、手描き風の太枠にする。
• CTA とタブはピル型にする。
• 直線の区切りは点線だけにする。

Components

• 主 CTA ボタン（button-primary）: 赤のピル型ボタン。白い丸ゴシックの文字に右向き矢印をつける。
• 対象年齢ピル（badge-pill）: 白地のピル型。茶色のずらし影をつけ、数字を大きく見せる。
• NEW バッジ（badge-new）: 赤い円に白い英字を入れ、少し傾けて商品の左上に重ねる。
• 目次カード（toc-card）: 白地に黄色の手描き枠。各項目の頭に色違いの星をつけ、項目間を点線で区切る。
• 円形特長カード（point-blob）: ガタガタ縁の黄色い円。見出しと赤い点の箇条書きを入れる。
• 漫画コマ（comic-panel）: 黒枠の 2 コマ。上のコマは吹き出しと家族のイラスト、下のコマは集中線の中に商品を置く。縦書きの赤字ラベルを重ねる。
• 年齢切替タブ（age-tab）: 白いピル型の中に 2 つのタブを並べる。選択中は朱色の地に白文字、選択していない方はピンク文字。
• レシピカード（recipe-card）: オレンジ枠の角丸写真の下に、オレンジの料理名を 2 行で置く。
• クレヨン英字ラベル（section-label）: 多色のクレヨン調英字に白いふちどりをつけ、下にこげ茶の日本語見出しを置く。

Do's and Don'ts

Do - 地は黄・クリーム系の暖色でまとめる。 - クレヨン調の星を余白に散らす。 - 見出しは極太の丸ゴシックで中央に置く。 - 本文の強調はマーカー下線で入れる。 - セクションの境界は波線にする。

Don't - 黒文字や細い明朝体は使わない。 - 鋭い角や直線の区切りを多用しない。 - 寒色を面の色に使わない。 - 強い影やグラデーションのボタンにしない。 - 写真をリアルな人物写真にしない。人物はイラストで描く。

Page Structure

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

1. ファーストビュー（対象年齢と商品名を一目で伝える）: 黄色の地に年齢ピル、極太の商品名、キャッチを置き、その下に缶の切り抜きと NEW バッジを配置する。星を散らす。
2. 目次（ページ内の 3 項目へ誘導する）: 白い手描き枠のカードに、星つきの項目を点線区切りで 3 つ並べる。
3. 悩みの提起（親の願いに共感させる）: 山吹色の地に漫画コマを置く。吹き出し 3 つと家族のイラストを描き、縦書きの赤字ラベルを重ねる。
4. 解決提示（商品を答えとして登場させる）: 集中線の中央に缶を置き、引用符つきで商品名を大きく見せる。
5. 特長（おすすめポイントを 3 つ伝える）: クリーム地にクレヨン英字の見出しを置き、黄色い円形カードを縦に 3 つ並べる。カードには赤い点の箇条書きを入れる。
6. イラストの区切り（食べる喜びを見せる）: 笑顔でカレーを食べる子どものイラストを中央に置く。
7. アレンジレシピ（使い方を具体的に見せる）: 水玉の地に英字見出しと監修の説明文、年齢タブを置き、オレンジ枠のレシピ写真を 3 つ並べる。
8. 商品詳細・CTA（商品ページへ送客する）: 黄色の地に英字見出し、缶の写真、商品名を置き、最後に赤いピル型 CTA を配置する。

Imagery

• 人物は太めの茶色い線と淡い塗りの手描きイラストで描く。
• 星はクレヨンでこすった質感にし、緑・ピンク・紫・黄で描く。
• 料理写真は真上から斜め上の角度で撮る。白い器を使い、パステル柄の布の上に置く。
• 商品は正面から撮った切り抜きで置く。
• 集中線と黄色いキラキラで登場感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは、左に商品・右に商品名の 2 カラムにする。
• PC の目次は横 1 列の横長カードにする。
• PC の特長は、円形カード 3 つを中央のイラストの周りに散らして配置する。
• PC のレシピは 3 カラム横並びにする。
• PC の商品詳細は、左に缶・右に商品名と CTA の横並びにする。
• PC の本文は中央約 1000px 幅に収める。

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