Nstock（株式報酬） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-17 / 対象: https://nstock.com/, https://nstock.com/service

1. Visual Theme & Atmosphere

• デザイン方針: 白地・インディゴ1色・角丸4pxで組む、装飾を足さない B2B SaaS。影は実質ゼロ、罫線と余白だけで階層をつくる
• 密度: 中程度。コンテナ 1120px の中央寄せに 8px 刻みのグリッドを敷く
• キーワード: インディゴ #2227b2、角丸 4px、影なし、Manrope＋Noto Sans JP の二層、palt は見出しだけ

このサイトの核心は4つある。

1. 欧文と和文で別々のフォントを積んでいる。 Manrope（欧文）→ Noto Sans JP（和文）の順で並べ、数字とラテン文字は Manrope、かなと漢字は Noto Sans JP が受け持つ。欧文だけの見出し（Problems Solutions Planning）は和文を積まない別スタックを使う（3.3 参照）
2. font-feature-settings: "palt" は可視 540 要素中 9 要素にしか効いていない。 その 9 要素はすべて見出し（h1 / h2 / h3）と円形ラベルの「設計」「管理」「活用」。本文には一切 palt を当てない
3. letter-spacing は body で一度だけ宣言され、px として 493 要素に継承される。 実測 0.368px（= 16px × 0.023em）。見出しだけが em で再宣言して 0.05〜0.06em まで開く
4. 影は 1 種類・3 要素だけ。 rgba(0,0,0,0.08) 2px 4px 4px 0px がヒーローの浮きラベルに当たるのみで、カードにもボタンにも影がない

このサイトに CSS Custom Properties は 1 個も存在しない。 Next.js の CSS Modules（index-module-scss-module__XXXX__button のようなハッシュ付きクラス名）で組まれており、トークンはビルド時に解決されている。実装値そのものを仕様として扱うこと。

2. Color Palette & Roles

Primary

Secondary（サービス3領域の色分け）

サービスを3つに分けて紹介する箇所だけ、バッジに色を振り分ける。この3色はバッジ以外に登場しない。

3色は「青 → インディゴ → 紫」と色相が連続している。 真ん中がブランド色になるよう配置されている。無関係な色を足さないこと。

Neutral

Semantic

Gradients

面を白から浮かせるためだけに使う、ほぼ無彩色に近い淡いグラデーション。

css/* 実績バー */
background: linear-gradient(90deg, rgba(218,219,247,.5), rgba(180,212,241,.5));
/* セクション面 */
background: linear-gradient(96.8deg, #f5fafd 6.38%, #f5f6fd 51.98%, #f7f5fd 110.34%);

グラデーションを彩度の高い色でつくらないこと。 実サイトはいずれも白に限りなく近く、面の切れ目を示すためだけに使っている。

3. Typography Rules

3.1 和文フォント

Noto Sans JP のみ。 Google Fonts を next/font 経由でサブセット配信している。

• 実際にロードされるウェイトは 400 / 500 / 600 の3つだけ。 @font-face は 700 も宣言しているが document.fonts の status は unloaded（= 参照する要素がページに存在しない）。和文で 700 を使わないこと
• フォールバックに Noto Sans JP Fallback（size-adjust で字幅を合わせたローカル代替）が自動挿入される。手書きする場合は不要

3.2 欧文フォント

Manrope。 400 / 500 / 600 / 700 がロード済み、800 は unloaded。

• 数字の強調（100 社以上）だけが 700 を使う。それ以外の欧文は 600 まで
• セクションラベル（Problems Solutions Planning Admin Enablement）は和文を積まないスタックで指定される（3.3）

3.3 font-family 指定

2種類のスタックを使い分ける。

css/* (a) 既定 — 和欧混植。html / body に指定し、ほぼ全要素が継承する（可視 108 / 118 要素） */
font-family: Manrope, "Manrope Fallback", "Noto Sans JP", "Noto Sans JP Fallback",
             "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

/* (b) 欧文専用 — ラテン文字だけの見出し・数字に使う（可視 10 要素） */
font-family: Manrope, "Manrope Fallback";

• (a) は欧文 Manrope が先、和文 Noto Sans JP が後。 ブラウザは字ごとにスタックを走査するので、この順で「ラテン文字と数字は Manrope、かなと漢字は Noto Sans JP」が成立する
• (b) には generic family（sans-serif）が無い。 実サイトの実装どおりだが、新規実装では末尾に sans-serif を足すこと（Manrope が落ちたときの受け皿が無い）
• 末尾のローカルフォールバックは Hiragino Kaku Gothic ProN → Hiragino Sans → Meiryo。游ゴシックを積んでいない

3.4 文字サイズ・ウェイト階層

html / body ともに font-size: 16px。

ウェイトの分布（可視テキスト 118 要素）: 600 が 50、400 が 45、500 が 22、700 は 1 要素（数字の 100）だけ。

見出しは 600 で止める。 このサイトは和文で 700 を一切使わない（そもそもロードされていない）。

3.5 行間・字間

字間は「body で一度だけ宣言 → px で継承」型。

• body { letter-spacing: 0.023em } 相当 → 0.368px に解決され、可視 540 要素中 493 要素がそのまま継承する
• em で再宣言するのは見出しだけ: 56px → 0.05em、32px / 24px → 0.06em、20px → 0.03em
• この px 継承を em に読み替えて各要素に書き直さないこと。 14px の要素に 0.023em を再宣言すると 0.322px になり、実サイトの 0.368px とズレる。継承させるか、見出しにだけ em を書く

行間は用途で段階を持つ。

和文の長文は 1.8。 見出しほど詰め、本文ほど開く、という素直な設計。

3.6 禁則処理・改行ルール

• 実サイトは word-break / line-break を明示していない。ブラウザ既定の日本語禁則に任せている
• ヒーロー見出し「株式報酬、まるごとプロに。」のように読点で意味が切れる短い一文を使い、折り返しを起こさない長さに収めている。長い見出しを折り返させる設計ではない

3.7 OpenType 機能

font-feature-settings: "palt" は見出しにだけ当てる。

実測: 可視 540 要素のうち 9 要素。内訳は以下がすべて。

css/* 見出しにだけ当てる */
h1, h2, h3 { font-feature-settings: "palt"; }
/* 本文には当てない（実サイトは body に palt を書いていない） */

本文に palt を当てないこと。 16px / 1.8 の本文は約物が半角になると逆に読みにくい、という判断が実装に表れている。

3.8 縦書き

使わない。 実測で writing-mode: vertical-rl の要素は 0。

4. Component Stylings

Buttons

角丸は 4px が基本。フッターの大型 CTA だけ 6px。

css/* Primary — 主要CTA「プロに相談する」 */
.button-primary {
  background: #2227b2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 18px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.368px;
}

/* Primary (large) — フッターの大型CTA */
.button-primary-lg {
  background: #2227b2;
  color: #ffffff;
  border-radius: 6px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 400;
}

/* Secondary — 「ログイン」 */
.button-secondary {
  background: #ffffff;
  color: #3c4149;
  border: 1px solid #afb6c1;
  border-radius: 4px;
  padding: 18px 16px;
  font-size: 16px;
  font-weight: 600;
}

/* Outline — 「◯◯を詳しく見る」「一覧を見る」 */
.button-outline {
  background: #ffffff;
  color: #0f131a;         /* 枠はインディゴ、文字は黒 */
  border: 1px solid #2227b2;
  border-radius: 4px;
  padding: 16px;          /* 一覧系は 20px */
  font-size: 16px;
  font-weight: 400;
}

アウトラインボタンの文字色はインディゴではなく黒 #0f131a。 枠だけがインディゴ。ここを揃えないこと（実サイトがそうしている）。

Badges / Labels

css/* サービス領域バッジ（面色） */
.badge-service {
  background: #085f96;    /* または #2227b2 / #4622b2 */
  color: #ffffff;
  border-radius: 4px;
  padding: 12px;
  font-size: 16px;
  font-weight: 400;
}

/* 課題ラベル（枠のみ・角丸ゼロ） */
.label-column {
  background: transparent;
  color: #2227b2;
  border: 1px solid #2227b2;
  border-radius: 0;       /* ← 角丸を付けない */
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
}

/* カテゴリタグ */
.tag-category {
  background: #ffffff;
  color: #6d727c;
  border: 1px solid #d4d8dd;
  border-radius: 2px;     /* ← 2px。4px ではない */
  padding: 6px;
  font-size: 12px;
  font-weight: 500;
}

/* ステータスバッジ */
.badge-status {
  background: #f3f4f7;
  color: #0d735b;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
}

/* ヒーローの浮きラベル — このサイトで唯一影が付く要素 */
.floating-label {
  background: rgba(255,255,255,.88);
  color: #0f131a;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: rgba(0,0,0,.08) 2px 4px 4px 0;
}

Cards

css.card {
  background: #ffffff;
  border: 1px solid #e9eaed;
  border-radius: 4px;
  padding: 0;             /* 内側の要素が余白を持つ */
  box-shadow: none;       /* ← 影なし */
}

角丸スケール（実測）

5. Layout Principles

Container

Spacing Scale

8px 刻み。 実測の gap 出現順:

8px(10) → 32px(8) → 16px(8) → 24px(7) → 40px(6) → 20px(5) → 64px(3) → 12px(3)

Grid

• 3カラム（サービス3領域 / 事例カード）が基本
• ロゴ帯は横スクロールのマーキー

6. Depth & Elevation

このサイトはほぼフラット。

カードやボタンに影を足さないこと。 階層は 1px solid #e9eaed の罫線と #f3f4f7 / 淡いグラデーションの面で表す。

7. Do's and Don'ts

Do（推奨）

• font-family は欧文 → 和文の順（Manrope → Noto Sans JP）。数字とラテン文字を Manrope に拾わせる
• letter-spacing は body に 1 回だけ書いて継承させる（実測 0.368px）。見出しだけ 0.05em / 0.06em で再宣言する
• palt は h1 / h2 / h3 にだけ当てる
• 和文のウェイトは 400 / 500 / 600 の3段で組む
• 角丸は 4px（ボタン・カード）、面は 6px、タグは 2px と使い分ける
• 階層は罫線と面色で作る。影は使わない
• CTA は塗り（インディゴ）とアウトライン（枠だけインディゴ・文字は黒）の2種に絞る

Don't（禁止）

• 和文に font-weight: 700 以上を使わない。 Noto Sans JP の 700 はロードされていないので、指定すると合成ボールドになる
• 欧文に font-weight: 800 を使わない（Manrope 800 も unloaded）
• 本文に palt を当てない。 実サイトは見出し 9 要素にしか当てていない
• letter-spacing を em のまま各要素に再宣言しない。 継承される px 値（0.368px）と食い違う
• 影を足さない。 実サイトの影は 1 種類 3 要素だけ
• 彩度の高いグラデーションを作らない。 実サイトのグラデーションはすべて白に近い
• アウトラインボタンの文字をインディゴにしない（枠だけがインディゴ、文字は #0f131a）
• 純黒 #000000 を本文に使わない（#0f131a）
• 欧文専用スタック Manrope, "Manrope Fallback" をそのまま写さず、末尾に sans-serif を足す

8. Responsive Behavior

Breakpoints

min-width 方式（モバイルファースト）。 実測の出現回数順:

(prefers-reduced-motion: reduce) も 1 箇所で扱っている。アニメーションを入れる場合は必ず対応すること。

タッチターゲット

主要 CTA は padding: 18px 16px ＋ font-size: 16px / line-height: 1 で実高さ約 52px。44px 以上を確保している。

フォントサイズの調整

html は 16px 固定（rem 基準を変えていない）。サイズは px で直接指定されている。

9. Agent Prompt Guide

クイックリファレンス

ブランドカラー: #2227b2（インディゴ）
本文色: #0f131a / 補足 #3c4149 / 注釈 #6d727c
背景: #ffffff / 面 #f3f4f7
罫線: #e9eaed（カード）/ #afb6c1（ボタン）/ #d4d8dd（タグ）

和文: Noto Sans JP（400/500/600 のみ）
欧文: Manrope（400/500/600/700）
スタック: Manrope, "Manrope Fallback", "Noto Sans JP", "Noto Sans JP Fallback",
          "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif

本文: 16px / line-height 1.8 / letter-spacing 0.368px（body から継承）
見出し: 56px・32px・24px・20px / weight 600 / line-height 1.2〜1.65 / 0.05〜0.06em
palt: 見出しのみ（h1/h2/h3）。本文には当てない

角丸: 4px（ボタン・カード）/ 6px（面・大型CTA）/ 2px（タグ）/ 0（既定）
影: なし
コンテナ: 1120px
余白: 8px 刻み（8/12/16/20/24/32/40/64）

プロンプト例

Nstock のデザインシステムでランディングページを作って。

- font-family は Manrope, "Manrope Fallback", "Noto Sans JP", "Noto Sans JP Fallback",
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
- body に letter-spacing: 0.023em を1回だけ書き、子要素では再宣言しない
- font-feature-settings: "palt" は h1/h2/h3 にだけ当てる
- 和文のウェイトは 400/500/600 だけ使う（700 は使わない）
- 本文 16px / line-height 1.8、見出し 32px / weight 600 / letter-spacing 0.06em
- 主要CTA は背景 #2227b2・文字 #ffffff・角丸 4px・padding 18px 16px・weight 600
- セカンダリは白地に 1px solid #2227b2 の枠、文字は #0f131a（枠だけブランド色）
- 影は使わない。階層は 1px solid #e9eaed の罫線と #f3f4f7 の面で表す
- コンテナ 1120px、余白は 8px 刻み