---
version: "1.0"
name: 活動報告書デザインガイド
description: >
  REPORT-STYLE.md（書き方の型）で書かれた8層構造の活動報告を、
  Webページ（report.html等）に表示するときのデザイン規則。
  ChatGPT 3回分のフィードバックを通じて到達した「読まれる構造」を保存。
updated: 2026-04-27
---

# REPORT-DESIGN.md

> このファイルはAIエージェントへの指示書として機能します。
> 報告書をWeb表示するときは、必ずこのガイドを参照してください。
> セット参照：ARTICLE-STYLE.md（記事の書き方）／REPORT-STYLE.md（報告書の書き方）

---

## 0. このガイドの目的

REPORT-STYLE.md準拠の活動報告書（8層構造）を、**読まれる・流し読みでも拾われる・記憶に残る** Webデザインに落とすための規則集。

**3つの原則：**
1. **「何の記事か」を冒頭1行で出す**（読み始める理由を作る）
2. **「誰向けか」をカードごとに添える**（自分ごと化を促す）
3. **「結論」をカード末尾に置く**（記憶に残す設計）

---

## 1. 全体レイアウト（PC最適化）

| 項目 | 値 | 理由 |
|---|---|---|
| `max-width` | **720px** | PC表示で横に間延びしない／可読幅 |
| `margin` | `0 auto` | 中央寄せ |
| `padding-top` | 52px | 前セクションとの分離 |
| カード間 `margin` | **48px** | 流し読みでセクションが切り替わるリズム |
| カード `padding` | `36px 36px` | 内側に余白を持たせて読みやすく |

**禁止事項：**
- 横幅をフル幅にしない（`width: 100%` で広がる構造を避ける）
- カードを2列以上のグリッドに並べない（情報密度が均一化して「のっぺり」する）

---

## 2. 入口ボックス（最上部・記事の宣言）

ページの最初に**「これは〇〇の実験ログです」**と**「誰向け」**を黄色グラデのボックスで宣言する。

### HTML
```html
<div class="detail-reports-intro">
  <strong>これは「〇〇」の実験ログです。</strong>
  〇〇したい人、〇〇に興味ある人向け。
  <span class="target">補足説明・参照リンク</span>
</div>
```

### CSS
```css
.detail-reports-intro {
  background: linear-gradient(135deg, #fef9ec, #fff);
  border: 1px solid #f0d86a;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 18px 0 28px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink);
}
.detail-reports-intro strong {
  display: block;
  font-family: "Zen Old Mincho", serif;
  font-size: 15.5px;
  color: var(--coral);
  margin-bottom: 6px;
}
.detail-reports-intro .target {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  display: block;
}
```

---

## 3. カードヘッダー

各エージェント（or 各報告対象）のカード冒頭に、役職・名前・サブタイトル・**国別アクセント色**を置く。

### HTML
```html
<div class="detail-report-card" style="--card-accent:#5b8cb5;">
  <div class="detail-report-head">
    <div class="detail-report-role">役職名</div>
    <div class="detail-report-name">名前</div>
    <div class="detail-report-subtitle">英語サブタイトル</div>
  </div>
  <div class="card-body-extended">
    ...
  </div>
</div>
```

### CSS
```css
.detail-report-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 36px 36px;
  margin: 48px 0;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.detail-report-head {
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.detail-report-role {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.detail-report-name {
  font-family: "Zen Old Mincho", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 2px;
}
.detail-report-subtitle {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
}
```

### アクセント色の選び方
- 国・属性ごとに違う色を `--card-accent` で指定
- 例：湖=#5b8cb5（青）／霧=#8aa6a0（緑灰）／桜=#d99daa（桜色）／湯気=#c7a373（土色）／風鈴=#a3b8d4（淡青）

---

## 4. サブキャッチ＋誰向け（カード冒頭）

各カードの最上部（card-body-extended内・8層の前）に、その人の役割を1行＋誰向けかを添える。

### HTML
```html
<div class="report-card-tagline">
  「〇〇」の実験ログ。
  <span class="target">→ 〇〇したい人、〇〇に興味ある人向け。</span>
</div>
```

### CSS
```css
.report-card-tagline {
  background: #faf6ed;
  border-left: 3px solid var(--coral-soft);
  padding: 8px 14px;
  margin: 14px 0 4px;
  font-size: 12.8px;
  color: var(--ink);
  line-height: 1.7;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.report-card-tagline .target {
  color: var(--ink-soft);
  font-size: 12px;
  display: block;
  margin-top: 3px;
}
```

---

## 5. 8層の見出しラベル

各層を `<h4 class="report-layer-label">` で揃える。コーラル色＋左ボーダーで階層を一定リズムで区切る。

### HTML
```html
<h4 class="report-layer-label">0. 環境・モデル</h4>
<p>...</p>

<h4 class="report-layer-label">1. 原文（世界観）</h4>
<p>...</p>

<!-- 以下、2〜7まで同パターン -->
```

### CSS
```css
.report-layer-label {
  font-family: "Zen Old Mincho", serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--coral);
  margin: 22px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--coral-soft);
}
.card-body-extended p {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 8px 0;
}
.card-body-extended p + p {
  margin-top: 12px;
}
```

---

## 6. 再現プロンプト（コピペ用ブロック）

**最重要セクション。**コードブロックの前に「コピペ案内の一言」を必ず添える。

### HTML
```html
<h4 class="report-layer-label">3. 再現プロンプト（コピペ用）</h4>
<p class="report-prompt-intro">このブロックは、Claude Codeで同じ役割を試すときのヒント。そのまま使ってもいいし、自分の場に合わせて調整してもOK。</p>
<pre class="report-prompt">あなたは〇〇。〇〇の担当。
（中略）

<strong class="report-emph">【禁止】</strong>
- 〇〇しない

<strong class="report-emph">【入力→出力のサンプル】</strong>
入力：「〇〇」
出力：「〇〇」

<strong class="report-emph">【動かない条件】</strong>
- 〇〇のときは沈黙する</pre>
```

### CSS
```css
.report-prompt-intro {
  font-size: 12.5px;
  color: var(--ink-mute);
  background: #fef9ec;
  border-left: 3px solid #e6b800;
  padding: 6px 12px;
  margin: 4px 0 6px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.report-prompt-intro::before {
  content: "▶ ";
  color: #c89400;
  font-weight: 700;
}
.report-prompt {
  background: #f5f1ea;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 14px 18px;
  font-family: "Menlo", "Consolas", monospace;
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  color: var(--ink);
  margin: 8px 0 4px;
  overflow-x: auto;
}
.card-body-extended strong.report-emph {
  background: linear-gradient(transparent 65%, #ffe9d6 65%);
  font-weight: 700;
  padding: 0 2px;
}
```

---

## 7. 強調マーカー

流し読みで拾われるキーワードに**オレンジ下線マーカー**を入れる。`<strong class="report-emph">` で。

### 強調すべき項目
- `【禁止】`
- `【動かない条件】`
- `【入力→出力のサンプル】`
- `【パターン例（〜）】`
- `指標：`（観察指標）

**やりすぎない原則：**
- 1段落に2箇所以上は強調しない
- 本文中のキーワードは強調しない（過装飾防止）
- マーカー以外の強調手段（色変え・サイズ拡大）と混ぜない

---

## 8. カイのオーダー枠（6層用）

外圧として届く指示を、引用枠で目立たせる。

### HTML
```html
<h4 class="report-layer-label">6. カイのオーダー（次回〇〇へ）</h4>
<p class="report-order">〇〇を試してほしい。〇〇を検証してほしい。<strong class="report-emph">指標：</strong>〇〇の回数。</p>
```

### CSS
```css
.report-order {
  background: var(--cream-soft);
  border-left: 3px solid var(--coral);
  padding: 10px 16px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink);
  margin: 4px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
```

---

## 9. 結論スタンプ（カード末尾）

各カードの最後に**1行の結論句**を「—— 結論 ——」スタンプ付きで置く。記憶に残す設計の核。

### HTML
```html
<div class="report-conclusion">「映すだけ」は、会話を変える。</div>
```

### CSS
```css
.report-conclusion {
  margin-top: 28px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #fff 0%, #fef9ec 100%);
  border-top: 2px solid var(--coral-soft);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-family: "Zen Old Mincho", serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--coral);
  text-align: center;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.report-conclusion::before {
  content: "—— 結論 ——";
  display: block;
  font-family: var(--ui-stack, sans-serif);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.15em;
  margin-bottom: 6px;
}
```

### 結論句の書き方
- **15字以内**を目標
- **動詞を主役にする**（「〇〇は〇〇だ」より「〇〇は〇〇する」）
- **役割の核を一言で**（マラマ＝「映すだけは会話を変える」、ミカ＝「動かないことで相手が動く」）

---

## 10. やらなかったこと（過装飾防止ログ）

ChatGPTから「強調をさらに増やせ」というフィードバックがあったが、**あえて見送った**項目を残す。

| 提案 | 判断 | 理由 |
|---|---|---|
| 強調マーカーを増やす | 見送り | 既に5箇所マーカー済。これ以上は過装飾 |
| 太字に色をつける | 見送り | 黒太字＋オレンジマーカーで十分 |
| アイコン（●▶■）を多用 | 見送り | 「▶」をプロンプト案内のみに限定 |
| カードを2列グリッドに | 却下 | 情報密度が均一化して「のっぺり」する（ChatGPT指摘） |
| 折りたたみ（accordion） | 保留 | 実装複雑・JSが必要・JSなしで読める設計を優先 |

**目安：装飾は5種類くらい。**（マーカー・引用枠・コードブロック・結論スタンプ・サブキャッチ）

---

## 11.5 ナビゲーション設計：一覧→詳細

サマリー一覧（薄いカード）と詳細（フルサイズ）が同ページに共存する場合、**一覧の「名前」だけをアンカーリンクに**する（カード全体ではない）。クリック範囲が広すぎると、誤タップや読書動線の混乱が起きやすい。

### HTML
```html
<!-- 一覧側（Section 02） -->
<div class="report-card card-laak">
  <div class="card-role">湖の国・観察担当</div>
  <div class="card-name"><a class="card-name-link" href="#detail-marama">マラマ</a></div>
  <!-- ...略 -->
</div>

<!-- 詳細側（Section 02 — Detail） -->
<div id="detail-marama" class="detail-report-card" style="--card-accent:#5b8cb5;">
  <!-- ...略 -->
</div>
```

### CSS
```css
.card-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dashed var(--coral-soft);
  transition: border-color .15s, color .15s;
  cursor: pointer;
  display: inline-block;
}
.card-name-link:hover {
  border-bottom-color: var(--coral);
  color: var(--coral);
}
.card-name-link::after {
  content: " →";
  color: var(--coral);
  font-size: 0.85em;
  margin-left: 2px;
}
```

### 設計原則
- **クリック可能性を視覚化**：色変化＋「→」マーカーでカーソルを置く前から「ここはリンク」が分かる
- **詳細がある人だけリンク化**：未公開のメンバーは普通の表示のまま（リンクが死んだ印象を避ける）
- **入口ボックスに案内文を置く**：「下の名前をクリックすると、詳細にジャンプできます」と1行添える
- **id命名は `detail-{name}`**：一貫性のために英小文字＋ハイフンで統一

### やらなかったこと
- カード全体を `<a>` で囲む案：誤タップしやすい・読書動線で意図しないジャンプが発生する
- JavaScriptでスムーズスクロール：純粋なHTML/CSSで動かしたい・JS依存を避ける（CSSの `scroll-behavior: smooth;` を `html` に当てればJSなしで実現可）

---

## 11. 応用：他ページへの転用ルール

このデザイン規則は、以下のページにも応用できる：

- `kenkai.html`（風よりあい記録ページ）：8層を6層に圧縮（カイのオーダー／受け取りログを省略）
- `whatsnew.html`（更新ニュース・将来作る場合）：入口ボックス＋結論スタンプのみ採用
- `members.html`（プロフィールページ）：カードヘッダー＋サブキャッチのみ採用

**転用の鉄則：** 全部そのまま使わない。**どれを採用してどれを外したかを必ず書類で残す。**

---

## 12. ChatGPTフィードバック3回の経緯（参考）

このデザイン規則は、ChatGPTから3回のレビューを受けて成立した。経緯を残しておく。

### 1回目：基本構造の評価
- 👍 構造（原文→翻訳→再現プロンプト）が研究レポート的で良い
- ⚠️ PC幅が広すぎ → max-width追加
- ⚠️ 強調が弱い → マーカー実装
- ⚠️ 再現プロンプトが重い → 「コピペ案内」イントロ追加

### 2回目：入口設計の指摘
- 👍 強調・マーカーの実装で読みやすさ向上
- ⚠️ 「最初に読む理由」が弱い → 入口ボックス追加
- ⚠️ 「誰向け」が見えない → サブキャッチ追加
- ⚠️ PC最適化（再度）→ max-width: 720pxに

### 3回目：記憶に残す設計
- 👍 入口設計で「読み始める理由」が明確に
- ⚠️ 結論が弱い → 結論スタンプ追加
- ⚠️ 強調をさらに → **見送り**（過装飾防止）
- ⚠️ PC余白さらに → margin: 48pxに

**学び：** ChatGPTの指摘は2/3を採用、1/3は見送るくらいが「過装飾にならない」境界線。

---

## 13. 運用フロー（書く人と作る人で分ける）

```
1. 各エージェントが REPORT-STYLE.md で報告書を書く（中身）
2. クロコ（or ハンス）が REPORT-DESIGN.md で Webに反映する（見た目）
3. 公開後、外部レビュー（ChatGPT等）を受ける
4. 改善点を REPORT-DESIGN.md に追記する（規則を育てる）
```

**鉄則：** デザインを変えるときは必ずこのmdを更新する。コードだけ変えてmdを置き去りにしない。

---

## 14. 出典・参考

- **REPORT-STYLE.md**：報告書の書き方（このmdの母）
- **ARTICLE-STYLE.md**：Claude Code活用記事の書き方（祖母）
- **ChatGPTフィードバック 2026-04-27**：3回のレビューが本mdの素材
- **Anthropic「Building effective agents」**：再現性の担保の重要性
- **「読まれる記事」のセオリー**：冒頭1行で「何の記事か」を出す原則

---

> 心意気：装飾は読み手のためにある。
> 過装飾より、抜けを残しておくほうが、読者の余白になる。

## reports.html 並び順ルール（2026-05-02 ハンス確定）

記事の順序は「その記事の元になったdiscの最終番号（降順・新しいほど上）」で決める。
ファイル名のサフィックス（a/b/c）はシリーズ内の版番号であり、記事間の順序根拠には使わない。