2026-05-03 業務マニュアル独立サイト化 + 章立てデザイン

完成形：scale-lead-manual から切り出した独立サイト2本 + サイドバーTOC + サブセクションカード式

概要

ユーザー要望:
- 「使い方ガイドの中にテレアポ/LinkedInのパートナー業務がまとまっている → 独立させて」
- 「1ページに章立てで、もっとデザイン性見やすく」
- 「内容そのまま・サイト形式にする分、デザイン性は大胆に変えてOK」
- 「左にセクション目次を作って飛べるように」

→ 段階的に v1 → v4 までデザインを進化させた。

完成形（v4）

構成

デザイン要素

進化の経緯（v1 → v4）

v1: scale-lead-manual に統合（廃止）

• 旧: scale-lead-manual.pages.dev/teleapo-duties /linkedin-duties
• 使い方ガイドと同じサイト内のページとして実装
• 中身は lib/pages_duties.js のシステム側HTMLを移植

v2: 独立サイト化 + 章立て構造（基本）

• 新Cloudflareプロジェクト2つ作成
• ヒーロー + 中央TOC + 章カード + 進捗バー + スクロールトップ
• ただし inline-style HTML を貼っただけで「システム貼付け感」あり
• ユーザーFB: 「全然デザイン性変わってない・もっとガラッと」

v3: サブセクション独立カード化 + 大胆デザイン

• <div class="content-block"> 巨大ブロックを解体
• 各「▼〜」を <section class="sub-section"> で独立カード化（背景・ボーダー・シャドウ）
• 章間 120px / sub-section 間 40px で大きな余白
• ヒーロー浮遊アニメ・タイポグラフィ階層強化（h1 54px / h2 40px / sub-title 22px）
• callout / tmpl-block を派手に（絵文字大型化・グラデーション・影）
• ユーザーFB: 「だいぶ良くなった！左にセクション作って飛べるように」

v4: サイドバーTOC + スクロールスパイ（完成形）

• 280px の左固定サイドバー（sticky）
• 章 + サブセクション一覧
• アクティブ章のみ自動展開
• スクロール位置をリアルタイム追従（章とサブセクション両方ハイライト）
• レスポンシブ（980px以下では非表示）

実装詳細

システム側（SCALE CRM 本体）

ファイル: /Users/oogushiyuuki/株式会社SCALE/scale-lead/lib/pages_duties.js

const _TELEAPO_DUTIES_URL='https://scale-teleapo-duties.pages.dev';
const _LINKEDIN_DUTIES_URL='https://scale-linkedin-duties.pages.dev';

function renderTeleapoDuties(){
  _renderDutiesExternal({
    url:_TELEAPO_DUTIES_URL,
    title:'テレアポパートナー業務',
    icon:'📞',
    accent:'var(--blue)',
    sections:[
      {id:'ch01',label:'CHAPTER 01｜...',icon:'📝',desc:'...'},
      ...
    ]
  });
}

→ システム側はシンプルなカード一覧。クリックで該当章に直接ジャンプ（URL+'#ch01'）。

外部サイト構造

scale-teleapo-duties/
├── index.html        (27KB / ヒーロー + サイドバー + 6章)
├── style.css         (366行 / 青テーマ)
└── common.js         (49行 / 進捗バー・スクロールスパイ・日付)

scale-linkedin-duties/
├── index.html        (25KB / 紫テーマ・7章)
├── style.css         (366行)
└── common.js         (49行)

コンテンツ生成フロー

1. /tmp/extract_duties.py
   - tar.gz から旧 pages_duties.js を読み込み
   - 各章の body 文字列 + const 値を抽出
   - inline style → サイト用クラスに変換
   → /tmp/teleapo_v2.json / linkedin_v2.json

2. /tmp/rebuild_chapters.py (v3)
   - content-block wrapper を解体
   - 各 block-h3 で sub-section に分割
   - grid-2col 内の block-h3 はマスクして保護
   → /tmp/teleapo_v3.json / linkedin_v3.json

3. add_ids (v4)
   - 各 sub-section に id を付与（ch01-s01 形式）
   - サイドバーTOC用のメタデータ生成
   → /tmp/teleapo_v4.json / linkedin_v4.json

4. gen_html
   - メタデータ + 章本文 + サイドバー + ヒーロー → index.html

CSS 設計

カラーパレット

• テレアポ: accent #3b82f6 → accent2 #6366f1 → accent3 #8b5cf6（青→紫）
• LinkedIn: accent #a855f7 → accent2 #8b5cf6 → accent3 #c084fc（紫グラデ）
• 共通: bg #0a0a0f / surface #16161e / text #f0f0f5

主要クラス

.hero / .hero-icon / .hero-tag / .hero-cta
.toc-card / .toc-list / .toc-num
.page-grid (sidebar 280px + main 1fr)
.sidebar-toc / .sidebar-chapter / .sub-links
.chapter / .chapter-header / .chapter-icon / .chapter-num
.sub-section / .sub-title (左バー装飾) / .sub-body
.content-p (strong に下線) / .content-list
.tmpl-block (TEMPLATE ラベル付き)
.callout-tip / .callout-warn (大絵文字 + グラデ)
.grid-2col / .grid-3col
.chapter-nav / .scroll-top

退化禁止ルール

以下に戻すのは退化。

• ❌ scale-lead-manual に teleapo-duties / linkedin-duties を統合し直さない
• ❌ システム側 lib/pages_duties.js に大量のHTMLを書き戻さない（外部遷移型の126行を維持）
• ❌ サブセクションを単一の content-block に詰め込まない（必ず独立カード）
• ❌ サイドバーTOC を撤去しない
• ❌ inline style 直書き禁止（.content-p .callout-tip など class ベース）

バックアップ

~/scale-lead-manual-backups/scale-lead-manual_2026-05-03-1619_post-restore.tar.gz
~/Library/CloudStorage/.../scale-lead-backups/scale-lead-2026-05-03-{1620,1633}-{pre,post}-deploy.tar.gz

新サイトのローカル: /Users/oogushiyuuki/株式会社SCALE/scale-{teleapo,linkedin}-duties/（git未管理・初回作成）

関連

• システム本体: https://crm.scale-group.co.jp/
• 使い方ガイド: https://scale-lead-manual.pages.dev/（duties は除去済・301リダイレクト）
• 配置マップ: 31_システム開発部/_SCALE_全システム配置マップ
• README: 31_システム開発部/SCALE_CRM/_README
• 改名関連: 2026-05-03_SCALE_Lead改名_SCALE_CRM
• 使い方ガイド復元: 2026-05-03_使い方ガイド_外部サイト遷移型復元
• 業務マニュアルv1: 2026-05-03_パートナー業務_外部サイト遷移型化

次セッションでの引き継ぎポイント

このセッションで完成した状態：
- ✅ 独立サイト2本デプロイ済み
- ✅ サイドバーTOC + スクロールスパイ動作中
- ✅ システム側からの遷移リンク動作中
- ✅ scale-lead-manual から duties 除去 + 301リダイレクト

もし次セッションで触る場合：
- コンテンツ更新は外部サイト直接編集（システム側触らない）
- デザイン微調整は style.css のみ（?v=4 のキャッシュバスター更新を忘れずに）
- 章追加は lib/pages_duties.js の sections 配列 + 外部サイト index.html 両方
- どちらも単独でデプロイ可能（互いに独立）