DESIGN.md — 青緑×藤色グラデの上品な美容家電 LP（Misty Teal Lavender Elegant Gadget LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型、やさしい・柔らかい
• キーワード: くすみ青緑・藤色グラデ・明朝見出し・金の月桂樹・細線の飾り・黒製品×白地
• 地の質感: 霧がかかったような淡いグラデーション地と、うっすらしたコンクリート調のグレー。マットで静かな質感
• 形: 角が四角いカードと六角形のバッジ、正円の吹き出し、下向き三角でセクションをつなぐ
• 温度感: やや寒色寄り。金茶色の強調色で温かみを足す

Colors

• 地は白と淡いグレーを交互に使い、セクションを切り替える
• 見出し帯・ラベル・番号の地には青緑を使う
• 大見出しや大きな数字は青緑から藤色へのグラデーション文字にする
• 本文で強調したい語だけを金茶色の太字にする。1段落に2〜3か所まで
• 実績や受賞はベージュゴールドの月桂樹と数字で見せる
• 黒は製品だけに使い、黒い面の背景は作らない
• check-list は文字 #C8962E × 背景 #FFFFFF のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#946F22、4.61:1）を使う。

Typography

• 見出しは明朝で、字間を広めにとる
• 見出しの中の大事な語は大きく、助詞は小さくして大小の差をつける
• 数字は明朝かセリフ体で特大にし、グラデーションをかける
• セクションの上には小さな英字ラベルと短い横線を置く
• 本文はゴシックで細めにし、行間は広くとる
• 強調は金茶色の太字だけで行い、下線は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードや写真は 2 列のグリッドも使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• グレーの帯の中に白いカードを入れて囲む
• 写真とテキストは左右交互に並べる
• セクションの間に細い縦線を置いて余白をつくる
• 特長は六角形のバッジを 2 列に並べる
• 比較表は自社の列を浮き上がらせて目立たせる

Elevation & Depth

• カードはほぼ影なし。地の色の差で区切る
• 比較表の自社列にだけ、淡いグラデーションの枠と柔らかい影をつける
• 六角形のバッジにはごく薄い影をつける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角のない四角が基本。悩み写真は 2×2 のグリッド
• セクション境界: 下向き三角の切り欠きと、細い縦線
• 帯ラベルは角丸なしの長方形にする
• シーン提案は細い線の正円に入れる
• 特長は白い六角形のバッジにする
• 吹き出しは角ばった四角に三角のしっぽをつける

Components

• 見出し帯ラベル（label-band）: 青緑の長方形の上に白い明朝の見出しを載せる
• 六角形の特長バッジ（hex-badge）: 白い六角形の中に、小ラベルと明朝の大きな語を入れる
• 月桂樹の実績表示（laurel-award）: 金色の月桂樹で、順位や販売数の特大数字を挟む
• POINT 番号（point-number）: 小さな英字の POINT と大きな数字を縦に並べ、下に細い線を引く
• スタッフの声カード（voice-card）: 青緑の吹き出し見出しの下に、線画の人物と本文を並べる
• 悩みのチェックリスト（check-list）: 白いカードにチェックボックスと悩みを 4 行並べ、罫線で区切る
• 比較表（comparison-table）: 自社の列を白くして浮かせ、金茶色の太字で値を示す。他社の列はグレーにする
• Q&A（faq-item）: Q と A を丸いアイコンで示す。質問文は青緑の太字にし、グレーの地に置く
• シーンの円（circle-scene）: 細い線の正円に、使う場面を短い言葉で 3 つ並べる

Do's and Don'ts

Do - 見出しは明朝で、字間を広めにする - 大きな数字には青緑から藤色へのグラデーションをかける - セクションの頭に、英字ラベル・細い線・明朝見出しをセットで置く - 白とグレーの帯を交互にして、リズムをつくる - 強調語には金茶色の太字を使う

Don't - 原色の赤や黄色を広い面に使わない - 丸ゴシックやポップな書体を使わない - 黒い面の背景セクションを作らない - ボタンや帯をピル型にしない - 装飾を太い線や濃い影にしない

Page Structure

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

1. ファーストビュー（使う場面と製品の印象を伝える）: モデル写真の上に明朝の大見出しを置き、六角形のバッジ・月桂樹の実績・製品写真を重ねる
2. リニューアル告知（進化した点を示す）: グラデーションの帯に見出しを置き、製品写真の下に六角形のバッジを 5 つ並べる
3. 実績・メディア掲載（信頼を補強する）: 月桂樹で数字を挟み、ランキングの画像と雑誌の表紙を並べる
4. スタッフの声（使った実感を伝える）: 青緑の吹き出し見出しのカードに、線画の人物を添える
5. 悩みの提起（共感をつくる）: コンクリート調のグレー地に、チェックリストと 2×2 の写真、下向き三角を置く
6. 解決の提示（仕組みを伝える）: 光の演出を入れた製品写真と明朝見出し、シーンを入れた円を 3 つ並べる
7. 4つのポイント（特長を一覧にする）: 六角形のバッジを 2×2 に並べ、各ポイントに番号をつけて詳しく説明する
8. 使う部位・モード（使い道の広さを示す）: 体の写真に点で注記を入れ、ラベル付きの写真を 2 列に並べる
9. 比較表（コスパの良さを示す）: 自社の列を浮き上がらせ、金茶色で値を示す
10. ターゲット別の提案（自分ごと化を促す）: 人物写真と文章カードを左右交互に並べる
11. セット内容・ギフト（贈り物にもなることを伝える）: 黒い箱の写真と内容のリスト、円を 3 つ、レッドブラウンの帯を置く
12. 使い方（手軽さを示す）: 青緑の番号帯がついた手順カードを 2 列に並べる
13. よくある質問（不安を解消する）: グレー地に Q と A の丸いアイコンを使って並べる
14. 品質への取り組み（最後のひと押し）: 白いカードに欧文セリフの見出しと証書の画像を置く

Imagery

• 白っぽい明るい室内で、ラフな部屋着の女性がくつろぐ写真
• 黒い製品に白い幾何学模様と、青白い電気の光を重ねる
• 足元や手のアップを、柔らかい自然光で撮る
• 人物は線が少ないグレーの線画イラストにする
• 背景は霧のような青灰から藤色へのグラデーション
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では本文を中央 640〜750px 幅の 1 カラムに収める
• PC では六角形のバッジやモード写真を 3〜4 列に広げる
• 写真とテキストが交互に並ぶ部分は、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 行書くと起動時に読み込まれる。