--- version: alpha name: Warm Beige Navy Illustrated Inheritance Consulting LP description: 生成りベージュと濃紺を軸に、やさしい線画イラストと緑の丘モチーフで、重い相続の話題を親しみやすく見せる不動産相続相談LP。白い角丸カードに赤の下線強調、紺のピル型CTAで無料診断へ誘導する。 colors: primary: '#132B4B' background: '#FFFFFF' background-alt: '#EAE1B8' secondary: '#E1D099' tint-1: '#F2EFEA' dark-section: '#384D6C' accent-1: '#E2474B' accent-2: '#50A959' text: '#2B2B29' text-muted: '#767675' line: '#E1D1AA' surface: '#FFFEFE' on-primary: '#FFFFFF' marker: '#F2C94C' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px worry-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 64px worry-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 220px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px service-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 130px compare-table: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px case-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 200px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 56px --- # DESIGN.md — ベージュ×紺の手描き風相続相談LP（Warm Beige Navy Illustrated Inheritance Consulting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 生成りベージュ・濃紺・線画イラスト・緑の丘・角丸カード・赤い強調 - **地の質感**: フラットな塗りに細い線画イラスト。紙のような温かい無地面。 - **形**: 角丸カードとピル型ボタン、波打つ丘シルエット、大きな曲線の帯でセクションを区切る。 - **温度感**: 暖色寄り。ベージュの温かさに紺で締まりを出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#132B4B` | ブランド濃紺（CTA・見出し吹き出し・ヘッダーボタン） | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 46% | 画素の実測 | | `background-alt` | `#EAE1B8` | 生成りベージュの帯セクション | 14% | 画素の実測 | | `secondary` | `#E1D099` | からし色ベージュ（比較表ハイライト・装飾ブロック） | 5% | 画素の実測 | | `tint-1` | `#F2EFEA` | 薄いクリーム地（FAQ外周・面） | 6% | 画素の実測 | | `dark-section` | `#384D6C` | くすんだ紺のセクション帯 | 5% | 画素の実測 | | `accent-1` | `#E2474B` | 赤の強調文字・下線 | 1% | 推定 | | `accent-2` | `#50A959` | イラストの緑（丘・木） | 2% | 画素の実測 | | `text` | `#2B2B29` | 見出し・本文の濃い文字 | 3% | 画素の実測 | | `text-muted` | `#767675` | 比較表の他社側グレー | 3% | 画素の実測 | | `line` | `#E1D1AA` | カード枠のベージュ線 | 1% | 画素の主要色に補正 | | `surface` | `#FFFEFE` | カード面の白 | 10% | 画素の実測 | | `on-primary` | `#FFFFFF` | 紺面上の白文字 | 1% | 画素の主要色に補正 | | `marker` | `#F2C94C` | 見出し欧文ラベル下の黄色マーカー | 0% | 推定 | - 白地とベージュ帯を交互に置き、セクションの切り替えを面色で示す。 - 紺はCTA・悩み吹き出し・FAQ番号など要所のみ。 - 強調語は赤文字＋赤下線。1文に1〜2か所まで。 - 比較表は自社をからしベージュ、他社をグレーで塗り分ける。 - 緑は丘や木のイラスト限定で、UIには使わない。 - 欧文ラベル下に黄色の短いマーカー線を入れる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.5 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.06em | | `headline-md` | カード見出し・吹き出し内文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.04em | | `note` | 注釈・小見出しの前置き | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | 見出し上の欧文ラベル・背景の大きな欧文 | 欧文サンセリフ | Montserrat | 700 | 12px | 1.2 | 0.2em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 見出しは中央揃え、上に字間広めの欧文小ラベルを置く。 - 本文は行間2.0でゆったり。 - 強調語は赤＋下線、または赤文字のみ。 - 背景に薄いベージュの巨大欧文を透かしで敷く演出あり。 - 縦書き見出しで締めのCTA前を印象づける。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩みカード・相談内容は SP で 1〜2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは白地とベージュ帯を交互に。 - カードは白地＋ベージュ枠で中央寄せ。 - イラストをカード上部に置き、下に説明。 - CTAはセクション末尾に繰り返し配置。 - 比較表は項目ラベル列＋自社列＋他社列の3列。 ## Elevation & Depth - 影はほぼ使わずフラット。 - カードは細いベージュ線と塗り分けで区別。 - CTAボタンのみごく薄い影可。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸長方形。人物写真の背後にベージュやずらした紺の矩形を重ねる。 - **セクション境界**: 大きな曲線カーブと丘シルエットで区切る - 悩み見出しは紺のピル型吹き出し。 - FAQ番号は紺の正円。 - チェックアイコンは紺の円バッジでカード上辺に乗せる。 - ベージュ帯の上下は緩い弧で切る。 ## Components - **無料診断CTA**（`button-primary`）: 紺のピル型。左に白丸の『無料』バッジ、右に再生矢印。上に小さな前置き文。 - **悩み吹き出し**（`worry-bubble`）: 紺の角丸吹き出しに白文字で悩みを短く3行、下にイラストと白カードの結果文。 - **悩みカード**（`worry-card`）: ベージュ地の角丸カード内に白の帯、赤字で起こりうるリスク。 - **欧文ラベル付き見出し**（`section-label`）: 字間広い欧文小ラベル＋黄色短線＋太字和文見出し。 - **相談内容カード**（`service-card`）: 白地紺枠カード、上辺に紺円チェック、線画イラストと太字ラベル。 - **比較表**（`compare-table`）: 左に紺ラベル列、中央自社列をからしベージュ枠で持ち上げ、右に他社グレー列。 - **事例比較パネル**（`case-panel`）: 上下にBAD/GOOD番号付きの比較、図解を右に配置。末尾に赤ラベルのメリット帯。 - **FAQアコーディオン**（`faq-item`）: 白地ベージュ枠、左に紺丸『Q.』、右に＋アイコン。 ## Do's and Don'ts **Do** - 線画＋フラット塗りの人物イラストを各セクションに添える。 - 白とベージュの面を交互に使う。 - CTAは紺のピル型で統一し、何度も繰り返す。 - 強調は赤文字＋下線で要点だけ。 - 角丸を全体で統一する。 **Don't** - 原色の派手なグラデーションを使わない。 - 強い影や立体ボタンにしない。 - 赤を面や大見出しに多用しない。 - 写真を四角いまま無装飾で置かない。 - 冷たい寒色ベースの背景にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（相談の価値と安心感を伝える）: 左に大見出し、右に和風住宅写真、下に緑の丘と家族イラスト、白カード内にCTA。 2. **問題提起**（親の家の相続を自分事化）: ベージュ帯に見出しと本文、右に高齢者写真を複数コラージュ。 3. **悩みの提起**（具体的な悩みを4つ示す）: 紺吹き出し付きベージュカードを2×2で交互にずらして配置。 4. **解決策提示**（無料診断へ誘導）: 白い大カードにスマホモックと人物イラスト、紺CTA。 5. **制度・リスク解説**（法改正の緊急性を伝える）: 白カード内に本文と家のビフォーアフター線画、赤枠の注意ボックス。 6. **メリット・データ**（早めの対策の利点を示す）: 紺ピル見出し、ドーナツグラフで資産構成を図解。 7. **代表メッセージ**（信頼性の担保）: 背景に巨大な薄い欧文、角丸人物写真と本文、署名。 8. **サービス内容**（相談できることを示す）: 紺の斜め帯に3つの相談カード、下に紺の補足バナー。 9. **比較**（大手との違いを示す）: 3列比較表、自社列を持ち上げて強調。 10. **事例**（具体的な効果を図解）: 他社案（グレー）と自社案（ベージュ）を上下に並べBAD/GOOD比較。 11. **クロージングCTA**（診断申込を後押し）: 縦書き大見出しと家族イラスト、写真、紺CTA。 12. **よくある質問**（不安を解消）: 枠付きアコーディオンを縦に4つ。 13. **フッター**（ナビと問い合わせ）: 緑の丘シルエットの下にベージュ地、ロゴ・リンク・紺ボタン。 ## Imagery - 細い黒線＋ベージュ・紺・黄・赤のフラット塗り人物イラスト。 - 緑の丘・木・小さな家の牧歌的な風景イラストを区切りに使う。 - 写真は和風一軒家や高齢者の手元など温かい自然光。 - アイコンは家・お金・吹き出しの線画で統一。 - 図解は簡易な区画図をピンクと紺で塗る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央約75%幅に収め、左右に余白。 - SPでは悩みカードを1列に積み、ずらし配置を解除。 - 比較表はSPで横スクロールか自社/他社を縦積み。 - FVは見出し→写真→CTAの縦並びに。 - 縦書き見出しはSPで横書きに変更も可。 ## 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-f228a535`（元 LP の URL から採番） - **元 LP**: https://iesuru.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。