DESIGN.md — 白地×果実色ビーズ線のフルーツ食品 LP（Bright Fruit Bead-Divider Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル、かわいい
• キーワード: 白地・果実カラー・ビーズ区切り線・大きな角丸写真・中央揃え・余白多め
• 地の質感: フラットな白地。テクスチャは使わず、写真の果実の照りで質感を出す
• 形: 写真とカードは大きな角丸。点と線をつないだビーズ柄の区切り線
• 温度感: 明るく軽い。暖色の果実色と淡い水色の対比

Colors

• 地はほぼ全面を白にし、ラインアップ帯だけ淡い水色を敷く
• 本文と見出しは黒を使わず中〜濃いグレーにする
• 年号・小見出し・リンクはブランドの青 1 色に統一する
• 商品ごとの色（いちご・オレンジ・ブルーベリー等）をカード枠と文字色にそのまま使う
• 区切り線は複数の果実色のビーズを規則的に並べる
• 強い色の面は作らず、色は線・文字・写真で入れる

Typography

• 本文は中央揃えにし、1 行 15〜20 字前後の短い行で改行する
• 本文の行間は 2 倍前後と広く取る
• 見出しは太字グレーで飾りをつけない
• 英字見出しは細めの丸いサンセリフを色付きで使う
• 商品カードの説明文だけ太字で商品色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインアップは横スライダーで 2 枚見せ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションはビーズの区切り線→見出し→本文→写真の順に並べる
• 写真は左右 6% 程度の余白を残して幅いっぱいに置く
• 年表は左に年号、右に小見出しと本文を置き、縦線でつなぐ
• セクションの上下に 60px 以上の余白を取る

Elevation & Depth

• 基本はフラットで影なし
• 商品カードだけ薄い影をつけて浮かせる

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 36px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の写真を角丸 36px 前後で大きく丸める
• セクション境界: 果実色の玉と短い線をつないだビーズ柄の横線
• 写真は四隅を大きく丸め、やわらかい印象にする
• 商品カードは 2px の色線で囲み、角丸 14px にする
• 区切り線は全セクションで同じ柄を繰り返す

Components

• ビーズ区切り線（bead-divider）: 赤・緑・橙・青・紫の玉を細線でつないだ 1 行の装飾線。セクションの境目に置く
• 中央見出し（section-heading）: 装飾なしの太字グレー見出しを中央に置き、下に中央揃えの本文を続ける
• 大角丸写真（rounded-photo）: 利用シーンや果実のアップを角丸の大きい横長写真で見せる
• 年表（timeline）: 左に青い年号、縦の青線、右に青い小見出しとグレー本文
• 比較レーダーチャート（radar-chart）: 六角形のグラフで新旧を濃淡 2 色の線で比べ、凡例を下に置く
• 味別商品カード（product-card）: 商品色の枠で囲み、上に商品名、中央に商品写真、下に商品色の太字説明文
• 英字テキストリンク（link-text）: 青い英字と右向き矢印だけのリンク。下に小さな注記
• スライダーのドット（slider-dots）: 灰色の小さな丸を並べ、表示中の丸だけ青にする

Do's and Don'ts

Do - 白地を広く取り、色は果実の写真と線で入れる - セクションの境目はすべてビーズの区切り線にする - 本文は中央揃えの短い行で、行間を広く取る - 商品ごとに決めた色を枠・名前・説明文で揃える - 写真は大きな角丸で切り抜く

Don't - 黒の太い文字や濃い色の背景帯を使わない - 見出しに帯・下線・アイコンなどの飾りを足さない - 写真を角丸なしの四角で置かない - 派手なボタンや割引バッジで売り込まない - 本文を左揃えの長い行にしない

Page Structure

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

1. ファーストビュー（ロゴと商品の全体を見せる）: 明るい白背景にロゴを置き、木の台に並べた商品写真をスライダーで見せる。左右に丸い矢印ボタン
2. 商品コンセプト（使いやすさを短く伝える）: 中央見出しと中央揃え本文の下に、利用シーン 3 つを縦に分けて並べた大角丸写真
3. 素材のこだわり（果実感を説明する）: 中央見出し、本文、果実のアップ写真を大角丸で
4. 進化の歴史（改良の流れを年表で伝える）: 青い年号と縦線の年表。小見出しは青で本文はグレー
5. 比較データ（改良の効果を見える化する）: 2 行の見出しとレーダーチャート、凡例と注記
6. ラインアップ（味の種類を見せる）: ピンクの英字見出しと本文の下に、淡い水色帯に商品色の枠カードを並べたスライダー
7. レシピ誘導（外部レシピへ送る）: 青い英字リンクと矢印、小さな注記
8. フッター（企業サイト導線と SNS）: グレー線で区切り、ロゴ、文字リンクのグリッド、シェアボタン、SNS の丸アイコン、ページ上部へ戻るボタン

Imagery

• 商品は明るい白背景と薄い木の台の上に並べ、正面からやわらかい光で撮る
• 利用シーンはパン・ヨーグルト・紅茶などを真上やななめ上から撮り、淡いピンク・黄・緑の背景で分ける
• 果実のアップは照りと粒が見えるくらいまで近づけて撮る
• 商品パッケージは雫のような菱形模様の柄にし、味ごとに色を変える
• イラストは使わず、写真と線の装飾だけで作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も白地・中央揃えの 1 カラムで、本文幅は約 70% に絞る
• PC のファーストビューは全商品を横 1 列に並べた広い写真にする
• PC では本文の改行を減らし、1 行を長くする
• PC の年表は本文を左、レーダーチャートを右の 2 カラムに置く
• ラインアップは PC で 3 枚、SP で 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 行書くと起動時に読み込まれる。