信頼のフィンテック Fintech Trust

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/fintech-trust/DESIGN.md

# DESIGN.md — 信頼のフィンテック / fintech-trust

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

金融slopの定番「ダークネイビー地＋シアンのグロー＋グラフのグラデ＋3カラム機能カード」を避け、
明るい地色・数字の圧倒的な可読性・やわらかい奥行きで「預けても大丈夫」を作る。
無機質な計測器的B2Bグリッドとも、行政ポータルの誠実さとも違う、フィンテックならではの
「数字と表を信頼の証拠として見せる」設計。動きは最小限、数字は演出のために動かさない。

**キーワード**: 信頼 / 可読性 / 明快な手数料 / やわらかい奥行き / 静止の数字
**この見た目が向く場面**: 資産運用・証券・保険・会計・与信など、数字の開示そのものが
信頼の根拠になる金融サービス。B2C金融アプリのサービスサイトに最も適する。

## 2. タイポグラフィ

- 和文見出し: Zen Kaku Gothic New / ウェイト 600
- 和文本文: Zen Kaku Gothic New / ウェイト 400 / サイズ 16px / 行間 1.75 / 字間 0
- 欧文・数字: Outfit（幾何サンセリフ。金額・パーセント・年号・型番はすべてこちらで組む。
  **数字は必ず `font-variant-numeric: tabular-nums` と `font-feature-settings: "tnum" 1`
  を当てて桁を揃える**。クラス `.num` / `.tnum` を共通化して使う）
- 見出しスケール: h1 40px（ヒーローのみ38px調整可）/ h2 30px / h3 19px（比率およそ1.3刻み）。
  モバイルは h1 28〜30px
- 特記: 数字が主役のテイストなので、**金額・パーセントは本文より一段大きく・Outfit 600で強調**する
  （例: ヒーローの主要数値は28px、アプリカードの評価額は44px）。キャッチコピーは
  「〜を、もっと。」のような空語を書かず、具体的な数字・動作・条件を必ず含める

## 3. カラー

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #f8f9fb | 55% |
| 背景（カード・パネル） | #ffffff | 25% |
| 背景（セクション替え・表見出し行） | #eef1f5 | — |
| テキスト（主） | #1a1f2b | 25% |
| テキスト（弱） | #5b6472 | — |
| アクセント（信頼の藍緑・唯一の彩度色） | #1f7a6d | 8%以下 |
| アクセント濃色（ホバー・強調文字） | #185f55 | — |
| アクセント極薄面（バッジ・強調行背景） | #e4f0ed | — |
| 罫線 | #dde2e9 | — |
| 罫線（太め・表外枠） | #c3cad4 | — |
| プラス表示（低彩度緑） | #3a7d5c | — |
| マイナス表示（低彩度赤） | #a4453d | — |

- 配色ルール: 彩度を持つ色は**アクセント1色（藍緑）のみ**。プラス/マイナスの緑・赤は
  彩度を落とし、**必ず記号（▲/▼）を併記**して色だけに依存しない。アクセントは
  ①CTAボタン ②グラフの主線 ③リンク・強調数値 ④バッジ の4用途に限定し、面いっぱいに敷かない
- **紺・ダークネイビー地を背景に使わない**（フッターと料金パネルの反転ブロックのみ例外的に
  濃紺墨 #1a1f2b を使うが、グロー・ネオン装飾は一切付けない。単なる面の反転として扱う）
- 純白 #ffffff はカード面には使うが、ページ全体の地には使わない（#f8f9fb を基本とする）

## 4. レイアウト・余白

- コンテンツ最大幅: 1200px / **12カラムグリッド**（gutter 24px）
- セクション間余白: 88〜112px 基準 / 要素間は8pxの倍数
- グリッドの性格: 整然とした12カラムを守るが、swiss-precisionのような罫線の可視化はしない。
  代わりに**表の罫線**と**カードの淡い影**で領域を分ける
- 密度: dense。手数料・実績は数字の詰まった表で見せるが、行間1.75・セル内余白
  16〜20pxのリズムで読みやすさを保つ
- **ヒーローの構成（型外し）**: 中央寄せ＋ボタン2つにしない。左5カラムに価値の一文（h1）＋
  主要CTAボタン1つ＋主要数値3つを横並びで配置。右7カラムには
  「アプリ画面の抽象UI」＋その中に業種の主要指標を示すインラインSVG線グラフ（本デモでは
  資産推移）を内包した1枚のカードを置く。ボタンはヒーロー全体で1つのみ（副ボタンを並べない）。
  **CTA文言は業種に即した主要な次アクションの具体的な動詞句にする**（空語不可）。
  本デモの資産運用では「口座を無料でひらく」を採用するが、これは**このデモ固有の例**であり、
  他業種で再現する際は必ず業種に即した動作に差し替える（例: 会計SaaSなら「無料で試す」、
  保険なら「無料見積もりを申し込む」、法人カードなら「発行を申し込む」等）

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: `position: sticky; top:0`。背景は**不透明**な `var(--color-bg)`
  （半透明・backdrop-filterは使わない）。ナビリンクは弱文字色、ホバーで文字が濃くなり
  下2px罫線がアクセント色で下線として現れる（下線は常時ではなくホバー時のみ）
- 角丸: 12px（`--radius`）。カード・パネル・バッジ・ボタンに統一適用
- 影: **`0 8px 32px rgba(26,31,43,0.06)` の1種類のみ**（`--shadow-soft`）。
  色付きの大きなグロー影・複数影の重ねがけを禁止
- 境界線: カードは影に加えて `1px solid var(--color-line)` を併用（面が沈んで見えるよう
  影だけに頼らない）。表は横罫1px、外枠のみ太め1px `var(--color-line-strong)`
- ボタン: 主ボタンは角丸12px・塗り（アクセント色地・白文字・600ウェイト）、ホバーで
  背景がアクセント濃色に変わる（0.15s）。グラデーションのボタンは作らない。副ボタンは
  枠線のみ（用途が限定的なので多用しない）
- カード的要素: **3カラム角丸カードで機能を並べない。** 「できること」セクションは
  早見表（横スクロール可）＋各機能ごとの交互配置（テキスト⇄SVGパネル、左右反転）で構成する。
  「安全性の考え方」は3項目を横並びにするが、角丸カード＋影ではなく**上罫線2pxのみで
  区切ったシンプルな列**にする（影付きカードにしない）
- 表・仕様: 手数料表・実績表は横罫1px、見出し行は背景 `--color-bg-soft`、金額列は
  Outfitの等幅数字で右寄せ or 揃え。0円の項目はアクセント濃色で視覚的に強調してよい
- フォーム要素: 本デモでは入力フォームを持たないが、使う場合は白地・1px罫線・角丸12px・
  フォーカス時に罫線をアクセント色に変える
- 画像の扱い: 写真は使用しない。図はすべて自作インラインSVG（線グラフ・棒グラフ・
  積み上げバー）。塗りは**単色フラットのみ**（グラデーション塗り禁止）
- アクセント色の適用範囲: §3の4用途（CTA・グラフ主線・強調数値/リンク・バッジ）に限定。
  ナビ通常状態・本文既定色には使わない

## 6. モーション

- 量: subtle（役割差のある最小限の動き。ループしない）
- 使う動き: ①ヒーロー右カードのSVG線グラフを `stroke-dasharray` / `stroke-dashoffset` で
  ページ読み込み時に**1回だけ**描画する（ループさせない。0.3s遅延→1.6sで描き切る）
  ②ボタン・ナビリンクのホバー色変化（0.15s ease）③フォーカス時の罫線色変化。
  それ以外のフェードイン等は使わない（役割の薄い装飾フェードで水増ししない）
- 使わない動き: **数字のカウントアップを一切使わない**（金額・パーセント・実績は
  常に静止した最終値で表示する）。スクロール連動アニメ・パララックス・
  カルーセル・マーキー・カード一律ホバーのtranslateYも使わない
- `prefers-reduced-motion: reduce` 時は線グラフのアニメーションを無効化し、
  最終状態（描画済み・不透明1）で静止表示する

## 7. 写真・イラスト・図版

- 写真は使わない（金融の実務上、実在人物・オフィス写真の恣意的使用を避ける意図もある）。
  図版はすべて自作インラインSVGの線グラフ・棒グラフ・積み上げバー・比較図に統一
- グラフの塗りは**単色フラットまたは淡いアクセント色の背景塗り**のみ許可。
  グラデーション塗り・3D効果・ドロップシャドウ付きグラフは使わない
- グラフの線幅は2〜2.5px、色はアクセント1色に統一。複数系列が必要な場合は
  アクセント色＋ニュートラルグレー（`--color-line-strong` 等）の組み合わせに限定し、
  新しい色相を追加しない（mono-accentの規律を保つ）

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / system-ui をデフォルトで使わない（Outfit / Zen Kaku Gothic New
  で組む。数字を欧文フォントの等幅数字で組まないのも禁止＝tabular-nums必須）
- **ダークネイビー地＋シアン/青のグロー・ネオン装飾を使わない**（本テイストの最重要排他。
  フッター等で濃色反転面を使う場合も、box-shadowのグローや光彩エフェクトを一切付けない）
- 紫〜青の装飾グラデーションを一切使わない（背景・文字・ボタン・グラフの塗りすべて）
- **統計数字・金額のカウントアップアニメーションを使わない**（静止で置く。§6参照）
- 「アイコン＋見出し＋説明」の3カラム角丸カードで機能紹介を作らない
  （早見表＋交互配置で構成する。§5参照）
- box-shadowの色付きグロー・複数影重ねがけ・backdrop-filterを使わない
  （影は `--shadow-soft` の1種類のみ）
- プラス/マイナスの増減を色（緑/赤）だけで表現しない（▲/▼の記号を必ず併記する。
  この▲/▼は次項の絵文字・記号グリフ禁止に対して**DESIGN.mdが明示的に許可した専用記号**であり、
  他の記号グリフを同様に許可されたものとして拡大解釈してはならない）
- 絵文字をアイコンとして使わない（自作インラインSVGの線画・図版のみ）。
  これには色付きピクトグラム絵文字（🚀✨🔒等）だけでなく、チェックマーク・バツ印・矢印などの
  単色記号グリフ（✓✗✔➜等、Unicode DingbatsやMisc Symbolsに属する文字）をテキストとして
  埋め込む使い方も含む。禁止対象を排他リストで示す:
  - 色付き絵文字全般（🚀 ✨ 🔒 💰 📈 など）
  - チェック/バツ記号（✓ ✔ ✗ ✘ ☑ ☒ など）
  - 矢印・三角の記号グリフ（➜ → ➔ ▶ ◀ など。ただし▲/▼は上記の専用例外に限り許可）
  - その他Dingbats・Misc Symbolsブロックの装飾記号全般
  - 状態表現（完了/対応/エラー等）は§9に定める自作インラインSVGパスで代替する
- 元本保証を示唆する断定表現・「必ず儲かる」等の投資助言的コピーを書かない
  （実績は「過去の実績は将来を保証しない」旨の注記とセットで開示する）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f8f9fb;
  --color-bg-white: #ffffff;
  --color-bg-soft: #eef1f5;
  --color-text: #1a1f2b;
  --color-text-weak: #5b6472;
  --color-accent: #1f7a6d;
  --color-accent-strong: #185f55;
  --color-accent-pale: #e4f0ed;
  --color-line: #dde2e9;
  --color-line-strong: #c3cad4;
  --color-plus: #3a7d5c;
  --color-minus: #a4453d;

  --font-heading: "Zen Kaku Gothic New";
  --font-body: "Zen Kaku Gothic New";
  --font-latin: "Outfit";

  --space-unit: 8px;
  --section-gap: 112px;
  --radius: 12px;
  --shadow-soft: 0 8px 32px rgba(26, 31, 43, 0.06);
  --max-width: 1200px;
  --gutter: 24px;
  --cols: 12;

  --motion-duration: 0.5s;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
```

- 等幅数字の共通クラス（コピペ可）:

```css
.num, .tnum {
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
```

- ヒーロー右カードのSVG線グラフ描画（1回だけ・ループなし。コピペ可）:

```css
.chart-draw {
  stroke-dasharray: 1400;      /* パスの実長以上の値にする */
  stroke-dashoffset: 1400;
  animation: draw-line 1.6s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .chart-draw { animation: none; stroke-dashoffset: 0; }
}
```

```html
<svg viewBox="0 0 520 180" aria-label="資産評価額の推移を示す線グラフ">
  <path class="chart-draw" d="M0,140 L60,132 L120,120 ... L520,38"
        fill="none" stroke="#1f7a6d" stroke-width="2.5"
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

- 「できること」の早見表＋交互配置（3カラム角丸カードを使わない代替パターン。骨格）:

```html
<table class="summary-table"><!-- 早見表：商品/最低金額/特徴 --></table>

<div class="feature-row">           <!-- 通常配置: テキスト左・SVG右 -->
  <div class="f-text">…</div>
  <div class="f-visual">…</div>
</div>
<div class="feature-row reverse">   <!-- 反転配置: SVG左・テキスト右 -->
  <div class="f-text">…</div>
  <div class="f-visual">…</div>
</div>
```

- フォント読み込み:
```html
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;600;700&display=swap" rel="stylesheet">
```
- プラス/マイナス表示は必ず記号を併記する: `<span class="plus tnum">▲ 2.3%</span>` /
  `<span class="minus tnum">▼ 1.2%</span>`。色は`--color-plus` / `--color-minus`のみ、
  新しい色相を追加しない（▲/▼はDESIGN.mdが明示的に許可した専用記号であり、他の記号グリフの
  使用を正当化するものではない。§8参照）

- 完了/対応/エラー等の状態を示す場合は、✓✗等のテキスト記号グリフを使わず**自作インラインSVGパス**
  で表現する（コピペ可）:

```html
<!-- 完了を示す手描きチェック線の例 -->
<svg viewBox="0 0 20 20" width="20" height="20" aria-label="完了">
  <path d="M4,10 L8,14 L16,4" stroke="var(--color-accent)" stroke-width="2"
        fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

  テキストノード内に✓✗✔➜等の記号グリフを混在させない。エラー・未対応等の他の状態も同様に
  自作インラインSVGパス（バツ線・注意アイコン等）で表現し、Unicode記号で代替しない。