--- version: alpha name: Vivid Green Playful Corporate Brand LP description: 緑のグラデーション地に黄色のカードを重ねた、企業ブランディング用の LP。斜めにカットした見出し帯、雲や重機のイラスト、手書き風の英字ラベルを使い、硬い業種でもポップで親しみやすく見せている。 colors: primary: '#078F67' secondary: '#60B768' background: '#D9F2DD' background-alt: '#2BC682' surface: '#ACDDCE' cta: '#F7E35C' on-cta: '#2E2E2E' on-primary: '#F8FEF9' text: '#21312C' dark-section: '#2B2B2B' surface-light: '#F8FEF9' tint-1: '#BEEBCA' accent-1: '#EDE3A6' secondary-accessible: '#3B8342' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 900 lineHeight: 1.0 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 12px md: 20px lg: 28px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-skew-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 50px case-card: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 300px case-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px button-white-pill: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px button-primary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px video-frame: backgroundColor: '{colors.background}' rounded: '{rounded.lg}' height: 330px profile-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 1300px sticky-nav-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 290px --- # DESIGN.md — 鮮やかな緑×黄色のポップな建設企業ブランドLP（Vivid Green Playful Corporate Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: ポップ・元気、力強い・インパクト、清潔・爽やか、親しみ・手作り感 - **キーワード**: 緑のグラデーション・斜めの見出し帯・黄色カード・雲のイラスト・キャラクター・ポップ - **地の質感**: フラットな面に縦方向の緑グラデーションを重ね、ごく薄い幾何学模様と淡い雲イラストで奥行きを出す - **形**: 角丸の大きいカード、ピル型ボタン、平行四辺形の見出し帯、斜めにカットしたセクション境界 - **温度感**: 明るく元気で爽やか。緑一色の中で黄色が温かみを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#078F67` | ブランドの濃い緑（セクション地） | 12% | 画素の主要色に補正 | | `secondary` | `#60B768` | 見出し帯・主ボタンの草色 | 4% | 画素の主要色に補正 | | `background` | `#D9F2DD` | 淡いミントの地（動画セクション） | 12% | 画素の主要色に補正 | | `background-alt` | `#2BC682` | 明るい緑グラデーションの地 | 15% | 画素の主要色に補正 | | `surface` | `#ACDDCE` | 半透明ミントのプロフィール面 | 14% | 画素の主要色に補正 | | `cta` | `#F7E35C` | 事例カードのキャプション帯・再生ボタン | 6% | 画素の主要色に補正 | | `on-cta` | `#2E2E2E` | 黄色面の上の文字 | 1% | 推定 | | `on-primary` | `#F8FEF9` | 緑地上の白文字・白ボタン | 4% | 画素の主要色に補正 | | `text` | `#21312C` | 見出し・本文の濃い文字 | 3% | 画素の主要色に補正 | | `dark-section` | `#2B2B2B` | 見出し帯の影・固定バナー | 2% | 推定 | | `surface-light` | `#F8FEF9` | | 3% | 画素の主要色に補正 | | `tint-1` | `#BEEBCA` | ファーストビューの淡い黄緑の空 | 7% | 画素の主要色に補正 | | `accent-1` | `#EDE3A6` | 固定バナーのクリーム色の地 | 2% | 推定 | | `secondary-accessible` | `#3B8342` | AA を満たす補正値（計算） | | 計算 | - 地は緑系だけで構成する。濃い緑・明るい緑・淡いミントを、セクションごとに縦グラデーションで切り替える - 黄色は事例カードのキャプション帯、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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの斜めに置く巨大コピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 72px | 1.0 | -0.02em | | `headline-lg` | 人名など大きな見出し | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.3 | 0.05em | | `headline-md` | 斜め帯の中のセクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 21px | 1.3 | 0.03em | | `accent` | 見出し上の斜体英字ラベル | 欧文サンセリフ | Montserrat | 900 | 26px | 1.0 | 0.0em | | `headline-sm` | 事例カードのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.9 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `note` | CASE バッジ・小さなラベル | 欧文サンセリフ | Montserrat | 700 | 13px | 1.2 | 0.02em | - 英字ラベルは斜体の太字にし、白い文字に緑の縁取りを付けて、日本語見出しの左上に少し重ねる - 日本語の見出しはすべて太字（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 ```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-6baff494`（元 LP の URL から採番） - **元 LP**: https://www.tokyu-cnst.co.jp/muzuiino/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（0/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。