DESIGN.md — シアン×黒のグラフィカルなペット可賃貸 LP（Cyan Graphic Pet-Friendly Rental LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: シアン・極太ゴシック・線画アイコン・巨大英字帯・黒ピルボタン・紙のざらつき
• 地の質感: ライトグレー地にうっすらノイズ（紙・コンクリート調）をのせる。カードは白でフラット。
• 形: 円形のアイコンボタン、上が半円のアーチ型写真、黒いピル型ボタン、角丸小さめの白カード。
• 温度感: クールな寒色ベースだが、手描き風の動物アイコンで親しみを加える。

Colors

• 地はノイズ入りライトグレー、情報は白カードにのせる。
• シアンはFV・コラム・フッターなど大面積の帯で使い、間をグレーで挟む。
• ボタンは原則黒地白文字のピル型。予約の主導線のみライムグリーン。
• 見出しや見出し小の左に細いシアン縦線を置く。
• 黒は極太ロゴ・番号・アイコン線にも使い、強いコントラストを作る。
• 巨大英字は地色より一段濃いグレーのみで目立たせない。

Typography

• 和文は太めのゴシックで統一し、明朝は使わない。
• 英字は細長い極太コンデンス体で、背景帯・番号・小ラベルに使う。
• セクションごとに英字をアウトライン風で横に繰り返す帯を置く。
• 番号「01」は極太で写真左上にかぶせる。
• 本文は行間を広めにとり、短い段落に分ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン・チェック項目・写真グリッドは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは「巨大英字帯→左シアン線付き見出し帯→本文」の順。
• 見出し帯は上下に細線を引いた全幅の帯にする。
• 検索フォームは1枚の白カード内に項目を線で区切って並べる。
• ボタンは中央寄せ、幅は画面の約80%。
• 写真グリッドは余白なしで隙間なく並べる。

Elevation & Depth

• 基本はフラットで影なし。
• トグル切替のみ薄い影をつける。
• コラムカードはシアン地に白でわずかな影。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 特長写真は上辺が半円のアーチ型。人気検索は四角タイル。コラージュは四角を重ねる。
• セクション境界: 直線。色帯の切り替えと細い横線で区切る。
• ペット種別は白い大きな円にアイコンを置く。
• FVの中央アイコンは黒い太枠の円。
• フォーム入力は角丸小。キーワード検索はピル型。
• ボタン右端に小さな紙飛行機風の矢印を置く。

Components

• 黒ピルボタン（button-primary）: 黒地白文字のピル型で右端に矢印。各セクションの一覧導線に使う。
• 予約ボタン（button-reserve）: ライムグリーン地に黒文字のピル型。来店予約専用。
• 見出し帯（section-heading-band）: 上に巨大英字の繰り返し、下に左シアン縦線付きの全幅見出し。
• ペット種別円ボタン（pet-icon-circle）: 白い円に黒線画の動物、下に薄い英字と日本語ラベル。2列。
• ハッシュタグ流し帯（hashtag-marquee）: 条件を「#」付きで横に流すテキスト帯。
• 物件検索フォーム（search-form-card）: 白カード内に項目見出し、グレー地のチェック群、セレクト、トグルを並べる。
• お客様の声カード（review-card）: 円アイコン、シアン星5つ、属性ラベル表、本文。横スライダーと番号ページャ付き。
• FAQ項目（faq-item）: 白カードの左に薄グレーの大きなQ、右に黒丸プラス。
• 特長番号（feature-number）: 極太英字の「01」をアーチ写真の左上に重ねる。

Do's and Don'ts

Do - シアン帯とグレー地を交互に置き、メリハリを出す。 - 動物アイコンは同じ太さの黒線画でそろえる。 - 各セクション頭に巨大英字の繰り返し帯を置く。 - ボタンはピル型で黒を基本にする。 - フォームの選択肢はグレー地の上に2列で並べる。

Don't - グラデーションや強い影を使わない。 - シアン以外の鮮やかな色を増やさない（ライムは予約のみ）。 - 明朝や丸ゴシックを混ぜない。 - 巨大英字を濃くして本文より目立たせない。 - 写真に装飾枠や角丸を大きくつけない（アーチ型は特長だけ）。

Page Structure

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

1. ファーストビュー（専門性とエリアを一目で伝える）: シアン全面に罫線で挟んだ極太見出し、黒枠の円アイコン、白い予約・案内ボタンパネル。
2. 条件タグ帯（対応する条件を一覧で見せる）: ハッシュタグを横に流すシアン帯。
3. ペット種別から探す（入口を種類で分ける）: 白い円アイコンを2列×3段で並べる。
4. 人気の検索（よく使う特集へ誘導）: 縦書きラベル付き写真タイル2×2と黒ボタン。
5. 物件検索（条件指定で物件を探す）: 白カードに検索窓、エリア、ペット条件、賃料などを線区切りで並べる。
6. 会社紹介（姿勢と専門性を伝える）: 写真コラージュに極太英字とアイコン、リード文と本文、黒ボタン。
7. 選ばれる理由（強みを3つ示す）: 番号付きアーチ写真と見出し・本文を縦に3回。
8. お客様の声（安心感を与える）: 白カードの横スライダー、星評価、番号ページャ。
9. よくある質問（不安を解消する）: Q付き白カードのアコーディオン4件と一覧ボタン。
10. お知らせ・コラム（更新情報と記事へ誘導）: 白カードのお知らせ、シアン地に記事カードのスライダー。
11. 予約CTA（来店・オンライン内覧に誘導）: 黒タブ見出し付き白カードに予約ボタンと電話、続けてシアン地のオンライン予約。
12. リンク集・フッター（回遊を促す）: シアン線見出しのテキストリンク2列、シアン地フッターに極太ロゴとメニュー。

Imagery

• 写真は明るく自然光の室内で、人とペットがくつろぐ生活シーン。
• 白壁・木・タイルの現代的なインテリアで彩度は控えめ。
• ペットは太さをそろえた黒の線画アイコンで、表情はゆるい。
• 特長写真は3D的なミニチュアやシアンのピンでモチーフを加える。
• 画像がない時は灰色地に動物シルエットのプレースホルダー。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左に見出し、右に円アイコンの2カラムにする。
• ペット種別アイコンは PC で6個を横一列に並べる。
• 人気の検索写真は PC で4列横並び。
• 検索フォームは PC で項目名を左、入力を右の2カラム表組みにする。
• 会社紹介・特長は PC で写真と文を左右に並べる。
• 予約 CTA は 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 行書くと起動時に読み込まれる。