DESIGN.md — 白×ティールのスタイリッシュな電子デバイスLP（Teal Accent Stylish Lifestyle Device LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: クール・先進的、情報量多め・訴求型、清潔・爽やか、力強い・インパクト
• キーワード: ティール差し色・欧文の透かし文字・円形の切り抜き・黒帯ラベル・数字で実績訴求・誌面風レイアウト
• 地の質感: フラットな白・グレーの面に写真を大きく敷く。装飾は線画のアウトライン文字と幾何学の円だけに絞る
• 形: 正円・半円・リング・ピル型を多用し、写真カードは片側だけ大きく丸める
• 温度感: 基本は寒色寄りでクール。キャンペーン部分だけ赤と黄で温度を上げる

Colors

• 地は白とライトグレーを交互に使い、セクションの切り替えを示す
• ティールは数字・ラベル・リング・ボタンなど要所だけに使う
• キャンペーンは赤枠＋水色地＋黄色の強調でまとめ、ページ内で浮かせる
• 悩みのセクションは暗い紺グレーの地に写真を重ね、トーンを落とす
• 商品バリエーションは各色の円をアクセントにし、色名の見出しもその色にする
• 本文は純黒を避け、濃紺で書く
• button-primary は文字 #FCFECD × 背景 #01B4AB のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#01817B、4.56:1）を使う。
• campaign-box は文字 #243247 × 背景 #D94624 のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E57B62、4.53:1）を使う。

Typography

• 和文の見出しは字間を0.1em前後広げ、誌面のような空気を出す
• セクションごとに巨大な欧文の線画文字を画面からはみ出させて敷く
• 数字は欧文書体で特大にし、単位は和文で小さく添える
• 悩みの短文は縦書きにし、黒帯の上に白文字で置く
• 強調語はティールまたは黄色のマーカーで色を変える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特徴やシーンは写真と文字を左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真や円形の装飾は画面端まで裁ち落としにして余白を崩す
• 見出しの上には英字の小ラベルを添える
• 数値訴求は中央揃えで大きく見せる
• キャンペーン枠は同じ内容をページ内で2回以上繰り返す
• 比較表や計算UIは白い面の上に罫線で組む

Elevation & Depth

• 影はほぼ使わず、フラットな面と線で構成する
• 主CTAだけは軽い影を付けて浮かせる
• 写真カードは影を付けずに角丸と重なりで奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 正円・半円・片側だけ大きく丸めた角丸に切り抜く
• セクション境界: 直線で区切る。透かし文字がセクションの境界をまたぐ
• タグとボタンは細い線のピル型にする
• 円形のリングで進捗やパーセントを表す
• フレーバーなどの選択肢は2つの円を並べて見せる

Components

• クーポンCTA（button-primary）: ティールのピル型ボタン。右端に回転テキスト付きの白い円形の再生アイコンを置く
• 線枠ボタン（button-outline）: 白地に紺の線のピル型ボタン。右端に矢印の円を置く
• ハッシュタグ・特徴タグ（tag-pill）: 細い枠線の小さなピル型タグ。横に3つ並べる
• 黒帯ラベル（label-black）: 黒地に白文字の帯。縦書き・横書きの両方で使う
• 特典ボックス（campaign-box）: 赤枠の中の白い角丸カード。番号付きの3特典をティール系の帯で並べる
• パーセントのリング（stat-ring）: ティールの円弧の中に大きな%数字を置く。写真入りのピル型カードと組み合わせる
• FAQアコーディオン（faq-item）: グレーの地に白い角丸の行を並べる。ティールのQと+アイコンを付ける
• インタビューカード（interview-card）: 写真と縦書きの帯コピーを組み、下にQ&Aを色付きの角丸ブロックで置く
• 英字番号ラベル（label-reason）: 細い枠線のピル型の中に、REASON-01のような英字の連番を入れる

Do's and Don'ts

Do - 見出しごとに大きな欧文の透かし文字を薄い線で入れる - ティールは要所だけに絞って使う - 実績は特大の数字と月桂樹の装飾で見せる - 写真は円や片側だけの角丸で切り抜く - CTAは特典ボックスとセットで繰り返し置く

Don't - 本文を純黒にしない - ティールを広い面に塗らない - 影やグラデーションを多用しない - 丸ゴシックで可愛くしすぎない - 赤と黄色をキャンペーン以外で使わない

Page Structure

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

1. ファーストビュー（実績と商品の印象を一度に伝える）: 最上部に実績の帯、人物の大写真、ランキングバッジ、ティールの大きなロゴ風コピー、特徴タグを並べる
2. キャンペーン（特典で行動を促す）: 水色地のバナーの下に赤枠の3大特典ボックスとCTAを置く
3. 商品紹介（特徴を要約する）: ハッシュタグと円形写真のカルーセルで見せる
4. 選ばれる理由（3つの強みを示す）: 色付きの大円の上に商品写真、番号ラベル、大きな見出しを重ねる
5. お客様の声（共感を得る）: 写真のタイルに縦書きの吹き出しコピーを載せる
6. 実績（信頼を作る）: ベージュ地に特大の数字とランキングロゴを置き、暗い写真地に大きな%を載せる
7. メディア・販売店（認知度を示す）: CM動画のカードと店舗写真を並べ、店舗数を特大の数字で見せる
8. 節約シミュレーション（コスト面のメリットを示す）: ティールの円形選択肢を並べ、線枠の結果ボタンを置く
9. 特長・機能（機構の良さを説明する）: パーツの分解図に引き出し線で注記を付け、大きな数値を添える
10. バリエーション（選ぶ楽しさを伝える）: 色ごとに2つの円写真を並べ、その色の英字見出しを付ける
11. 悩みの提起（利用シーンへの共感を得る）: 暗い地に番号付きの写真と縦書きの黒帯コピーを重ねる
12. 専門家コメント・解説（根拠を示す）: 医師の写真カードと、図解した2枚組のテクニックカードを置く
13. 利用者インタビュー（具体的な使用体験を見せる）: 色の違う角丸ブロックでQ&Aを組む
14. よくある質問・安全性（不安を解消する）: 白い角丸のアコーディオンと、3枚の写真カードを並べる

Imagery

• 人物は落ち着いた室内光で撮り、商品を自然に手に持たせる
• 商品の単体写真は白背景の切り抜きにする
• 食材などのフレーバー写真は寄りで撮り、円形に切り抜く
• 悩みのシーンは暗く青みのあるトーンにする
• 装飾は幾何学の円・リングと欧文の線画文字に限る
• 解説図は黒い線画のシンプルなイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約375pxの縦長カラムを置き、SPと同じ構成で見せる
• PCのカラム外は商品とフルーツの写真を敷いた青グレーの背景にする
• SPでは透かし文字を画面からはみ出させる
• PCに広げる場合も、カラム幅は480px以内に保つ

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