DESIGN.md — 黒ダマスク×金装飾の高級分譲マンション LP（Black Damask Gold Luxury Condominium LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、信頼・誠実
• キーワード: 黒ダマスク・金のロゴ・明朝体・淡グレー地・航空写真・余白多め
• 地の質感: 前半は黒いダマスク柄と深い黒緑のグラデーション。後半は淡いグレーの単色地で紙のような静けさ。
• 形: 角丸のない四角が基本。写真の裏にずらしたグレーの矩形を置き、見出し上に斜めの細線を引く。
• 温度感: 前半は重厚で冷たい高級感。後半はクールで清潔な明るさ。

Colors

• 冒頭とクロージングは黒またはダマスク柄の黒地に、金と白の文字だけを置く。
• 中盤の情報セクションは淡いグレー地にし、黒地と交互にせず長く続ける。
• 金色はロゴ・セクション英字見出し・CTA だけに使う。
• 本文は純黒を避け、濃い紺グレーにする。
• 赤は交通図の現在地など、ごく小さな強調にだけ使う。
• IoT・生活提案のセクションだけは白地にして軽さを出す。
• button-primary は文字 #FFFFFF × 背景 #A88A6C のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8D7054、4.59:1）を使う。
• icon-circle は文字 #A4BEC0 × 背景 #EAEBED のコントラスト比が 1.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#4F6F72、4.57:1）を使う。

Typography

• 日本語は見出しも本文も明朝で揃える。
• セクションは金の欧文セリフ見出し＋小さな英字サブ＋明朝リードの三段にする。
• リード文は中央揃えにし、行間を広く取る。
• 徒歩分数などの数字だけ大きくして強調する。
• 注釈だけは小さなゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央約 50% 幅の 1 カラムで、写真と文章を左右交互に置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの冒頭に斜めの細線と金の英字見出しを中央揃えで置く。
• 立地紹介は写真と文章を左右交互に並べ、背面に大きな淡い英字を敷く。
• 地図・図版はコンテンツ幅いっぱいに置く。
• 上下の余白を大きく取り、情報を詰めない。
• 生活シーンの写真は 4 枚を横に並べ、SP では 2×2 にする。

Elevation & Depth

• 影はほぼ使わず、平面で構成する。
• 写真の背面にずらした淡いグレー矩形を置いて奥行きを出す。
• 黒地ではロゴの金色に光沢と光のフレアを足す。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。IoT 機器だけ円形に切り抜く
• セクション境界: 背景色を直線で切り替え、見出し上に斜めの細線を引く
• ボタンは角丸なしか、ごく小さな角丸の長方形にする。
• 写真は 4:3 前後の長方形で、裏に矩形を重ねる。
• 円形は機器紹介のアイコンにだけ使う。

Components

• エントリー CTA（button-primary）: くすんだ金の長方形の地に白い明朝文字。下に小さな英字を添える。
• 金英字セクション見出し（section-heading）: 斜めの細線の下に、金の欧文セリフ見出しと小さな英字サブを置く。
• 王冠エンブレムロゴ（crown-logo）: 金属感のある王冠の下に欧文ロゴを組んだ、黒地用のエンブレム。
• 立地紹介ブロック（location-row）: 写真と、明朝の見出し・本文を左右交互に置く。背面に淡い大英字とグレー矩形を敷く。
• 所要時間カード（access-time）: 駅名と所要分数を大きな明朝で示し、その下に写真を置く。3 つ並べる。
• 徒歩分数の円形バッジ（badge-walk）: 黒地に白い細枠の円を描き、駅名と徒歩分数を入れる。
• 図版タイトル帯（label-box）: 紺グレーの帯に白文字で図のタイトルを入れる。
• 円形機器アイコン（icon-circle）: 淡い水色の円の中に家電の写真を置き、下にキャプションを付ける。

Do's and Don'ts

Do - 冒頭とクロージングは黒ダマスクの地に金を合わせ、重厚さを出す。 - 日本語は明朝で統一し、行間と字間を広めに取る。 - 各セクションは金の英字見出しで始める。 - 写真は晴天の明るい街並みや自然を使い、淡いグレーの地に映えるようにする。 - 注釈は小さな文字で、写真の下にきちんと添える。

Don't - 彩度の高い原色やポップな丸ゴシックは使わない。 - ピル型ボタンや大きな角丸カードは使わない。 - 金色を本文や広い面に使わない。 - 強いドロップシャドウやグラデーションボタンを使わない。 - 余白を詰めて情報を密に並べない。

Page Structure

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

1. ファーストビュー（立地の価値を一目で伝える）: 全幅の航空写真に光の柱と施設名ラベルを重ね、縦書き明朝コピーを添える。
2. ブランド紹介・物件概要（高級感と物件の要点を見せる）: 黒ダマスク地に王冠ロゴ、筆記体の英字、間取りの概要、円形の徒歩バッジ、金の CTA を置く。
3. 立地航空図（周辺環境を俯瞰で見せる）: 黒地の中央に雲をかけた航空写真を大きく置く。
4. コンセプト（暮らしの世界観を語る）: 黒緑のグラデーション地にロゴ、縦書きコピー、中央揃えの明朝本文、眺望写真を置く。
5. ロケーション（駅・商業・公園・海の魅力を伝える）: 淡いグレー地に、写真と文章を交互に 4 段並べ、背面に大英字を敷く。最後に周辺地図を置く。
6. アクセス（交通の利便性を数字で示す）: 駅写真の下に徒歩分数を大きく出し、主要駅への所要時間カードを 3 つと路線図を並べる。
7. 省エネ性能（環境性能の信頼性を示す）: 大きな濃紺の英字見出しの下に、性能図解・断面図・評価ラベルを細線で区切って並べる。
8. IoT・暮らし提案（快適な生活像を見せる）: 白地に、ライフスタイル写真、線画イラスト、円形の機器アイコン、4 枚の生活シーン、間取り図解を並べる。
9. ネット環境（設備の付加価値を示す）: 細線見出しに中央揃えの本文とサービスロゴを添える。
10. クロージング CTA・事業者情報（エントリーと問い合わせに導く）: 黒地に金の CTA、フリーダイヤル、事業者ロゴ、小さな注記を並べる。

Imagery

• 晴天の高層から撮った航空写真に、光の柱と白い枠のラベルを重ねる。
• 黒地には同系色のダマスク柄を薄く敷き、金属感のある王冠のエンブレムを置く。
• 街・公園・海の写真は青空で明るく、彩度は控えめにする。
• IoT の説明には、淡い色の線画で人物を描いたイラストを使う。
• 生活シーンは自然光の室内で、柔らかく撮る。
• 図版はグレーと紺を主体に、アクセントを少しだけ入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 50% 幅だが、SP では 90% 幅の 1 カラムにする。
• 立地紹介の左右交互配置は、SP では写真を上、文章を下にして縦に積む。
• 所要時間カードと生活シーンの 4 枚は、SP では 2 列か縦積みにする。
• 縦書きコピーは SP でも縦書きのまま残し、文字を小さくする。
• 地図や図版は 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 行書くと起動時に読み込まれる。