DESIGN.md — 生成り×モカブラウンの上品リラクゼーションサロン LP（Warm Greige Serene Relaxation Salon LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、シンプル・ミニマル
• キーワード: 生成り・モカブラウン・明朝見出し・欧文セリフ・余白多め・柔らかな光
• 地の質感: フラットな生成り地に、ぼけた光の玉や薄い樹木シルエットを淡く重ねる
• 形: 角丸なしの矩形ボタン・カードと、円形に切り抜いた写真の組み合わせ
• 温度感: 暖かく落ち着いた中間トーン

Colors

• 生成り地を全体の半分以上に敷き、白は店舗カードなどの面だけに使う
• ボタン・帯面はくすんだモカブラウン1色に統一し、彩度の高い色は使わない
• 文字は濃いチョコ色。純粋な黒は使わない
• 金色は実績バッジと順位メダルのみに限定
• 非選択タブや補足文字はグレージュで一段トーンを落とす
• 店舗一覧だけ全幅のモカ帯にして、場面が切り替わったことを示す
• button-primary は文字 #FEF7F2 × 背景 #978176 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#836E64、4.52:1）を使う。
• news-tab は文字 #FEF7F2 × 背景 #C4B7AE のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#836E60、4.54:1）を使う。
• rank-medal は文字 #FEF7F2 × 背景 #D4A334 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#906D1F、4.51:1）を使う。

Typography

• 英字見出しは欧文セリフで大きく、下に小さな和文ラベルを添える
• 和文見出しとリード文は明朝にし、字間を0.1em以上取る
• 本文はゴシックで行間2.0にする
• キャッチは2行を左右にずらして段組みする
• 太すぎるウェイトは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コースは大1枚→2カラム→画像左＋テキスト右のリストの順で並べる
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約24px
• セクション間は70〜100pxと広く取る
• 特長は中央揃えにし、細い区切り線で区切る
• 英字見出しは左寄せで大きく置き、背景にぼけた光を重ねる
• ボタンは幅75%で中央に置く

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の重なりと淡い光のぼけで出す
• カードは白面または1pxの枠線だけで区切る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 特長は円形、コースは角なしの矩形、背景写真は全幅
• セクション境界: 直線で切り替える。写真帯に色帯を重ねる
• ボタン・カードは角丸0
• ボタン右端に横線の矢印を突き出す
• 円形はSNSアイコンと特長写真だけに使う

Components

• 横線付き矩形ボタン（button-primary）: モカの面に白い明朝文字。右端から細い横線がはみ出す
• 英字＋和文ラベル見出し（heading-en）: 大きな欧文セリフの下に小さな和文を置く
• 下線付き小見出し（heading-underline）: 中央に置いた欧文に短い下線を引く
• お知らせタブ（news-tab）: 選択中は枠線のみ、非選択はグレージュの面
• カテゴリラベル（category-label）: 日付の横に置く濃茶の小さな矩形と白文字
• 月桂樹実績バッジ（laurel-badge）: 金色の月桂樹の中に実績の数字。3つ横に並べる
• 順位メダル（rank-medal）: 写真の左上に置く金・銀・銅の丸メダルと数字
• moreリンク（more-link）: 短い横線＋欧文セリフ
• エリア選択カード（area-card）: モカ帯の上に白い矩形を並べ、右端に横線
• アイコン付き案内カード（guide-card）: 1px枠。金色の線画アイコン＋明朝タイトル＋薄い補足

Do's and Don'ts

Do - 生成り地と余白を広く取り、静けさを保つ - 見出しは明朝と欧文セリフを組み合わせる - ボタンは角のない矩形にし、横線の矢印を付ける - 写真は暖色の柔らかい光でそろえる - 金色は実績と順位だけに使う

Don't - ピル型ボタンや強い角丸は使わない - 赤・ビビッドな色のCTAは置かない - 濃い影やグラデーションボタンは使わない - 純粋な黒文字や太いゴシック見出しは使わない - テキストを詰め込まない

Page Structure

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

1. ヘッダー（ナビ導線）: 左にロゴ。右に線画アイコン付きリンク2つと濃茶の四角いメニュー
2. ファーストビュー（癒やしの世界観を伝える）: 全幅の施術写真の下に、明朝の2行キャッチをずらして置き、字間の広いリード文と縦のscroll表示を添える
3. お知らせ（最新情報）: 下線付き英字見出し・矩形タブ・日付＋ラベル＋タイトルのリストを細線で区切る
4. ギャラリー・実績（店内の雰囲気と信頼）: 大きな写真と小さなサムネイルを横に並べ、月桂樹バッジ3つ、明朝見出し、主ボタンを続ける
5. コンセプト・特長（選ばれる理由）: 英字見出しと本文のあと、円形写真＋番号＋明朝見出し＋本文の3項目を区切り線で縦に並べる
6. コース紹介（メニュー提示）: 全幅写真に大きな透かし英字を重ねる。順位メダル付きの大カード、2カラムのカード、横型リストの順に並べ、主ボタンで締める
7. 店舗一覧（店舗探しへ誘導）: キャンドル写真の帯に続けてモカ帯を置き、白い英字見出しと白いエリアカードを縦に並べる
8. 案内リンク（初来店・ギフト・FAQへの誘導）: 線画アイコン付きの枠線カードを3つ縦に並べる
9. 採用・法人バナー（サブ導線）: 写真に白い明朝文字を載せたバナーと説明文。背景は薄いグレージュ
10. フッター（サイト内リンク）: ロゴ、2列のテキストリンク、円形のSNSアイコン、セリフ体のコピーライト

Imagery

• 自然光の暖色トーンで、目を閉じてくつろぐ女性の施術シーンを撮る
• ハイキーで白く飛ばし、前景にぼけた光の玉を入れる
• 店内写真は木目とブラウン系のタオルで落ち着いた色にそろえる
• キャンドルやアロマディフューザーの暗めの写真で場面転換する
• 樹木の淡いシルエットや日本地図を薄く背景に敷く
• アイコンはオリーブ金の細い線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはキャッチを写真の上に重ね、ロゴとリード文を左に置く
• PCのギャラリーは写真を左、実績と見出しを右の2カラムにする
• PCの特長は円形写真を左、テキストを右に横並びにする
• PCのコースは4カラムのグリッドにする
• PCの店舗一覧は地図を左、エリアカードを右に置く
• PCの案内カードは3つ横に並べる

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