DESIGN.md — 紺×銀×金の業務用美容機器 LP（Navy Silver Professional Beauty Equipment BtoB LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、クール・先進的
• キーワード: 濃紺・シルバーグラデーション・明朝見出し・金の強調・比較表・BtoB導入訴求
• 地の質感: 白〜薄グレーの斜め光沢ストライプ地と、ベタ塗りの濃紺帯。部分的に金色の光のボケ背景
• 形: 角の小さい四角カード、下向き三角の区切り、円形バッジ
• 温度感: 寒色中心。金と赤で一部だけ温かさを足す

Colors

• 濃紺の帯と白銀ストライプ地を交互に並べ、セクションの切り替えをはっきり見せる
• 濃紺地の見出しは白文字。キーワードだけ金色にする
• 明るい地の見出しは紺黒文字。キーワードだけ赤にする
• 赤はヘッダー CTA と強調語だけに使う。広い面には使わない
• 比較表は自社列だけ濃紺に金文字にして目立たせる
• 金は No.1 バッジ・月桂樹・価格などの権威づけに使う

Typography

• 大見出しは明朝体で 2 行にし、中央揃えにする
• 強調語は色（赤か金）で示し、太さはそのまま
• 数字（価格・倍率）は本文の 2〜3 倍に大きくする
• 本文はゴシック体で短く区切り、チェックマーク付きの箇条書きにする
• 注釈は小さいグレー文字で、要素の右下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列まで
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは中央の狭い幅にまとめ、外側は背景地を見せる
• 特長は薄グレーのパネルに入れ、パネル上端に濃紺の細い帯ラベルを付ける
• 理由カードは番号を円で付け、3 個＋2 個で並べる
• セクションの終わりに下向き三角を置いて次へつなぐ
• 問い合わせ用の CTA バナーをページ内に 3 回置く

Elevation & Depth

• カードには弱い影（0 2px 6px rgba(0,0,0,.12)）を付ける
• No.1 バッジは金色のグラデーションで立体的に見せる
• CTA バナーは濃紺〜紫のグラデーション地にして浮かせる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角に切り抜き、角丸なし。部品だけ円形に抜く
• セクション境界: 直線で色を切り替え、下向きの三角矢印を足す
• ボタンは角の小さい長方形にする
• 円は番号・特長アイコン・ハンドピースの紹介だけに使う
• 見出し帯は斜めに切った台形にしてもよい

Components

• ヘッダー問い合わせボタン（header-cta）: 右上に置く深紅の長方形ボタン。横に電話番号を並べる
• 問い合わせ CTA バナー（cta-banner）: 濃紺グラデーション地に人物の写真。白枠のボタンと電話番号の箱を横に並べる
• 他社比較表（comparison-table）: 自社列を濃紺地＋金文字に。他社列は白地に○×で示す
• 特長パネル（feature-panel）: 薄グレーのパネル。上端に濃紺の帯ラベル、明朝の見出し、写真や図を入れる
• 番号付き理由カード（numbered-card）: 上部に紺の円番号と濃紺の見出し帯。下は白地にアイコンと短い説明
• No.1 月桂樹バッジ（award-badge）: 金の月桂樹で囲んだ円形バッジを 3 つ横に並べ、下に出典の注釈を付ける
• 濃紺の帯ラベル（label-bar）: パネル上端に置く細い濃紺の帯。白い小さな文字を入れる
• 特典カード（benefit-card）: 写真の左下に「特典 0X」の四角ラベル。下の白地に明朝の説明と赤の強調
• 問い合わせフォーム（contact-form）: 白地にラベルを左、入力欄を右に置く 2 列の細い表組み

Do's and Don'ts

Do - 濃紺と白銀の地を交互に並べ、メリハリを保つ - 見出しは明朝体にし、強調語だけ赤か金にする - 数値（価格・倍率・費用）は大きくし、根拠の注釈を添える - 比較表・実績・監修者・特典を並べて信頼を積み上げる - CTA バナーを数セクションごとに繰り返す

Don't - パステル色やポップな丸ゴシックを使わない - ボタンをピル型や大きな角丸にしない - 赤を背景の広い面に使わない - 装飾のない真っ白な地を長く続けない（ストライプ地にする） - 注釈なしで No.1 などの表現を載せない

Page Structure

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

1. ファーストビュー（機器名と主な利点を伝える）: 白銀の地に欧文セリフの商品名。キーワードタグ 3 つと円形バッジ 3 つ。右に機器の写真。右下に濃紺の斜め面
2. キャンペーン・補助金の案内（導入のハードルを下げる）: 濃紺地の上に、クリーム色や青の訴求バナーを縦に積む
3. 実績・機能の訴求（機能の多さと評価を示す）: 金の月桂樹の見出し、動画、No.1 バッジ 3 つ、2 列の小カード
4. 価格訴求と他社比較表（コストの優位性を示す）: 人物の写真と大きな数字のバナー。下に自社列が濃紺の比較表
5. 特長の詳細（部品と機能を具体的に説明する）: ストライプ地に、帯ラベル付きの薄グレーのパネルを縦に並べる
6. 独自方式の説明（技術の差を図で見せる）: 濃紺地に白と金の見出し。銀色の円を 3 つ重ねた図
7. ビフォーアフター（効果を示す）: 濃紺の台形見出し、チェック付きの箇条書き、矢印でつないだ写真 3 枚
8. ラインナップ・CTA（機種を選ばせて問い合わせにつなぐ）: 2 列の機種カード。続けて濃紺の CTA バナー
9. 選ばれる理由（利点をまとめる）: 番号付きカードを 3 個＋2 個で並べる
10. 監修・研究（専門性の権威づけ）: 濃紺帯の見出し、医師の写真とプロフィール、研究の写真、講座の紹介
11. 導入実績と中古販売（安心感と価格の根拠）: 写真をコラージュし、番号付きの理由 3 つと金額の図解を置く
12. 開業支援・研修（導入後のサポートを示す）: 2 列カード、支援物を写真グリッドで、研修の写真とカレンダー表
13. デモ体験の特典（来社を促す）: 金のボケ背景に、特典番号付きの写真カードを 2×2 で並べる
14. CTA・問い合わせフォーム（問い合わせを獲得する）: CTA バナーの下に、白地の 2 列のフォーム

Imagery

• 機器は白い筐体を明るく抜き出し、青い光を強調した物撮りにする
• スーツ姿の男性や白衣の女性が指さす切り抜き写真を、見出しの横に添える
• サロンの施術・研修のリアルな現場写真を四角に並べる
• 背景は白銀の斜めの光沢ストライプ、または金色のボケ
• アイコンは紺の線画で、シンプルに描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 540px 幅のコンテンツで、両側に背景地を見せる
• SP は幅いっぱいの 1 カラムにする。3 列のカードは 1〜2 列に落とす
• 比較表は SP で横スクロールにするか、自社列を固定する
• CTA バナーは 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 行書くと起動時に読み込まれる。