Design System
Seldon Inc. — Corporate & Product

デザイン
ガイドライン

Scopeコーポレート＋プロダクト
CoverageWeb・スライド・印刷・メール
Version2.0.0
Updated2026.09
Scroll

株式会社セルダン デザインガイドライン

コーポレートブランド Seldon と各プロダクト（M&Aナビ 等）に共通する、すべての職種・AIのアウトプットのためのデザイン基準

株式会社セルダンの包括的なデザインガイドラインです。コーポレートブランド（Seldon）と各プロダクト（M&Aナビ 等）を通じて、私たちが作るプロダクト・提案書・レポートなど、人の目に触れるすべてのもののデザインの枠組みと標準を定義します。

デザイン原則

未定義のUI要素を設計するとき、ガイドラインの例外を判断するとき、この原則に立ち返る。
番号は優先順位 — 原則同士が衝突した場合、番号の小さい方を優先する。

1
正確であること
数字・ステータス・期限は曖昧にしない。装飾より正確性を優先する。
Do: 売上 3.2億円（2024年12月期） Don't: 売上約3億円
2
判断を速くすること
アドバイザーが次のアクションを即座に判断できる情報設計にする。
Do: ステータスバッジ + 期限を一目で表示 Don't: 詳細画面を開かないと状態がわからない
3
明快かつプロフェッショナルであること
すっきりと伝わる表現で、専門家にふさわしい品格を保つ。カジュアルすぎる装飾、曖昧なラベル、絵文字は使わない。
Do: 簡潔なラベル、整然としたレイアウト Don't: 過剰なアニメーション、絵文字、丸みの強い装飾
4
シンプルであること
UIはコンテンツを引き立てる黒子。主張しすぎるデザインは避け、情報密度を最大化する。
Do: 余白と罫線で情報を整理 Don't: 色や影で視覚的ノイズを増やす
5
一貫していること
同じ意味には同じ表現を使う。例外は最小限にし、理由を明示する。
Do: 削除は常に赤、確認は常にモーダル Don't: 画面ごとに異なるパターンを使う
例外の扱い: ガイドラインを逸脱する場合は、上記原則のいずれかを根拠として明示すること。根拠なき例外は認めない。

ロゴ・シンボル

上位ブランド Seldon（コーポレート）と M&Aナビ（プロダクト）のロゴ・シンボル・背景アセット。各ファイルは PNG / JPG でダウンロードできます。

セルダン（コーポレート）
ロゴ
Seldon ロゴ（ネイビー）
ロゴ / ネイビー
PNG · 2035×388 · 透過
Seldon ロゴ（白）
ロゴ / 白
PNG · 2035×388 · 透過
シンボル
Seldon シンボル（ネイビー）
シンボル / ネイビー
PNG · 448×388 · 透過
Seldon シンボル（白）
シンボル / 白
PNG · 448×388 · 透過
Seldon シンボル（スクエア）
シンボル / スクエア
PNG · 1024×1024 · アプリアイコン用
背景・キービジュアル
背景・キービジュアルは参照用サムネイルのみ表示（ダウンロード非対応）。原本が必要な場合はブランド管理者へ。
スターフィールド 16:9
スターフィールド / 16:9
JPG · 3840×2160 (4K)
参照のみ
スターフィールド 縦
スターフィールド / 縦
JPG · 1440×2160
参照のみ
キービジュアル 16:9
キービジュアル / 16:9
JPG · 1920×1080 (FHD)
参照のみ
キービジュアル 正方形
キービジュアル / 正方形
JPG · 1200×1200
参照のみ
アセット（ダウンロード）
M&Aナビ フルロゴ（カラー）
フルロゴ / カラー
PNG · 1001×213 · 透過 · 明背景用
M&Aナビ フルロゴ（白抜き）
フルロゴ / 白抜き
PNG · 189×40 · 透過 · 暗背景用
M&Aナビ シンボルマーク
シンボルマーク
PNG · 256×256 · アイコン/ファビコン用
ロゴ使用ルール（全ブランド共通）

ロゴ全般の取り扱い原則。セルダン・M&Aナビ両方のロゴに適用します（図はM&Aナビのロゴを例示）。

使用ルール

最小サイズ

フルロゴ: 高さ 24px 以上
シンボル: 20px 以上

クリアスペース（余白）

ロゴの周囲にはシンボルマークの高さの50%以上の余白を確保する

破線内がクリアスペース — 他の要素やテキストをこの範囲に配置しない

背景色との組み合わせ

明るい背景 → カラー版 / 暗い背景 → 白抜き版
禁止事項
縦横比を変えない
透過・半透明にしない
色を変更しない
回転させない

カラー

ブランド

Brand

ロゴ・LP等

#0284FE

Primary — Web UI

基調色・リンク・フォーカス

#005BB1
#EBF5FF

Secondary — Dark

ヘッダー・重要ラベル

#333851
#F1F4F7

Secondary — Teal

成功・副次アクション

#208970
#E6F7F3

Destructive — Red

削除・エラー・警告アクション

#c5221f
#FFF1F2

Accent — Indigo

AI機能

#4146A6 → #C24B8B
#EEEEF8
テキスト

テキスト

#1A1A1A
foreground
本文・見出し
サンプルテキスト
#555555
secondary
補足・説明文
サンプルテキスト
#999999
tertiary
キャプション・タイムスタンプ
サンプルテキスト
#CCCCCC
disabled
無効・プレースホルダー
サンプルテキスト
#005BB1
primary
リンク
サンプルリンク
背景
#FFFFFF — background
カード・パネル
#F1F4F7 — muted
ページ全体・くすんだ背景
#E0EFFE — accent
選択中
ボーダー
#DCDEE8
border
デフォルト罫線
#005BB1
ring（primary）
フォーカスリング
#c5221f
destructive（共通）
エラー枠線
セマンティック

セマンティック

Success / Error / Warning / Info の4ペア

Success 操作が正常に完了しました。
Error エラーが発生しました。
Warning 注意が必要です。
Info 参考情報です。
#208970
semantic.success
成功 テキスト
#E8F5E9
semantic.success-bg
成功 背景
#c5221f
semantic.error
エラー テキスト
#FFF1F2
semantic.error-bg
エラー 背景
#DB8F18
semantic.warning
警告 テキスト
#FFF4E5
semantic.warning-bg
警告 背景
#565E72
semantic.info
情報 テキスト
#F0F1F3
semantic.info-bg
情報 背景
パイプラインステージ
1
ソーシング
#D0D3DA
2
受託
#A8AEBB
3
マッチング
#7E8594
4
DD
#565E72
5
成約
#333851
-
失注
#EAEBEE

基本

タイポグラフィ

タイポグラフィ

Font Stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif

768px以上 / line-height: 1.5

キャプション・注釈テキスト
caption — 12px / 400
M&A仲介の未来を拓く — M&Aナビ
body — 14px / 400
M&A仲介の未来を拓く — M&Aナビ
subheading — 16px / 500
M&A仲介の未来を拓く — M&Aナビ
heading — 18px / 700

共通ルール

項目 PC スマホ
line-height 1.5 1.6（行間広めで読みやすく）
最小タップターゲット — 44px（WCAG 2.5.5）
本文最小サイズ 14px 15px（iOS Safari のズーム防止）
スペーシング

すべての余白・パディング・ギャップは 4px の倍数 で指定する（4, 8, 12, 16, 20, 24, 32, 48 …）

4
8
12
16
24
32
48
ボーダー半径
sm — 4px
md — 8px
full — 9999px
シャドウ
sm
0 1px 2px 0 rgba(0,0,0,0.08)
md
0 2px 4px 0 rgba(0,0,0,0.1)
lg
0 4px 12px 0 rgba(0,0,0,0.12)
レイアウト定数

ブレークポイント

トークン 値 用途
sm 640px スマートフォン横
md 768px タブレット縦
lg 1024px タブレット横 / 小型デスクトップ
xl 1280px デスクトップ

スマホ操作ガイドライン（Apple HIG 準拠）

項目 値 根拠
最小タップターゲット 44 x 44 pt Apple HIG / WCAG 2.5.5
タップ要素間の最小間隔 8px 誤タップ防止
ボタン最小高さ 44px（推奨 48px） 片手操作を想定
リスト行の最小高さ 44px iOS標準セル基準
Safe Area（下部） env(safe-area-inset-bottom) ホームインジケータ回避
画面端の余白 16px Apple HIG マージン基準
44pt
48px
最小 44pt（破線）/ 推奨 48px（実線）
システムアイコン

Lucide Icons（MIT） — stroke: 1.5px / 24x24px 基準 / currentColor 継承

サイズ: 16px（インライン）/ 20px（ボタン内）/ 24px（ナビゲーション）

ナビゲーション

Home
Search
Menu
Close
Back
Chevron
More
Settings

アクション

Add
Edit
Delete
Save
Download
Upload
Loading
Check

コミュニケーション

Mail
Bell
Chat
Phone

M&A業務

Company
Deal
Users
Matching
Document
NDA
Calendar
Analytics

AI

AI Insight
AI Agent
AI Generate
AI Chat

UIパーツ例

ボタン

Filled

主要アクション。1画面に1〜2個まで

Outlined

副次アクション。Filledと併用して優先度を示す

Ghost

最も控えめ。ツールバーやインライン操作に

Muted

キャンセル・閉じる等のニュートラル操作

Disabled

バッジ
成功 エラー 警告 情報
カード
基本カード
shadow: sm / border-radius: 8px / border: #DCDEE8
コンテンツエリア
AI AI機能カード
Indigo #4146A6 アクセント付きカード。AI機能で使用。
入力フィールド
通常
フォーカス状態
補助テキスト付き
正式名称を入力してください（登記簿記載の商号）
エラー状態
入力内容にエラーがあります
ドロップダウン

セレクト / アクションメニュー

セレクト
案件ステータス
ソーシング
受託
マッチング
DD
成約
shadow: lg / border-radius: sm(4px) / gap: 4px
アクションメニュー
編集
ダウンロード
削除
セパレータで破壊的操作を分離

ドロップダウン — 補助テキスト付き

担当アドバイザー変更
選択してください
田中 太郎
製造業・IT担当 / 案件数: 8
佐藤 花子
飲食・小売担当 / 案件数: 5
鈴木 一郎
医療・介護担当 / 案件数: 12
各選択肢に補助情報を表示。担当者・企業選択などで使用

ドロップダウン — カスケード（階層化）

業種選択
業種を選択
製造業
IT・通信
飲食・小売
医療・介護
製造業
食品製造
化学・素材
機械・金属
電気・電子
親カテゴリ → 子カテゴリを横に展開。業種・地域など階層データ向け

ドロップダウン — テキスト絞り込み付き

企業検索
3件の候補
株式会社ABC製作所
製造業 / 東京都 / 売上 5億円
株式会社デジタルフォース
IT・通信 / 大阪府 / 売上 3億円
株式会社メディケア
医療・介護 / 福岡県 / 売上 8億円
入力でリアルタイム絞り込み。企業・案件など大量データ向け。マッチ部分を太字表示
チェックボックス / ラジオボタン

チェックボックス

複数選択可。フィルター・一括操作・同意確認などで使用

通常版
18 x 18px / accent-color: Brand Blue / gap: 10px / font-size: 14px
コンパクト版
14 x 14px / gap: 6px / font-size: 12px — フィルターパネル・テーブル内向け

ラジオボタン

単一選択。ステータス変更・区分選択などで使用

通常版
18 x 18px / accent-color: Brand Blue / gap: 10px / font-size: 14px
コンパクト版
14 x 14px / gap: 6px / font-size: 12px — テーブル内・設定画面向け

マルチ選択チップ

チェックボックスの亜種。横並びで省スペース。フィルターバー・タグ選択・条件指定に使用

通常版
選択時: border + bg Brand Blue light / チェックアイコン付き。未選択: border default / テキスト secondary
コンパクト版
コンパクト版: padding 3px 10px / font-size 11px — テーブル上部のフィルターバー向け
モーダル
案件を削除しますか？
この操作は取り消せません。関連するマッチング情報もすべて削除されます。
確認モーダル — 破壊的操作時に使用。overlay: rgba(51,56,81,0.5) / shadow: lg / border-radius: md(8px)
一覧表（テーブル）

案件一覧・企業一覧など、データを行と列で表示するパーツ

案件名 ステータス 担当 売上高
株式会社ABC製作所 受託 田中 太郎 5.2億円
株式会社デジタルフォース DD 佐藤 花子 3.0億円
株式会社メディケア マッチング 鈴木 一郎 8.1億円
ヘッダー行: font-weight 600 / border-bottom 2px / 全列center / 偶数行にbg-pageで縞模様（任意） / hover時にbg-page
データ行: 数値・日付→右寄せ / テキスト（項目名・備考）→左寄せ / 選択肢（ステータス・区分）→中央

高密度版（財務テーブル）

PL・BS・CF など行数が多く、数値の比較が重要なテーブル向け

損益計算書（PL）（単位：千円）
勘定科目 2023年12月期 2024年12月期 増減
売上高 523,400 612,800 +17.1%
売上原価 314,040 361,552 +15.1%
売上総利益 209,360 251,248 +20.0%
販管費 156,200 171,820 +10.0%
営業利益 53,160 79,428 +49.4%
font-size: 12px / padding: 3px 8px / monospace数値 / ヘッダー: 全列center / データ: 勘定科目→左 / 数値・増減→右
小計行にbg-page + font-weight 600 / 合計行にborder-bottom 2px + font-weight 700 / 子科目はpadding-left: 16pxでインデント / 増減に色: 正=#208970, 負=#c5221f（コスト項目は黒）
タブ（切り替え）

画面内の表示内容を切り替えるパーツ。ピル型とライン型の2種類

ピル型

概要
財務情報
関連案件
外側: border-radius 10px / 内側タブ: border-radius 7px / アクティブ: bg-card + shadow

ライン型

概要
財務情報
関連案件
アクティブ: border-bottom 2px primary / 非アクティブ: text-secondary
人物アイコン（アバター）

担当アドバイザーや相手先の担当者を表示するパーツ

田
S — 24px
佐
M — 32px
鈴
L — 40px

グループ表示

田
佐
+3
画像がない場合は姓のイニシャルを表示 / グループ時は -8px 重ね + border 2px bg-card
吹き出し補足（ツールチップ）

アイコンや省略テキストにカーソルを合わせた時に、補足情報を表示するパーツ

案件の詳細情報を表示します
上表示
背景: #1A1A1A / テキスト: #fff / font-size: 12px / border-radius: 4px / 矢印付き
進捗バー

案件の進捗やタスクの完了率を視覚的に表示するパーツ

DD チェックリスト 65%
書類収集 100%
高さ: 4px / 背景: #EAEBEE / 進行中: primary / 完了: teal(#208970) / border-radius: full
現在地表示（パンくずリスト）

今どの画面にいるかを階層で表示し、上の階層に戻れるパーツ

案件一覧 株式会社ABC製作所 WBS
リンク: primary色 / 現在地: text-primary + font-weight 500 / 区切り: chevron right アイコン

スライド（プレゼン資料）

PowerPoint / Google スライド共通。16:9（1280×720pt）を基準とする

レイアウトパターン

M&A仲介に必要な13パターン。すべてのスライドはこのいずれかをベースに作成する

まずコンテンツの論理構成を特定し、それに合ったレイアウトを選ぶ。構成が曖昧なままレイアウトを選ぶと、主張なき主張型や、事実羅列なのにフロー型になるなど、伝わらないスライドになる

主張型

演繹法（結論→根拠）または帰納法（事例→結論）で主張を伝えるスライド。■ 結論エリアは先にも後にも配置できる

1. 箇条書き
結論+根拠の箇条書き。最頻出レイアウト
2. 根拠N列
複数の根拠を並列→結論。帰納的な構成
3. 対比N列
結論+N列の対比。主張側を強調、他を薄く

情報羅列型

KPIカードパネル、帳票データテーブル、実績一覧など、事実・数値を並べるスライド

4. 箇条書きリスト
要点整理・議題一覧・注意事項。見出し+説明の箇条書き
5. Nカラム
KPI数値・サービス紹介・チーム紹介・実績一覧。並列情報を均等表示
6. テーブル
帳票データ・比較表+右に補足テキスト。ヘッダー全列中央 / データ: 数値・日付→右 / テキスト→左 / 選択肢→中央

遷移型・フロー型

Before/After、マイルストーン、スケジュールなど、時間軸や段階の変化を伝えるスライド

7. 横タイムライン
M&Aプロセス・スケジュール・マイルストーン
8. ステップフロー
手続きの流れ・Before/After・パイプライン進捗
9. WBS・ガントチャート
縦にタスク、横に時間軸。スケジュール・工程表・DD計画

特殊ページ

表紙・セクション区切り・ディスクレーマー・最終ページなど、定型のページ

10. 表紙
ロゴ+タイトル+サブタイトル+日付・社名（左寄せ）
11. セクション区切り
章の切り替え。セクション番号+タイトル
12. ディスクレーマー
免責事項・注意事項。小さめの文字で長文
13. 最終ページ
白背景にロゴのみ
文字サイズルール
要素 サイズ ウェイト 用途
スライドタイトル 28pt Bold 各スライドの見出し
本文 18pt Regular 説明・箇条書き
補足・注釈 10pt Regular 出典・脚注
数値ハイライト 48pt Bold KPI・成果数値
表紙タイトル 36pt Bold 表紙・セクション区切り
フォント: 游ゴシック（Windows）/ ヒラギノ角ゴ（Mac）。本文 16pt 未満は使用禁止（投影時に読めない）
余白・グリッド
40pt
40pt
40pt
40pt
ヘッダーエリア 80pt
1
フッターエリア 28pt
コンテンツエリア
不可侵
エリア 位置・サイズ 配置する要素 ルール
不可侵マージン 上下左右 40pt ロゴ、ページ番号のみ例外的に配置可 テキスト・図表は絶対にはみ出さない
ヘッダーエリア マージン上端から 80pt セクション名（10〜12pt）+ スライドタイトル（28〜32pt Bold）+ 区切り線 セクション名→タイトルの順。1スライド1タイトル
コンテンツエリア ヘッダー下〜フッター上
≒ 高さ 427pt		 結論・本文・図表・グラフ・箇条書き等 内部余白 16pt 以上。要素間ギャップ 12〜24pt
フッターエリア マージン下端から 28pt 出典・注釈（10pt）、ページ番号（10pt 右寄せ） 出典は左寄せ、ページ番号は右寄せ
スライドサイズ: 25.4cm × 14.29cm（16:9 ワイド） / 全エリアの寸法は pt 単位で厳守
特殊ページ（表紙・セクション区切り・最終ページ）はヘッダー/フッター不要。コンテンツをスライド全面に配置
配色ルール
要素 色 用途
背景
スライド背景 #FFFFFF 通常スライド
セクション区切り背景 #333851 セクション区切りページのみ
エリア背景（薄グレー） #F1F4F7 補足エリア・カード背景・テーブル列背景
結論エリア背景 #EBF5FF 結論・まとめブロックの背景
テキスト
見出し #333851 スライドタイトル・小見出し
本文 #1A1A1A 通常の本文テキスト
補足・注釈 #999999 出典・脚注・セクション名・キャプション
線・罫線
区切り線・テーブル罫線 #DCDEE8 タイトル下区切り・テーブル罫線
結論エリア左ボーダー #005BB1 結論ブロックの左線（4px）
強調・意味色
強調・リンク #005BB1 キーメッセージ・数値ハイライト
ポジティブ・成功 #208970 増加・達成・正の変化
ネガティブ・リスク #c5221f 減少・未達・リスク・警告
グラフ・チャート
グラフ（メイン） #005BB1 主要データ系列
グラフ（サブ） #208970 比較・副次データ系列
1スライドに使う色は3色まで。強調色の多用は避ける
禁止事項
フォントの混在
1つのスライド内で3種類以上のフォントを使わない
テキストの詰め込み
1スライドの文字数は100文字以内を目安にする
低コントラスト
背景と文字のコントラスト比 4.5:1 以上を確保する
ガイドライン外の色
カラーセクションで定義された色のみ使用する

HTMLメール

M&Aナビから送信されるトランザクションメール・通知メールのデザインパターン。Tabler Emails 3.0 のテーブルベース構造をベースに、M&Aナビのブランドカラーとデザインシステムに準拠。

メール基本仕様
項目 値 備考
最大幅 640px table-based layout, .wrap class
本文フォント -apple-system, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans CJK JP', sans-serif CJK 対応 system font stack
本文サイズ 15px / モバイル 14px @media max-width: 560px で切替
行間 160% line-height: 1.6
コンテンツ余白 48px / モバイル 24px .content padding
角丸 8px メインボックス (.box)
ボディ背景色 #F1F4F7 secondary-light
ボックス背景色 #FFFFFF page
ボックスボーダー 1px solid #DCDEE8 border-default
ボックスシャドウ 0 1px 4px rgba(0,0,0,0.05) 控えめなシャドウ
DOCTYPE: XHTML 1.0 Strict / MSO conditional comments for Outlook / preheader text（隠しテキスト）対応
メールカラーマッピング

M&Aナビブランドカラーのメールにおける用途マッピング

#005BB1
email.cta-button
CTA ボタン背景
#FFFFFF
email.cta-text
CTA ボタン文字
#0284FE
email.link
リンク
#333851
email.heading
見出し
#1A1A1A
email.body-text
本文
#555555
email.sub-text
補助テキスト
#999999
email.footer-text
フッターテキスト
#F1F4F7
email.bg
メール背景
#FFFFFF
email.box-bg
ボックス背景
#DCDEE8
email.divider
区切り線
#208970
email.success
成功バッジ
#E6F7F3
email.success-bg
成功バッジ背景
#c5221f
email.error
エラーバッジ
#FFF1F2
email.error-bg
エラーバッジ背景
メールタイプ別パターン

M&A仲介業務の実運用メール50種類を分析し、8カテゴリに分類。さらに4つのデザインテンプレートに集約し、各カテゴリに適用するテンプレートを定義する。件名は全て「【M&Aナビ】」プレフィックスで統一（NNDB系は「【M&Aナビ NNDB】」）。

テンプレート定義

テンプレート 構成 適用カテゴリ 件数計
A. シンプルアクション型 見出し → 短い本文 → コード/トークンブロック or アラートボックス → CTA → フッター 認証・セキュリティ, エラー・警告 12
B. カード情報型 見出し → コンテキスト本文 → 情報カード（案件/企業詳細） → CTA → フッター 案件通知, 交渉フロー, 完了・確認 19
C. メッセージ通知型 見出し → メッセージプレビュー（送信者名+抜粋） → CTA → フッター メッセージ到着, タスク・アクション依頼 9
D. リスト配信型 見出し → 複数アイテムリスト/カード → 個別CTA or まとめCTA → フッター 一括配信・提案 4

カテゴリ別マッピング

カテゴリ パターン 用途例 件名例 件数 テンプレート
認証・セキュリティ アカウント認証・セキュリティ通知 仮登録確認、メール認証、パスワードリセット、OTP、アカウントロック/解除、本人確認完了、バンカー招待 【M&Aナビ】メール認証が必要です 10 A
案件通知 案件掲載・更新通知 新着案件通知（一括）、案件公開完了、週次ダイジェスト 【M&Aナビ】新着案件「○○」が公開されました 3 B
交渉フロー M&A交渉プロセス進行 交渉リクエスト送受信、NDA差入れ、実名交渉承認、商談辞退、フェーズ開始、ディールタスク完了/取消 【M&Aナビ】譲受候補先から交渉リクエストが届きました！ 11 B
メッセージ到着 メッセージ・問い合わせ通知 ディールルームチャット、交渉チャット、事務局メッセージ、Q&A質問到着、Q&A回答到着 【M&Aナビ】候補先からチャットメッセージが届いています 5 C
タスク・アクション依頼 ユーザーへのアクション要求 タスクアサイン、レビュー依頼、必須資料連絡、面談記録通知 【M&Aナビ】タスクがアサインされました 4 C
完了・確認 処理完了・受付確認 本登録完了、タスク完了、インポート完了、問い合わせ受付完了、クレジットチェック回答受付 【M&Aナビ】M&Aナビ本登録完了 5 B
エラー・警告 エラー通知・セキュリティ警告 インポート検証失敗、アカウントロック通知 インポート処理が失敗しました 2 A
一括配信・提案 一括送信・マーケティング NN提案一括メール、ロングリスト連絡、リマインドメール、NN新規案件通知 【M&Aナビ NNDB】新規案件掲載のおしらせ 4 D

テンプレートプレビュー

各テンプレートの実際のメール表示イメージ。コンポーネントプレビュー（セクション4）の個別パーツを組み合わせた完成形。

A. シンプルアクション型 認証・セキュリティ エラー・警告

メール認証を完了してください
M&Aナビへのご登録ありがとうございます。以下の認証コードを入力して、メールアドレスの確認を完了してください。
482 901
このコードの有効期限は30分です。
認証を完了する
心当たりがない場合は、このメールを無視してください。
© 2026 株式会社M&Aナビ All Rights Reserved.

B. カード情報型 案件通知 交渉フロー 完了・確認

新しい交渉リクエストが届きました
上村様、ご登録の案件に対して譲受候補先から交渉リクエストが届きました。
株式会社サンプルテック
IT・ソフトウェア / 東京都
売上規模 3.5億円
希望価格 2〜3億円
ステージ マッチング
交渉リクエストを確認する
© 2026 株式会社M&Aナビ All Rights Reserved.

C. メッセージ通知型 メッセージ到着 タスク・アクション依頼

新しいメッセージが届いています
上村様、候補先からメッセージが届きました。
田
田中 太郎 14:32
デューデリジェンスの資料について確認したい点があります。お手すきの際にご確認いただけますでしょうか。
メッセージを確認する
© 2026 株式会社M&Aナビ All Rights Reserved.

D. リスト配信型 一括配信・提案

新着案件のお知らせ
今週の新着案件をお届けします。
関西地方の老舗食品製造会社 製造業
売上 2.8億円 / 大阪府
詳細を見る →
都内Webマーケティング企業 IT
売上 1.2億円 / 東京都
詳細を見る →
東海地方の建設会社 建設業
売上 5.0億円 / 愛知県
詳細を見る →
すべての案件を見る
© 2026 株式会社M&Aナビ All Rights Reserved.
コンポーネントプレビュー

メールクライアントでの表示を再現したコンポーネント見本

a. ヘッダー

案件ステージが更新されました
上村様、ご担当の案件のステージが更新されましたのでお知らせいたします。

d. 情報カード

株式会社ABC製作所
製造業 / 東京都
売上規模 5.2億円
ステージ DD
担当 田中 太郎

b. CTA ボタン

詳細を確認する
面談日程を調整する
書類を提出する
Primary: #005BB1 bg + white text / Secondary: white bg + #005BB1 border + text / Block: width 100%

c. ステータスバッジ

成功 警告 エラー 情報
成功: #208970/#E6F7F3 / 警告: #F5A623/#FFF8EC / エラー: #c5221f/#FFF1F2 / 情報: #005BB1/#EBF5FF

f. 区切り線

1px solid #DCDEE8 / margin 32px 0

e. フッター

ご不明点がございましたら、担当アドバイザーまたは
support@ma-navi.co.jp までお問い合わせください。
© 2026 株式会社M&Aナビ All Rights Reserved.
コピーライティングルール

M&A仲介業務のメールにおけるテキストルール。ナビボットのトーンとは異なり、よりフォーマルな「です・ます調」を用いる。

項目 ルール 例
件名 20文字以内推奨。具体的なアクション or 案件名を含む 「ABC製作所の面談日程をご確認ください」
本文冒頭 宛名（○○様）から始め、用件を1文で伝える 「上村様
ご担当の案件について更新がございます。」
CTA ラベル 動詞で始める。具体的な行動を示す 「確認する」「詳細を見る」「面談日程を調整する」
敬語レベル です・ます調。ナビボットより丁寧でフォーマル 「ご確認いただけますと幸いです」
フッター 配信停止リンク必須。問い合わせ先を明記 「配信停止はこちら」リンク + サポートメール
Do
・件名に案件名や具体的アクションを含める
・本文は簡潔に、要点を先に伝える
・1メール1CTA（主要アクションは1つに絞る）
・期限がある場合は日付を明示する
Don't
・曖昧な件名（「お知らせ」「ご連絡」のみ）
・長文の前置きや挨拶文
・複数の異なるアクションを1通に詰め込む
・絵文字やカジュアルすぎる表現

データ可視化（BI・ダッシュボード）

Forge の /dashboard 由来。全プロダクトのチャート／ダッシュボードに適用。色は目的別に2系統 — 意味ロール（chart-1〜5）と識別カラー（chart-series-1〜8）。1つのチャート内で混在させない。各トークンは light/dark ペアで定義（本ページはライト表示、dark値はデータとして保持）。

1. 意味ロール — chart-1〜5

1チャート＝1指標のとき使う。色は「役割」で選ぶ（次に空いている色、ではなく意味で）。複数系列の識別には使わない。

#005BB1
--chart-1
主要指標 / dark #4EA9FE
#179779
--chart-2
副次指標 / dark #47E1BD
#555555
--chart-3
中立・比較 / dark #9298B6
#DB8F18
--chart-4
注意 / dark #F5A623
#C5221F
--chart-5
重要・強調 / dark #EF5350
2. 識別カラー — chart-series-1〜8

複数系列を1チャートで比べるとき使う（積み上げ・グループ棒など）。slot 1→2→3… の固定順で割当て、循環禁止。8色を超えたら「その他」に畳むか facet 分割（9色目は作らない）。slot-1 は light 時 --primary と共有。

#005BB1
--chart-series-1
slot 1 / dark #3987E5
#EB6834
--chart-series-2
slot 2 / dark #D95926
#1BAF7A
--chart-series-3
slot 3 / dark #199E70 要label
#EDA100
--chart-series-4
slot 4 / dark #C98500 要label
#E87BA4
--chart-series-5
slot 5 / dark #D55181 要label
#008300
--chart-series-6
slot 6 / dark #008300 dark要label
#4A3AA7
--chart-series-7
slot 7 / dark #9085E9
#E34948
--chart-series-8
slot 8 / dark #E66767
検証(light #FFFFFF): OKLCH L 0.43–0.77 / C≥0.10 / CVD隣接最悪 ΔE 9.1(protan)。aqua/yellow/magenta の3色が3:1未満 → direct label / table view 必須。 ／ (dark #252840): green 1色が3:1未満(2.92) → direct label / table view 必須。
3. 量的表現・ヒートマップ（sequential）

--foreground（無彩色）の階調を使う。青は chart-1 / series-1 と役割が被るため使わない。特定指標に紐づかない汎用の量的表現向け。

/0
/15
/30
Aa
/50 darkのみ反転
Aa
/85 両モード反転
セル上テキストの反転（非対称ルール）: Light = /85 のみ反転（合成1.58:1 → 反転で11.03:1）／ Dark = /50 以上を dark:text-background で反転（/50=2.96:1, /85=1.33:1）。
4. タイポグラフィ

チャート専用書体は追加しない。既存 --font-sans を hero figure 含め例外なく使う。桁揃えは必要な箇所だけ tabular-nums。

用途 クラス サイズ tabular
Y軸目盛（装飾）text-xs tabular-nums12px✓
値ラベル（バー/線の端）text-[11px] tabular-nums11px✓
X軸カテゴリラベルtext-[10px] tabular-nums10px✓
パネルキャプションtext-xs12px—
Hero figure / stat-tiletext-5xl font-semibold48px—
凡例ラベルtext-xs12px—
5. アクセシビリティ
  • 装飾扱いの軸目盛・ラベル（tick/label）は全て aria-hidden にする
  • 同じ値は必ずチャートの sr-only data table 側にも存在させる
  • コントラスト3:1未満の色（要label）は direct label または table view を併用し、色だけに依存しない
  • 色覚多様性（CVD）を考慮し、隣接系列の色差（ΔE）を確保する
6. AI がチャートを生成する際のルール
  • 1チャート＝1指標なら 意味ロール（--chart-1〜5）を役割で選ぶ。複数系列の比較なら 識別カラー（--chart-series-1〜8）を固定順で使う。両者を1チャート内で混在させない
  • 識別カラーは slot 1 から順に割当て、循環させない。8色を超えたら「その他」集約か facet 分割（9色目を作らない）
  • 量的（連続値）の表現は --foreground のグレースケール階調を使い、青（--primary）は使わない
  • 低コントラスト色（要label）は direct label か table view を併用し、色だけで意味を伝えない
  • 軸・目盛・凡例テキストは --font-sans。桁を揃える箇所だけ tabular-nums
  • チャートには必ず sr-only の data table を併置し、tick/label は aria-hidden にする

バージョン情報と変更履歴

現在のバージョン
v2.0.0
最終更新
2026.09.29
日付 バージョン 変更内容
2026.09.29 v2.0.0 Forge の一部から独立した全社デザインガイドラインとして分離し、design.seldon.co.jp で Web 公開
2026.07.25 v1.6.0 カラートークンを整理し、役割が同じで微妙に違う色を統合（青 #0084FE→#0284FE／緑 #2E7D32→#208970／赤 #DC2626→#c5221f／グレー #6B7280→#555555／地色 #f7f6f4→#F1F4F7）。データ可視化のコントラスト用の色（chart-2 #179779・chart-4 #DB8F18）は例外として維持。あわせて「ロゴ・シンボル」をセルダン／M&Aナビの入れ子に再編し、ロゴ使用ルールを全ブランド共通に分離
2026.07.25 v1.5.0 上位ブランド「Seldon（コーポレートブランド）」セクションを追加。ロゴ・シンボル・背景（キービジュアル）のブランドアセットを PNG/JPG でダウンロード可能に。あわせて M&Aナビのロゴ・シンボルもアセットライブラリ化しダウンロード可能に
2026.07.25 v1.4.0 データ可視化（BI・ダッシュボード）セクションを追加。チャート色を2系統で定義（意味ロール chart-1〜5／識別カラー chart-series-1〜8）、ヒートマップ（--foreground グレースケール階調）、チャートのタイポグラフィ・a11yベースライン・AI生成ルールを整備（Forge /dashboard 由来）
2026.07.25 v1.3.0 HTMLメールのデザインテンプレートを追加（4テンプレート＋実運用メール8カテゴリのマッピング、テンプレートプレビュー、共通コンポーネント仕様）。メール仕様をAI可読トークン（SSoT）へ統合し、ガイドラインのMarkdown自動生成に対応。表紙（カバー）を追加
2026.07.24 v1.2.0 HTMLメールセクション追加（基本仕様、カラーマッピング、メールタイプ別パターン、コンポーネントプレビュー、コピーライティングルール）
2026.06.26 v1.1.1 ナビボット（AIコミュニケーションガイドライン）追加、チェックボックス/ラジオボタン/マルチ選択チップ追加
2026.06.24 v1.0.0 初版リリース — デザイン原則、カラー、タイポグラフィ、スペーシング、UIパーツ、スライドレイアウトパターン、AI可読データブロックを定義
株式会社セルダン デザインガイドライン — コーポレート＋全プロダクト共通