DESIGN.md — えんじ×生成りの美容室開業支援 LP（Burgundy and Warm Beige Salon Business Support LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: えんじ色・生成りベージュ・焼き色グラデーション・吹き出しカード・線画イラスト・比較表
• 地の質感: マットな単色面が中心。CTA ボタンだけ茶系グラデーションで質感を出す。見出しの下には筆で描いたような金茶の曲線を添える
• 形: 角丸 12〜16px のカードとパネル、ピル型ボタン、左下にしっぽが付いた吹き出し
• 温度感: 暖色寄り。赤茶・ベージュ・焦げ茶で温かく落ち着いた印象

Colors

• ページ地は生成り #F3EEE8 で統一し、白カードを載せて段差をつける
• えんじはFV・吹き出しの頭・お問い合わせパネルなど、まとまった面に使う
• 悩みの一覧は焦げ茶のパネルにまとめ、ページの中ほどを引き締める
• 電話・メールボタンは茶系の横グラデーション、LINE ボタンは生成りの地に緑の文字
• セクション見出しは、えんじ文字か濃い茶文字のどちらかにする
• 比較表は自社列だけをえんじのグラデーションで縦に貫き、他社列はベージュにする
• button-primary は文字 #FBF0E2 × 背景 #AB8C6B のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#85694C、4.53:1）を使う。
• stat-box は文字 #F8EFE7 × 背景 #B88C5F のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8C663E、4.53:1）を使う。

Typography

• 見出しは太めの角ゴシックで、文字の角を立てすぎない柔らかい書体を選ぶ
• FV では数字だけを特大にし、ルビ風の小さな読み仮名を添える
• 英字ラベル（小さめ・字間広め・えんじ）を和文見出しの上に置く
• 本文は行間を約 2 倍にして読みやすくする
• 訴求の一言の重要語には、薄いベージュのマーカー下線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みカードと比較表の他社列だけ 2〜3 列
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カード・パネルは左右 16px ほどの余白で、画面幅いっぱいに近い幅で置く
• 見出しは中央揃えにし、下に金茶の筆曲線を添える
• CTA パネル（電話・メール・LINE の 3 ボタン）はページ内に 3 回繰り返す
• 写真はずらして非対称に配置し、雑誌のような余白を作る
• ニュースは日付・タグ・本文を細い罫線で区切ったリストにする

Elevation & Depth

• 影はほぼ使わず、色面の差で階層を表す
• 白カードは生成りの地の上にフラットに置く
• 比較表の自社列だけは、ほかより一段飛び出して見せる

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸 8〜12px の長方形写真を大小ずらして配置する。アバターは円形
• セクション境界: 直線で切り替える。色面は角丸パネルとして浮かせる
• 吹き出しは左下にしっぽ付きのえんじ色の角丸面
• ボタンはすべてピル型
• サービス図解は円とピル型ラベルで構成する
• FAQ はベージュの角丸バーにし、右端に縦線と▼を置く

Components

• 焼き色グラデーション CTA（button-primary）: 茶系の横グラデーションのピル型ボタン。電話番号の下に受付時間を小さく添える
• LINE 相談ボタン（button-line）: 生成りの地のピル型ボタンで、文字は緑
• 一覧へのアウトラインボタン（button-outline）: えんじの細い枠のピル型ボタン。右端に→を置く
• FV の濃色ボタン（button-dark）: ほぼ黒のピル型ボタン。左側に→と白い文字
• 吹き出し付きサービスカード（problem-card）: 上にえんじの吹き出しで悩みを書き、イラストを重ねる。下の白カードに訴求の一言と→リンクを置く
• 実績数字ボックス（stat-box）: 薄茶の四角を 3 つ横に並べ、小さなラベルと大きな数字＋単位を入れる
• 筆曲線つき見出し（heading-swash）: 中央揃えの見出しの下に、金茶の手描き風曲線を置く
• お問い合わせパネル（contact-panel）: えんじの角丸パネル。白文字の見出しと短い文のあとに 3 ボタンを縦に並べる
• 比較表（comparison-table）: ブルーグレーの項目列、えんじグラデの自社列、ベージュの他社列。記号は ◎○△× で示す
• FAQ アコーディオン（faq-item）: ベージュのバーに、えんじの「Q.」、質問文、右端の▼を並べる

Do's and Don'ts

Do - 生成りの地・えんじ・焦げ茶の 3 色で骨格を作る - 悩みは吹き出しと線画イラストで親しみやすく見せる - CTA パネルはページの中ほどと終盤で繰り返す - 見出しには毎回、金茶の筆曲線を添えて統一感を出す - 実績は数字を大きく、単位を小さく組む

Don't - 純白の地をページ全体に使わない（生成りを保つ） - 原色の赤や青のビビッドな色を足さない - 強い影やネオンのような光の表現を使わない - 角が尖ったボタンを使わない - 写真を全面背景にして文字を重ねない

Page Structure

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

1. ファーストビュー（資金面の不安を解く主張と実績で、つかみを作る）: えんじ全面の左側に大見出しと実績ボックス 3 つ、濃色の CTA を置く。右側には角丸写真をずらして重ねる
2. 導入実績ロゴ（社会的証明）: 白い帯に、小見出しと取引先ロゴを横に並べる
3. サービス提案（悩みごとに合うプランを提示する）: 吹き出し付きのカードを 4 枚、縦に並べる。訴求の一言にはマーカーを引く
4. 悩みの提起（多様な悩みに共感し、相談へ誘導する）: 焦げ茶のパネルに、アバター付きの吹き出しを 2 列でジグザグに置く。最後に 3 つの CTA ボタン
5. サービス紹介（提供範囲を示す）: 非対称に写真を配置し、英字ラベル付きの見出しと本文を置く。円形の図解とピル型ラベルで範囲を見せる
6. 選ばれる理由（競合との比較で優位性を示す）: 自社列を強調した比較表
7. お客様の声（導入事例で信頼を得る）: 記事カードの横スライダー（ドット＋丸い矢印）と、アウトラインボタン
8. CTA（問い合わせを促す）: えんじのパネルに電話・メール・LINE のボタンを並べる
9. よくある質問（不安の解消）: ベージュのアコーディオンを 3 件と、一覧ボタン
10. お知らせ（活動の新しさを示す）: 日付とタグ付きのリストを罫線で区切る
11. CTA（最後のひと押し）: えんじのお問い合わせパネルを再び置く
12. フッター（会社情報と関連サイトへの導線）: ロゴ、所在地、メニューバー、関連サイトのバナーを置く。最下部はベージュの帯

Imagery

• 自然光の明るいサロン店内や、スタッフが打ち合わせする様子の写真
• 写真は角丸の長方形にし、大小をずらしてコラージュ風に配置する
• 人物は線画とフラットな色面のイラストで、えんじ・紺・薄茶の限られた色で描く
• アバターは円形の色付き背景に、上半身のイラストを入れる
• 見出しの下に、金茶の筆で描いたような曲線を装飾として置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左に文字、右に写真コラージュの 2 カラムにする
• PC ではサービスカードを 1 枚大きく置き、残り 3 枚を 3 列に並べる
• PC の悩みパネルは吹き出し 4 つを横一列にし、CTA ボタン 3 つも横に並べる
• PC はコンテンツ幅を約 900px に収め、左右に生成りの余白をとる
• PC のヘッダーには白いピル型ナビと電話・LINE・相談のボタンを置く
• 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 行書くと起動時に読み込まれる。