--- version: alpha name: Teal Clean Trust Real Estate Loan LP description: 深いティールと淡い水色の地に白カードを重ね、要所を黄色マーカーと赤CTAで締める住宅ローン・不動産の相談LP。カード中心の構成で情報を整理し、誠実で清潔な印象を出す。 colors: primary: '#00798B' background: '#FFFFFF' background-alt: '#E4F4F6' dark-section: '#ADCBCD' surface: '#F5F5F5' tint-1: '#F2FAFC' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Roboto fontSize: 22px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px marker-heading: typography: '{typography.headline-lg}' height: 40px case-label: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 28px point-card: backgroundColor: '{colors.background}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 180px merit-card: backgroundColor: '{colors.background}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 120px voice-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px flow-step: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 56px faq-item: backgroundColor: '{colors.background}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 72px circle-badge: typography: '{typography.note}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — 深ティール×淡水色の住宅ローン相談LP（Teal Clean Trust Real Estate Loan LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 深ティール・淡水色の地・白カード・黄色マーカー・赤CTA・フラットアイコン - **地の質感**: フラットな単色面。影はごく薄く、質感表現なし - **形**: 角丸小さめの白カードと四角いラベル帯。リボン型POINTタグ - **温度感**: やや寒色寄りで落ち着いた、誠実な温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00798B` | FV背景・ラベル帯・強調文字 | 8% | 画素の実測 | | `background` | `#FFFFFF` | カード・セクション地 | 36% | 画素の実測 | | `background-alt` | `#E4F4F6` | 淡水色のセクション地 | 30% | 画素の実測 | | `dark-section` | `#ADCBCD` | FAQのくすみ水色地 | 8% | 画素の実測 | | `surface` | `#F5F5F5` | 口コミ本文の灰色ボックス | 5% | 画素の実測 | | `tint-1` | `#F2FAFC` | フロー枠の極淡水色 | 2% | 画素の実測 | - 地は白と淡水色を交互に使い、FAQだけくすみ水色で区切る - ブランド色ティールはFV面・ラベル帯・数字・強調語に限定 - キャッチ下に黄色の太線マーカーを敷く - 主CTAだけ赤で塗り、他に赤は『手数料あり』等の否定要素に限る - 本文は濃いグレー、白抜きはティール面上のみ ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVキャッチ（白抜き+黄マーカー） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.8 | 0.05em | | `headline-lg` | セクション大見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.6 | 0.05em | | `headline-md` | セクション見出し・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.05em | | `headline-sm` | 口コミタイトル・FAQ質問 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.6 | 0.05em | | `body-md` | 本文・カード説明 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 2.0 | 0.05em | | `accent` | CASE番号・メリット番号・Q記号 | 欧文サンセリフ | Roboto | 300 | 22px | 1.2 | 0.02em | | `note` | 注釈・属性ラベル | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.7 | 0.03em | | `label-button` | CTAボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.4 | 0.05em | - 見出しは中央揃え、本文は短い行で中央または左揃え - 強調語だけティール色に変え、同行の他は濃グレー - 数字・番号は細い欧文で大きく - 全体にやや字間を空けて読みやすく - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、悩みケースのみ 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右16px余白で幅いっぱい - カード間は12〜16px - セクション見出し上下に32px前後 - フローは縦積みで下向き三角で接続 ## Elevation & Depth - カードは影なしまたはごく薄い影 - フロー枠に薄い水色の外影 - CTAに軽い下影 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は白フチ付きの正円 - **セクション境界**: 直線で背景色を切り替え - カードは角丸8px程度 - ラベル帯は角丸4px - POINTタグは下端がV字切欠きのリボン - 強調吹き出しはピル型白ボックス ## Components - **主CTAボタン**（`button-primary`）: 赤の横長角丸ボタン、白文字と右矢印、画面下固定も - **黄マーカー見出し**（`marker-heading`）: 見出し下半分に黄色太線を敷く - **CASEラベル帯**（`case-label`）: ティール帯に白の欧文番号、下に悩み文、点線区切り - **POINTカード**（`point-card`）: 白カード右上にティールのリボン型番号タグ - **番号メリットカード**（`merit-card`）: 左に細い大きな番号、右に見出しと説明 - **お客様の声カード**（`voice-card`）: 上に円形写真、ティールの属性、太字タイトル、灰色本文ボックス - **フローステップ**（`flow-step`）: ティール細線枠の淡色箱、最終段のみティール塗り - **FAQアコーディオン**（`faq-item`）: 白カードに細いティールのQ、右に開閉矢印。上にタブ切替 - **丸バッジ**（`circle-badge`）: 比較図の左上に赤/ティールの正円バッジ ## Do's and Don'ts **Do** - ティール・白・淡水色の3色で面を構成する - 情報は必ず白カードに入れて整理する - 強調語はティール色、キャッチは黄マーカー - 番号付き要素で比較・手順を見せる - 料金比較は棒グラフ型の簡易図で示す **Don't** - 赤をCTAと否定要素以外に使わない - グラデーションや派手な装飾を入れない - 大きな角丸やピルCTAにしない - 明朝や手書き書体を混ぜない - 写真を全面背景に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの約束を即伝える）: ティール全面にロゴ、白ピルラベル、黄マーカー付き白抜きキャッチ、3点の箇条書き 2. **リード・対象者**（相談対象を明示）: 淡水色地に大見出し、中央揃え本文、白カード内に2列×4段のCASEラベル 3. **特長**（強みを4点で説明）: 薄い大型欧文透かし背景、POINTリボン付き白カードを縦積み 4. **価格比較**（節約額を可視化）: 大見出し+注釈、自社と他社の棒グラフ、ピル型吹き出しで差額強調 5. **仕組み図解**（手数料が不要な理由）: 丸バッジ付き白カードに人物アイコンと矢印で流れを図示 6. **メリット**（利点を3つ提示）: ティール帯の上に番号付き白カードを重ねる 7. **お客様の声**（実例で安心感）: 円形写真をカード上端に食い込ませた白カードを縦積み 8. **取引の流れ**（手順を明確化）: 白地に枠付きステップを下向き三角で連結、最後はティール塗り 9. **よくある質問**（不安解消）: くすみ水色地、2×2タブ、白カードのアコーディオン 10. **フッター・固定CTA**（会社情報と相談導線）: 白地にリンク2列、ロゴ、住所、画面下に赤CTA固定 ## Imagery - 人物アイコンはティール系服のフラットイラスト - PCのFVはアイソメトリックなビル・書類のイラスト - お客様写真は明るい自然光のスナップを正円に切り抜き白フチ - 矢印は水色線のアウトライン矢印 - 背景に薄い白の大型欧文透かし - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央約60%幅のコンテナに収める - PCのFVは左テキスト右イラストの2カラム - POINT・お客様の声はPCで2列、メリットは3列 - フローはPCで縦書き横並びの8ステップ - PCではセクション間に濃紺の帯+赤CTAを複数回挿入 ## 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-b0f5ce87`（元 LP の URL から採番） - **元 LP**: https://loan.flie.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/6 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。