DESIGN.md — ライトグレー×漆黒の高級美容家電 LP（Monochrome Premium Beauty Appliance LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、シンプル・ミニマル、信頼・誠実
• キーワード: モノトーン・黒とグレーの交互配置・全幅の人物写真・ツヤ髪・細い線のボタン・広い余白
• 地の質感: フラットな単色の面。写真の暗い部分がそのままダーク地へ溶け込む。
• 形: 四角い面と細い枠線が基本。補助ボタンだけピル型にする。
• 温度感: 冷たいニュートラル寄りで、写真の肌色がわずかに温かみを足す。

Colors

• 地はライトグレーとほぼ黒（#1A1B1B〜#101010）の 2 段で交互に切り替える。
• 人物写真のセクションは暗灰地にする。写真の下端を地の色へフェードさせる。
• 主 CTA はチャコールの面に白文字。有彩色の CTA は使わない。
• 有彩色は新機能を示す小さな赤ラベルと、技術画像の青い光だけに限る。
• 価格や特典はライトグレー地の上の白カードにまとめる。

Typography

• 見出しは中央揃えにし、2〜3 行に短く改行する。
• 写真上の見出しは白抜きにし、写真の下部へ重ねる。
• 本文は細めのゴシックで、行間を広く取る。
• ※注釈は小さな灰色の文字で必ず添える。
• メニュー名などのラベルには英字の大文字を使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群は 2 列、PC では 4 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 人物写真は全幅で敷き、文字は下部中央に置く。
• テキストブロックは中央揃えにする。
• 機能やお客様の声は均等な列のカードで並べる。
• 各セクションの末尾に「詳しく見る」のアウトラインボタンを置く。

Elevation & Depth

• 影は基本的に使わず、フラットに保つ。
• カードは地との明度差だけで分ける。
• 写真の下端はグラデーションで地に溶かす。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 四角い写真を角丸なしで使う。人物は 1:1 または横長に切り抜く。
• セクション境界: 直線。地の色を切り替えるだけで区切る。
• 写真上の補助ボタンは白いピル型にする。
• 一覧へ誘導するボタンは角張った細枠の長方形にする。
• カードは角丸なしか、わずかに丸める程度に留める。

Components

• 購入ボタン（button-primary）: 白カード内に置く横長のチャコールボタン
• 詳しく見るボタン（button-outline）: 灰色の細枠に黒文字。セクション末尾に置く
• 写真上のピルボタン（button-pill-white）: 写真の上に置く、白地に黒文字の小さなピルボタン
• 価格カード（price-card）: 白い面に価格と購入ボタンを中央揃えで載せる
• 全幅人物写真帯（photo-hero-band）: 暗い背景の人物写真の下部に、白抜きの見出しを重ねる
• メニューカード（menu-card）: 正方形の人物写真の下に、英字ラベルと短い説明を置く
• 誘導バナー（dark-banner）: チャコールの帯にアイコンと白い見出しを並べ、右端に白いピルボタンを置く
• NEW ラベル（new-label）: 機能名の上に添える赤い英字

Do's and Don'ts

Do - 地をライトグレーとほぼ黒で交互に切り替え、リズムを作る。 - 髪のツヤが際立つ人物写真を大きく使う。 - ボタンはモノトーンに統一する。 - ※注釈を丁寧に添え、信頼感を出す。 - 余白を広く取り、要素数を絞る。

Don't - 鮮やかな色を CTA や見出しに使わない。 - 丸ゴシックやポップな装飾を入れない。 - 強い影や立体的なボタンを使わない。 - 文字を詰め込まない。

Page Structure

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

1. ファーストビュー（商品と価格を提示する）: ライトグレー地の中央に、商品の切り抜き、受賞マーク、ロゴ、価格を縦に並べる。
2. 購入カード（すぐに購入へ導く）: 白カードに価格とチャコールの購入ボタンを置く。特典はアイコン 2 つで示す。
3. 主要効果ビジュアル（一番の価値を印象づける）: 全幅の後ろ姿の髪の写真に、白い見出しとピルボタンを重ねる。
4. 技術解説（仕組みを説明する）: ダーク地に青く光る技術映像と断面図を置き、白文字の説明を添える。
5. 比較実験（効果を実証する）: 左にテキスト、右に動画サムネイルの 2 カラムで組む。
6. パーソナルメニュー（悩みごとの使い分けを示す）: 人物 4 人の写真帯の後に、成分図と 4 列のメニューカードを並べる。
7. 速乾性能（機能の訴求）: 人物写真の帯の後に、風の流れを示す図と赤い NEW ラベルを置く。
8. その他の機能（付加価値を一覧で見せる）: 4 列のカードに写真と短い説明、リンクを載せる。
9. お客様の声（共感と信頼を得る）: 3 列のカードに人物写真、引用文、肩書きを載せる。
10. 受賞・実績（権威づけ）: No.1 の表記とバッジのロゴを横に並べる。
11. 比較表・誘導バナー（検討を補助する）: アコーディオンの比較表と、横長のイラストバナーを置く。
12. 商品まとめ CTA（最終的な購入を促す）: 左に商品画像、右に価格と特長リストを置く。
13. 注釈・関連商品（補足と回遊を促す）: 小さな注釈リストの後に、4 列の商品カードと枠線ボタンを置く。

Imagery

• 暗い灰色の背景の前で、ノースリーブの女性がツヤのある黒髪を見せるスタジオ写真にする。
• 横顔や後ろ姿で、髪の流れやなびきを強調する。
• 技術は青く光る粒子や断面の CG で表現する。
• 商品は白背景の切り抜きで、斜め前から撮る。
• アイコンは細い線画のモノトーンにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像から推定すると、PC のコンテンツ幅は約 860px で中央に寄せている。SP では余白を 16px 取る。
• PC で 4 列のカードは、SP では 2 列にする。3 列のカードは 1 列にする。
• 左右 2 カラムの比較実験は、SP では縦に積む。
• 全幅の写真は SP では縦長に切り抜き、顔と髪を残す。
• ボタンは SP では横幅いっぱい近くまで広げる。

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