DESIGN.md — 生成り×紺の手描き風機能性食品 LP（Warm Beige Navy Functional Food LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、ナチュラル
• キーワード: 生成り地・紺の見出し・手描き草花模様・キャラクター・図解・下線見出し
• 地の質感: 淡いピーチ・クリーム地に、点描の実と曲線の茎を散らした手描き風の壁紙模様
• 形: 角丸の少ない四角い帯ボタン。円形バッジと円形写真。ピル型のラベル
• 温度感: 暖色の地に寒色の紺を合わせた、温かくて誠実な印象

Colors

• 地は生成りとピーチの模様地を交互に置き、セクションを区切る
• 見出し・ボタン・番号は紺 1 色にまとめる
• 強調語は赤文字＋黄色マーカー、または紺地白抜きの帯で示す
• 後半の解説は紺地の上に白カードを重ね、図解はローズ・黄緑・青で色分けする
• CTA はオレンジ系を使わず紺で統一し、誠実さを保つ
• label-balloon は文字 #F3FEFF × 背景 #EB6E80 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E1243F、4.51:1）を使う。

Typography

• 見出しは字間を広めにとり、下に細い紺線を引く
• 数字は大きく、単位と注釈番号は小さく添える
• 本文も紺系の色にし、真っ黒は使わない
• 強調語だけ赤やローズに変え、文の残りは紺のままにする
• 注釈は小さく、本文ブロックのすぐ下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品並びや店舗ボタンだけ 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出し→図・写真→本文→帯ボタンの順に中央揃えで積む
• 機能説明は白カードを縦に並べ、上辺に紺線を引く
• 仕組みセクションは 1 枚の白い大カードの中に図解を縦に続け、間に下向き矢印を挟む
• FAQ は細線で区切ったリストにし、右端に＋を置く
• セクション同士は背景色の切り替えで区切る

Elevation & Depth

• 影はほぼ使わず、面の色の差で階層を作る
• 白カードは影なしで、上辺の紺ラインで締める
• 図解の吹き出し枠にだけ薄い影を付けてもよい

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: シーン写真は円形に切り抜く。FV と区切りの写真は全幅の矩形
• セクション境界: 直線で背景色を切り替える
• 帯ボタンは角丸なし（2px 以内）の横長矩形
• 機能バッジは紺の円形で白抜き文字
• ラベルはピル型、下に三角のしっぽを付けて吹き出しにする
• 番号の上の小ラベルは角丸の紺タグ

Components

• 紺の帯ボタン（button-primary）: 横長の紺の矩形に白文字。右端に＋や矢印を付け、詳細を開く／遷移する
• 白抜き販売先ボタン（button-outline）: 白地に細い紺枠の矩形。販売店のロゴを中央に置き、3 つ並べる
• 下線付き見出し（heading-underline）: 中央揃えの紺文字の下に、文字幅いっぱいの細い紺線を引く
• 円形機能バッジ（badge-circle）: 紺の大きな円に白文字。強調語は白地の帯に赤文字で抜く
• 番号見出し（number-tag）: 小さい紺タグの下に大きな欧文の番号 01・02 を置く
• ピル型吹き出しラベル（label-balloon）: ローズや赤のピル型に白文字。下に三角を付け、図解の問いや区分名に使う
• 機能説明カード（card-feature）: 白いカードの上辺に紺の太線を引く。番号・見出し・イラスト・箇条書き・帯ボタンを順に並べる
• FAQ 行（faq-row）: 紺の Q を頭に付けた質問を一行で表示。紺の細線で区切り、右端に＋を置く
• 結果矢印（arrow-down）: 紺の太い下向き矢印。中に小さな白文字を入れ、図解の因果をつなぐ

Do's and Don'ts

Do - 地は淡い暖色、要素は紺の 2 系統でまとめる - 淡い地には手描きの草花ドットを薄く散らす - キャラクターのイラストを見出しの横や端に添えて、親しみを出す - 機能や数値の表現には注釈番号を付け、注釈をすぐ下に置く - 仕組みはかわいいイラスト図解と矢印でステップごとに見せる

Don't - 黒やビビッドなオレンジを CTA に使わない - ボタンを丸く膨らんだピル型や強い影付きにしない - 装飾模様を濃くして文字が読みにくくならないようにする - 写真を角丸の小カードで細かく並べない（円形か全幅にする） - 強調色を一文中で 3 色以上混ぜない

Page Structure

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

1. ファーストビュー（商品と使い方を一目で伝える）: 全幅の食卓写真。左上に紺の円形ロゴ風バッジ、人物とマスコットのイラストを重ねる
2. 商品紹介（商品名と主要な数値を示す）: 生成り地に下線付きの見出し。紺と白の円形数値バッジとボトル 2 種を並べ、下に注釈
3. 機能の概要（2 つの機能を提示する）: 模様地に紺の円を 2 つ並べ、ピル型ラベルとキャラクターを添える
4. 機能の詳細（機能ごとに根拠を示す）: 上辺に紺線のある白カードを縦に並べる。番号、マーカー付きの見出し、イラスト、帯ボタン
5. 特長（低糖質・植物由来・味を訴求する）: 下線見出し＋円形写真やロゴバッジ＋短い本文を 3 回繰り返す
6. 動画（CM で印象を補強する）: 英字見出しの下に横長の動画埋め込み
7. イメージ写真（使用シーンを見せる）: 全幅の暖色系の食卓写真
8. 購入導線（購入先へ誘導する）: 紺の店舗検索ボタンと枠線の通販ボタンを 3 つ横に並べる
9. 関連商品（ブランドの別商品を紹介する）: 模様地に赤・茶のピル型ラベルと商品写真、紺の帯ボタン
10. よくある質問（不安を解消する）: 細線区切りの Q リストと、もっと見るボタン
11. 作用メカニズム（仕組みを図解で理解させる）: 紺地に白い大カードを置く。ローズの吹き出しラベル、腸や菌のイラスト、下向き矢印でつなぐ
12. 成分紹介（原料の背景を伝える）: 紺地の白カードに、左に写真・右に本文を置く
13. キャラクター紹介（ブランドへの愛着を作る）: 白カードに紺の名前ラベルと説明文を並べ、右に全身イラスト
14. フッター（規約リンクと SNS）: ベージュ地に縦線区切りの小さなリンクとロゴ

Imagery

• 写真は自然光の木の食卓。ヨーグルトや飲み物のある、暖かい朝のシーン
• 人物とマスコット動物は細い線のフラットなイラスト。小花柄の服など、柔らかい色使いにする
• 背景には点描の実・曲線の茎・黄緑の丸を、淡い色で散らした手描き模様を敷く
• 図解はパステル調のかわいいイラストにする。腸はピンク、善玉菌は黄緑、悪玉菌は紺で、キャラクターに表情を付ける
• 原料写真は円形に切り抜くか、四角のまま本文の横に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 900px 前後のコンテンツに、左右へ模様地が広がる
• SP では機能の円バッジ 2 つを縦積みにするか、小さくして横に並べる
• 購入ボタン 3 つは、SP では縦積みか 2 列にする
• 成分紹介の写真＋本文は、SP で写真を上・本文を下に積む
• 図解はカード幅いっぱいに縮小し、文字は 12px 以上を保つ

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