DESIGN.md — 若草色×紺の家キャラ住宅会社 LP（Bold Green Mascot Housing Builder LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、親しみ・手作り感、信頼・誠実、力強い・インパクト
• キーワード: 若草色ベタ塗り・白の極太コピー・家マスコット・紺のピルボタン・角丸白パネル
• 地の質感: グラデーションや質感を使わないフラットなベタ塗り。イラストは太い紺の線で描いたアニメ調。
• 形: 大きな角丸の白パネルと、紺色で黄色い縁取りのあるピルボタン。写真は一つの角だけを大きく丸めた変形の角丸。
• 温度感: 明るく温かい。元気な緑に赤い屋根と黄色をアクセントに使う。

Colors

• 地色はほぼ全面を若草色の単色にし、セクションごとの色替えはしない。
• 情報パネル（新着情報・物件・フッター）だけ白の角丸パネルを重ねる。
• 緑の地の上の文字は白、白パネルの上の文字は濃い紺緑にする。
• ボタンはすべて紺緑の地に白文字、外周に黄色の細い縁を付ける。
• 黄色は下線・縁・価格など小さい強調にだけ使う。
• 赤とベージュはマスコットのイラストの中でだけ使う。

Typography

• メインコピーは極太の丸ゴシックで、白抜きを大きく使う。
• ファーストビューのコピーは縦書きにして左右に配置する。
• セクション見出しは家アイコンの丸バッジと英字の組み合わせにし、左に短い横線を引く。
• 本文は短い行で改行し、行間を2.0前後まで広く取る。
• 強調したい語は白い角丸の帯に紺文字で載せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。物件カードは横スクロールにするか、2 列で並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真とテキストはジグザグに左右を入れ替えて配置する。
• 写真は画面の端まで寄せ、反対側にテキストを置く。
• ファーストビューは中央に白い縦帯を通し、その上にマスコットを縦に並べる。
• 白パネルは左右どちらかの端を画面の外まで伸ばす。
• ボタンはテキストブロックの左端か中央に揃える。

Elevation & Depth

• 影は基本的に使わず、フラットに仕上げる。
• 奥行きは白パネルと緑の地のコントラストだけで出す。
• マスコットは太い輪郭線で浮き立たせる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 長方形の写真の一つか二つの角だけを大きく丸める。
• セクション境界: 直線の境界で切り替え、白パネルの角丸で区切る。家マスコットを横一列に並べた帯で区切ってもよい。
• ボタンは完全なピル型にし、右端に小さな三角の矢印を付ける。
• 白パネルの角丸は24〜32px。
• 吹き出しはピル型の白地に紺文字で作る。
• 縦書きコピーは白い長方形の帯に載せる。

Components

• 紺のピルボタン（button-primary）: 紺緑の地に白文字。外周に黄色の細い縁を付け、右端に小さな三角を置く。
• アイコン付き英字見出し（section-label）: 左に短い横線、続いて家アイコンの丸バッジ、その右に英字見出しを並べる。
• 白い吹き出し（speech-pill）: 白のピル型の吹き出しに紺の太字で短いひと言を書く。
• 縦書きコピー帯（vertical-copy-band）: 白い縦長の帯に紺の太字で縦書きのコピーを2行載せる。
• 物件カード（property-card）: 写真の下に小さなタグ、物件名、黄色の価格を置き、白パネルの中に3枚並べる。
• 角丸の白パネル（white-panel）: 大きな角丸の白い面。左上に縦書きの丸バッジ見出しを付ける。
• マスコットの行列帯（mascot-parade）: 家のマスコットを横一列に繰り返し並べた区切りの帯。
• 黄色下線のコピー（underline-copy）: 白い太字コピーの下に黄色の太い下線を引く。

Do's and Don'ts

Do - 地色は若草色の単色で統一する。 - セクションごとにマスコットを登場させ、親しみを出す。 - ボタンは紺のピル型、黄色の縁、矢印付きの形で揃える。 - 写真は片側の角だけを丸め、画面の端に寄せる。 - 緑の地の上の本文は白で、短い行に分けて改行する。

Don't - 背景を他の色やグラデーションに替えない。 - 細い明朝体を使わない。 - 重いドロップシャドウを付けない。 - ボタンの形を四角や他の色にしない。 - 黄色や赤を広い面に使わない。

Page Structure

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

1. ファーストビュー（ブランドの姿勢を印象づける）: 中央に白い縦帯を通してマスコットを縦に並べ、左右に白い極太の縦書きコピーを置く。
2. コンセプト（価格と品質へのこだわりを伝える）: 短い白文字の段落を左右にずらして配置し、黄色下線のコピーで締める。
3. スローガン（記憶に残るひと言を見せる）: 画面幅いっぱいの白い巨大文字の周りを、マスコットの行列が歩く。
4. 新着情報（イベントやお知らせを伝える）: 白パネルの中にバナーのスライダーを置き、下にドットを付ける。
5. 理念（誠実さを伝える）: 左に縦書きコピーの帯、右に白い本文を置き、隅にマスコットを添える。
6. 物件一覧（建売・分譲地への導線を作る）: 白パネルに物件カードを3枚並べ、下に紺のボタンを置く。
7. 技術・お客様の声・商品ラインナップ（各ページへの誘導）: 角丸の写真とアイコン見出しを左右交互に組み、間にマスコット行列の帯と英字ループを挟む。
8. 会社案内（信頼感を伝える）: 左にテキストとボタン、右に街並みのアイソメトリックイラストを置く。
9. マガジン（情報発信の場を紹介する）: 白い枠の左に説明、右にカラフルな記事タイルをグリッドで並べる。
10. フッター（SNSと会社情報を載せる）: 大きな白パネルに英字のSNS誘導、ロゴ、住所を置き、両脇にマスコットを添える。

Imagery

• 芽が生えた家のマスコットを紺の太い線のアニメ調で描き、赤い屋根とベージュの壁で塗る。
• マスコットは表情や手のポーズを変えて、繰り返し登場させる。
• 施工写真は白基調の明るい室内を、自然光で撮る。
• 外観写真は青空の下で、正面から撮る。
• 街並みはアイソメトリックのフラットなイラストで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左に縦長のナビゲーション、右端に縦書きの問い合わせタブを固定する。SPではハンバーガーメニューと下部固定のボタンに置き換える。
• SPでは縦書きコピーの文字サイズを40px前後に下げる。
• 左右交互のレイアウトは、SPでは写真が上、テキストが下の縦並びにする。
• 物件カードはSPでは横スクロールにする。
• マスコット行列の帯は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 行書くと起動時に読み込まれる。