DESIGN.md — 緑×蛍光イエローの価格訴求型住宅 LP（Bold Lime Green Price-First Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 蛍光イエローの斜め帯・黒の極太ゴシック・巨大な欧文の透かし・モノクロ線画イラスト・擬音の筆文字・LINE 誘導
• 地の質感: フラットなベタ塗り。グラデーションや影はほぼ使わず、写真と線画で質感を出す
• 形: 斜めに傾けた帯、四角い塗り見出し、白い角丸カード、吹き出し、太い下向き矢印
• 温度感: 明るく軽快。若いファミリー向けの元気で気さくなトーン

Colors

• 地の色は緑・黄緑・白・淡グレーの帯で切り替え、セクションの区切りにする
• 最大級の見出しは蛍光イエローの斜め帯に黒文字。キーワードだけ朱色にする
• 緑地では白文字にし、強調語だけ蛍光イエローにする
• 朱色の四角いベタ塗りにイエロー文字を置き、理由や特典の見出しにする
• CTA は LINE の緑だけ使う。ほかの緑とは彩度で区別する
• 大きな欧文透かしは淡いイエローか、地より少し濃い緑で控えめに置く
• block-headline は文字 #E5F453 × 背景 #EB4E05 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BC3E04、4.54:1）を使う。
• price-box は文字 #FFFFFF × 背景 #41B133 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#328727、4.54:1）を使う。
• badge-circle は文字 #E5F453 × 背景 #EB4E05 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BC3E04、4.54:1）を使う。
• button-primary は文字 #F8FEFA × 背景 #05C655 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#038539、4.65:1）を使う。

Typography

• 見出しは超極太のゴシックで、画面幅いっぱいまで大きく組む
• 価格の数字は欧文の極太体で特大にし、単位は小さく添える
• 本文は行間 2.0 前後でゆったり組み、中央揃えか左揃えにする
• 擬音は筆で描いた黒い手書き文字を画像で入れる
• 英字の筆記体はイラストの近くに小さく傾けて置く
• 強調語は色を変えるだけでなく、帯や四角の塗りでも囲む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は大小をずらしたコラージュ配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 色の帯の中に白いカードを左右 6% 程度の余白で置く
• 斜め帯は画面端からはみ出させて動きを出す
• 写真は左右交互に段違いで並べ、地の色をのぞかせる
• 手順は送る→矢印→提案物の縦の流れで見せる
• 比較表は灰色の行、自社だけ緑の大きなボックスにする

Elevation & Depth

• 影は基本使わない。ボタンだけ下側に濃い緑の厚みを付ける
• 書類画像は少し傾け、薄い影で紙を重ねたように見せる
• カードは影なしの白ベタで、色の地から浮かせる

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。大小をずらしてコラージュする
• セクション境界: 基本は直線の色切り替え。誘導部分だけ下向き三角に切り欠く
• 見出しの帯は角丸なしで、-8° 前後に傾ける
• 吹き出しは黒の楕円か、円に尾を付けた形
• 白カードは角丸 16〜24px
• 矢印は朱色の太い下向き矢印

Components

• 斜め帯見出し（slanted-band-headline）: 蛍光イエローの帯を傾けて 2 段に重ね、黒の極太文字を載せる。キーワードは朱色
• 塗りブロック見出し（block-headline）: 朱色または緑の四角いベタ塗りに、イエロー文字を 1〜2 行入れる
• 価格ボックス（price-box）: 緑のボックスに価格を特大の数字で入れ、税込額と注釈を添える
• 比較表の行（compare-row）: 灰色の帯の左に比較先、右に価格帯を置く
• 黒の吹き出しラベル（black-speech-tag）: 黒い楕円の吹き出しに、白またはイエローの文字を入れる
• 円形の強調バッジ（badge-circle）: 朱色の円に尾を付け、イエローの 1 文字を極太で入れる
• 白い説明カード（white-card）: 色の地に置く白い角丸カード。上部に黒い台形のラベルを付ける
• LINE 登録ボタン（button-primary）: 横幅いっぱいのピル型。下側に濃い緑の厚みを付け、上に斜線で挟んだ誘導文を置く

Do's and Don'ts

Do - 見出しは画面幅いっぱいに大きく、帯を傾けて勢いを出す - モノクロ線画の人物を、驚きや喜びのポーズで各所に置く - 地の色を帯で切り替え、リズムよく進める - 数字の訴求は特大の欧文数字で見せる - 手書きの資料写真で、実際の手軽さを見せる

Don't - 淡いパステルや上品な余白で静かにまとめない - 細い明朝体を見出しに使わない - グラデーションや強い影を多用しない - CTA に LINE の緑以外の色を使わない - カラーの写実的なイラストを混ぜない

Page Structure

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

1. ファーストビュー（価格で選ぶという主張を一目で伝える）: 内観写真に縦書きの白い見出しと巨大な欧文を重ね、下に傾けたイエロー帯の見出しを置く
2. 価格と相談導線（本体価格と LINE 相談の入口を示す）: 緑地の左に特大の価格、右に円形の LINE 相談バッジを置く
3. 気付きのストーリー（経歴から主張に至った理由を語る）: 緑地に白の短文を並べ、強調語は朱色の塗りにする。背景に縦の欧文透かしを入れる
4. コンセプト提示（家づくりの方針を言い切る）: 黒とイエローの極太欧文を重ね、黒帯にカタカナ名を入れる
5. 施工写真（品質を見せる）: 外観と内観の写真を段違いにコラージュする
6. 疑問の提起（読み手の不安を代弁する）: 白地に灰色の雲形吹き出しを置き、線画の人物を走らせる
7. 安さの理由（価格の根拠を示す）: 朱色の見出し、緑の塗り帯で理由を 2 行、本文、比較表、価格ボックスの順に置く
8. 最適解の宣言（結論を印象づける）: イエローの斜め帯 2 段に、喜ぶ人物の線画を添える
9. 実例写真（安く見えないことを証明する）: 黄緑地に内観写真をずらして配置する
10. LINE 依頼の流れ（手軽さを具体例で見せる）: 白カードに、送るもの→朱色の矢印→擬音→プラン図と見積書、の流れを 3 例並べる
11. サービス内容（無料対応や送付物を伝える）: 淡い地に塗り帯の見出しを重ね、短い本文と資料画像を置く
12. CTA（LINE の友だち登録へ誘導する）: 斜線で挟んだ誘導文の下に、横幅いっぱいの緑のピル型ボタンを置く

Imagery

• 写真は明るい自然光の、白い壁と木の内観・外観。角丸なしで切り抜く
• 人物は黒一色の線画。ストリート系の服装で、大げさなポーズにする
• 擬音は黒い筆の極太手書き文字で、大きく傾けて置く
• 手書きの間取りやメモの写真を、そのまま素材として載せる
• 書類画像は少し傾けて重ね、紙らしさを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px 幅の SP レイアウトを置き、左右を緑の地で埋める
• 斜め帯は PC でも画面端まで伸ばす
• 写真コラージュは PC で 2〜3 列に広げてもよい
• CTA は PC では最大 480px 幅にして中央に置く

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