柔らかなSaaS Soft SaaS

DESIGN.md

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

https://3pt.co.jp/design-library/md/soft-saas/DESIGN.md

# DESIGN.md — 柔らかなSaaS / soft-saas

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

## 1. コンセプト

「王道のSaaSサイト」をAIの手癖なしで組み直す。紙のようなオフホワイト、深い青緑、
蜂蜜色のアクセント。角丸も使うが節度を持たせ、影の代わりに輪郭線で立体を描く。
清潔だが無機質ではない、「人が運営しているソフトウェア」の顔。

**キーワード**: 清潔 / 温かい / 実務的 / 手作業の気配
**この見た目が向く場面**: SaaS・業務ツール・スタートアップのプロダクトサイト

## 2. タイポグラフィ

- 和文（見出し・本文とも）: Zen Kaku Gothic New / 見出し 700・本文 400
- 欧文・数字: Bricolage Grotesque / 見出し 600・数字 500
  （プロダクト名・価格・統計数字は必ずこちらで組む。**Inter に置き換えない**）
- 本文: 16px / 行間 1.9 / 字間 0.02em
- 見出しスケール: h1 44px / h2 30px / h3 20px（モバイルは h1 32px）
- 特記: h1 は行間 1.4 でタイトに。キャッチコピーは体言止めや断定で短く、
  「〜を、もっと。」型の定型AIコピーを書かない

## 3. カラー

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #fbf9f6 | 60% |
| 背景（セクション替え） | #f2ede5 | — |
| テキスト（主） | #33302c | 25% |
| テキスト（弱） | #7a736a | — |
| 主役色（ボタン・リンク・図版線） | #2f6f5e（深い青緑） | 10% |
| 主役色の淡面（バッジ・図版面） | #dcebe5 | — |
| アクセント（蜂蜜色） | #e0a458 | 5%以下 |
| 罫線 | #e4ddd2 | — |

- 配色ルール: 青〜紫系を使わない。純白 #ffffff・純黒 #000000 を使わない。
  アクセントの蜂蜜色は「1画面に1箇所」（ハイライト・下線マーカー・バッジ）まで

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

- コンテンツ最大幅: 1120px / セクション間余白: 上下 104px
- ヒーロー: **左右非対称の2カラム**（左: コピー＋CTA、右: プロダクトの図）。
  中央寄せヒーローを作らない
- プロダクトのスクリーンショットの代わりに、CSS/SVGで描いた「簡略UI図」
  （線と淡面だけのワイヤー風イラスト）を使う。実画面の模写より雰囲気が出て軽い
- 機能紹介は「交互レイアウト」（図版と文章が左右交互）を基本にする。
  3カラムカードの羅列で済ませない。カードを使うのは料金表のみ

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

- 角丸: 12px 固定（ボタン・カード・図版すべて。20px以上の丸みは禁止）
- 影: box-shadow は使わない。**立体は 1.5px の輪郭線（#33302c）＋
  2〜4px の背景色オフセット（疑似ドロップ）** で描く。手描き風の版画のような立体感
- ボタン（主）: 背景 #2f6f5e・文字 #fbf9f6・輪郭線 1.5px #33302c・
  ホバーで transform: translate(-2px,-2px) しオフセットが深くなる
- ボタン（副）: 透明背景＋輪郭線のみ
- バッジ・タグ: 淡面 #dcebe5 に主役色文字。ピル形でよいがこの用途のみ
- 罫線: セクション内の区切りは 1px #e4ddd2
- アイコン: 絵文字・アイコンフォント禁止。線幅 1.5px のインラインSVG線画を自作し、
  線色は #2f6f5e に統一する

## 6. モーション

- 量: subtle
- 使う動き: スクロール進入時の opacity 0→1 / translateY(12px)→0（0.5s ease-out）、
  ボタンホバーの平行移動（0.15s）
- 使わない動き: パララックス、無限マーキー、数字カウントアップ、背景の動くグラデ
- prefers-reduced-motion 時はすべて停止

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

- 写真は使わない。図版はすべて「線＋淡面」のCSS/SVG図解
  （線 #2f6f5e または #33302c、面 #dcebe5、地 #fbf9f6）
- 人物イラスト・3Dモックアップ・グラデーションの抽象図形を使わない

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

- Inter / Roboto / Arial / Noto Sans を使わない（和文 Zen Kaku Gothic New、
  欧文 Bricolage Grotesque のみ）
- 青〜紫のグラデーションを一切使わない。グラデーション自体を使わない
- box-shadow を使わない（立体は輪郭線＋オフセットで表現する）
- 純白 #ffffff の背景・カードを使わない
- 「アイコン＋見出し＋説明文の3カラムカード」を機能紹介に使わない（交互レイアウトで組む）
- 絵文字・アイコンフォントをアイコンとして使わない
- 中央寄せヒーロー（見出し＋サブコピー＋ボタン2つ＋下にプロダクト画像）を作らない
- 指定8色以外の色を追加しない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #fbf9f6;
  --color-bg-alt: #f2ede5;
  --color-text: #33302c;
  --color-text-weak: #7a736a;
  --color-primary: #2f6f5e;
  --color-primary-soft: #dcebe5;
  --color-accent: #e0a458;
  --color-line: #e4ddd2;
  /* 変数には総称ファミリ(serif/sans-serif)を含めないこと */
  --font-heading: "Zen Kaku Gothic New";
  --font-body: "Zen Kaku Gothic New";
  --font-latin: "Bricolage Grotesque";
  --space-unit: 8px;
  --radius: 12px;
  --max-width: 1120px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap`
- font-family 指定は `var(--font-latin), var(--font-body), sans-serif` の順
  （英数字が自動で Bricolage Grotesque になる）
- 疑似ドロップの実装例: `border: 1.5px solid var(--color-text); border-radius: 12px;
  box-shadow: none; position: relative;` の要素の背後に、同形状で
  `transform: translate(4px, 4px); background: var(--color-primary-soft);` の擬似要素を敷く