--- version: alpha name: Tricolor Step Housing Plan LP description: 白地をベースに、オレンジ・青・緑の3色で手順（STEP）ごとにセクションの色を塗り分けた規格住宅プランの LP。丸みのある大きな色面パネルの中に白カードを重ね、太いゴシックの見出しで「選ぶ楽しさ」と「手軽さ」を明るく伝える。 colors: primary: '#FF7E33' secondary: '#227DE4' accent-1: '#18B71F' background: '#FEFEFE' background-alt: '#F7F7F7' tint-1: '#FEF2EA' tint-2: '#D3F0D4' surface: '#FEFEFE' text: '#020202' on-primary: '#F0FEFE' cta: '#FE7E34' on-cta: '#FFFFFF' text-muted: '#8E8E8E' line: '#F7F7F7' cta-accessible: '#CE4C01' primary-accessible: '#CC4B00' secondary-accessible: '#1A73D7' accent-1-accessible: '#128817' typography: display: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px step-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 600px reason-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 160px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 260px number-circle: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 24px style-tab: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 36px label-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — 青緑橙のステップ配色の規格住宅 LP（Tricolor Step Housing Plan LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: ポップ・元気、清潔・爽やか、信頼・誠実、情報量多め・訴求型 - **キーワード**: 3色ステップ配色・角丸の色面パネル・白カード重ね・太ゴシック見出し・明るい住宅写真 - **地の質感**: フラットな単色面。色面の背景に間取り図や家具の線画を薄く敷いて単調さを抑える - **形**: 大きめ角丸（20px前後）のパネルとカード。番号は丸囲み、タブは上角丸 - **温度感**: 暖色オレンジを主にした明るく親しみやすい温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF7E33` | ブランド主色・理由セクション/STEP03の面 | 6% | 画素の実測 | | `secondary` | `#227DE4` | STEP01の面・青アクセント | 4% | 画素の実測 | | `accent-1` | `#18B71F` | STEP02の面・緑アクセント | 6% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地色 | 36% | 画素の実測 | | `background-alt` | `#F7F7F7` | 手順紹介・フッターの薄グレー地 | 7% | 画素の実測 | | `tint-1` | `#FEF2EA` | オプション・標準仕様の淡オレンジ地 | 6% | 画素の実測 | | `tint-2` | `#D3F0D4` | 外観タブパネル・コーディネートカードの淡緑 | 6% | 画素の実測 | | `surface` | `#FEFEFE` | 色面上の白カード | 15% | 画素の実測 | | `text` | `#020202` | 見出し・本文の濃色 | 2% | 画素の実測 | | `on-primary` | `#F0FEFE` | 色面上の白文字 | 1% | 画素の実測 | | `cta` | `#FE7E34` | 申込ボタン | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text-muted` | `#8E8E8E` | 注釈の灰色文字 | 0% | 画素の実測 | | `line` | `#F7F7F7` | セクション区切りの点線・枠線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#CE4C01` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CC4B00` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1A73D7` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#128817` | AA を満たす補正値（計算） | | 計算 | - STEP01=青、STEP02=緑、STEP03=オレンジと手順ごとに色を固定する - 色面セクションは画面幅いっぱいの角丸パネルにし、中に白カードを置く - オレンジはブランド主色かつCTA色として兼用する - 色面の中のサブパネルはその色の淡いトーン（淡緑・淡橙）を使う - 見出しの一部の語だけをオレンジ/青/緑の文字色で強調する - 地は白と薄グレーを交互に使いセクションを区切る - `button-primary` は文字 `#FFFFFF` × 背景 `#FE7E34` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CE4C01`、4.51:1）を使う。 - `button-outline` は文字 `#FF7E33` × 背景 `#FEFEFE` のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CC4B00`、4.55:1）を使う。 - `step-panel` は文字 `#F0FEFE` × 背景 `#227DE4` のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1A73D7`、4.54:1）を使う。 - `number-circle` は文字 `#18B71F` × 背景 `#FEFEFE` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#128817`、4.57:1）を使う。 - `style-tab` は文字 `#F0FEFE` × 背景 `#18B71F` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#128817`、4.63:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの価格・大数字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em | | `headline-lg` | STEPセクション大見出し（色面上の白文字） | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.4 | 0.08em | | `headline-md` | セクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.5 | 0.05em | | `headline-sm` | カード見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | STEP番号・英字ラベル | 欧文サンセリフ | Montserrat | 700 | 13px | 1.2 | 0.1em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - 見出しは極太ゴシックで、字間を少し空ける - 数字・英字ラベルは幾何学系サンセリフで太く - 見出しのキーワードだけ色を変えて強調 - 本文は小さめで行間を広く取る - カード見出しは左に縦の色バーを付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦積み、設備写真は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 色面パネルは左右 8〜12px の余白で角丸に - 白カードはパネル内で左右 16px - セクション内の小見出しは丸数字で 1・2・3 と区切る - 3つの理由・3STEPはSPで縦積み ## Elevation & Depth - 影はほぼ使わずフラット - 白カードは色面とのコントラストで浮かせる - ステップカード同士は三角矢印でつなぐ ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸 8〜12px の矩形 - **セクション境界**: 角丸パネルの切り替えと、下向き三角の吹き出し状の継ぎ目 - パネルとカードは必ず角丸 - タブは上辺のみ角丸 - 番号バッジは円形 - ボタンは角丸 6px の矩形 ## Components - **申込ボタン**（`button-primary`）: オレンジ地に白文字、左に小ラベル、右に矢印 - **詳しく見るボタン**（`button-outline`）: 白地にオレンジ枠・オレンジ文字、虫眼鏡アイコン付き - **STEP色面パネル**（`step-panel`）: 全幅の角丸色面に英字STEP番号と白見出し、背景に薄い線画 - **理由カード**（`reason-card`）: オレンジ面上の白カード、右上に丸い番号バッジ - **ステップカード**（`step-card`）: 淡色地のカード、上部に色帯のSTEPラベル、中央に円形アイコン - **丸数字の小見出し**（`number-circle`）: 細線の円に数字、左右に区切り線 - **スタイル切替タブ**（`style-tab`）: 選択中は濃緑、他は淡緑の上角丸タブ - **見出し上ラベル**（`label-pill`）: 黒枠の小さな角丸ラベル ## Do's and Don'ts **Do** - STEPごとの色を一貫させる - 色面の上には白カードを重ねて情報を載せる - 見出しは短く2行程度に区切る - 数字（価格・プラン数・回数）を大きく見せる - 明るく清潔な室内・外観写真を使う **Don't** - 3色以外の強い色を足さない - 角の立った四角い色面を使わない - 濃い影やグラデーションを多用しない - 暗い・夕景の写真を使わない - 本文を色面に直接長く載せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（受賞実績・価格・商品の印象を一度に伝える）: 左に受賞文言・ロゴ・2つの丸バッジ・大きな価格、右に外観写真とオレンジの円形数字バッジ 2. **コンセプト**（簡単・スムーズという価値を伝える）: 打合せ写真と室内写真を重ね、右に3行見出しと淡橙の性能タイル4つ 3. **キャンペーンバナー**（来場予約を促す）: 和柄風の明るいバナー画像を中央配置 4. **3つの理由**（手頃さの根拠を示す）: オレンジ角丸パネルに白カード3枚、番号バッジ付き 5. **家づくりの流れ**（3ステップと打合せ回数の少なさを示す）: 薄グレー地に青緑橙のステップカード、下に工程フロー図 6. **STEP01 間取り**（豊富なプランから選べることを示す）: 青パネル内の白カードに文章と家族写真、枠付きボタン 7. **STEP02 外観・内装・設備**（選べるデザインと標準設備を見せる）: 緑パネル内に丸数字で3ブロック、タブ切替、横スライダー、設備写真2列グリッド 8. **STEP03 オプション**（追加できる設備を紹介）: オレンジパネル内に淡橙カード3枚、上に＋記号 9. **標準仕様**（性能の安心感を伝える）: 淡橙パネルに写真付き白カードを2列、各カードに詳しく見るボタン 10. **CTA**（来場予約へ誘導）: キャンペーンバナーとオレンジ申込ボタン 11. **フッター**（会社情報）: 薄グレー地に中央寄せロゴと住所、最下部に青い全幅リンク帯 ## Imagery - 白壁と木目の明るい外観写真を晴天で撮る - 白基調の室内・水回りを自然光で - 家族や営業担当の打合せシーンは笑顔で明るく - 色面背景に住宅・家具の線画パターンを薄く敷く - アイコンは円形の中に白い線画 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは3つの理由・ステップを3列、SPは縦積み - PCのFVは左テキスト右写真、SPは写真の上に価格を重ねるか縦並び - 設備写真はPC・SPとも2列を維持 - 標準仕様カードはPC2列、SPは1列 - SPでは下部固定の申込ボタンを推奨 ## 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-7ad4be90`（元 LP の URL から採番） - **元 LP**: https://www.yamatojk.co.jp/fix - **解析に使った画像**: PC（PC版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。