DESIGN.md — 生成り地と野菜写真の食品ブランドLP（Fresh Vegetable Natural Food Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、シンプル・ミニマル、清潔・爽やか、やさしい・柔らかい
• キーワード: 切り抜き野菜・生成り・余白多め・金茶の欧文・白カード・写真バナー
• 地の質感: フラットな単色の面に、影付きの切り抜き食材写真を重ねる。紙のような生成りの質感。
• 形: 角丸の小さな白カード、細線のピル型ボタン、角丸 sm の写真バナー
• 温度感: 暖かめのニュートラル（白・ベージュ・金茶）

Colors

• 地は白・生成り・淡グレーをセクションごとに切り替え、境界は直線にする
• 色は野菜写真と商品パッケージで足し、UI 側はほぼ無彩色にする
• 金茶は欧文サブ見出しと飾りラベルにだけ使う
• 赤茶はブランドの差し色に留め、大きな面には敷かない
• 写真バナーは暗く落として白文字を載せる
• 原色のベタ塗りボタンは使わない
• ribbon-label は文字 #A99D6C × 背景 #FDFEFE のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#80764B、4.51:1）を使う。

Typography

• 見出しは字間を広めに取り、中央揃えにする
• 日本語見出しの直下に、小さな金茶の欧文セリフを必ず添える
• 本文は短い行で改行し、行間は広めに取る
• 文字サイズの差は控えめにし、主役は写真に譲る
• 太字はラベルと問いかけ文に限る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品画像は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは中央揃えで、見出し→説明→ボタンの順に組む
• 写真バナーは左右 24px の余白を取った全幅にする
• 紹介は白カードに入れ、生成り地の上に浮かせる
• 装飾の野菜は画面端からはみ出すように置く
• セクション内の上下余白は 60〜80px

Elevation & Depth

• 写真バナーには下方向に柔らかい影（0 3px 6px rgba(0,0,0,.3)）
• 白カードは影なしで、地色の差だけで浮かせる
• 切り抜き食材と商品パッケージには薄いドロップシャドウ

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 食材・商品は背景を抜いた切り抜き。バナー写真は角丸の横長矩形でトリミング
• セクション境界: 直線で地色を切り替える
• 主ボタンは白地に細い黒枠のピル型で、右端に細い矢印を置く
• 写真バナーは角丸 6px 程度
• カードの角丸は 10px
• リボン型ラベルの上に放射線の飾りを付ける

Components

• 線のピル型ボタン（button-outline-pill）: 白地に1px の黒枠。中央に太字ラベル、右に細い横矢印
• 写真バナーリンク（banner-photo-link）: 料理・野菜の写真に暗いオーバーレイを掛け、白文字ラベルと右矢印を載せる。影付き
• 和欧2段見出し（section-heading）: 黒の日本語見出しの下に、金茶の小さな欧文セリフを置く
• リボン型キャッチラベル（ribbon-label）: 金茶の細線で囲んだリボン形。上に放射状の短線を付け、見出しの上に置く
• 紹介カード（intro-card）: 白いカードに、ロゴ・紹介文・商品グリッド・ボタンを縦に並べる
• 円形メニューボタン（menu-button）: 右上に固定する白い円。三本線と小さな英字ラベル入り

Do's and Don'ts

Do - 新鮮な野菜の切り抜きを画面端に散らし、はみ出させる - 見出しには和欧2段の見出しを使う - セクションごとに白と生成りを交互に敷く - 余白を広く取り、文は短く中央揃えにする - 遷移先へのリンクは写真バナーにする

Don't - 原色ベタ塗りの大きなボタンを使わない - 黒や濃色の全面背景セクションを作らない - 装飾の野菜を本文に重ねて読みにくくしない - ゴシック以外の和文書体を混ぜない - 見出しに派手なグラデーションや縁取りを付けない

Page Structure

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

1. ファーストビュー（ブランドの鮮度と商品の世界観を一目で伝える）: 淡グレー地にロゴを中央配置。周りに切り抜き野菜を散らし、下に商品パッケージを横並びで置く
2. ブランド紹介（ブランドの考え方と商品ラインナップを示す）: クリーム地に和欧2段見出し。白カードの中にロゴ・2〜3行の説明文・3列の商品グリッド・ピル型ボタンを入れる
3. 歴史（長く続いてきた実績で信頼を伝える）: 白地に見出しと短い説明文を置き、料理写真のバナーで詳細ページへ誘導する
4. 診断コンテンツ（自分に合う商品を見つける体験へ誘導する）: 生成り地にリボン型ラベル・見出し・問いかけ文を置き、野菜写真のバナーをCTAにする
5. フッター（サイト内の回遊と企業情報を載せる）: 淡いピンク寄りの地に小さな文字のリンクを並べる

Imagery

• トマト・パプリカ・かぼちゃ・なすなどの野菜を真上から撮り、背景を抜いて影を付ける
• 野菜は画面の四隅や端に大きく置き、一部を見切れさせる
• 商品パッケージは正面から切り抜き、小さな影を付けて並べる
• バナー用写真はギンガムチェックの布や木の天板を使った温かい料理写真にする
• フチを白く透かした淡いフェード表現を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 55〜65% に絞り、中央に寄せる
• PC のファーストビューは、ロゴの下に商品5点を1行で並べる
• PC は紹介カード内の商品を4列にする
• 写真バナーは PC で幅を約 55% に縮め、中央に置く
• 装飾の野菜は 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 行書くと起動時に読み込まれる。