--- version: alpha name: Deep Green Trust Fintech Service LP description: 深い緑と白・生成りを交互に敷いた、落ち着いた金融サービスの LP。白い角丸カードに情報をまとめ、くすんだ金色をアクセントに使う。注釈と開閉式の詳細を多く置き、誠実で上品な印象にまとめている。 colors: primary: '#014832' cta: '#014932' on-cta: '#EFFCFA' background: '#FBFDFC' background-alt: '#F9F8F3' surface: '#FFFFFF' tint-1: '#F9F8F3' tint-2: '#F8F8F8' accent-1: '#928753' text: '#0A0F0F' text-muted: '#6A6A6A' line: '#DDE1DD' on-dark: '#FDFEFE' accent-2: '#A1B9AB' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 15px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 8px md: 12px lg: 16px 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.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px heading-bar: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 64px point-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 560px check-pill: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 44px tag-chip: backgroundColor: '{colors.tint-2}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 44px icon-circle: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 70px faq-accordion: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 76px anchor-nav: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 110px note-text: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 24px --- # DESIGN.md — 深緑×生成りの信頼系金融サービス LP（Deep Green Trust Fintech Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、上品・高級、シンプル・ミニマル、清潔・爽やか - **キーワード**: 深緑・生成り・くすみ金・白カード・注釈多め・落ち着き - **地の質感**: 明るい地にうっすら砂目のノイズを敷き、淡い緑のぼかしグラデーションを端に置く。深緑の面はフラットな単色。 - **形**: 角丸 16px 前後のカード、ピル型ボタン、円形アイコン。見出しの左に金色の縦線。 - **温度感**: やや涼しめ。深緑の落ち着きに生成りと金で少し温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#014832` | ブランド色の深緑（セクション地・見出し文字） | 18% | 画素の実測 | | `cta` | `#014932` | 主 CTA ボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#EFFCFA` | CTA ボタン上の白文字 | 0% | 画素の実測 | | `background` | `#FBFDFC` | ページの基本地（ごく淡いグレー白・砂目） | 30% | 画素の実測 | | `background-alt` | `#F9F8F3` | 申込セクションの生成り地 | 6% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカードの面 | 25% | 画素の実測 | | `tint-1` | `#F9F8F3` | カード内の補足ボックス（生成り） | 2% | 画素の実測 | | `tint-2` | `#F8F8F8` | タグ・アイコン円の淡いグレー緑 | 3% | 画素の実測 | | `accent-1` | `#928753` | くすみ金（見出し縦線・POINT ラベル・Q 記号） | 0% | 画素の実測 | | `text` | `#0A0F0F` | 見出し・本文の濃い文字 | 4% | 画素の実測 | | `text-muted` | `#6A6A6A` | 注釈の灰色文字 | 2% | 推定 | | `line` | `#DDE1DD` | 区切り線・枠線 | 0% | 画素の主要色に補正 | | `on-dark` | `#FDFEFE` | 深緑地の上の白文字 | 1% | 画素の実測 | | `accent-2` | `#A1B9AB` | FV の淡い緑グラデーション | 4% | 画素の主要色に補正 | - 地は淡いグレー白・深緑・生成りの 3 種を交互に使い、章の切り替わりを示す。 - 深緑のセクションの上にも白いカードを置き、本文は白地で読ませる。 - くすみ金は見出しの縦線、POINT ラベル、Q 記号、王冠マークだけに使う。 - 強調したい数字や語は深緑の太字にし、淡い黄色のマーカーを下に敷く。 - CTA は深緑の塗りに白文字。サブボタンは白地に深緑の枠と文字。 - 彩度の高い色は使わない。差し色は金だけにする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（白抜き） | ゴシック | Zen Kaku Gothic New | 700 | 44px | 1.3 | 0.04em | | `headline-lg` | セクション見出し（左に金の縦線） | ゴシック | Zen Kaku Gothic New | 700 | 32px | 1.35 | 0.04em | | `headline-md` | カードの見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.45 | 0.04em | | `headline-sm` | 小見出し・ボックスのタイトル | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.75 | 0.03em | | `note` | ※ではじまる注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.02em | | `accent` | POINT 番号・欧文の商品名・大きな数字 | 欧文サンセリフ | Montserrat | 600 | 15px | 1.3 | 0.04em | | `label-button` | ボタン・開閉リンクの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.06em | - 見出しは太いゴシックで、少し字間を広げる。 - 欧文や数字は丸みのある幾何学サンセリフで組み、和文と分ける。 - 金額などの数字は本文の 2 倍以上の大きさで深緑にし、単位は小さくする。 - 注釈は 12px の灰色で、※を頭にぶら下げて組む。 - 本文は左寄せ。導入文と申込の説明だけ中央寄せにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内のアイコンは 4 列、タグは 2 列で並べる。 - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面端から 16px 内側に置き、カード同士は 24px あける。 - 各セクションは横長の写真、金線つき見出し、リード文、カードの順で並べる。 - カード内の補足ボックスはカードより一段淡い色にし、角丸 12px で入れ子にする。 - カード下部の中央に「詳細」の開閉リンクを置く。 - FV の直下に 3 分割のページ内ナビを置く。 ## Elevation & Depth - カードは影をほぼ付けず、地との色の差だけで浮かせる。 - 主 CTA だけに、深緑がにじむ柔らかい影（y 8px、ぼかし 20px）を付ける。 - FV のチェック項目の帯は、半透明の白を重ねたフラットな面にする。 ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 横長の長方形で角丸 8〜12px。FV は全幅の写真に緑のグラデーションを重ねる。 - **セクション境界**: まっすぐな水平の境目。地の色の切り替えだけで区切る。 - ボタンとタグはすべてピル型にする。 - アイコンは淡いグレーの円の中に細い線画で描く。 - 見出しの左に 4px 幅の金色の縦線を置く。 - 番号は淡い生成りの小さな円の中に入れる。 ## Components - **主 CTA ボタン**（`button-primary`）: 深緑のピル型で白い太字。右端に小さな「>」。柔らかい影付き。 - **サブボタン**（`button-secondary`）: 白地に深緑の 2px 枠と深緑の文字のピル型。右に「>」。 - **金線つきセクション見出し**（`heading-bar`）: 左に金の縦線、右に大きな太字の見出し。深緑地では白、明るい地では深緑の文字。 - **POINT カード**（`point-card`）: 白い角丸カード。上に金の丸と POINT 番号、続けて見出し・箇条書き・画像を置く。 - **FV のチェック帯**（`check-pill`）: 写真の上に置く半透明の生成りの帯。左にチェックの丸、太字の短い利点。 - **トピックのタグ**（`tag-chip`）: 淡いグレーのピル型に深緑の太字。枠付きのボックスの中に折り返して並べる。 - **円形アイコン**（`icon-circle`）: 淡いグレーの円に細い線画のアイコン。下にラベル。限定の項目には金の王冠バッジを付ける。 - **FAQ アコーディオン**（`faq-accordion`）: 深緑の地に生成りの角丸の帯。左に金の Q、右に深緑の V 字矢印。 - **ページ内ナビ**（`anchor-nav`）: 白地を縦線で 3 分割。深緑の太字ラベルの下に深緑の丸い下向き矢印。 - **注釈と開閉リンク**（`note-text`）: ※つきの灰色の小さい文字。カード下部に深緑の小さな文字と下向きの矢印で「詳細」を開く。 ## Do's and Don'ts **Do** - 深緑・白・生成りの 3 つの地を交互に使って章を分ける。 - 情報はすべて白い角丸カードにまとめ、余白を広く取る。 - 金色は線・ラベル・記号に少しだけ使う。 - 条件や注意事項は※の注釈と開閉式の詳細に分けて載せ、本文をすっきり保つ。 - 数字は大きな欧文で深緑にし、淡いマーカーを敷く。 **Don't** - 赤や黄色など派手な強調色を使わない。 - 強いドロップシャドウやグラデーションのボタンにしない。 - ポップな手書き文字やイラストを入れない。 - 金色を広い面の塗りに使わない。 - カードの角を直角にしたり、角丸の大きさをばらばらにしたりしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値を一言で伝え、申込へ誘う）: 全幅の生活写真の下半分に緑のグラデーションをかけ、白い大きなキャッチを置く。チェック帯 2 本、深緑の CTA、注釈を続ける。 2. **ページ内ナビ**（主要な 3 つの章へ移動させる）: 白地を縦線で 3 分割し、ラベルと丸い下向き矢印を置く。 3. **サービス概要**（サービスが何かを短く説明する）: 淡い緑のぼかしの地に、中央寄せの深緑の見出しと導入文。下線付きの外部リンクを添える。 4. **サービス内容（特長）**（3 つの特長を具体的に見せる）: 深緑の地に横長の写真と金線見出しを置き、白い POINT カードを 3 枚縦に並べる。中身は箇条書き、アプリ画面、アイコン、タグ。 5. **特典**（申込のメリットを数字で示す）: 砂目の明るい地に写真と見出し。白カードの中にカード画像と大きな金額を並べ、下に開閉式の詳細を置く。 6. **お申込方法**（必要なものを示して申込させる）: 生成りの地の白カードに番号つきの必要条件と主 CTA。その下に未保有の人向けのサブボタンを置く。 7. **よくある質問**（不安を解消する）: 深緑の地に生成りのアコーディオンを並べ、最後に細い枠の用語解説ボックスを置く。 8. **ご留意事項**（法的な注意事項を示す）: 明るい地に金線見出しと注釈。白い枠の開閉式の項目を縦に並べる。 9. **フッター**（関連リンクと会社情報を載せる）: 淡いグレー緑の地に小さなリンクを 3 列で並べ、最下部に深緑の帯でコピーライトを置く。 ## Imagery - 自然光の明るい室内で、スマホや書類を扱う手元を顔を写さずに撮る。 - 落ち着いたスーツやニットの人物を浅い被写界深度で撮り、白とベージュを基調にする。 - FV の写真は下側を淡い緑から白へのグラデーションでぼかし、文字を載せる。 - アプリ画面はスマホのモックで見せ、背後に淡い緑の円形ぼかしを置く。 - アイコンは単色の細い線画で、淡いグレーの円の中に入れる。 - 背景に細かい砂目のノイズテクスチャを薄く敷く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV のキャッチを 1 行にまとめ、写真は右に寄せて左に文字を置く。 - PC の POINT カードは左にテキスト、右に画像・アイコン・タグを置く 2 カラムにする。 - PC のセクション見出しと写真は横に並べる（写真を左か右に置く）。 - PC のページ内ナビは角丸の白いバーで横一列にする。 - PC の FAQ と留意事項は幅を約 70% に絞って中央に置く。 - 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-9423bad6`（元 LP の URL から採番） - **元 LP**: https://www.smbc.co.jp/kojin/olive/oliveconsulting/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-12、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。