DESIGN.md — オレンジ×白の角丸カード不動産コーポレートLP（Warm Orange Rounded Corporate Real Estate LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、ポップ・元気、清潔・爽やか
• キーワード: 暖色オレンジ・大きな角丸・細い欧文見出し・広い字間・人物写真・余白多め
• 地の質感: フラットな単色面に写真を重ねる。Vision とお問い合わせだけは写真の上に半透明の色を重ねる
• 形: 角丸 16〜40px のカードと写真。カードは右下だけ大きくえぐるように丸める。ボタンはピル型
• 温度感: 暖かい。オレンジと生成りが中心で、寒色は写真の空だけ

Colors

• 地は白が基本。事業内容のセクションだけ全面をオレンジにして、その上に白カードを置く
• 採用セクションは生成り（#FFFAEC）の地に切り替え、上辺の角を大きく丸めて区切る
• 英字見出しと番号は細い書体のオレンジ。和文見出しは濃いグレーで書く
• ボタンは朱色からオレンジへ横グラデーションで塗り、右端に白い丸の矢印を置く。オレンジ地の上では白地にオレンジ文字へ反転する
• お問い合わせは写真に焦げ茶オレンジを乗算で重ね、文字は白にする
• 寒色はブランド色として使わず、写真の空と街並みにとどめる
• button-primary は文字 #FFFFFF × 背景 #F36B1B のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C9510B、4.5:1）を使う。
• button-inverse は文字 #EB470A × 背景 #FFFFFF のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D74109、4.52:1）を使う。

Typography

• 見出しは「細い英字（大または小）＋和文見出し」の2段で中央に揃える
• 和文は字間を0.1em以上取り、ゆったり見せる
• メッセージ・ビジョンの本文は中央揃えで短く改行する。説明文は左揃えにする
• カードの番号は細い数字を大きく置き、写真の左上に重ねる
• 太字は和文見出しとボタンに限り、本文は細めのウェイトで書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の組みだけ 2 列のモザイク
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下に80〜120pxの広い余白を取る
• 事業カードはオレンジ地の上で幅90%にし、カード同士の間を約32px空ける
• 写真の一部は画面端まで伸ばし、片側だけ角丸にする
• CTAボタンは幅約65%で中央に置く。お知らせ一覧へのボタンだけ右寄せにする
• 採用写真は高さを少しずつ変えた角丸の正方形を横に流す

Elevation & Depth

• 影はほぼ使わず、色面と白の差だけで階層を作る
• カードはフラットな白で、右下の大きな角丸を強調する
• トップへ戻るボタンだけ丸いオレンジで浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形・正方形で切り抜く。カード内の写真は右下に小さなオレンジの角丸四角（矢印入り）を重ねる
• セクション境界: 採用・お知らせ・事業内容の境界は上辺の両角を大きく丸めた面（半径40px前後）の重ね合わせで区切る
• FVの写真はオレンジの太い枠に入れ、その枠の角も大きく丸める
• カードは右下の角だけ特に大きく丸めて動きを出す
• 矢印アイコンは円の中に置く

Components

• グラデーションのピル型ボタン（button-primary）: 朱からオレンジへの横グラデーションで塗り、左に白文字、右端に白い円の矢印を置く
• 反転ピル型ボタン（button-inverse）: オレンジ地や濃色背景の上で使う。白地にオレンジ文字、右端にオレンジの円と白矢印を置く
• 英字＋和文の見出し（section-title）: 細いオレンジの英字を上に置き、その下に濃いグレーの和文見出しを中央揃えで書く
• 番号つき事業カード（business-card）: 白カードに見出し・説明・番号・角丸写真を縦に並べる。右下を大きく丸め、写真の角にオレンジの矢印タブを付ける
• 細い番号数字（number-badge）: 01〜05の細いオレンジ数字を、写真の左上に半分重ねて置く
• 店舗写真カード（store-card）: 角丸の写真の下に、太字の店舗名を中央揃えで置く
• お知らせ行（news-row）: タイトル・日付・右端の小さなオレンジ丸矢印を1行にまとめ、行の下に細線を引く
• お問い合わせ帯（contact-band）: 写真に焦げ茶オレンジを重ね、吹き出しアイコン・見出し・反転ボタンを中央に並べる
• トップへ戻るボタン（page-top）: 右下に固定する丸いオレンジのボタン。中に白い上矢印を入れる

Do's and Don'ts

Do - オレンジは事業内容セクションの全面とボタンに集中させ、他は白・生成りで抜く - 見出しは必ず英字ラベルと和文の2段にする - 写真はすべて角丸にし、カードの右下は大きく丸める - 本文は字間・行間を広く取り、軽やかに見せる - 人物写真は笑顔で明るい自然光のものを使う

Don't - 角が鋭い四角いボタンやカードを使わない - 寒色や黒をブランドの面色に使わない - 濃いドロップシャドウや立体的な装飾を付けない - 太く重い欧文書体で英字見出しを書かない - 本文を詰めて組まない

Page Structure

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

1. ヘッダー（ロゴとメニューへの導線）: 白地の左にオレンジのロゴ、右に細い2本線のハンバーガーを置く
2. ファーストビュー（企業の姿勢を一言で伝える）: オレンジの太い角丸枠に人物写真2枚を上下に組み、白帯のキャッチを中央に重ねる。手書き風の英字線画を添え、下にスライダーのドットを置く
3. 写真モザイク（事業の幅をビジュアルで示す）: 小さな角丸写真2枚と大きな写真1枚を組み合わせ、右は画面端まで伸ばす
4. メッセージ（企業理念を伝える）: 細い英字の見出しの下に中央揃えの短文を並べ、最後にグラデのピル型ボタンを置く
5. ビジョン（目指す価値を示す）: ビジネス人物の写真の後に英字・和文の見出しと中央揃えの本文を置き、街並み写真の上にロゴとピン型アイコンを散らす
6. 事業内容（事業を一覧で紹介する）: 全面オレンジ地に白文字の導入文を置き、番号つき白カードを縦に5枚並べる。最後に反転ボタンを置く
7. 店舗紹介（拠点を見せて安心感を与える）: 白地に左揃えの説明文を置き、角丸の店舗写真と店名を縦に並べる
8. 採用情報（採用ページへ誘導する）: 上角を丸めた生成りの面に見出し・本文・ボタンを置き、高さをずらした人物写真を横に流す
9. お知らせ（最新情報を伝える）: 上角を丸めた白い面に、左揃えの英字と和文の見出し、線で区切ったニュース行、右寄せのボタンを置く
10. お問い合わせ（相談の申し込みへ誘導する）: 写真に焦げ茶オレンジを重ねた帯の中央に、アイコン・見出し・説明・白いピル型ボタンを並べる
11. フッター（会社情報を示す）: 白地にロゴ・住所・ポリシーへのリンク・コピーライトを置き、右下に丸いトップへ戻るボタンを置く

Imagery

• 人物は笑顔のスーツ姿や家族写真を使う。明るい自然光で、背景は柔らかくぼかす
• 物件・室内写真は白と木目が中心の明るいトーンで、広角で撮る
• 空と高層ビル、俯瞰の街並み写真は白くかすませ、文字の背景に使う
• 装飾はピン型アイコン、手書き風の英字線画、矢印アイコンなど最小限にする
• お問い合わせの写真は商談中の手元を写し、オレンジ系を乗算で重ねて単色化する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはヘッダーに横並びのメニューと、右端にオレンジのピル型の問い合わせボタンを置く
• PCのFVは横長の角丸枠に、人物写真2枚を左右に並べる
• PCのメッセージは左に人物写真、中央に文章、右に写真モザイクを並べる3分割にする
• PCの事業カードは1枚目を横長に、残りを2列のグリッドに並べ、コンテンツ幅を約60%に絞る
• PCの店舗は3列に並べる。お知らせは見出しを左、一覧を右に置く2カラムにする
• 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 行書くと起動時に読み込まれる。