黄色×紺の親しみ系住まい相談 LP

Bright Yellow and Navy Friendly Real Estate Salon LP

鮮やかな黄色と濃紺を軸に、淡い水色の地とイラスト人物で親しみやすさを出した住まい相談窓口の LP。斜めに切った黄色の帯、丸い吹き出し、縦書きの悩みカードなどで情報を整理し、来店予約へ誘導する。

住宅・不動産・リフォームポップ・元気信頼・誠実親しみ・手作り感情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は淡い水色と淡い青緑を交互に使う
黄色は斜めにカットした帯として配置し動きを出す
紺は吹き出し・帯見出し・CTA・特長セクション全面に限定
物件種別ごとに緑とサーモンでカード枠とボタンを色分け
強調語は紺の大文字かマーカー、注意喚起は赤文字少量
写真上の文字は白地ボックスを敷く

TYPOGRAPHY

書体

displayメインコピー・大見出しゴシック／ Zen Kaku Gothic New 900 ／ 28px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出しゴシック／ Noto Sans JP 700 ／ 22px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdカード・吹き出し内の見出しゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm帯見出し・ラベルゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・出典ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent物件種別の英字サブ見出し装飾・ディスプレイ／ Dela Gothic One 400 ／ 12px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

強調語だけ一回り大きく紺色にしてリズムを作る
キーワードは紺の角丸ラベルに白抜きで並べる
悩みカードは縦書きで短い問いを並べる
物件種別名は極太で斜めの影付き文字
数字・電話番号は太字で大きく

PAGE STRUCTURE

セクション構成

ファーストビュー相談窓口の存在を伝える鮮黄地の中央に見出しと店名枠、左右に人物イラスト
悩みの提起よくある迷いを共感させる縦書きの悩みカードを横一列に並べる
相談無料の訴求気軽さと選択肢の幅を伝える紺の丸吹き出し3つと大見出し、キーワードラベル
購入（集合住宅）種別ごとの提案濃紺帯見出し、イラストと斜体の種別名、緑枠カード4枚
購入（戸建）戸建の提案雲形装飾と家イラスト、サーモン枠カード4枚
売却実績と査定の訴求写真と実績数字の大見出し、紺のラベル、CTA
サロン紹介店舗の雰囲気を見せる全幅の店内写真に白ボックスで説明
特長3つの価値を示す紺地全面に白い多角形見出しとイラスト3列
来店案内・CTA予約と問い合わせへ誘導影付き見出し枠、電話番号、紺の予約ボタン
アクセス道順を示す駅からの徒歩分数を並べ、イラスト地図と地図ボタン
動画紹介店内と道順を動画で見せる黄色地に色違いのサムネカード5枚
クロージングブランドメッセージで締める人物写真と紺の面を左右に組み、無料の手書き風バッジ

COMPONENTS

部品

紺の予約ボタン button-primary角丸小の長方形、白文字と右端に矢印
種別ボタン button-category緑またはサーモンの小さな帯ボタン
濃紺帯見出し section-band全幅の細い濃紺帯に白い小見出し
丸吹き出し bubble-circle紺の正円に白太字で心情を3つ並べる
縦書き悩みカード worry-card-vertical白地細枠に縦書きの問いを横スクロール風に並べる
提案カード proposal-card色付き枠の白カード。上に悩み、下にマーカー付き提案
キーワードラベル keyword-label紺の角丸ラベルに白文字
動画サムネカード video-card色違いの淡色カードに再生アイコンとイラスト

守ること

人物は線画のフラットイラストで統一する
黄色帯は斜めに切って配置する
強調語は紺で大きくする
種別ごとに色を分けて迷わせない
電話・営業時間・徒歩分数を具体的に並べる

DON'T

避けること

黒や暗色の背景を多用しない
グラデーションや光沢を使わない
ボタンをピル型にしない
黄色を本文の文字色にしない
写真に過度な加工をしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黄色×紺の親しみ系住まい相談 LP（Bright Yellow and Navy Friendly Real Estate Salon LP）

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

Overview

業種: 住宅・不動産・リフォーム／ 雰囲気: ポップ・元気、信頼・誠実、親しみ・手作り感、情報量多め・訴求型
キーワード: 黄色×濃紺・線画イラスト人物・斜め帯・丸吹き出し・マーカー強調・来店誘導
地の質感: フラットな単色面。ところどころに斜線ハッチングや手描き風の雲形装飾。
形: 角丸小さめの白カード、正円の吹き出し、斜めにカットした背景帯、不規則な多角形の見出し枠。
温度感: 明るく暖かい。黄色の元気さを紺の誠実さで引き締める。

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#2D518F`	ブランド紺。吹き出し・見出し帯・濃色セクション	12%	画素の実測
`dark-section`	`#28365C`	セクション区切り帯の濃紺	3%	画素の主要色に補正
`secondary`	`#FEFE02`	ファーストビュー・斜め帯の鮮黄	6%	画素の実測
`tint-1`	`#FEFF7E`	淡い黄色の斜め背景	9%	画素の主要色に補正
`background`	`#ECF3FA`	ページ基本の淡い水色地	13%	画素の実測
`background-alt`	`#ECF3F9`	交互の淡い青緑地	12%	画素の実測
`surface`	`#FEFEFE`	カード・吹き出しの白	9%	画素の実測
`cta`	`#2B5594`	予約・地図ボタンの紺	1%	画素の主要色に補正
`on-cta`	`#FDFDFD`	ボタン上の文字	0%	画素の主要色に補正
`text`	`#17110F`	見出し・本文の黒	3%	画素の実測
`accent-1`	`#53A393`	マンション系カード枠・ボタンの緑	1%	画素の実測
`accent-2`	`#DC816C`	戸建系カード枠・ボタンのサーモン	1%	画素の実測
`marker`	`#FEFF7E`	語句下のマーカー	0%	画素の主要色に補正
`line`	`#9AA6B8`	悩みカードの細枠	0%	推定
`accent-1-accessible`	`#418073`	AA を満たす補正値（計算）		計算

地は淡い水色と淡い青緑を交互に使う
黄色は斜めにカットした帯として配置し動きを出す
紺は吹き出し・帯見出し・CTA・特長セクション全面に限定
物件種別ごとに緑とサーモンでカード枠とボタンを色分け
強調語は紺の大文字かマーカー、注意喚起は赤文字少量
写真上の文字は白地ボックスを敷く
button-category は文字 #FDFDFD × 背景 #53A393 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#418073、4.53:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	メインコピー・大見出し	ゴシック	Zen Kaku Gothic New	900	28px	1.4	0.04em
`headline-lg`	セクション見出し	ゴシック	Noto Sans JP	700	22px	1.5	0.04em
`headline-md`	カード・吹き出し内の見出し	ゴシック	Noto Sans JP	700	18px	1.5	0.03em
`headline-sm`	帯見出し・ラベル	ゴシック	Noto Sans JP	700	14px	1.4	0.05em
`body-md`	本文	ゴシック	Noto Sans JP	500	14px	1.8	0.03em
`note`	注釈・出典	ゴシック	Noto Sans JP	400	10px	1.6	0.02em
`accent`	物件種別の英字サブ見出し	装飾・ディスプレイ	Dela Gothic One	400	12px	1.2	0.1em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	14px	1.3	0.05em

強調語だけ一回り大きく紺色にしてリズムを作る
キーワードは紺の角丸ラベルに白抜きで並べる
悩みカードは縦書きで短い問いを並べる
物件種別名は極太で斜めの影付き文字
数字・電話番号は太字で大きく
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、カードは 2 列
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
セクション冒頭に全幅の濃紺細帯見出しを置く
イラスト人物と見出しを左右に並べる
悩み・提案カードは等幅で並べる
CTA はセクション末尾中央に配置
アクセス情報は徒歩分数を横並び

Elevation & Depth

基本はフラットで影なし
カードは細線または色付き 2px 枠で区切る
見出し枠に紺の小さなずらし影を付ける
写真の上の白ボックスはわずかな影

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンは角丸の長方形。
写真の切り抜き: 写真は角丸なし長方形、または大きな角丸の横長
セクション境界: 斜め直線で切り替わる黄色帯
吹き出しは正円の紺
ボタンは角丸小の長方形に右矢印
特長の見出しは不規則な多角形の白枠
雲形の淡いピンク装飾を人物背景に

Components

紺の予約ボタン（button-primary）: 角丸小の長方形、白文字と右端に矢印
種別ボタン（button-category）: 緑またはサーモンの小さな帯ボタン
濃紺帯見出し（section-band）: 全幅の細い濃紺帯に白い小見出し
丸吹き出し（bubble-circle）: 紺の正円に白太字で心情を3つ並べる
縦書き悩みカード（worry-card-vertical）: 白地細枠に縦書きの問いを横スクロール風に並べる
提案カード（proposal-card）: 色付き枠の白カード。上に悩み、下にマーカー付き提案
キーワードラベル（keyword-label）: 紺の角丸ラベルに白文字
動画サムネカード（video-card）: 色違いの淡色カードに再生アイコンとイラスト

Do's and Don'ts

Do - 人物は線画のフラットイラストで統一する - 黄色帯は斜めに切って配置する - 強調語は紺で大きくする - 種別ごとに色を分けて迷わせない - 電話・営業時間・徒歩分数を具体的に並べる

Don't - 黒や暗色の背景を多用しない - グラデーションや光沢を使わない - ボタンをピル型にしない - 黄色を本文の文字色にしない - 写真に過度な加工をしない

Page Structure

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

ファーストビュー（相談窓口の存在を伝える）: 鮮黄地の中央に見出しと店名枠、左右に人物イラスト
悩みの提起（よくある迷いを共感させる）: 縦書きの悩みカードを横一列に並べる
相談無料の訴求（気軽さと選択肢の幅を伝える）: 紺の丸吹き出し3つと大見出し、キーワードラベル
購入（集合住宅）（種別ごとの提案）: 濃紺帯見出し、イラストと斜体の種別名、緑枠カード4枚
購入（戸建）（戸建の提案）: 雲形装飾と家イラスト、サーモン枠カード4枚
売却（実績と査定の訴求）: 写真と実績数字の大見出し、紺のラベル、CTA
サロン紹介（店舗の雰囲気を見せる）: 全幅の店内写真に白ボックスで説明
特長（3つの価値を示す）: 紺地全面に白い多角形見出しとイラスト3列
来店案内・CTA（予約と問い合わせへ誘導）: 影付き見出し枠、電話番号、紺の予約ボタン
アクセス（道順を示す）: 駅からの徒歩分数を並べ、イラスト地図と地図ボタン
動画紹介（店内と道順を動画で見せる）: 黄色地に色違いのサムネカード5枚
クロージング（ブランドメッセージで締める）: 人物写真と紺の面を左右に組み、無料の手書き風バッジ

Imagery

人物は太めの黒線と紺・白・淡色の塗りのビジネス系フラットイラスト
家・建物は単純な図形のイラスト
写真は明るく清潔な店内と接客シーン
斜線ハッチングや集中線を見出しの周りに添える
地図は情報量の多いイラスト地図風
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SP はカードを 2 列、特長は 1 列に縦積み
人物イラストは見出しの上に小さめで置く
縦書き悩みカードは横スクロールにする
徒歩分数は縦に並べる
斜め帯の角度は 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 行書くと起動時に読み込まれる。

---
version: alpha
name: Bright Yellow and Navy Friendly Real Estate Salon LP
description: 鮮やかな黄色と濃紺を軸に、淡い水色の地とイラスト人物で親しみやすさを出した住まい相談窓口の LP。斜めに切った黄色の帯、丸い吹き出し、縦書きの悩みカードなどで情報を整理し、来店予約へ誘導する。
colors:
  primary: '#2D518F'
  dark-section: '#28365C'
  secondary: '#FEFE02'
  tint-1: '#FEFF7E'
  background: '#ECF3FA'
  background-alt: '#ECF3F9'
  surface: '#FEFEFE'
  cta: '#2B5594'
  on-cta: '#FDFDFD'
  text: '#17110F'
  accent-1: '#53A393'
  accent-2: '#DC816C'
  marker: '#FEFF7E'
  line: '#9AA6B8'
  accent-1-accessible: '#418073'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Dela Gothic One
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 48px
  button-category:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 32px
  section-band:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.headline-sm}'
    height: 28px
  bubble-circle:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 110px
  worry-card-vertical:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    height: 70px
  proposal-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 130px
  keyword-label:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 26px
  video-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 180px
---

# DESIGN.md — 黄色×紺の親しみ系住まい相談 LP（Bright Yellow and Navy Friendly Real Estate Salon LP）

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

## Overview

- **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: ポップ・元気、信頼・誠実、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: 黄色×濃紺・線画イラスト人物・斜め帯・丸吹き出し・マーカー強調・来店誘導
- **地の質感**: フラットな単色面。ところどころに斜線ハッチングや手描き風の雲形装飾。
- **形**: 角丸小さめの白カード、正円の吹き出し、斜めにカットした背景帯、不規則な多角形の見出し枠。
- **温度感**: 明るく暖かい。黄色の元気さを紺の誠実さで引き締める。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2D518F` | ブランド紺。吹き出し・見出し帯・濃色セクション | 12% | 画素の実測 |
| `dark-section` | `#28365C` | セクション区切り帯の濃紺 | 3% | 画素の主要色に補正 |
| `secondary` | `#FEFE02` | ファーストビュー・斜め帯の鮮黄 | 6% | 画素の実測 |
| `tint-1` | `#FEFF7E` | 淡い黄色の斜め背景 | 9% | 画素の主要色に補正 |
| `background` | `#ECF3FA` | ページ基本の淡い水色地 | 13% | 画素の実測 |
| `background-alt` | `#ECF3F9` | 交互の淡い青緑地 | 12% | 画素の実測 |
| `surface` | `#FEFEFE` | カード・吹き出しの白 | 9% | 画素の実測 |
| `cta` | `#2B5594` | 予約・地図ボタンの紺 | 1% | 画素の主要色に補正 |
| `on-cta` | `#FDFDFD` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#17110F` | 見出し・本文の黒 | 3% | 画素の実測 |
| `accent-1` | `#53A393` | マンション系カード枠・ボタンの緑 | 1% | 画素の実測 |
| `accent-2` | `#DC816C` | 戸建系カード枠・ボタンのサーモン | 1% | 画素の実測 |
| `marker` | `#FEFF7E` | 語句下のマーカー | 0% | 画素の主要色に補正 |
| `line` | `#9AA6B8` | 悩みカードの細枠 | 0% | 推定 |
| `accent-1-accessible` | `#418073` | AA を満たす補正値（計算） |  | 計算 |

- 地は淡い水色と淡い青緑を交互に使う
- 黄色は斜めにカットした帯として配置し動きを出す
- 紺は吹き出し・帯見出し・CTA・特長セクション全面に限定
- 物件種別ごとに緑とサーモンでカード枠とボタンを色分け
- 強調語は紺の大文字かマーカー、注意喚起は赤文字少量
- 写真上の文字は白地ボックスを敷く
- `button-category` は文字 `#FDFDFD` × 背景 `#53A393` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#418073`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | メインコピー・大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.4 | 0.04em |
| `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.04em |
| `headline-md` | カード・吹き出し内の見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em |
| `headline-sm` | 帯見出し・ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em |
| `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 物件種別の英字サブ見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 12px | 1.2 | 0.1em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.05em |

- 強調語だけ一回り大きく紺色にしてリズムを作る
- キーワードは紺の角丸ラベルに白抜きで並べる
- 悩みカードは縦書きで短い問いを並べる
- 物件種別名は極太で斜めの影付き文字
- 数字・電話番号は太字で大きく
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、カードは 2 列
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- セクション冒頭に全幅の濃紺細帯見出しを置く
- イラスト人物と見出しを左右に並べる
- 悩み・提案カードは等幅で並べる
- CTA はセクション末尾中央に配置
- アクセス情報は徒歩分数を横並び

## Elevation & Depth

- 基本はフラットで影なし
- カードは細線または色付き 2px 枠で区切る
- 見出し枠に紺の小さなずらし影を付ける
- 写真の上の白ボックスはわずかな影

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸なし長方形、または大きな角丸の横長
- **セクション境界**: 斜め直線で切り替わる黄色帯
- 吹き出しは正円の紺
- ボタンは角丸小の長方形に右矢印
- 特長の見出しは不規則な多角形の白枠
- 雲形の淡いピンク装飾を人物背景に

## Components

- **紺の予約ボタン**（`button-primary`）: 角丸小の長方形、白文字と右端に矢印
- **種別ボタン**（`button-category`）: 緑またはサーモンの小さな帯ボタン
- **濃紺帯見出し**（`section-band`）: 全幅の細い濃紺帯に白い小見出し
- **丸吹き出し**（`bubble-circle`）: 紺の正円に白太字で心情を3つ並べる
- **縦書き悩みカード**（`worry-card-vertical`）: 白地細枠に縦書きの問いを横スクロール風に並べる
- **提案カード**（`proposal-card`）: 色付き枠の白カード。上に悩み、下にマーカー付き提案
- **キーワードラベル**（`keyword-label`）: 紺の角丸ラベルに白文字
- **動画サムネカード**（`video-card`）: 色違いの淡色カードに再生アイコンとイラスト

## Do's and Don'ts

**Do**
- 人物は線画のフラットイラストで統一する
- 黄色帯は斜めに切って配置する
- 強調語は紺で大きくする
- 種別ごとに色を分けて迷わせない
- 電話・営業時間・徒歩分数を具体的に並べる

**Don't**
- 黒や暗色の背景を多用しない
- グラデーションや光沢を使わない
- ボタンをピル型にしない
- 黄色を本文の文字色にしない
- 写真に過度な加工をしない

## Page Structure

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

1. **ファーストビュー**（相談窓口の存在を伝える）: 鮮黄地の中央に見出しと店名枠、左右に人物イラスト
2. **悩みの提起**（よくある迷いを共感させる）: 縦書きの悩みカードを横一列に並べる
3. **相談無料の訴求**（気軽さと選択肢の幅を伝える）: 紺の丸吹き出し3つと大見出し、キーワードラベル
4. **購入（集合住宅）**（種別ごとの提案）: 濃紺帯見出し、イラストと斜体の種別名、緑枠カード4枚
5. **購入（戸建）**（戸建の提案）: 雲形装飾と家イラスト、サーモン枠カード4枚
6. **売却**（実績と査定の訴求）: 写真と実績数字の大見出し、紺のラベル、CTA
7. **サロン紹介**（店舗の雰囲気を見せる）: 全幅の店内写真に白ボックスで説明
8. **特長**（3つの価値を示す）: 紺地全面に白い多角形見出しとイラスト3列
9. **来店案内・CTA**（予約と問い合わせへ誘導）: 影付き見出し枠、電話番号、紺の予約ボタン
10. **アクセス**（道順を示す）: 駅からの徒歩分数を並べ、イラスト地図と地図ボタン
11. **動画紹介**（店内と道順を動画で見せる）: 黄色地に色違いのサムネカード5枚
12. **クロージング**（ブランドメッセージで締める）: 人物写真と紺の面を左右に組み、無料の手書き風バッジ

## Imagery

- 人物は太めの黒線と紺・白・淡色の塗りのビジネス系フラットイラスト
- 家・建物は単純な図形のイラスト
- 写真は明るく清潔な店内と接客シーン
- 斜線ハッチングや集中線を見出しの周りに添える
- 地図は情報量の多いイラスト地図風
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SP はカードを 2 列、特長は 1 列に縦積み
- 人物イラストは見出しの上に小さめで置く
- 縦書き悩みカードは横スクロールにする
- 徒歩分数は縦に並べる
- 斜め帯の角度は SP では浅くする

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-e8385f5b`（元 LP の URL から採番）
- **元 LP**: https://www.pressance-group.jp/sumina/salon/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

住宅・不動産・リフォームフラットイラストとくすみ水色のペット共生リノベ LPFlat Illustration Pet-Friendly Renovation LP 住宅・不動産・リフォーム淡グレー×深緑の上質インテリアデザイン LPGallery Gray Interior Design Studio LP 住宅・不動産・リフォーム水色方眼×紺ボタンの防災住宅技術 LPBlue Grid Technical Disaster-Resilient Housing LP 住宅・不動産・リフォーム深緑写真×ライトグレーの静かな建築事務所 LPQuiet Forest Minimal Architecture LP 住宅・不動産・リフォーム生成り×紺の分譲住宅物件一覧 LPWarm Beige Property Listing LP 住宅・不動産・リフォーム生成りと若葉色の水彩造園 LPWatercolor Leaf Natural Garden LP