DESIGN.md — 赤×青×生成りのキャラクター系ペット食品LP（Bold Red Blue Character Pet Treat LP）

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

Overview

• 業種: ペット ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 赤青の2色ツートン・マスコットキャラ・生成りの紙のような地・紺の太い文字・四角に1文字ずつ入れた見出し
• 地の質感: 生成りの地にうっすら紙の粒の質感がある。赤と青の面もざらっとしたノイズを重ねたマットな仕上げ。
• 形: ボタンはピル型。カードは中くらいの角丸。キャラクターは太い紺の線で縁取ったイラスト。
• 温度感: 明るく温かい。原色を使うが、地を生成りにしてやわらげている。

Colors

• 赤と青は対になる2色として、FVやスペック面を左右・上下に分けて同じ面積で使う。
• 情報を伝えるセクションは生成りの地に紺の文字で組む。黒は使わない。
• 赤や青の面の上では、文字を白、ボタンを白い面に色付きの文字にする。
• 見出しの下には黄色の太いマーカーを引いて強調する。
• 表の行は水色・ベージュ・黄・ピンクのパステルで塗り分ける。
• 主CTAは生成りの地の上で赤ピルに白文字にする。

Typography

• 文字はほぼ全部を太字の紺のゴシックで組み、やわらかい細字は使わない。
• セクション見出しは1文字ずつ水色・ピンク・黄の四角に入れ、紺の枠で囲む。
• サブ見出しには黄色のマーカー下線を引く。
• 価格は数字を大きくし、「円」と「(税込)」は小さく添える。
• 注釈は9px前後でグレーまたは紺にし、中央か左に揃える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スペック表と特長バッジは 2 列に並べる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 中身は中央揃えを基本にし、FAQと配送案内は左揃えにする。
• セット商品は赤と青の角丸パネルに分け、縦に積む。
• 見出しの上には小さなシルエットのイラストを載せる。
• スペック表は2列で、行の間を点線で区切る。
• 写真は横にはみ出すほど並べたギャラリーにする。

Elevation & Depth

• 影はほとんど使わず、色の面と線で階層を作る。
• クレジットカードロゴのカードにだけ、うっすら影をつける。
• 商品写真には、ものの形に沿った自然な落ち影をつける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を切り抜いた写真。犬の写真は四角のまま少しずつずらして並べる。
• セクション境界: 背景色を直線で切り替える。FVは縦の直線で赤と青に分ける。案内のブロックは点線で区切る。
• ボタンとバッジはピル型にする。
• 問い合わせカードは紺の枠線と中くらいの角丸にする。
• Q・Aのアイコンは紺の枠をつけた正方形にする。
• 丸いメダル風のバッジを商品の脇に添える。

Components

• 購入ピルボタン（button-primary）: 赤い面に白い太字を載せた幅の広いピル。生成りの地の上に置く。
• 色面上の白ボタン（button-on-color）: 赤や青のパネルの上に置く白いピル。文字はパネルと同じ色にする。
• 一文字タイル見出し（heading-tiles）: 1文字ずつパステルの四角に入れて紺の枠で囲む。上にシルエットのイラストを載せる。
• 特長ピルバッジ（badge-feature）: 紺の面に白文字のピル。2列のグリッドに4つ並べる。
• 色面のセット商品パネル（set-panel）: 赤または青の角丸パネルに、商品画像・タイトル・価格・白ボタンを縦に並べる。上の端に白いピル見出しを重ねる。
• パステル給与表（feeding-table）: 紺のヘッダに、行ごとに色を変えたパステルの行を合わせ、紺の罫線で区切る。
• Q&A行（faq-item）: 水色の四角にQ、黄色の四角にAを入れたアイコンを左に置き、紺の文字で組む。
• 問い合わせカード（contact-card）: 白い面に紺の枠線をつけた角丸カード。中に赤ピルのボタンを置く。

Do's and Don'ts

Do - 赤と青は必ず対で、同じくらいの面積で使う。 - マスコットキャラクターを見出しや区切りに繰り返し登場させる。 - 文字は紺の太字で統一する。 - 生成りの地に紙のような質感を薄く重ねる。 - 価格・内容量・注釈をセットにして、商品ごとに同じ形で並べる。

Don't - 本文を黒の細字で組まない。 - グラデーションや強い影を使わない。 - 赤と青以外の濃い色を、大きな面に使わない。 - 角のとがったボタンを使わない。 - 写真をくすんだトーンに加工しない。

Page Structure

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

1. ファーストビュー（キャラと商品で第一印象を作る）: 背景を縦に赤と青で二分し、大きなキャラ・商品カップ・ロゴ・赤いピルの監修バッジを載せる。
2. 商品情報（詰め合わせセットの価格と特長を伝える）: 一文字タイル見出しの下に、商品グリッド写真・価格・紺の特長バッジ4つ・赤CTAを並べる。
3. 単品セット（味ごとのセットを提案する）: 赤と青のパネルを縦に積み、それぞれに白ボタンを置く。
4. 商品スペック（成分と原材料を示す）: 赤と青の全幅の面に白文字で、アイコン付きの項目と2列の成分表を置く。
5. 給与方法（体の大きさ別の与える量を示す）: パステルの表とカップのアイコンで、量の目安を見せる。
6. 注意事項（安全上の注意を伝える）: 紺い丸の箇条書きにし、キャラのイラストを添える。
7. 利用者の写真（実際に食べている様子を見せる）: 犬が食べている写真を、2段の横長ギャラリーで並べる。
8. よくある質問（購入前の不安を解消する）: Q・Aのアイコンを付けた行を縦に並べ、最後に赤いピルボタンを置く。
9. 支払い・配送・返品（購入の条件を伝える）: 白っぽい地に黄色いマーカー見出しを付け、点線で区切る。時間帯は円グラフ風のアイコンで示す。
10. お問い合わせ・フッター（連絡先を示す）: 枠付きのカードを2つ並べ、ロゴとリンクを中央に揃える。

Imagery

• マスコットは太い紺の線と原色のベタ塗りで描く。頬はピンクにする。
• 商品カップは背景を切り抜き、斜め上から撮る。
• 犬が食べている写真は、自然光で撮った日常のスナップ風にする。
• 見出しの上には、木と犬の紺いシルエットを小さく置く。
• メダル風の丸いバッジは金茶色で作る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVはキャラを左、商品を右に置き、横に長い構図にする。
• PCではセット商品のパネルとスペック面を、赤と青の2カラムで横に並べる。
• PCの商品情報は、写真を左、テキストを右の2カラムにする。
• 給与方法と注意事項は、PCでは2カラムに並べる。
• PCのヘッダには、白いピル型の帯にナビゲーションを入れる。
• 問い合わせカードは、PCでは2つを横に並べる。

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