---
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/）からご連絡ください。