レモン黄×生成りの学校行事撮影サービスLP

Sunny Yellow Soft Photo Studio LP

白と生成りの地に、レモンイエローをにじみ光やマーカーとして散らす、明るくやさしい写真撮影サービスのLP。大きな欧文見出しの下に小さな和文ラベルを添え、角丸写真と細線カードで清潔に整える。締めは濃いチャコールのコンタクト帯。

その他やさしい・柔らかい清潔・爽やか信頼・誠実ナチュラルPC

ダウンロード

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

COLORS

配色

地は白・生成り・オリーブベージュ・淡黄をセクションごとに切り替える
黄は面積を抑え、見出し横の丸、バッジ、地図、ぼかし光に使う
CTAは黒地白文字のピル型で統一する
最後のコンタクトだけチャコールの濃色帯にして締める
価格の『無料』など数値強調だけオレンジを使う
線は薄いグレーベージュの1px

TYPOGRAPHY

書体

displayFVキャッチゴシック／ Zen Kaku Gothic New 700 ／ 30px ／行間 1.5

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

headline-lgセクションの欧文見出し欧文サンセリフ／ DM Sans 600 ／ 40px ／行間 1.1

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

headline-md特長・メッセージの和文見出しゴシック／ Zen Kaku Gothic New 700 ／ 20px ／行間 1.5

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

headline-smカード・プラン名ゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 1.5

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

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

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

note注釈・和文サブラベルゴシック／ Noto Sans JP 500 ／ 11px ／行間 1.6

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

accent特長番号 01〜04欧文サンセリフ／ DM Sans 600 ／ 36px ／行間 1.0

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

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

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

セクション見出しは大きな欧文＋下に黄丸付きの小さな和文ラベル
和文見出しは太字ゴシックで2〜3行に改行
本文は細めで行間を広く取る
番号は欧文太字で、背後に黄色のぼかし円を置く
強調色の文字は最小限にする

PAGE STRUCTURE

セクション構成

ファーストビューサービスの価値を直感的に伝える角丸写真を重ねてコラージュし、右に小ラベルと太字キャッチ。背景下部に黄色のぼかし
特典の提示無料・割引などの利点を示す淡色の角丸カード3枚を横並び
メッセージ理念と共感を伝える左に大見出し、中央に人物写真、右に段落文。下に担当者紹介と丸矢印リンク
サービス紹介提供メニューを示す細線で区切った3カラム。縦書きラベル、角丸写真、黄バッジ、白枠ボタン
料金価格の明示生成り地に細線角丸の料金カード2枚とオプション枠、注釈
特長強みを番号付きで説明01〜04の番号見出し＋本文＋小写真。右に白枠パネルの写真。地色を交互に変える
流れ依頼手順を示す淡黄地に丸アイコン4ステップを横並び
対応エリア対応地域を示す線画地図の対象地域を黄で塗り、黄丸の地域名バッジを並べる
よくある質問不安の解消左に見出し、右にアコーディオン行
ブログ更新情報タグのピル、サムネイル＋日付＋タイトルのリスト
写真ギャラリー雰囲気の訴求大小の角丸写真を高さ違いで横に並べる
お問い合わせ行動喚起チャコール帯に電話・LINE・メールの3導線
フッターナビゲーション白地にロゴと3列の小さなリンク

COMPONENTS

部品

黒ピルCTA button-primaryLINE相談やメール見積もり用の黒地白文字ボタン。アイコンを左に添える
丸矢印ボタン button-arrowテキストリンク横に置く黒い正円の右矢印
白枠ピルボタン button-outlineサービスカード下の細線枠＋矢印の小ボタン
欧文大見出し＋和文ラベル section-heading大きな欧文の下に黄色の小丸と和文ラベルを添える
黄色丸バッジ badge-circle写真の角に重ねる黄色の正円で追加情報を示す
特典カード3連 offer-cardFV下に水色・黄・緑の淡色角丸カードで特典を並べる
料金表カード price-card細線枠の角丸カードに項目と金額を行で並べる
FAQ行 faq-itemQ＋質問文＋右端の＋。淡い生成りの角丸行
フロー手順 flow-step白い正円アイコン＋番号＋見出し。手順間は小さな三角
コンタクト帯 contact-bandチャコール地に欧文見出し、電話・LINE・メールを縦線で区切る

守ること

黄は光・印として控えめに散らす
見出しは欧文大＋和文小の二段で統一する
写真は角丸で自然光の明るいトーンにする
余白を広くとり、細線で静かに区切る
CTAは黒ピルで統一する

DON'T

避けること

黄の大面積ベタ塗りを多用しない
原色の赤や派手なグラデーションを使わない
強い影や立体ボタンを使わない
明朝体や装飾フォントを混ぜない
写真を角ばった切り抜きにしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — レモン黄×生成りの学校行事撮影サービスLP（Sunny Yellow Soft Photo Studio LP）

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

Overview

業種: その他／ 雰囲気: やさしい・柔らかい、清潔・爽やか、信頼・誠実、ナチュラル
キーワード: レモンイエローの光・生成りの地・大きな欧文見出し・角丸写真・細線の区切り・余白多め
地の質感: フラットな面に、黄色の円形ぼかしグラデーションが光だまりのようににじむ
形: 角丸16〜24pxの写真とカード、ピル型ボタン、黒い丸の矢印ボタン
温度感: 暖かく明るい。黄と生成りでやわらかく、チャコールで引き締める

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#FEE101`	ブランド黄（マップ・バッジ・マーカー）	4%	画素の実測
`background`	`#FFFFFF`	基本の白地	37%	画素の実測
`background-alt`	`#F6F6ED`	料金・特長の生成り地	12%	画素の実測
`tint-1`	`#E6E3C4`	特長セクションのオリーブベージュ地	11%	画素の実測
`tint-2`	`#FFFAC3`	フロー帯の淡い黄	6%	画素の実測
`surface`	`#F7F7ED`	FAQ行の淡い生成り	2%	画素の実測
`dark-section`	`#3E3E3E`	コンタクト帯	6%	画素の実測
`on-dark`	`#FFFFFF`	濃色帯上の文字	1%	画素の実測
`text`	`#070602`	見出し・本文の墨色	3%	画素の実測
`text-muted`	`#7F7773`	注釈のグレー	1%	画素の主要色に補正
`cta`	`#141413`	黒の主ボタン	1%	画素の実測
`on-cta`	`#FFFFFF`	ボタン文字	0%	画素の主要色に補正
`accent-1`	`#F08300`	料金の強調オレンジ	0%	推定
`line`	`#C0C4BA`	細い区切り線・枠	1%	画素の主要色に補正

地は白・生成り・オリーブベージュ・淡黄をセクションごとに切り替える
黄は面積を抑え、見出し横の丸、バッジ、地図、ぼかし光に使う
CTAは黒地白文字のピル型で統一する
最後のコンタクトだけチャコールの濃色帯にして締める
価格の『無料』など数値強調だけオレンジを使う
線は薄いグレーベージュの1px

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVキャッチ	ゴシック	Zen Kaku Gothic New	700	30px	1.5	0.08em
`headline-lg`	セクションの欧文見出し	欧文サンセリフ	DM Sans	600	40px	1.1	0.0em
`headline-md`	特長・メッセージの和文見出し	ゴシック	Zen Kaku Gothic New	700	20px	1.5	0.05em
`headline-sm`	カード・プラン名	ゴシック	Zen Kaku Gothic New	700	16px	1.5	0.05em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.9	0.05em
`note`	注釈・和文サブラベル	ゴシック	Noto Sans JP	500	11px	1.6	0.05em
`accent`	特長番号 01〜04	欧文サンセリフ	DM Sans	600	36px	1.0	0.0em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	14px	1.4	0.05em

セクション見出しは大きな欧文＋下に黄丸付きの小さな和文ラベル
和文見出しは太字ゴシックで2〜3行に改行
本文は細めで行間を広く取る
番号は欧文太字で、背後に黄色のぼかし円を置く
強調色の文字は最小限にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SPは1カラム。PCは見出し左＋本文右の2カラムや3カラムカードを併用
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
見出しは左寄せで大きく置く
セクション間は細い横線か地色の切り替えで区切る
特長は文章ブロックと白い枠の写真パネルを左右に並べる
写真は余白をたっぷり取り単独で見せる
FAQはアコーディオン行を縦に積む

Elevation & Depth

影はほぼ使わずフラット
カードは1px線か地色差で浮かせる
写真の重なりは極薄の影で奥行きを出す

Shapes

角丸: 小 8px ／中 16px ／大 24px。ボタンはピル型。
写真の切り抜き: 角丸の長方形。FVでは複数枚を少しずらして重ねる
セクション境界: 直線。地色の切り替えか細い横線
ボタンはピル型
矢印ボタンは黒い正円
バッジは黄色の正円
料金カードは細線枠の角丸

Components

黒ピルCTA（button-primary）: LINE相談やメール見積もり用の黒地白文字ボタン。アイコンを左に添える
丸矢印ボタン（button-arrow）: テキストリンク横に置く黒い正円の右矢印
白枠ピルボタン（button-outline）: サービスカード下の細線枠＋矢印の小ボタン
欧文大見出し＋和文ラベル（section-heading）: 大きな欧文の下に黄色の小丸と和文ラベルを添える
黄色丸バッジ（badge-circle）: 写真の角に重ねる黄色の正円で追加情報を示す
特典カード3連（offer-card）: FV下に水色・黄・緑の淡色角丸カードで特典を並べる
料金表カード（price-card）: 細線枠の角丸カードに項目と金額を行で並べる
FAQ行（faq-item）: Q＋質問文＋右端の＋。淡い生成りの角丸行
フロー手順（flow-step）: 白い正円アイコン＋番号＋見出し。手順間は小さな三角
コンタクト帯（contact-band）: チャコール地に欧文見出し、電話・LINE・メールを縦線で区切る

Do's and Don'ts

Do - 黄は光・印として控えめに散らす - 見出しは欧文大＋和文小の二段で統一する - 写真は角丸で自然光の明るいトーンにする - 余白を広くとり、細線で静かに区切る - CTAは黒ピルで統一する

Don't - 黄の大面積ベタ塗りを多用しない - 原色の赤や派手なグラデーションを使わない - 強い影や立体ボタンを使わない - 明朝体や装飾フォントを混ぜない - 写真を角ばった切り抜きにしない

Page Structure

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

ファーストビュー（サービスの価値を直感的に伝える）: 角丸写真を重ねてコラージュし、右に小ラベルと太字キャッチ。背景下部に黄色のぼかし
特典の提示（無料・割引などの利点を示す）: 淡色の角丸カード3枚を横並び
メッセージ（理念と共感を伝える）: 左に大見出し、中央に人物写真、右に段落文。下に担当者紹介と丸矢印リンク
サービス紹介（提供メニューを示す）: 細線で区切った3カラム。縦書きラベル、角丸写真、黄バッジ、白枠ボタン
料金（価格の明示）: 生成り地に細線角丸の料金カード2枚とオプション枠、注釈
特長（強みを番号付きで説明）: 01〜04の番号見出し＋本文＋小写真。右に白枠パネルの写真。地色を交互に変える
流れ（依頼手順を示す）: 淡黄地に丸アイコン4ステップを横並び
対応エリア（対応地域を示す）: 線画地図の対象地域を黄で塗り、黄丸の地域名バッジを並べる
よくある質問（不安の解消）: 左に見出し、右にアコーディオン行
ブログ（更新情報）: タグのピル、サムネイル＋日付＋タイトルのリスト
写真ギャラリー（雰囲気の訴求）: 大小の角丸写真を高さ違いで横に並べる
お問い合わせ（行動喚起）: チャコール帯に電話・LINE・メールの3導線
フッター（ナビゲーション）: 白地にロゴと3列の小さなリンク

Imagery

自然光の屋外・明るい室内で撮った笑顔の人物写真
カメラや機材を持つスタッフの自然なポーズ
子どもの行事シーンは明るく彩度をやや高めに
黄色の円形ぼかしを見出しや番号の背後に置く
アイコンは黒線＋黄の差し色の簡素な線画
地図は細いグレー線画に黄の塗り
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SPは全セクション1カラムに積む
サービス3カラムは縦積みカードにする
特長は写真を上、文章を下に配置
フローは縦並びか2×2にする
欧文見出しはSPで36〜40px程度に縮める
コンタクト帯の3導線は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: Sunny Yellow Soft Photo Studio LP
description: 白と生成りの地に、レモンイエローをにじみ光やマーカーとして散らす、明るくやさしい写真撮影サービスのLP。大きな欧文見出しの下に小さな和文ラベルを添え、角丸写真と細線カードで清潔に整える。締めは濃いチャコールのコンタクト帯。
colors:
  primary: '#FEE101'
  background: '#FFFFFF'
  background-alt: '#F6F6ED'
  tint-1: '#E6E3C4'
  tint-2: '#FFFAC3'
  surface: '#F7F7ED'
  dark-section: '#3E3E3E'
  on-dark: '#FFFFFF'
  text: '#070602'
  text-muted: '#7F7773'
  cta: '#141413'
  on-cta: '#FFFFFF'
  accent-1: '#F08300'
  line: '#C0C4BA'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: DM Sans
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.05em
  accent:
    fontFamily: DM Sans
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 8px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
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.full}'
    height: 44px
  button-arrow:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.full}'
    height: 40px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 28px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 70px
  badge-circle:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 40px
  offer-card:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 64px
  price-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 120px
  faq-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 44px
  flow-step:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 120px
  contact-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 360px
---

# DESIGN.md — レモン黄×生成りの学校行事撮影サービスLP（Sunny Yellow Soft Photo Studio LP）

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

## Overview

- **業種**: その他 ／ **雰囲気**: やさしい・柔らかい、清潔・爽やか、信頼・誠実、ナチュラル
- **キーワード**: レモンイエローの光・生成りの地・大きな欧文見出し・角丸写真・細線の区切り・余白多め
- **地の質感**: フラットな面に、黄色の円形ぼかしグラデーションが光だまりのようににじむ
- **形**: 角丸16〜24pxの写真とカード、ピル型ボタン、黒い丸の矢印ボタン
- **温度感**: 暖かく明るい。黄と生成りでやわらかく、チャコールで引き締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#FEE101` | ブランド黄（マップ・バッジ・マーカー） | 4% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 37% | 画素の実測 |
| `background-alt` | `#F6F6ED` | 料金・特長の生成り地 | 12% | 画素の実測 |
| `tint-1` | `#E6E3C4` | 特長セクションのオリーブベージュ地 | 11% | 画素の実測 |
| `tint-2` | `#FFFAC3` | フロー帯の淡い黄 | 6% | 画素の実測 |
| `surface` | `#F7F7ED` | FAQ行の淡い生成り | 2% | 画素の実測 |
| `dark-section` | `#3E3E3E` | コンタクト帯 | 6% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 濃色帯上の文字 | 1% | 画素の実測 |
| `text` | `#070602` | 見出し・本文の墨色 | 3% | 画素の実測 |
| `text-muted` | `#7F7773` | 注釈のグレー | 1% | 画素の主要色に補正 |
| `cta` | `#141413` | 黒の主ボタン | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#F08300` | 料金の強調オレンジ | 0% | 推定 |
| `line` | `#C0C4BA` | 細い区切り線・枠 | 1% | 画素の主要色に補正 |

- 地は白・生成り・オリーブベージュ・淡黄をセクションごとに切り替える
- 黄は面積を抑え、見出し横の丸、バッジ、地図、ぼかし光に使う
- CTAは黒地白文字のピル型で統一する
- 最後のコンタクトだけチャコールの濃色帯にして締める
- 価格の『無料』など数値強調だけオレンジを使う
- 線は薄いグレーベージュの1px

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.5 | 0.08em |
| `headline-lg` | セクションの欧文見出し | 欧文サンセリフ | DM Sans | 600 | 40px | 1.1 | 0.0em |
| `headline-md` | 特長・メッセージの和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.05em |
| `headline-sm` | カード・プラン名 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em |
| `note` | 注釈・和文サブラベル | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.05em |
| `accent` | 特長番号 01〜04 | 欧文サンセリフ | DM Sans | 600 | 36px | 1.0 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em |

- セクション見出しは大きな欧文＋下に黄丸付きの小さな和文ラベル
- 和文見出しは太字ゴシックで2〜3行に改行
- 本文は細めで行間を広く取る
- 番号は欧文太字で、背後に黄色のぼかし円を置く
- 強調色の文字は最小限にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。PCは見出し左＋本文右の2カラムや3カラムカードを併用
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 見出しは左寄せで大きく置く
- セクション間は細い横線か地色の切り替えで区切る
- 特長は文章ブロックと白い枠の写真パネルを左右に並べる
- 写真は余白をたっぷり取り単独で見せる
- FAQはアコーディオン行を縦に積む

## Elevation & Depth

- 影はほぼ使わずフラット
- カードは1px線か地色差で浮かせる
- 写真の重なりは極薄の影で奥行きを出す

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 角丸の長方形。FVでは複数枚を少しずらして重ねる
- **セクション境界**: 直線。地色の切り替えか細い横線
- ボタンはピル型
- 矢印ボタンは黒い正円
- バッジは黄色の正円
- 料金カードは細線枠の角丸

## Components

- **黒ピルCTA**（`button-primary`）: LINE相談やメール見積もり用の黒地白文字ボタン。アイコンを左に添える
- **丸矢印ボタン**（`button-arrow`）: テキストリンク横に置く黒い正円の右矢印
- **白枠ピルボタン**（`button-outline`）: サービスカード下の細線枠＋矢印の小ボタン
- **欧文大見出し＋和文ラベル**（`section-heading`）: 大きな欧文の下に黄色の小丸と和文ラベルを添える
- **黄色丸バッジ**（`badge-circle`）: 写真の角に重ねる黄色の正円で追加情報を示す
- **特典カード3連**（`offer-card`）: FV下に水色・黄・緑の淡色角丸カードで特典を並べる
- **料金表カード**（`price-card`）: 細線枠の角丸カードに項目と金額を行で並べる
- **FAQ行**（`faq-item`）: Q＋質問文＋右端の＋。淡い生成りの角丸行
- **フロー手順**（`flow-step`）: 白い正円アイコン＋番号＋見出し。手順間は小さな三角
- **コンタクト帯**（`contact-band`）: チャコール地に欧文見出し、電話・LINE・メールを縦線で区切る

## Do's and Don'ts

**Do**
- 黄は光・印として控えめに散らす
- 見出しは欧文大＋和文小の二段で統一する
- 写真は角丸で自然光の明るいトーンにする
- 余白を広くとり、細線で静かに区切る
- CTAは黒ピルで統一する

**Don't**
- 黄の大面積ベタ塗りを多用しない
- 原色の赤や派手なグラデーションを使わない
- 強い影や立体ボタンを使わない
- 明朝体や装飾フォントを混ぜない
- 写真を角ばった切り抜きにしない

## Page Structure

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

1. **ファーストビュー**（サービスの価値を直感的に伝える）: 角丸写真を重ねてコラージュし、右に小ラベルと太字キャッチ。背景下部に黄色のぼかし
2. **特典の提示**（無料・割引などの利点を示す）: 淡色の角丸カード3枚を横並び
3. **メッセージ**（理念と共感を伝える）: 左に大見出し、中央に人物写真、右に段落文。下に担当者紹介と丸矢印リンク
4. **サービス紹介**（提供メニューを示す）: 細線で区切った3カラム。縦書きラベル、角丸写真、黄バッジ、白枠ボタン
5. **料金**（価格の明示）: 生成り地に細線角丸の料金カード2枚とオプション枠、注釈
6. **特長**（強みを番号付きで説明）: 01〜04の番号見出し＋本文＋小写真。右に白枠パネルの写真。地色を交互に変える
7. **流れ**（依頼手順を示す）: 淡黄地に丸アイコン4ステップを横並び
8. **対応エリア**（対応地域を示す）: 線画地図の対象地域を黄で塗り、黄丸の地域名バッジを並べる
9. **よくある質問**（不安の解消）: 左に見出し、右にアコーディオン行
10. **ブログ**（更新情報）: タグのピル、サムネイル＋日付＋タイトルのリスト
11. **写真ギャラリー**（雰囲気の訴求）: 大小の角丸写真を高さ違いで横に並べる
12. **お問い合わせ**（行動喚起）: チャコール帯に電話・LINE・メールの3導線
13. **フッター**（ナビゲーション）: 白地にロゴと3列の小さなリンク

## Imagery

- 自然光の屋外・明るい室内で撮った笑顔の人物写真
- カメラや機材を持つスタッフの自然なポーズ
- 子どもの行事シーンは明るく彩度をやや高めに
- 黄色の円形ぼかしを見出しや番号の背後に置く
- アイコンは黒線＋黄の差し色の簡素な線画
- 地図は細いグレー線画に黄の塗り
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPは全セクション1カラムに積む
- サービス3カラムは縦積みカードにする
- 特長は写真を上、文章を下に配置
- フローは縦並びか2×2にする
- 欧文見出しはSPで36〜40px程度に縮める
- コンタクト帯の3導線は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-a6dbc73e`（元 LP の URL から採番）
- **元 LP**: https://syun-sai.jp/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

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

似た LP の design.md

その他山吹×焦げ茶の秋の商業施設イベントLPAutumn Mustard Seasonal Mall Event LP その他郵便赤×紺のギフト体験ショップ LPPostal Red and Navy Gift Shop LP その他紺×金の明朝で魅せる眼鏡専門店サービス LPNavy and Gold Craftsman Optical Service LP その他青×水色×クリームの交通系モバイルサービスLPBright Blue Mobile Transit Service LP その他赤×紺×黄の手書き風ポップ店舗キャンペーン LPBold Red Navy Yellow Pop Retail Campaign LP その他白×金×焦げ茶の上品な家事代行サービスLPWarm Gold Premium Housekeeping Service LP