DESIGN.md — 白と焦げ茶の北欧インテリア住宅 LP（Nordic Interior Housing Brand LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ナチュラル、上品・高級、シンプル・ミニマル
• キーワード: 北欧・写真主役・余白・焦げ茶の欧文・雑誌的レイアウト
• 地の質感: フラットな白地に実写インテリア写真。装飾はほぼなく細線のみ
• 形: 角丸なしの矩形写真と細枠ボタン。円や曲線はほぼ使わない
• 温度感: 白と木目のあたたかいニュートラル。後半のグレーでやや落ち着く

Colors

• 地は白。外側は薄いグレーで本体を浮かせる
• 色は写真に任せ、文字は焦げ茶と濃グレーに抑える
• オレンジはキャンペーン告知と申込ボタンだけに使う
• 技術・性能の説明は濃グレー地に白文字のブロックでまとめる
• グリーンや木目色は建材サンプル見本としてのみ使う
• campaign-badge は文字 #E8701E × 背景 #FEFEFD のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD5813、4.55:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #E46204 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C35403、4.58:1）を使う。
• color-swatch は文字 #928C81 × 背景 #FEFEFD のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7B756A、4.53:1）を使う。

Typography

• スタイル名は丸みのある欧文、小さな欧文副題とカタカナ読みを添える
• 本文は小さめで行間を広く取る
• 太字はコンセプト一文と項目名だけ
• 項目名は［ ］で囲んで示す
• 大きな和文キャッチは使わず、欧文で印象を作る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真 2 枚並び＋見出しと本文の横並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は横幅いっぱいの大判を基本にする
• スタイル紹介は大判写真→見出し＋本文＋外観写真→写真 2 枚の順で繰り返す
• スタイルの区切りは大きめの白い余白で示す
• 設備仕様は写真と短い説明を交互にずらして配置
• 技術セクションは枠線カードの 2 列グリッド

Elevation & Depth

• 影は使わずフラットに作る
• カードの区切りは細い枠線と地の色差で表す
• 写真同士は細い白の隙間で区切る

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。横長の部屋写真が中心
• セクション境界: 直線と余白。グレー帯で区切る
• ボタンは角ありの細枠に右向き矢印
• 写真に装飾フレームは付けない
• アイコンは立体イラスト風を小さく並べる

Components

• スタイル名見出し（style-title）: 焦げ茶の大きな欧文に、カタカナ読みと小さな欧文副題を添える
• キャンペーン告知ブロック（campaign-badge）: オレンジの欧文見出しと限定数の丸バッジ。期限は細枠帯に入れる
• 申込ボタン（button-primary）: オレンジ地に白文字、右に矢印を付けた細長い矩形
• 線囲みボタン（button-outline）: 白地にグレーの細枠、2 行の文字と右矢印
• 仕様見出し帯（spec-band）: グレー帯に焦げ茶の欧文見出しと一行説明
• 技術カード（tech-card）: 濃グレー地に細枠カード。括弧付き項目名・本文・写真や図
• カラー見本（color-swatch）: 建材色の小さな正方形を並べ、品番を下に添える
• アイコン導線（icon-link）: 立体イラストアイコンの下に矢印付きテキストリンクを 4 つ並べる

Do's and Don'ts

Do - インテリア写真を大きく使い、文字は控えめにする - 4 つのスタイル紹介は同じ構成で繰り返す - 焦げ茶の欧文見出しでブランド感を統一する - 余白を広く取り、雑誌のように見せる - 性能情報は濃グレーのブロックにまとめる

Don't - 原色や派手なグラデーションを使わない - 写真に角丸や影を付けない - 大きな和文の煽りコピーを置かない - オレンジを告知と CTA 以外で使わない - ピル型やポップなボタンにしない

Page Structure

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

1. ファーストビュー（ブランドの世界観と限定キャンペーンの告知）: 左に北欧調イラスト、右に欧文ロゴとオレンジの告知、申込ボタン
2. コンセプト紹介（シリーズの考え方と 4 スタイルの提示）: 左に部屋の写真、右にロゴと 4 スタイルの放射図、短い本文
3. 監修者メッセージ（監修者による信頼づけ）: 街並みの写真と人物写真、2 段組の本文、名前と肩書き
4. スタイル紹介（4 回繰り返し）（各スタイルの雰囲気を伝える）: 大判写真、欧文見出しと本文と外観写真、写真 2 枚並び
5. 設備仕様（外壁・建具・床などの仕様を紹介）: グレー帯見出しのあと、写真と説明とカラー見本をずらして配置
6. キッチンシリーズ（専用設備の訴求）: キッチンの大判写真と収納写真 3 枚、左に説明
7. 技術・性能（断熱・発電・換気などの品質を示す）: 濃グレー地に枠線カードの 2 列。図や写真を添える
8. CTA（申込と資料請求）: グレー帯に線囲みボタンを 2 つ横並び
9. 展示場・関連導線（来場・カタログ・イベントへ誘導）: 立体アイコン 4 つと問い合わせボタン、関連サービスのバナー

Imagery

• 自然光の入る明るい北欧インテリア写真。白壁と明るい木の床を見せる
• 差し色は青・グリーン・マスタードの雑貨やファブリック
• 家の外観は小さな角写真で添える
• 冒頭は木と家のフラットな北欧イラスト
• 設備は素材のアップ写真と色見本
• アイコンは小さな立体イラスト調
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は全て 1 カラムにし、写真は全幅にする
• PC の見出しと本文の横並びは、SP で見出し→本文→外観写真の縦積みにする
• 写真 2 枚並びは SP で縦に積むか横スクロールにする
• 技術カードは SP で 1 列にする
• CTA ボタンは 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 行書くと起動時に読み込まれる。