--- version: alpha name: Cyan Graphic Pet-Friendly Rental LP description: 鮮やかなシアンと黒の極太文字に、ざらっとした質感のライトグレー地を合わせたストリート風の不動産検索 LP。線画のペットアイコン、巨大な英字のアウトライン帯、黒いピル型ボタンで、ポップさと実用的な検索 UI を両立させている。 colors: primary: '#13C0E8' background: '#EBEBEB' surface: '#FFFFFF' background-alt: '#F5F5F5' text: '#040104' text-body: '#353437' cta: '#010101' on-cta: '#F5F8F4' accent-1: '#ACFFB2' text-muted: '#DFDDDB' line: '#DFDDDB' accent-2: '#02C1ED' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 accent: fontFamily: Anton fontSize: 60px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 6px md: 10px lg: 200px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px button-reserve: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px section-heading-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 130px pet-icon-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 150px hashtag-marquee: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px search-form-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 2800px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 310px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 100px feature-number: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px --- # DESIGN.md — シアン×黒のグラフィカルなペット可賃貸 LP（Cyan Graphic Pet-Friendly Rental LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: ポップ・元気、力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: シアン・極太ゴシック・線画アイコン・巨大英字帯・黒ピルボタン・紙のざらつき - **地の質感**: ライトグレー地にうっすらノイズ（紙・コンクリート調）をのせる。カードは白でフラット。 - **形**: 円形のアイコンボタン、上が半円のアーチ型写真、黒いピル型ボタン、角丸小さめの白カード。 - **温度感**: クールな寒色ベースだが、手描き風の動物アイコンで親しみを加える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#13C0E8` | FV・コラム・フッターの地色 | 12% | 画素の実測 | | `background` | `#EBEBEB` | ページ全体の地色（ざらつきグレー） | 40% | 画素の実測 | | `surface` | `#FFFFFF` | 検索フォーム・カードの白面 | 16% | 画素の実測 | | `background-alt` | `#F5F5F5` | フォーム内の入力・選択エリア | 6% | 画素の実測 | | `text` | `#040104` | 見出し・極太ロゴ文字 | 3% | 画素の実測 | | `text-body` | `#353437` | 本文テキスト | 3% | 画素の実測 | | `cta` | `#010101` | 黒ピルボタン | 2% | 画素の実測 | | `on-cta` | `#F5F8F4` | ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#ACFFB2` | 来店予約ボタンのライムグリーン | 0% | 画素の実測 | | `text-muted` | `#DFDDDB` | 背景の巨大英字・補助ラベル | 3% | 画素の主要色に補正 | | `line` | `#DFDDDB` | 区切り線・見出し帯の枠 | 1% | 画素の主要色に補正 | | `accent-2` | `#02C1ED` | 見出し左のシアン縦線・星評価 | 0% | 画素の実測 | - 地はノイズ入りライトグレー、情報は白カードにのせる。 - シアンはFV・コラム・フッターなど大面積の帯で使い、間をグレーで挟む。 - ボタンは原則黒地白文字のピル型。予約の主導線のみライムグリーン。 - 見出しや見出し小の左に細いシアン縦線を置く。 - 黒は極太ロゴ・番号・アイコン線にも使い、強いコントラストを作る。 - 巨大英字は地色より一段濃いグレーのみで目立たせない。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの極太ロゴ風見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em | | `accent` | 背景の巨大英字・番号・英字ラベル | 欧文サンセリフ | Anton | 400 | 60px | 1.0 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.45 | 0.02em | | `headline-md` | リード文・特長見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.03em | | `headline-sm` | フォーム項目名・リンク群見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em | | `note` | 注記・日付・アイコン下英字 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `label-button` | ボタンラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.04em | - 和文は太めのゴシックで統一し、明朝は使わない。 - 英字は細長い極太コンデンス体で、背景帯・番号・小ラベルに使う。 - セクションごとに英字をアウトライン風で横に繰り返す帯を置く。 - 番号「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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-728ba8c8`（元 LP の URL から採番） - **元 LP**: https://scatfudousan.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。