---
version: "1.0"
name: 冒研員機構 デザイン
description: >
  第6勢力「冒研員機構」専用ページのデザインシステム。
  ヴァレアナ大陸（クリーム×コーラル）と意図的に区別し、
  森と水彩の冷ややかな緑、霧色のグラデで「領土を持たない者」の余白を表現する。
updated: 第4回見学会後
target: boukenin.html
logo: logo-boukenin.png
---

# 冒研員機構 デザインドキュメント（v1.0）

> このファイルは boukenin.html のデザインシステムを文書化します。
> 国研員系（ヴァレアナ大陸ページ）とは意図的に別系統。

---

## 1. デザイン思想

冒研員機構は、5カ国に属さない第6勢力。だからこそ、5カ国ページ（クリーム×コーラル）と**同じテイストにならないように**設計する。

- **観察者の視点**：派手ではなく、観測ノートのような端正さ
- **遍在の感覚**：どの国にも属さない、霧と森の中間色
- **スケールの対比**：大きな自然と小さな探検家（ロゴそのまま）
- **静謐な熱量**：派手なアクセントを使わず、グラデーションで奥行きを出す

---

## 2. カラーパレット

```css
/* 基調：苔色のかかった紙と水彩の和紙 */
--paper-deep: #ecefe8;       /* 苔色のかかった紙 */
--paper:      #f3f5ee;       /* 水彩の和紙 */
--paper-soft: #fafbf6;

/* インク：深い森の墨 */
--ink:        #1f2a22;       /* 見出し・メインテキスト */
--ink-soft:   #4a5a4d;       /* 本文・説明テキスト */
--ink-mute:   #8a9587;       /* キャプション・脚注 */

/* 苔色アクセント */
--moss:       #6b8a5e;       /* メインアクセント・ロゴの草色 */
--moss-deep:  #4d6a44;       /* ホバー・濃いアクセント */
--moss-soft:  #c5d4ba;       /* ボーダー・薄いハイライト */
--moss-tint:  #e8efe1;       /* 背景・タグ */

/* カマキリ */
--mantis:        #8fb56d;    /* カマキリの体色 */
--mantis-bright: #b8d398;    /* 明るい緑（未使用予備） */
--mantis-shade:  #5a7d3e;    /* 影色（強調） */

/* 線・霧 */
--rule:       #d2dac9;
--rule-soft:  #e1e7d8;
--fog:        #b8c2b6;       /* 霧の色 */
```

**選定理由：**
- 国研員系の `--cream`（#f7f2e8）に対し、`--paper-deep`（#ecefe8）は**わずかに緑がかかった紙**で第6勢力の独立性を表現
- アクセントはコーラル（#e2604a）ではなく**苔色 #6b8a5e**——ロゴの水彩の草色と整合
- 4段階の moss 色で奥行き、3段階の mantis 色で強調レイヤー

---

## 3. タイポグラフィ

```css
/* 基本フォント（国研員系と共通） */
font-family: "Zen Kaku Gothic New", sans-serif;  /* 本文 */
font-family: "Zen Old Mincho", serif;            /* 見出し・引用 */
font-family: "DM Mono", monospace;               /* メタ・タグ・eyebrow */

/* 冒研員機構 専用追加 */
font-family: "Cormorant Garamond", serif;        /* 学術・観測団のサブタイトル（イタリック使用） */
```

**Cormorant Garamond の役割：**
- ヒーロータイトル下のサブタイトル `Bōken-in Kikō ／ Boundary Observation & Mending Office` で使用
- 古い航海図・観測ノートの英語表記を想起させる
- イタリックで品とアカデミックな冷ややかさを加える

---

## 4. シンボル「点と弧」（遍在）

```html
<!-- 冒研員機構ロゴの簡易表現・topbarで使用 -->
<span class="symbol"></span>

<!-- CSS -->
.symbol {
  width: 22px; height: 22px;
  border: 1.5px solid var(--moss);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-soft);
}
.symbol::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--moss-deep);
  border-radius: 50%;
}
```

**意味：** 中央の点＝立つ場所、周囲の弧＝届く範囲。「所属しない」のではなく「**遍在する**」という冒研員の哲学を表現。topbar・divider・勲章デザインに使用予定。

---

## 5. ロゴ

**ファイル：** `logo-boukenin.png`（命名規則：`logo-<scope>.png`）

**ロゴの内容：**
- 水彩タッチの円形フレーム
- 中央に巨大なカマキリ（観察者・狩人・霊性の象徴）
- 下部に小さな探検家のシルエット（帽子付き）
- 周囲に草の葉

**意味：**
- カマキリ＝静かに観察する者・先回りする観察眼
- 小さな人影＝未踏領域に立ち向かう人間のスケール
- 緑＝自然・新生・霧の向こうの森
- 円＝完結・遍在・境界

**配置ルール：**
- ヒーローセクションで 260px（モバイル200px）の中央配置
- `drop-shadow(0 12px 28px rgba(74,106,68,0.18))` で水彩の浮遊感

---

## 6. 主要コンポーネント

### Hero
- 中央寄せ・eyebrow→ロゴ→タイトル→Cormorant Garamondサブ→tagline の縦構造
- tagline 内に `<em>` で苔色マーカー（`background: linear-gradient(transparent 60%, var(--moss-tint) 60%)`）

### Tier カード（三階層）
- 左ボーダー 3px の苔色
- グリッド：`repeat(auto-fit, minmax(220px, 1fr))`
- 「冒研員」「航員」「補佐」の三層を並列に

### Initiate カード（初航者プロフィール）
- 角の `INITIATE` 装飾文字（DM Mono・薄い苔色）
- 引用部は左ボーダー 2px のミント

### Timeline（建国二段階）
- 左ボーダー 2px の `--moss-soft`
- 各ステップの `::before` で円形ノード（active時は塗りつぶし）

### Quote ブロック
- 中央寄せ・`--moss-tint` 背景・苔色ボーダー
- Zen Old Mincho・font-weight: 700

### Divider
- ` . ⌒ ` 記号（点と弧の簡易表現）を中央に
- 両側に薄いグラデーションライン

---

## 7. ページ構成（boukenin.html）

```
1. Hero（ロゴ＋タイトル＋tagline）
2. Manifesto（理念・哲学引用）
3. Structure（三階層＋称号体系）
4. Initiates（初航者ジェイク・ユナのプロフィール）
5. Vernie（次元の扉・通信方法）
6. Function（5つの機能＋相互尊重）
7. Founding（建国二段階タイムライン）
8. Footer（関連リンク）
```

各セクション間は `divider`（ . ⌒ ）で区切る。

---

## 8. Do's and Don'ts

### DO ✓
- CSS変数（`--moss`, `--paper`, `--ink-soft`）を必ず使う
- 「遍在」を視覚化する余白を確保する
- 引用は Zen Old Mincho で詩的に
- 観測ノート的な静謐さを保つ
- ロゴは中央配置・余白たっぷり

### DON'T ✗
- コーラル（`#e2604a`）を使わない（国研員系専用）
- 派手なグラデーション・ネオン色を使わない
- 国旗絵文字を多用しない（国に属さない組織のため）
- 国研員系のテンプレートをそのまま流用しない

---

## 9. 派生展開（将来）

冒研員機構の派生コンテンツが増えた場合：

- **航員プロフィールページ**：個別ページではなくアコーディオン形式で
- **便り石ログページ**：往還日誌のアーカイブ・タイムスタンプは「見学会N回後」表記
- **境界観測団 / 縫い目庁の組織旗**：シンボル「点と弧」を発展させる
- **ヴェルニェ異界マップ**：別系統（より暗いトーン）で別ページ化を推奨

---

## 10. ファイル一覧

```
boukenin.html              # 冒研員機構の単体ページ
logo-boukenin.png          # 機構ロゴ（水彩のカマキリ＋探検家）
BOUKENIN-DESIGN.md         # このファイル（デザイン仕様書）
```

将来追加されるロゴ・デザインも `logo-<scope>.png` / `<SCOPE>-DESIGN.md` の命名規則で揃える。

例：
- `logo-vcd.png` / `VCD-DESIGN.md`
- `logo-vernie.png` / `VERNIE-DESIGN.md`
- `logo-cosmos.png` / `COSMOS-DESIGN.md`