DESIGN.md — みかん色×手描きイラストの機能性グミ LP（Warm Citrus Orange Functional Gummy LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、信頼・誠実
• キーワード: みかん色・手描きイラスト・白カード・エビデンスグラフ・あたたかさ
• 地の質感: フラットな塗りに、オレンジのグラデーションと斜めストライプを少し加える。白カードには柔らかい影を付ける
• 形: 大きな角丸カード、ピル型の購入ボタン、吹き出し型の見出しラベル
• 温度感: 暖色。オレンジ・黄・ピンクが主役で、冷えの表現にだけ青を差す

Colors

• 訴求セクションは濃いオレンジとみかん色の地で、交互に暖色を敷く
• 説明と表は白かベージュの地に置き、読みやすさを確保する
• 冷えやプラセボの表現には青だけを使い、暖色との対比を出す
• 強調語はオレンジかマゼンタの太字にする
• 最後の CTA はピンクから黄へのグラデーションの帯にする
• label-tag は文字 #FFFFFF × 背景 #F5772B のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C85109、4.53:1）を使う。
• card-merit は文字 #E5266E × 背景 #FEFFFE のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#E31B67、4.54:1）を使う。

Typography

• 感情に訴えるコピーは手書き風、根拠の説明はゴシックで書き分ける
• 見出しは極太にし、キーワードを色を変えて強調する
• 本文は中央揃えで短く改行する
• 注釈は※番号付きの小さい文字でカードの下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メリットは 2 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは白い角丸カードを地の上に浮かせる
• グラフは 1 枚ずつ独立したカードにし、結論文を下に添える
• セクションのつなぎには下向き矢印や三角の切り欠きを使う
• 成分説明は図と文を小カードに分けてグリッドに並べる

Elevation & Depth

• 白カードには薄くぼかした影（0 4px 12px rgba(0,0,0,.08)）を付ける
• 購入ボタンには濃い影を付けて浮かせる
• 装飾的な影は使わない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 商品とみかんは切り抜きにし、人物は手描き線画で配置する
• セクション境界: 直線で背景色を切り替え、下向きの三角形の切り欠きを入れる
• カードは大きめの角丸にする
• 見出しのラベルは角丸の帯や吹き出しにする
• アイコン画像は円形で切り抜く

Components

• 購入ピルボタン（button-primary）: 白地のピル型。左にカートのアイコン、右に商品の画像と矢印を置く
• グラフ見出しタグ（label-tag）: オレンジ地に白文字の角丸タグ。カードの左上に重ねて置く
• エビデンスカード（card-evidence）: 白い角丸カードに折れ線グラフ・凡例・出典をまとめる
• 試験概要ボックス（box-test）: 青地に白文字で試験の条件を書き、右に円形の写真を添える
• 吹き出し見出し（heading-bubble）: 青い吹き出しにキーワードを入れ、続きをオレンジの太字で書く
• メリットカード（card-merit）: 円形のイラストに、マゼンタの見出しと短い説明を添えたカード
• 金色の No.1 バッジ（badge-no1）: 月桂樹の模様が入った金色の盾形バッジ。注釈番号付き
• 商品情報の表（table-spec）: 白地に罫線で区切った 2 段の表。項目名にはオレンジの丸印を付ける

Do's and Don'ts

Do - 暖色の地と白カードを交互に重ね、リズムを作る - グラフには必ず出典と注釈を添える - 人物は手描きの線画で、季節感と困っている感情を描く - 購入ボタンは訴求ブロックの直後と最後に置く

Don't - 寒色を地の色にしない（青はアクセントに限る） - グラフをカードに入れずに地の上へ直接置かない - リアルな写真の人物モデルを多用しない - ボタンを角張った四角にしない

Page Structure

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

1. ファーストビュー（悩みへの共感と商品の提示）: オレンジの山形の背景に、手描きのキャッチ・商品パッケージ・困り顔のイラスト・No.1 バッジを置く
2. 悩みの提起（冷えの原因を解説する）: 白い角丸カードに吹き出し見出し、人物のイラスト、手のひらの比較図を並べる
3. ブリッジ（解決策への導入）: 円形の人物アイコンとオレンジの太字の 2 行コピー
4. 成分の紹介（機能性成分を訴求する）: オレンジ地に白抜きの見出し帯と、青い試験概要ボックス
5. エビデンス（効果をデータで示す）: 白いグラフカード 2 枚を矢印でつなぎ、それぞれに結論の太字を添える
6. 成分の解説（成分の正体を説明する）: 白い大カードに、構造式・断面図・比較写真・説明の小カードを 2 列で並べる
7. 商品の訴求と CTA（購入を促す）: 濃いオレンジ地に手書きのコピー、商品、バッジを置き、白いピルボタンを添える
8. メリット（続けやすさを伝える）: ピンクの枠のカード内に、円形イラストのメリットを 2×2 で並べる
9. 商品情報（詳細の表示）: 白地に 2 列の表で成分と栄養を表示する
10. クロージング CTA（最後の後押し）: ピンクから黄へのストライプのグラデーションに、人物イラストと手書きのコピー、ボタンを置く
11. フッター（SNS と関連サイトへの導線）: 円形の SNS アイコンと、角丸の枠で囲んだロゴのバナーを 3 つ並べる

Imagery

• 人物は太めの黒い線の手描きイラストに、淡い彩色を付ける
• みかんは切り口が見えるシズル感のある切り抜き写真にする
• グラフは折れ線で、オレンジ（摂取群）と青（比較群）の 2 本にする
• 手のイラストで温かさは赤み、冷えは青で表す
• 地に大きな手の線画を薄く敷いて装飾にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約 80% 幅に本文を置き、左右に背景色を延ばす
• SP ではメリットのグリッドを 1〜2 列にし、成分の小カードは縦に積む
• FV のキャッチは SP で上に置き、イラストは下に重ねる
• 購入ボタンは SP で幅 90% のピル型にする

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