DESIGN.md — 藍色×ライトグレーの法人オフィス仲介 LP（Indigo Corporate Office Search LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、クール・先進的、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 藍色グラデーション・白カード・ピル型ボタン・細い欧文見出し・ドット柄の質感・都市の写真
• 地の質感: 藍色の面は斜めにかかる薄いグラデーションと細かいドット柄。グレーの面にも淡いドットのかすみを敷く。
• 形: 角丸カードとピル型ボタン。ファーストビューの写真は下側を大きな円弧で切り抜く。強みの写真は上辺を斜めにカットする。
• 温度感: やや寒色寄りで落ち着いている。アクセントのオレンジが少しだけ温かみを足す。

Colors

• 地の色は藍色のグラデーション帯と明るいグレーの帯を交互に並べ、セクションのまとまりを分ける。
• カードとボタンは、どちらの地の上でも必ず白で浮かせる。
• 主な導線は白いピル型ボタンにし、右端に水色の矢印チップを置く形で統一する。
• オレンジは小さなキャッチ・バナーの帯・チェック項目だけに使い、面を大きく塗らない。
• 藍色の上の文字は白、グレーの上の文字は紺色にする。真っ黒は使わない。
• セクション背景には、地の色よりわずかに明るい大きな英字を透かしで敷く。
• arrow-chip は文字 #FFFFFF × 背景 #5DB1D9 のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#277DA6、4.59:1）を使う。

Typography

• 見出しは、細い欧文の大見出しの下に小さな太字の日本語を添える 2 段構成にする。
• 日本語見出しは字間を広め（0.1em 前後）にとる。
• キャッチは 1 語だけ水色にして強調する。
• 番号は欧文の細字で、01 から始まる 2 桁にする。
• 本文は中央揃えの短い改行を基本にし、ニュースや一覧のテキストは左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードの一覧は 2 列、条件のアイコンは 3 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 22px で統一する。
• セクションの最後には、中央にピル型の『一覧を見る』系のボタンを置く。
• 新しい物件は、左右の端が少し見える横スクロールのカルーセルにし、丸い矢印ボタンを付ける。
• カード同士の間隔は 8〜12px にする。
• 流れのステップは、番号・丸い写真・ラベルの横並びを点線でつなぐ。

Elevation & Depth

• 白いカードにはごく弱い影（0 2px 8px rgba(0,0,0,0.06)）を付ける。
• ピル型ボタンは影なしにし、地との色の差だけで浮かせる。
• 藍色の地の上のカードは影を付けずに白で抜く。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 物件の写真はカード上部いっぱいに角丸で入れる。強みの写真は上辺を斜めにカットする。流れの写真は円形にする。ファーストビューの写真は下側を大きな円弧で切る。
• セクション境界: 直線で色を切り替える。ファーストビューだけは円弧にする。
• ボタン・タグ・矢印チップはすべてピル型にする。
• カードは角丸 8〜10px にする。
• 大きなパネル（運営会社・スタッフ紹介）は角丸 10〜12px にする。

Components

• 矢印付きピル型ボタン（button-pill）: 白いピルの左に黒の太字ラベル、右に水色の矢印チップを置く。幅は約 60%。
• 矢印チップ（arrow-chip）: 水色の小さなピルに白い横矢印を入れる。カードやボタンに添える。
• 物件検索パネル（search-panel）: 上部にアイコン付きの 2 タブ（選択中は濃紺）。その下に白地のセレクト、グレー地のフォーム（広さ・築年数・キーワード）を並べる。
• 条件アイコンタイル（icon-tile）: 3 列の白い正方形タイル。細い線のアイコン、太字ラベル、矢印チップの順に並べる。
• 物件カード（property-card）: 写真の下端に、状態タグ（水色）と面積タグ（白地に枠線）のピルを重ねる。物件名は紺色で 3 行まで、駅からの距離はグレーの小さな文字。
• 英字＋和文の見出し（section-heading）: 細い欧文の大見出しの下に、小さな太字の和文を置く。背景には大きな英字の透かしを敷く。
• ステップ行（flow-step）: 欧文の番号、直径 70px ほどの円形写真、白い太字ラベルを横に並べ、縦の点線でつなぐ。
• 写真分割バナー（banner-split）: 白いカードの片側に写真を置き、境目はオレンジまたは水色の曲線の帯にする。キーワードは色付きで大きく。
• カテゴリタグ（tag-category）: 淡いグレーのピルに紺の小さな太字を入れる。日付の下に置く。

Do's and Don'ts

Do - 藍色のグラデーション帯とグレーの帯を交互に配置する。 - 導線はすべて『白いピル＋水色の矢印チップ』の型にそろえる。 - 見出しは細い欧文と小さな和文の組み合わせにする。 - アイコンは細い線画で、藍色系の単色にする。 - 写真は青空とガラス張りのビル、スーツ姿の人物で、明るく清潔に見せる。

Don't - オレンジを大きな面やメインのボタンに使わない。 - 太い黒文字や真っ黒の背景を使わない。 - ボタンを四角や角ばった形にしない。 - 強い影や立体的な装飾を付けない。 - ポップな手描きイラストを混ぜない。

Page Structure

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

1. ヘッダー（ロゴと実績の数字を見せ、メニューを置く）: グレーの地にロゴと月桂樹付きの登録件数バッジを置き、右端に濃紺の丸いメニューボタンを置く。
2. ファーストビュー（都市のイメージと価値を伝える）: 都市の空撮写真を下側の円弧で切り抜く。その下に中央揃えのキャッチ 2 行と、字間の広い英字サブコピーを置く。
3. 特集の入口（主要な物件の種類へ誘導する）: 写真付きの白いカードを 2 枚並べる。オレンジの小さなキャッチと矢印チップを添える。
4. 物件検索（条件を入れて検索してもらう）: 藍色の地に置いたタブ付きのパネル。フォームの部品は白い箱で、ピル型の検索ボタンを置く。
5. こだわり条件（特徴から物件を探してもらう）: 3×3 のアイコンタイルを並べ、見出しの上に小さなリードと罫線を置く。
6. 新築物件のカルーセル（注目の物件を見せる）: 横スクロールの大きな白カード（竣工時期・物件名・タグ・写真）と、丸い水色の矢印ボタン。
7. 新着・人気の物件（物件の多さを見せる）: 2 列の物件カードのグリッドを並べ、背景に英字の透かしを敷く。
8. 強み（選ばれる理由を伝える）: グレーの地に、斜めにカットした写真と中央揃えの紺文字の 2×2 カードを並べる。
9. 移転の流れ（手順を見せて安心してもらう）: 藍色の地に、円形写真と番号を点線でつないだ 6 ステップを置く。
10. 事例・取引企業（実績で信頼を得る）: 写真と社名が横に並ぶリストと、ロゴが横に流れる帯。
11. 運営会社・スタッフ紹介（会社の顔を見せる）: 藍色のグラデーションのパネルと白いパネルを縦に並べ、欧文の大見出しと矢印ボタンを置く。
12. ニュース（役立つ情報を発信する）: サムネイル・日付・カテゴリタグ・タイトルを並べ、細い区切り線で 3 件を区切る。
13. お問い合わせ・フッター（問い合わせへつなげる）: 藍色の地に、写真分割バナー 2 枚、フリーダイヤル、ピル型ボタン、住所、2 列のメニューを置く。

Imagery

• 青空の下のガラス張りの高層ビルを見上げる構図で、彩度は高め。
• スーツ姿の男女が打ち合わせをしたり、笑顔で応対したりする明るいストック写真。
• アイコンは細い線（1.5px）の線画で、藍色系の単色にする。
• 背景には細かいドット柄と、大きな英字の透かしを敷く。
• バナーの写真は、オレンジや水色の曲線の帯で区切る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では内容の幅を約 70% に絞り、中央に寄せる。
• PC の条件アイコンタイルは 3 列の横長カードにし、アイコン・ラベル・矢印を横に並べる。
• PC の物件カードは 4 列にし、カルーセルは 4 枚を同時に見せる。
• PC の見出しは、欧文と和文を横に並べて左に寄せる。
• PC のファーストビューは、左にキャッチ、右に円で切り抜いた写真を置く。
• PC の運営会社・スタッフ紹介パネルは 2 列にする。

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