DESIGN.md — 深緑写真×ライトグレーの静かな建築事務所 LP（Quiet Forest Minimal Architecture LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: シンプル・ミニマル、ナチュラル、上品・高級
• キーワード: 余白・森の写真・細い欧文・下線リンク・静けさ・モノトーン
• 地の質感: マットでフラット。影やグラデーションは使わず、質感は写真に任せる
• 形: 写真は角丸なしの矩形。ボタンは細線のピル型小矢印のみ
• 温度感: やや低めで落ち着いた中間色。写真の深緑と木の茶が温度を足す

Colors

• 地は全面ライトグレー#EFEFEFの単色で、白カードは使わない
• 色味は写真だけが担い、UIはグレースケールに限定する
• 写真上の文字・線は白、グレー地上は黒〜濃グレー
• 強調色・塗りボタンは作らず、線と矢印で導線を示す
• 区切りは薄いグレーの1px線のみ

Typography

• 全体を小さめの文字で組み、余白で格を出す
• ウェイトは400〜500のみ。太字は使わない
• 英字ラベルは字間を広めに取り、和文見出しの上に小さく添える
• リンクは『小さい小文字+やや大きい英単語』の2段サイズで組む
• 和文見出しは中央揃え、本文は左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、事例写真のみ 2 枚横並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算）
• 左右余白は約19px、本文とリンクはさらに内側の約70%幅に絞る
• セクションは英字小ラベル→本文→下線リンクの順に縦に積む
• 事例は区切り線→年→作品名→写真2枚→矢印操作の繰り返し
• ファーストビューと写真帯は全幅で余白なし
• セクション間は100px前後の大きな余白を取る

Elevation & Depth

• 影は一切使わない
• 奥行きは写真の明暗だけで表現する
• 階層は余白と1px線で区切る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。全幅写真か、横長4:3前後のサムネイル
• セクション境界: 直線の1px細線、または写真帯で切り替える
• 写真・面はすべて角なしの直角
• ピル型は小さな矢印スライダーボタンだけに使う
• リンクは下線1本と右端の矢印で表す

Components

• 下線矢印リンク（link-underline-arrow）: 左に英字ラベル、右端に細い→、下に1px線を引いた全幅テキストリンク。主導線として使う
• 写真上の白下線リンク（link-underline-on-photo）: 暗い写真の下部に置く白文字と白線の矢印リンク
• 矢印ピルボタン（slider-arrow-pill）: 細線枠の小さなピルに←→を入れた写真送り。無効側は薄いグレー線。横に枚数表示を添える
• 英字セクションラベル（section-label）: セクション冒頭の小さなグレー英字。中央の和文見出しの上に置くこともある
• 施工事例ブロック（work-item）: 細線区切り、年、英字作品名、写真2枚、矢印ボタンで1件を構成
• 全幅写真帯（photo-band）: 森の写真を全幅で敷き、下部に白下線リンクを置く区切り兼導線
• 2列フッターナビ（footer-nav）: 英字リンクを2列中央揃えで並べ、SNSは右上向き矢印付き

Do's and Don'ts

Do - 写真は暗めで彩度を抑えた森・木造建築を使う - 文字は小さく、余白を大きく取る - 導線は下線と矢印の線だけで表現する - 英字ラベルと和文見出しを対にする - UIはグレースケールで統一する

Don't - 塗りつぶしの派手なCTAボタンを置かない - 影・グラデーション・角丸カードを使わない - 太字や大きな見出しで叫ばない - アイコンやイラストを多用しない - 鮮やかなアクセントカラーを足さない

Page Structure

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

1. ファーストビュー（暮らしの世界観を一枚で伝える）: 全画面の暗い木肌・森写真に白の和文キャッチ、英字サブ、白下線リンクを左下に配置。上部にメニュー点とロゴ
2. 私たちについて（事務所の姿勢を紹介）: 英字小ラベル、内外がつながる横長写真、内側に絞った本文、下線矢印リンク
3. 施工事例（実績を写真で見せる）: 細線区切りで事例を縦に繰り返し、各件に年・英字名・写真2枚・矢印送り
4. 写真帯（事例一覧への導線と区切り）: 全幅の森写真の下部に白下線リンク
5. 資料請求（見込み客の獲得）: 中央の英字ラベル+和文見出し、短い説明、下線矢印リンクでフォームへ
6. お問い合わせ（相談窓口を示す）: 中央見出しの下にフォームと電話の下線リンクを2本縦に並べる
7. 採用（スタッフ募集の告知）: 中央の2行和文見出しと下線矢印リンク
8. フッター（サイト内回遊）: 2列中央揃えの英字リンクとSNSリンク

Imagery

• 森の中の木造住宅を曇天や木陰の柔らかい光で撮る
• 全体に露出を落とし、彩度低め・緑を沈ませたフィルム調にする
• 室内は大きな窓越しに緑が見える構図を選ぶ
• 木漏れ日の影が落ちた板壁のような質感のクローズアップをヒーローに使う
• 人物は入れず、空間と自然だけで語る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはヒーローを横長にし、右下に細線のピル型資料請求ボタンを追加
• PCは上部左にナビを3列の小さな文字で常時表示
• 紹介セクションは左に写真・右に本文の2カラム
• 事例は左に年と作品名、右に写真2枚を並べる横組み
• 資料請求と問い合わせは縦線で区切った2カラム
• フッターは1行横並びのリンクにする

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