DESIGN.md — 若葉グラデと光ボケの環境系建設コーポレートLP（Fresh Green Eco Corporate LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 清潔・爽やか、ナチュラル、信頼・誠実、やさしい・柔らかい
• キーワード: 若葉グリーン・光のボケ・葉っぱアイコン・グラデーションのピル型ボタン・縦書きコピー・生成り色の地
• 地の質感: 淡い緑のボケ写真、水しぶき、白い光のにじみを背景に重ねたふんわりした質感
• 形: 大きな角丸の写真枠、円形のラベル、ピル型ボタン、円形の矢印ボタン
• 温度感: 明るく、少し温かみのある爽やかなトーン

Colors

• 地は生成り#F9FAF2と白を交互に使い、緑の写真やボケで区切る
• 見出しの和文は primary の緑、英字ラベルは secondary の黄緑で小さく
• ボタンは黄緑→緑の左右グラデのみ。単色ベタのボタンは作らない
• 本文は真っ黒にせず、温かみのある濃いグレー#4F4F47
• 写真を背景に敷くセクションは半透明の白か暗いオーバーレイを重ね、白文字にする
• 赤や青など強い他色は使わず、緑系の濃淡で強弱をつける
• button-primary は文字 #FFFFFF × 背景 #9BCB1A のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#628010、4.55:1）を使う。
• service-circle-label は文字 #FFFFFF × 背景 #19AC39 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#14882D、4.58:1）を使う。
• circle-arrow は文字 #FFFFFF × 背景 #9BCB1A のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#628010、4.55:1）を使う。

Typography

• 見出しは英字ラベル（小・黄緑）＋和文見出し（大・緑）の 2 段組み
• 見出しの上に小さな葉っぱアイコンを置く
• ミッションコピーは縦書き、キーワードだけ緑にする
• 本文は行間 2.0 前後でゆったり組む
• 大きな英字筆記体を背景の透かし装飾に使う
• 写真上の見出しは白、細めのウェイト
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は事業2列、実績3列、会社案内は左右分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右余白は約 20px
• セクションの見出しは中央揃え、写真背景のセクションは左揃え
• 写真カードは画面幅いっぱいに近い幅で縦に並べる
• お知らせは角丸カードを 8px 間隔で縦に並べる
• お問い合わせは写真背景の上に白い角丸パネルを置く

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• ボタンには緑色のぼかし光（グロー）を軽く付ける
• 白い写真枠は白の太いフチで浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は角の大きい角丸や片側だけ丸い枠で切り抜き、白フチを付ける。実績写真は角丸なしの四角で下部を暗いグラデに
• セクション境界: 白い半円の盛り上がり、上部だけ大きな角丸の帯、フッターは木と芝生のシルエット
• 事業写真の下には円形の緑ラベルを半分重ねる
• 矢印ボタンは緑グラデの正円
• FV写真の上に葉の形の四つ葉型コラージュを置く
• 直線的な鋭い角は避ける

Components

• グラデーションのピル型ボタン（button-primary）: 黄緑→緑の横グラデ、中央に白い文字、右端に点線の矢印
• 葉っぱ付きの見出し（section-heading）: 葉っぱアイコン、英字ラベル、緑の和文見出しを縦に積む
• 番号付きの円ラベル（service-circle-label）: 写真の下に重ねる緑の正円。英字ラベル、番号、事業名、英語の副題を入れる
• 実績写真カード（work-photo-card）: 四角い写真の下部に暗いグラデを重ね、白い文字で中央にキャプション
• 写真背景のリンクパネル（photo-link-panel）: 全幅の写真にオーバーレイ、英字ラベルと白い見出し、右下に円の矢印ボタン
• 円形の矢印ボタン（circle-arrow）: 緑グラデの正円に白い点線矢印。MOREは大きめの円で文字入り
• お知らせカード（news-card）: 淡い生成りの角丸カード。黄緑の日付と、濃いグレーのタイトル
• お問い合わせパネル（contact-panel）: 白い角丸パネルに、淡い色の電話番号ピルと、グラデのメールボタンを入れる
• 縦書きのサイドラベル（vertical-label）: 緑の縦線と点を添えた縦書きの小見出し・SCROLL表示

Do's and Don'ts

Do - 背景には緑のボケや光を薄く敷き、空気感を出す - 見出しは毎回『葉っぱ＋英字ラベル＋和文』の型にそろえる - ボタンは必ずピル型の黄緑→緑グラデにする - 写真は晴れた屋外の自然光で、緑が多く写るものを選ぶ - 余白を広く取り、本文は行間を大きくする

Don't - 真っ黒な文字や濃い黒の背景を使わない - 赤やオレンジをアクセントカラーにしない - 鋭い四角のボタンや細い枠線だけのボタンを使わない - 強いドロップシャドウを付けない - 背景をボケのない単色の緑ベタで広く塗らない

Page Structure

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

1. ファーストビュー（環境と再生のイメージを一目で伝える）: 街と緑の写真を角丸で切り抜き、写真で抜いた英字の大ロゴと短いリード、右に縦書きのSCROLL
2. ミッション（企業の使命を伝える）: 筆記体の英字透かし、縦書きコピー、四つ葉型の写真コラージュ、長めの本文
3. 事業内容（主要な事業 2 つを紹介する）: 緑のボケを背景に、角丸写真と番号付きの円ラベル、説明文、ピル型ボタン
4. 実績紹介（施工例で信頼を示す）: 水しぶきの装飾と縦書きの見出し、キャプション付きの写真カードを縦に 3 枚並べ、ボタン
5. 会社案内・代表挨拶・採用（下層ページへ案内する）: 全幅の写真パネルを 3 段重ね、白い見出しと円の矢印ボタン
6. お知らせ（最新情報を一覧で見せる）: 左揃えの見出しと右のMORE円ボタン、日付付きの角丸カードを縦に並べる
7. お問い合わせ（電話・メールへ誘導する）: 上部が角丸の緑ボケ写真帯、舞う葉っぱ、大きな英字の透かし、白いパネルに電話番号とボタン
8. フッター（会社情報とサイト内リンクを示す）: 生成りの地にロゴ・住所・2列の黄緑の点付きリンク、木のシルエットと緑の芝生の帯

Imagery

• 写真は晴天の屋外、緑が多い施工現場や庭、明るく彩度高めに
• 背景に緑の光のボケ（レンズフレア風の円）を薄く重ねる
• 葉っぱの切り抜き素材を舞うように配置する
• 水しぶき・波の淡い青をアクセント背景に使う
• フッターは木と芝生をフラットなシルエットで描く
• 写真を文字の形でくり抜く（クリッピング）英字ロゴ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は最大幅約 1000px の中央寄せ、グローバルナビは横並び、右上は緑の角丸お問い合わせボタン
• PC の事業内容は 2 列、実績は左に見出し・右に写真 3 枚を段違いで並べる
• PC の会社案内は左半分に大パネル、右に代表挨拶と採用を 2 段に積む
• PC のお知らせは左に見出しとMORE、右にリスト
• SP はハンバーガーメニュー（右上の緑の角丸タブ）
• 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 行書くと起動時に読み込まれる。