DESIGN.md — 黄色×青ストライプのキャラ水産食品LP（Pop Yellow Character Seafood Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、力強い・インパクト
• キーワード: ビビッドイエロー・手描きキャラクター・ボーダー柄・丸い円カード・語りかけ口調
• 地の質感: 平塗りのベタ色に、線画イラストと料理写真を重ねる。グラデーションや影はほぼ使わない。
• 形: 大きな正円、波形のヘッダー下端、太い黄枠の四角いカード、ギザギザの吹き出し
• 温度感: 暖色の黄と赤が主役で、青のボーダーが清涼感を足す明るく温かい印象

Colors

• 地色は黄色を基本にする。こだわり紹介だけを白地と青白ボーダーに切り替えて変化をつける。
• 赤は新商品のバナーと枠だけに使う。中に黄色の文字を置いて最も目立たせる。
• 文字は純黒を避けて墨色にする。円の中の見出しはオリーブ茶にする。
• 見出しの下線は黄色の太いラインで引く。
• キャラクターは青緑・クリーム・黄の3色だけで塗り、線画は墨色にする。
• 番号バッジは黄緑の円にする。
• circle-feature は文字 #92814F × 背景 #FFFBD5 のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#817246、4.52:1）を使う。
• promo-red-panel は文字 #EDE834 × 背景 #E50112 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC0110、4.52:1）を使う。

Typography

• 全体を丸ゴシックで統一し、親しみのある語りかけ口調に合わせる。
• 本文は中央揃えにして短く改行し、行間は2.0前後にする。
• カード内の長い本文だけは左揃えにする。
• 小見出しは左右を斜線で挟んで装飾する。
• 商品名だけは太い斜体のディスプレイ書体で、ロゴのように見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。レシピ一覧のみ3列のグリッドにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 特長は画面幅の約90%の正円に入れ、縦に積み重ねる。
• 円どうしの間は約30px空ける。
• こだわりカードは太い黄枠で囲み、左上に番号バッジをはみ出させて置く。
• ボーダー柄は画面幅いっぱいに敷き、その上にカードを重ねる。
• キャラクターのイラストはセクションの境目に大きく置く。

Elevation & Depth

• 影は使わず、平面の色と枠だけで階層を表す。
• 面の重なりは、地色の切り替えと太い枠で表現する。
• トップへ戻るボタンだけ、控えめな線で示す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸12px前後の四角に切る。工場写真はカード幅いっぱいの角丸長方形に切る。
• セクション境界: ヘッダー下は波線にする。それ以外は直線で地色を切り替える。
• 特長は正円の中に入れる。
• 吹き出しはギザギザの爆発形にする。
• カードの枠は角丸なしの太線にする。
• ボタンは白地に墨色の線を引いたピル型にする。

Components

• 写真スライダーのファーストビュー（hero-slider）: 料理写真を全幅で見せ、下にドットを置く。右下に赤い新商品バナーを重ねる。
• 特長の円カード（circle-feature）: クリーム色の大きな正円に、見出し・黄色の下線・本文を入れる。
• 斜線で挟んだ小見出し（slash-label）: 大見出しの上に置くリード文。左右に短い斜線を付ける。
• 番号付きのこだわりカード（numbered-card）: 黄色の太枠のカード。左上に黄緑の円で2桁の番号を入れ、写真と本文を並べる。
• 番号バッジ（number-badge）: 黄緑の正円に、墨色の2桁数字を入れる。
• プロフィールボタン（button-outline）: 白地に墨色の枠線を引いたピル型ボタン。英字ラベルと右向きの矢印を入れる。
• 新商品の赤枠パネル（promo-red-panel）: 赤い枠に写真とキャラクターを載せ、黄色の太い斜体で商品名を入れる。ギザギザの吹き出しを添える。
• レシピカード（recipe-card）: 角丸の料理写真の下に、2行のレシピ名を置く。
• ギザギザ吹き出し（burst-bubble）: 白または黄の爆発形の吹き出しに、短い一言を入れる。

Do's and Don'ts

Do - 地色は鮮やかな黄色を広い面で使う。 - 手描きの線画キャラクターを各セクションに登場させる。 - 本文は語りかける口調にし、中央揃えで短く改行する。 - こだわりは番号付きのカードで順番に見せる。 - 新商品は赤地に黄の文字で、強いコントラストにする。

Don't - 細い明朝体や高級感のある黒地は使わない。 - 影やグラデーションで立体感を出さない。 - 写真を角丸なしで小さく詰め込まない。 - 黄・赤・青以外の強い色を増やさない。 - 本文を純黒の小さい文字で詰めて組まない。

Page Structure

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

1. ヘッダー（ブランドの認知）: 黄色地にキャラクター入りのロゴとハンバーガーメニューを置き、下端を波形にする。
2. ファーストビュー（シズル感で惹きつける）: 全幅の料理写真のスライダーにする。短い問いかけのコピーと、赤い新商品バナーを重ねる。
3. 素材の紹介（素材を知ってもらう）: 斜線で挟んだ小見出しの下に、大見出しと中央揃えの本文4行を置く。
4. 特長（魅力を4つ伝える）: クリーム色の正円4つを縦に並べ、それぞれに見出し・下線・本文を入れる。
5. キャラクター紹介（親しみを作る）: 大きなキャラクターのイラスト、ロゴ、ピル型ボタンを置く。
6. こだわり（品質の裏付け）: 白地に導入文を置き、青白ボーダーの上に番号付きの黄枠カードを4枚並べる。
7. 商品パッケージ（店頭での目印を伝える）: 赤地にパッケージ写真とキャラクターを置き、ギザギザの吹き出しを添える。
8. レシピ（食べ方を提案する）: 黄色地に監修者の丸い顔写真、見出し、3列のレシピカードを並べる。
9. 新商品の訴求（新商品への誘導）: 赤枠のパネルに揚げ物の写真と商品名を載せ、レシピ3点を並べる。
10. フッター（企業情報）: 白地に社のロゴとコピーライトを置く。PCではその上に青帯の通販ボタンを置く。

Imagery

• 写真は料理を真上から、または寄りで撮り、彩りよく盛り付ける。
• 工場の写真は作業風景を青みのある色調で撮り、清潔感を出す。
• イラストは墨色の線画を、青緑・クリーム・黄の平塗りで塗る。
• キャラクターは筋肉質な人物がマスクをかぶったコミカルな擬人化にする。
• ギザギザの吹き出し、汗マーク、粒の飛び散りなどの漫画的な効果を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは、4つの特長円を中央のキャラクターの周りに2×2で配置する。
• PCでは、こだわりカードを2列のグリッドにする。
• PCのヘッダーにはグローバルナビとSNSアイコンを横並びで置く。
• PCではレシピを3列で複数行並べ、キャラクターのイラストを余白に置く。
• 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 行書くと起動時に読み込まれる。