DESIGN.md — セージグリーン×ココアブラウンのメンズ脱毛サロンLP（Sage Green & Cocoa Brown Men's Grooming Salon LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: ナチュラル、クール・先進的、シンプル・ミニマル、清潔・爽やか
• キーワード: 極太欧文見出し・セージグリーン・ココアブラウン・生成り地・ピクセル市松装飾・雑誌風レイアウト
• 地の質感: マットでフラット。グラデーションは使わず、面は単色で塗る。方眼グリッドの背景と、正方形を並べた市松装飾で質感を足す
• 形: 角丸のパネルと写真、ピル型ボタン、細い横罫線で区切ったリスト
• 温度感: やや暖かいニュートラル。グリーンで清潔感、ブラウンで落ち着きを出す

Colors

• 地は生成り、グレージュの角丸パネル、セージグリーンの帯の3つを交互に並べて、セクションの切り替わりを見せる
• 欧文の大見出しはグリーンで塗る。グリーン面の上に置くときは白にする
• ボタン・タグ・ハッシュタグは茶ベタに白文字で統一する
• マスタードは縦書きの英字やアイコンなど、点で使う差し色に限る
• 予約・問い合わせの導線は、写真に焦げ茶を重ねたダークパネルで目立たせる
• フッターはグリーンのベタ面に白文字と白い線

Typography

• セクション名は極太の英大文字で大きく置く。和文ラベルは小さく横か下に添える
• 英字見出しは2行に分け、行ごとに左右へずらして配置してもよい
• 背景用の巨大英字は細い線のアウトライン文字にし、本見出しの後ろに敷く
• 和文はすべてゴシック体で、字間を広めに取る
• 番号は 01 形式の欧文太字をグリーンで入れる
• ボタンは英字を主ラベルにし、必要なら下に小さな和文を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。店舗一覧とフッターのリンクは 2 カラム
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約24px
• リストは上下を細い罫線で区切った行で組み、右端に矢印を置く
• キャンペーンと口コミはカルーセルにし、両隣のカードを画面端からはみ出させる
• 主要なグリーン帯・グレージュパネルは画面幅いっぱいか、左右に少し余白を残した角丸パネルにする
• 各セクションの末尾に VIEW MORE ボタンを中央揃えで置く

Elevation & Depth

• 基本はフラットで影を付けない
• 口コミカードとカルーセルの矢印ボタンには、ごく薄い影を付ける
• 奥行きは影ではなく、写真の重ね配置とアウトライン英字で出す

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。大小2枚を斜めにずらして重ねる
• セクション境界: 直線で切り替える。パネルの角は丸め、境目に正方形の市松装飾を置く
• ボタンはすべてピル型にする
• タグは角丸小の茶ベタにする
• FAQの行は角丸大の白カードにし、右端に＋アイコンを置く
• 正方形を3〜4個並べたピクセル装飾を、セクションの角に散らす

Components

• VIEW MOREボタン（button-primary）: 茶ベタのピル型。英字ラベルを左寄せにし、右端に細い矢印を置く
• 幅広リンクボタン（button-wide）: 画面幅いっぱいのピル型。英字の主ラベルの下に小さな和文を添え、右端に矢印を置く
• 英字見出し＋和文ラベル（section-heading）: 極太の英大文字（グリーン）の横に、小さな和文ラベルを添える
• 番号付き罫線リスト（numbered-list）: グリーンの01番号、太字の和文、右端の矢印を1行にまとめ、上下を罫線で区切る
• ハッシュタグチップ（tag-chip）: 年代や部位を入れる茶ベタの小さなタグ
• 口コミカード（voice-card）: 上半分に写真、下にタグと店舗名を入れる白カード。カルーセルで横に送る
• FAQアコーディオン（faq-item）: 白の角丸カードに質問文を入れ、右端にグリーンの＋を置く
• 流れる英字帯（marquee-band）: 茶帯の上で、白い英字と枠付きの矢印を横スクロールで繰り返す
• 予約導線パネル（reserve-panel）: 焦げ茶を重ねた写真の上に、マスタードのアイコンと白い大きな英字の導線を2段で並べる

Do's and Don'ts

Do - 英字見出しは画面幅に迫るほど大きく、極太で置く - グリーン・生成り・グレージュの面を交互に並べ、セクションの区切りを見せる - 写真は角丸にし、重ねたりずらしたりして動きを出す - 市松装飾は控えめな色で、要所の角にだけ置く - ボタンは茶のピル型に右矢印を付けた形で統一する

Don't - 原色の赤や青で強い訴求をしない - 明朝体や丸ゴシックを混ぜない - グラデーションや強い影を付けない - 和文を大見出しにしない（和文は英字見出しの補助に回す） - マスタードを面で広く使わない

Page Structure

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

1. ヘッダー（ロゴと予約導線）: 角丸の枠線ボックスにロゴ、茶の予約ボタン、メニューボタンを並べる
2. ファーストビュー（ブランドの世界観を伝える）: グリーンの巨大英字を人物写真の上下に分けて置く。縦書きのグリーン帯コピーと和文キャッチを添える
3. キャンペーン（特典を訴求する）: グレージュの角丸パネルにバナーのカルーセルを入れ、左右に丸い矢印ボタンを置く
4. 強み（選ばれる理由を3つ示す）: 写真を重ね配置し、その下に番号付きの罫線リストと幅広ボタンを置く
5. メニュー・料金（施術メニューへ誘導する）: 背景にアウトライン英字を敷き、部位名の英字を罫線リストで並べ、各行に矢印ピルを付ける
6. お客様の声（社会的証明）: グリーン帯の上に白カードのカルーセルを置き、下に流れる英字帯を入れる
7. 施術実績（ビフォーアフターで効果を示す）: 方眼グリッド付きのグリーン面に、ビフォーアフター写真とタグを並べる
8. 店舗情報（最寄り店舗へ誘導する）: 2カラムの罫線リストで、英字の店名の下に和文の店名と矢印を置く
9. よくある質問（不安を解消する）: 白い角丸カードのアコーディオンを縦に並べる
10. 会社紹介（信頼性を伝える）: スタッフ写真を3枚連結し、その下端に巨大英字を重ねる。短い理念文と幅広ボタンを続ける
11. お知らせ（最新情報を載せる）: タグ、グリーンの日付、1行タイトルを罫線で区切ったリストにする
12. 予約・問い合わせCTA（最終コンバージョン）: 焦げ茶を重ねた写真パネルに縦書きのアウトライン英字を敷き、大きな英字の導線を2つ置く
13. フッター（サイト内の回遊）: グリーン面にロゴ、2カラムのリンク、枠線付きの関連ブランド枠、TOPへ戻るピルボタンを置く

Imagery

• 人物は白〜淡い背景の前で撮った、清潔感のある若い男性ポートレート
• 施術シーンは黒いユニフォームのスタッフと機器を、自然光寄りの落ち着いたトーンで撮る
• 写真は角丸に切り抜き、大小2枚をずらして重ねる
• 正方形を市松状に並べたベージュのピクセル装飾を散らす
• 細い線の方眼グリッドとアウトライン英字で、背景に質感を足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVの英字と写真を横に広げ、より大きく見せる
• PCではキャンペーン・口コミのカードを横に4〜5枚並べる
• PCではメニューを横1列に並べ、スラッシュで区切る
• PCでは店舗・FAQを2カラムにし、見出しは縦書きにして右端か左に置く
• 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 行書くと起動時に読み込まれる。