DESIGN.md — 鮮やかな緑×黄色のポップな建設企業ブランドLP（Vivid Green Playful Corporate Brand LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、力強い・インパクト、清潔・爽やか、親しみ・手作り感
• キーワード: 緑のグラデーション・斜めの見出し帯・黄色カード・雲のイラスト・キャラクター・ポップ
• 地の質感: フラットな面に縦方向の緑グラデーションを重ね、ごく薄い幾何学模様と淡い雲イラストで奥行きを出す
• 形: 角丸の大きいカード、ピル型ボタン、平行四辺形の見出し帯、斜めにカットしたセクション境界
• 温度感: 明るく元気で爽やか。緑一色の中で黄色が温かみを足している

Colors

• 地は緑系だけで構成する。濃い緑・明るい緑・淡いミントを、セクションごとに縦グラデーションで切り替える
• 黄色は事例カードのキャプション帯、CASE バッジ、再生ボタンだけに使う強調色
• 見出し帯は草色の平行四辺形にし、黒の影帯をずらして重ねる
• 緑地の本文は白文字、ミント地や黄色地の文字は濃いグレー
• 主ボタンは草色の地に白文字、サブボタンは白の地に濃い文字にする
• heading-skew-band は文字 #F8FEF9 × 背景 #60B768 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3B8342、4.55:1）を使う。
• button-primary は文字 #F8FEF9 × 背景 #60B768 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3B8342、4.55:1）を使う。

Typography

• 英字ラベルは斜体の太字にし、白い文字に緑の縁取りを付けて、日本語見出しの左上に少し重ねる
• 日本語の見出しはすべて太字（900 相当）のゴシックにする
• 本文は太め（500）で行間を広めにとる（1.9）
• ファーストビューのコピーは白の極太文字を斜めに傾け、写真に重ねる
• 明朝体や細いウェイトは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では事例カードを 3 列に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• カードとボタンは左右を 20px 前後あけて中央に置く
• カードどうしの縦の間隔は 32px
• 見出し帯は中央に置き、英字ラベルは左上にずらして重ねる
• セクションの上端は斜めにカットし、前のセクションに食い込ませる
• 雲やキャラクターのイラストは画面の端からはみ出させて配置する

Elevation & Depth

• カードには下方向にやわらかい影を付ける（0 6px 16px、不透明度 15%）
• ピル型ボタンにも薄い影を付けて浮かせる
• 見出し帯の影は、ぼかさない黒の平行四辺形を右下にずらして重ねる
• プロフィールの面は半透明にして、背景の緑を透かす

Shapes

• 角丸: 小 12px ／ 中 20px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: カードの写真は上の角だけ丸め、人物写真はわずかに傾けた角丸の四角で切り抜く
• セクション境界: 右上がりの斜めの直線でセクションを区切る
• 見出し帯は平行四辺形にする
• CASE バッジは黄色のピル型にし、写真の左上に重ねる
• プロフィールの面は少し傾けた台形にする
• カード右下にはプラスの円アイコンを置く

Components

• 斜め帯の見出し（heading-skew-band）: 草色の平行四辺形に白の太字見出しを入れ、黒の影帯を重ねる。左上に斜体の英字ラベルを置く
• 事例カード（case-card）: 上は写真、下は黄色のキャプション帯で、太字のタイトルとプラスアイコンを入れる。開閉できる
• CASE 番号バッジ（case-badge）: 写真の左上に置く黄色のピル型ラベル
• 白ピルボタン（button-white-pill）: 白地に濃い文字。右端に別窓アイコンを付ける
• 主ボタン（動画切替）（button-primary）: 草色のピル型ボタン。選んでいないほうは淡いミント地にグレー文字
• 動画サムネイル枠（video-frame）: 緑の太い枠で囲んだ角丸のサムネイル。中央に黄色の丸い再生ボタンを置く
• プロフィールの面（profile-panel）: 半透明ミントの傾いた面に、角丸の人物写真・大きな名前・本文を縦に並べる
• 下部固定ナビ（sticky-nav-banner）: クリーム色の帯に、丸アイコン付きの緑ボタンを 2 つ並べる。その下に黒の採用バナーを置く

Do's and Don'ts

Do - 地の色は緑のグラデーションで統一する - 強調は黄色の面に絞る - 見出しは毎回「英字ラベル＋斜め帯」の組み合わせにする - 雲やキャラクターのイラストを、セクションの端に入れて遊び心を出す - ボタンは大きなピル型にし、影を付ける

Don't - 赤や青など、緑系以外の強い色を地に使わない - 細い書体や明朝体を使わない - セクションを水平な直線だけで区切らない - 黄色を本文の地に広く使わない - 角の尖ったボタンを使わない

Page Structure

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

1. ヘッダー（ブランドを示す）: 白地の細い帯。左に緑の斜体ロゴタイプ、右にコーポレートロゴを置く
2. ファーストビュー（インパクトのある第一印象をつくる）: 淡い緑の空に、跳ぶ人物とキャラクターを配置する。白の極太コピーを斜めに重ね、下部にロゴとクレーンのイラストを置く
3. 実績の導入（企業の強みを説明する）: 濃い緑の地に斜め帯の見出しと白文字の本文を置き、雲のイラストを添える
4. 事例カード一覧（具体的な実績を見せる）: 写真と黄色キャプションのカードを 3 枚縦に並べ、最後に白のピル型「もっと見る」ボタンを置く
5. CM 動画（広告動画を見せる）: 淡いミントの地を斜めに切って始める。緑の枠のサムネイルを置き、尺違いの切替ボタンを 2 つ並べる
6. プロフィール（起用した人物を紹介する）: 濃い緑の地に半透明の傾いた面を置き、写真・大きな名前・経歴の本文を並べる
7. 固定ナビ（各セクションや外部サイトへ誘導する）: 画面下に固定する。丸アイコン付きの緑ボタン 2 つと、黒の採用サイトバナーを置く

Imagery

• 人物は白い背景で、ジャンプするなど躍動的なポーズで撮り、切り抜いて使う
• 緑の作業着を着たキャラクターを、セクションの角からのぞかせる
• 雲は淡いミント色のフラットなイラストにする
• クレーンや重機は緑の線画風で描く
• 実績の写真は青空と建築物、または構造物の内部を広角で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央の幅は約 70% に抑え、左右を緑の地で埋める
• PC では事例カードを 3 列の横並びにする
• PC ではプロフィールを写真と本文の横 2 列にする
• PC では動画切替ボタンを横に並べる
• 下部の固定ナビは、PC では右下の小さなパネルにする

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