DESIGN.md — 淡グレー×深緑の上質インテリアデザイン LP（Gallery Gray Interior Design Studio LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、シンプル・ミニマル、ラグジュアリー・ダーク
• キーワード: ギャラリー的・余白・写真主役・細明朝・ダーク帯・色彩リボン
• 地の質感: フラットな単色面。写真の上に半透明の帯を重ね、深緑はゆるいグラデーションにする
• 形: 写真とカードは角なしの矩形。ボタンだけピル型の細線にする
• 温度感: クールでやや中性。リボンの多色だけが温度を足す

Colors

• 淡グレー地と墨色・深緑のダーク帯を交互に置き、リズムを作る
• 主ボタンは深緑のピル型で塗る。ダーク地では白の細線ボタンにする
• 鮮やかな多色はリボン状オブジェの装飾だけに使い、文字やボタンには使わない
• 施工事例の写真下には黒〜グレーの帯を敷き、白文字で番号を入れる
• ニュースのタグはくすみ青緑の小さな面にする
• 深緑のセクションは上が黒、下が深緑のゆるいグラデーションにする
• news-row は文字 #696D6E × 背景 #E8EEEE のコントラスト比が 4.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#686C6D、4.53:1）を使う。

Typography

• 和文は細めの明朝で統一し、字間を広く取る
• 英字ラベルは小さなサンセリフで、和文見出しの上に添える
• 筆記体の英字は FV の 1 か所だけに使い、写真に一部を重ねる
• 本文は短い改行で中央揃えにし、行間は 2 以上にする
• 太字は使わない。強調は文字色を明るくするだけにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は 2 カラムのグリッドと非対称の配置
• 本文ブロックの幅: 画面幅の約 95%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右 10px ほどの余白でほぼ全幅に置く
• セクション間は大きく空けて、ギャラリーのような間を作る
• コンセプト部の写真は大小を不揃いにずらして散らす
• ボタンは中央に置き、幅は画面の約 40% にする
• ダーク帯の中は左寄せの見出し＋本文に、小さな写真を右端へずらして置く

Elevation & Depth

• 影はほぼ使わない
• 奥行きは写真への半透明帯の重ねと、面の色差で出す
• 透けたリボンの装飾をセクション境界にまたがせて浮遊感を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角なしの矩形。横長 16:9〜4:3
• セクション境界: 直線で色面を切り替える。装飾が境界をまたぐ
• カードと写真は角丸にしない
• ボタンはすべてピル型にし、右端に小さな矢印を付ける
• 細い 1px 線を区切りや枠に使う
• コンセプト面は矩形を少しずらして重ねる

Components

• 深緑のピルボタン（button-primary）: 深緑で塗り、中央に白の英字ラベル、右端に小さな矢印を置く
• 細線のピルボタン（button-outline）: ダーク地で使う。白の 1px 枠と白文字に矢印を付ける
• 施工事例カード（case-card）: 全幅の写真の下に黒帯を敷き、左に事例番号、右に詳細リンクを置く
• 写真付きの案内バナー（info-banner）: 写真の下に深緑の帯を敷き、英字ラベル・和文タイトル・右向き矢印を置く
• 対談カード（crosstalk-card）: 写真の下に下線付きの英字見出しを置き、2 人のイニシャルを細い×でつなぐ
• ニュースの行（news-row）: 日付・くすみ青緑のタグ・タイトルを横に並べ、行の間を細線で区切る
• 英字ラベル＋明朝見出し（section-label）: 小さな英字の上に、中央揃えの細い明朝見出しを複数行で置く
• 写真背景の誘導帯（photo-cta-band）: 暗くした写真の上に英字見出し・一言・細線ボタンを重ねる

Do's and Don'ts

Do - 写真は大きく、余白はたっぷり取る - 和文は細い明朝で字間を広げる - 英字の小ラベルを各見出しに添える - 淡グレーとダークの帯を交互に配置する - ボタンはピル型で深緑または白の細線にする - 色彩リボンの装飾は控えめに 2〜3 か所に置く

Don't - 角丸のカードやドロップシャドウを使わない - 原色の大きなボタンや赤い強調を入れない - 太ゴシックの大見出しで訴求しない - 情報を詰め込んで余白を削らない - リボンの多色を文字に使わない

Page Structure

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

1. ファーストビュー（世界観を一瞬で伝える）: 淡グレー地に小さな和文コピーを置き、巨大な英字の筆記体を全幅の室内写真に重ねる。下に黒帯の最新お知らせを置く
2. コンセプト（企業の想いを伝える）: 濃グレーの矩形の中に明朝の中央揃え見出しと本文を置く。周囲に小さな写真とリボンを散らす
3. 施工事例（実績を見せる）: 英字ラベル＋明朝見出しの下に、番号付きの写真カードを 5 枚縦に並べ、一覧ボタンで締める
4. 素材ギャラリー（素材の豊富さを感じさせる）: 素材写真をずらして重ねたコラージュにする
5. サービス紹介（提供内容と流れへ誘導する）: 墨色の地に左寄せの見出しと本文を置き、細線ボタンを 2 つ並べる
6. ショールーム案内（来店へ誘導する）: 写真に深緑の帯を付けた案内バナーを 2 枚縦に並べる
7. お客様対談（信頼を作る）: 黒から深緑へのグラデーション地に、写真とイニシャル×のカードを並べる
8. ブランドロゴ説明（ブランドの由来を伝える）: 白地の中央にロゴと短い説明文を置く
9. お知らせ（最新情報を伝える）: 日付・タグ・タイトルの行を細線で区切って並べる
10. 採用（人材を募集する）: 深緑のトーンをかけた人物写真に白文字の見出しと細線ボタンを重ねる
11. よくある質問・問い合わせ（相談へ誘導する）: 暗くした写真背景の帯を 2 つ置き、それぞれ英字見出しとボタンを付ける
12. アクセス・フッター（所在地と連絡先を伝える）: 住所・営業時間・電話番号を細線で区切り、地図を置く。墨色のフッターにロゴと SNS アイコンを置く

Imagery

• 自然光と間接照明が入った高級マンションの室内を広角で撮る
• 色調はニュートラル〜やや明るめにし、白飛び気味の上品なトーンにする
• 大理石・ファブリック・壁紙などの素材をクローズアップで撮る
• 対談やスタッフの写真は自然な会話シーンにする
• 透明感のある多色のリボンや布が舞う 3D 装飾を余白に浮かべる
• 写真背景の帯には黒や深緑の半透明オーバーレイをかける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は施工事例を大 1 枚＋2 列グリッドにする
• PC のコンセプトは左に濃グレーの面、右に写真コラージュを配置する
• PC の対談は左にテキスト、右に写真の 2 カラムにする
• PC のよくある質問と問い合わせは左右 2 分割の帯にする
• PC はリボン装飾を左右の余白に大きく配置する
• PC のフッターには英字のナビゲーションを横一列に並べる

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