DESIGN.md — グレージュ×深紅の上質住宅実例集 LP（Quiet Gallery Housing Catalog LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、シンプル・ミニマル、信頼・誠実
• キーワード: 余白・明朝体・グレージュ・深紅のCTA・雑誌的レイアウト・ずらし背景帯
• 地の質感: フラットな単色面。写真の上にぼかした室内写真を背景として敷く
• 形: 角丸のない直角の矩形。細い線と矩形の帯で区切る
• 温度感: やや寒色寄りのニュートラル。木の温かみは写真で補う

Colors

• 地は白。ライトグレーかグレージュの帯を右側にずらして重ね、層を作る
• 彩度のある色は深紅だけ。主CTAとNewバッジ以外には使わない
• サブ動線のボタンはチャコールで塗り、主CTAと差をつける
• 濃い帯はブルーグレー1色だけにし、文字は白にする
• 欧文の大見出しは淡いベージュにして、背景と溶け込ませる

Typography

• 見出しとボタンは明朝体、本文はゴシック体に分ける
• 字間を広めにとり、ゆったり見せる
• 欧文の大見出しは画面幅の8割ほどの大きさで、淡い色にする
• 太字はボタンだけに使い、見出しはミディアムで品よく見せる
• 号数などの補足は欧文セリフで小さく、見出しの横に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スライダーは右端に次の画像を少しのぞかせる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 背景帯は左に約25%の白を残し、右側にずらして配置する
• テキストは左揃え。説明文は中央に置かない
• CTA は画像と一緒に、チャコール枠の白い箱に収める
• セクション間の余白は大きくとる
• スライダーの下には細いプログレスバーを置く

Elevation & Depth

• 影はほぼ使わない。カタログの表紙だけに薄いドロップシャドウを付ける
• 立体感は面の重なりとぼかした写真の背景で出す
• スライダーの矢印は半透明グレーの円にする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 直角の矩形。カタログ表紙は少し傾けて重ねる
• セクション境界: 直線で切り替える。背景帯の段差でリズムを作る
• ボタンもカードも角丸なしにする
• 円形はNewバッジと矢印ボタンだけに使う
• 枠線は 1px の細線か、6px ほどのチャコールの太枠にする

Components

• 深紅の申込ボタン（button-primary）: 横長の矩形で、明朝体の白文字は左揃え、右端に小さな「>」を付ける
• 左右に分かれたファーストビューの CTA（button-split）: 左は白地に赤枠でアイコンと特典名、右は赤地に申込の文言を置く
• チャコールのサブボタン（button-secondary）: 来場予約など副次的な動線に使う。白文字と「>」を付ける
• 淡い欧文の大見出し（heading-display）: セクションの冒頭に置き、ずらした背景帯にまたがるように配置する
• 枠付きの CTA ボックス（cta-box）: ぼかした室内写真の上に、チャコールの太枠の白い箱を置く。中は見出し、訴求文、カタログ画像、ボタンの順
• 円形の New バッジ（badge-new）: 深紅の円に白い欧文の筆記体を入れ、カタログの角に重ねる
• 誌面のスライダー（slider-gallery）: 見開きの誌面画像を並べ、左右に丸い矢印、下に細いプログレスバーを置く
• グレーの案内パネル（info-panel）: 来場予約の案内に使う。見出し、説明、写真、サブボタンを縦に並べる

Do's and Don'ts

Do - 余白を大きくとり、1 画面に置く情報を絞る - 深紅は申込の動線だけに使う - 背景帯を左右にずらして重ね、紙面のような奥行きを出す - カタログ実物の画像を少し傾けて重ね、手に取れる感じを出す - 主 CTA ボックスは中盤と終盤に繰り返し置く

Don't - 角丸やピル型のボタンを使わない - 原色や蛍光色、グラデーションを使わない - 太いゴシック体で強い訴求をしない - 影を強くかけたり、立体的な装飾をしない - アイコンやイラストを多用しない

Page Structure

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

1. ファーストビュー（世界観と特典を伝え、すぐに申し込めるようにする）: 上に全幅のインテリア写真を置き、欧文ロゴ風の見出し、明朝のリード、本文、左右に分かれた CTA、傾けたカタログ画像の順に並べる
2. 注目の実例（代表的な住まいを 1 つ深く紹介する）: 淡い欧文の大見出しの下に縦長の外観写真を置き、明朝のリード、見出し、本文を続ける
3. 誌面スライダー（カタログの中身を見せる）: 見開きの誌面画像のカルーセル。下にキャプションとプログレスバーを置く
4. CTA（請求をうながす）: ぼかした写真の上にチャコール枠の白い箱を置き、見出し、訴求文、カタログ画像、深紅のボタンを入れる
5. その他の実例（スタイルの幅広さを示す）: グレージュの帯に欧文の大見出しと写真のカルーセルを置く
6. スライドショー（誌面をもっと見せる）: ブルーグレーの帯に白い明朝の見出し、縦線、誌面のカルーセルを並べる
7. CTA（繰り返し）（最後に請求をうながす）: 中盤の CTA ボックスと同じ構成で繰り返す
8. 来場予約（別の動線へ案内する）: グレーのパネルに見出し、説明、横長の写真、チャコールのボタンを入れる
9. フッター（注記とページ上部への戻り）: 小さな注釈、縦線付きの Back to Top、チャコール帯のコピーライトを並べる

Imagery

• 自然光が入る明るい室内写真。白い壁、木、グレーのファブリックで彩度を抑える
• 外観は白いタイル壁に植栽と家族の後ろ姿を入れた、生活感の控えめな構図
• カタログの表紙と見開きを白い紙として表現し、少し傾けて重ねる
• CTA の背景には室内写真を強くぼかして使う
• 誌面画像はミントグレーやベージュの紙色に、小さな文字と写真を並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左に写真、右にテキストと CTA の 2 カラムにする
• PC の注目の実例は、左に写真、右に見出しと本文を並べる
• PC の CTA ボックスは横長にし、左に文とボタン、右にカタログ画像を置く
• 背景帯のずらしは PC でも同じく右寄せで続ける
• PC の Back to Top は右端に縦書きで置く

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 行書くと起動時に読み込まれる。