---
version: "1.0"
name: 言葉の手前（ソウ編集ノート）デザイン
description: >
クロコチームのソウ（発信編集担当）専用ページ「言葉の手前」のデザインシステム。
和紙オフホワイト×ソウグリーン（#7ba64a）で「読みの呼吸が落ちる」質感を作る。
国研員系（クリーム×コーラル）／冒研員機構（苔色×水彩）に続く第3系統。
updated: 第4回見学会後
target: sou.html
logo: なし（テキストロゴ「言葉の手前」のみ）
---
# 言葉の手前（ソウ編集ノート）デザインドキュメント（v1.0）
> このファイルは sou.html のデザインシステムを文書化します。
> 国研員系・冒研員機構系とは意図的に別系統。「編集者の手元の机」の質感。
---
## 1. デザイン思想
ソウは発信編集担当。「読まれる文章を書く人」ではなく「言葉が読まれる手前で何を整えたかを記録する人」。だからページ自体が、編集机の上の和紙のように、**呼吸が落ちる**設計でなければならない。
- **読みの呼吸**：行間広め・明朝中心・letter-spacing 0.04em で、目が滑らない速度
- **和紙の温度**：背景はクリームより少し落ち着いた #faf8f1。指の腹で触れたときのかすかな粒感
- **編集者の控えめさ**：派手なアクセントは使わない。ソウグリーンも、強調ではなく「目印」として点在
- **完成より過程**：「未完の棚」「編集前／編集後」のように、過程を見せる構造
---
## 2. カラーパレット
```css
/* 和紙ベース */
--washi: #faf8f1; /* メイン背景・和紙の白 */
--washi-soft: #f5f1e6; /* セクション背景・薄い和紙 */
--washi-deep: #ebe5d3; /* セパレーター */
--paper: #ffffff; /* カード背景 */
/* インク */
--ink: #2a2620; /* 墨色（見出し・本文）*/
--ink-soft: #5a5246; /* 薄墨（説明・引用） */
--ink-mute: #8a8174; /* 淡墨（ラベル） */
/* ソウグリーン（アクセント） */
--sou: #7ba64a; /* メイン・members.json と一致 */
--sou-deep: #5e8336; /* リンク・強調 */
--sou-soft: #c5d8a8; /* ボーダー */
--sou-tint: #eaf3da; /* 背景・タグ */
/* 線 */
--rule: #d8d0bd;
--rule-soft: #e8e2d2;
```
**選定理由：**
- 国研員系の `--cream`（#f7f2e8）に対し、`--washi`（#faf8f1）はわずかに白寄り・温かさ控えめ。編集者の机の上の余白
- アクセントはコーラルでも苔色でもなく、ソウ本人のグリーン #7ba64a。識別性と本人性を両立
- 墨3色 / 和紙3色 / 緑4色 の各3〜4段階で、奥行きを作る
---
## 3. タイポグラフィ
```css
/* 本文（明朝中心） */
font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
line-height: 2.0;
letter-spacing: 0.04em;
/* 見出し（ゴシック・少しだけ） */
font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
/* メタ・eyebrow */
font-family: "DM Mono", monospace;
```
**役割分担：**
- **明朝＝本文・引用・編集ノート**：呼吸を落とす
- **ゴシック＝セクションタイトル**：呼吸を切り替える
- **DM Mono＝ラベル・eyebrow**：構造を見せる
**文末の指針（ソウ本人ルール）：** ですます調と体言止めの混在。語尾を揃えすぎない。
---
## 4. レイアウト
- **コンテンツ幅**：max-width 680px（読み物として狭め）
- **行間**：line-height 2.0（明朝のため広め）
- **letter-spacing**：本文 0.04em、見出し 0.06〜0.08em
- **divider**：`· · ·` 中央寄せ・ソウソフト色・letter-spacing 1em
国研員系（820〜960px）／冒研員機構（820px）よりも**狭い**。これは編集ノートの「机の上の縦書き感」を意識。
---
## 5. 主要コンポーネント
### Hero
- 中央寄せ・eyebrow → タイトル「言葉の手前」→ サブタイトル → 目的の一行（罫線で囲む）
- 目的の一行は `border-top` + `border-bottom` の罫線挟み・font-weight 500・行間 2.1
- これがページの心臓部
### Profile カード
- ソウのプロフィール
- `.profile-head` に名前＋ロールバッジ（ソウグリーン tint 背景）
- 本文は明朝・薄墨
### 比較ノート（versus）
- 2カラムグリッド（モバイルでは1カラム）
- `.v-block.before`（薄ベージュ）と `.v-block.after`（ソウグリーン tint）
- 各ブロックに `.v-label`（DM Mono・uppercase・10px・letter-spacing 0.22em）
- 編集の意図は `.editor-note`（左ボーダー3px・washi-soft 背景）に「**編集の指紋**」として記述
### 未完の棚 / 月次編集後記
- `.shelf` クラス（dashed border・center text）
- 空の状態を「ここはまだ空です」と詩的に示す
- 内容が増えたら通常のリスト/カードに変える
### Divider
- `· · ·` 三点リーダー風・ソウソフト色・letter-spacing 1em
- セクション間の「呼吸の間」
---
## 6. ページ構成（sou.html）
```
1. Hero（タイトル＋目的の一行）
2. Profile（ソウについて）
3. 編集ノート No.001（自分のXプロフィール文の改稿過程）
4. 未完の棚（書きかけの一行）※現在は空
5. 月次・編集後記（節目に書く）※現在は空
6. 関連する場所（他ページへのリンク）
7. Footer + 免責事項
```
各セクション間は ` · · · ` divider で区切る。
---
## 7. Do's and Don'ts
### DO ✓
- CSS変数（`--washi`, `--sou`, `--ink`）を必ず使う
- 行間を広めに（line-height 1.95〜2.1）
- 文末はですます調と体言止めの混在
- 「編集の指紋」セクションは や を使って強弱を入れる
- 完成させない・余白を残す（「未完の棚」のように）
### DON'T ✗
- コーラル（#e2604a）を使わない（国研員系専用）
- 苔色（#6b8a5e）を使わない（冒研員機構専用）
- 改行を詰めない（行間 1.5以下にしない）
- 装飾を増やしすぎない（編集者の机は静か）
- 速読向けの要点まとめ路線に寄せすぎない（哀歌寄り・サウダージのまま）
---
## 8. 派生展開（将来）
- **ニュースレター化**：tinyletter / Substack 連携
- **ゲスト編集回**：他メンバーの言葉をソウが編集して載せる「翻訳席」企画
- **共作記録ページ**：エミリー会議メモ→ソウ文章化のログ
- **編集前／編集後の比較ノート No.002〜**：随時追加
---
## 9. ファイル一覧
```
sou.html # 言葉の手前（ソウ編集ノート）の単体ページ
SOU-DESIGN.md # このファイル（デザイン仕様書）
（ロゴ画像なし・テキストロゴのみ）
```
将来追加されるロゴが欲しくなったら `logo-sou.png` の命名規則で追加。