co-lect · Tsubasasa1857 · May 17, 2026
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -66,10 +66,48 @@
 
 詳細は [`CLAUDE.md`](./CLAUDE.md) > プロンプトインジェクション対策。
 
+## 新しい教材を投稿するには
+
+### 1. フォルダ構造を確認する
+
+```
+content/
+├── claude-code/     Claude Code の機能・使い方
+├── claude-api/      Claude API の活用
+├── ai-workflows/    ツール横断・実務への応用
+└── other-tools/     Cursor, Copilot など
+```
+
+### 2. テンプレートをコピーする
+
+```bash
+# スライド教材の場合
+cp -r _templates/slides content/<カテゴリ>/<フォルダ名>
+
+# 記事の場合
+cp -r _templates/article content/<カテゴリ>/<フォルダ名>
+```
+
+フォルダ名は `kebab-case`（例：`hooks-basics`、`mcp-setup`）。
+
+### 3. README.md のメタデータを埋める
+
+```yaml
+---
+title: 教材タイトル
+author: "@your-github-handle"
+tags: [claude-code, hooks]
+level: beginner        # beginner / intermediate / advanced
+type: slides           # slides / article
+---
+```
+
+### 4. PR を出す
+
 ## PR ワークフロー
 
 1. このリポジトリを fork
-2. ブランチを作成（`fix/typo-slide-05` のように内容がわかる名前）
+2. ブランチを作成（`feat/claude-code-hooks-basics` のように内容がわかる名前）
 3. 変更を commit
 4. PR を作成、本文に変更の概要と理由を書く
 5. CI が green になることを確認

diff --git a/_templates/article/README.md b/_templates/article/README.md
@@ -0,0 +1,17 @@
+---
+title: 記事タイトル
+author: "@your-github-handle"
+tags: [claude-code, タグ2]
+level: beginner
+type: article
+---
+
+# 記事タイトル
+
+1〜2 文で概要を書く。
+
+## Authors
+
+| 役割 | 名前 | 貢献 |
+|------|------|------|
+| Initial author | [@your-github-handle](https://github.com/your-github-handle) | 初版作成 |
diff --git a/_templates/article/index.html b/_templates/article/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>タイトル</title>
+<meta name="description" content="この記事の概要を 1〜2 文で書く。">
+<meta name="author" content="@your-github-handle">
+<meta property="og:type" content="article">
+<meta property="og:title" content="タイトル">
+<meta property="og:description" content="この記事の概要を 1〜2 文で書く。">
+<meta property="og:url" content="https://co-lect.github.io/lectures/content/カテゴリ/フォルダ名/">
+
+<link rel="stylesheet" href="../../../shared/theme.css">
+</head>
+<body>
+<article>
+  <h1>タイトル</h1>
+  <p class="meta">by <a href="https://github.com/your-github-handle">@your-github-handle</a> · 2026</p>
+
+  <h2>はじめに</h2>
+  <p>内容を書く。</p>
+
+  <h2>Credits</h2>
+  <ul>
+    <li><a href="https://github.com/your-github-handle">@your-github-handle</a> — 初版作成</li>
+  </ul>
+</article>
+</body>
+</html>
diff --git a/_templates/slides/README.md b/_templates/slides/README.md
@@ -0,0 +1,42 @@
+---
+title: 教材タイトル
+author: "@your-github-handle"
+tags: [claude-code, タグ2, タグ3]
+level: beginner
+type: slides
+---
+
+# 教材タイトル
+
+1〜2 文で概要を書く。何を学べるか・誰向けか。
+
+## このディレクトリの中身
+
+```
+フォルダ名/
+├── index.html     ← 本体（ブラウザで開く / AI に読ませる）
+├── README.md      ← このファイル
+└── _assets/       ← 画像・図（必要な場合のみ）
+```
+
+`index.html` は `shared/` の以下に依存（パスは `../../../shared/`）：
+- `deck-stage.js` — スライドナビゲーションエンジン
+- `theme.css` — デザインシステム
+- `progress-strip.js` — 下部プログレスバー
+
+## 想定読者
+
+この教材が役に立つ人・前提知識を書く。
+
+## 内容
+
+| # | スライドタイトル | 内容 |
+|---|----------------|------|
+| 01 | Cover | — |
+| 02 | 読み方 | — |
+
+## Authors
+
+| 役割 | 名前 | 貢献 |
+|------|------|------|
+| Initial author | [@your-github-handle](https://github.com/your-github-handle) | 初版作成 |
diff --git a/_templates/slides/index.html b/_templates/slides/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>タイトル — サブタイトル</title>
+<meta name="description" content="この教材の概要を 1〜2 文で書く。">
+<meta name="author" content="@your-github-handle">
+<meta property="og:type" content="article">
+<meta property="og:title" content="タイトル — サブタイトル">
+<meta property="og:description" content="この教材の概要を 1〜2 文で書く。">
+<meta property="og:url" content="https://co-lect.github.io/lectures/content/カテゴリ/フォルダ名/">
+
+<link rel="stylesheet" href="../../../shared/theme.css">
+<script src="../../../shared/deck-stage.js"></script>
+<script src="../../../shared/progress-strip.js" defer></script>
+</head>
+<body>
+
+<deck-stage width="1920" height="1080">
+
+  <!-- ============================================================
+       Slide 1 — Cover
+       ============================================================ -->
+  <section data-label="Cover — タイトル">
+    <div class="cover">
+      <div class="cover-eyebrow">カテゴリ名 · トピック</div>
+      <h1 class="cover-title">
+        タイトル
+      </h1>
+      <p class="cover-subtitle">
+        サブタイトル・キャッチコピー
+      </p>
+    </div>
+    <div class="brand">
+      <span>@your-github-handle</span>
+      <span>2026</span>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide 2 — このドキュメントの読み方
+       ============================================================ -->
+  <section data-label="読み方 — How to read">
+    <div class="meta-line">
+      <span><span class="accent">トピック名</span> · How to read</span>
+      <span>02 / XX</span>
+    </div>
+    <div class="content">
+      <div class="content-eyebrow">Foreword</div>
+      <h2 class="content-title">詰まったら、AI に聞きながら進めてください</h2>
+      <p class="content-subtitle">
+        スライドは<strong>概要のみ</strong>。詳細は隣の AI に聞く前提で作っています
+      </p>
+    </div>
+    <div class="brand">
+      <span>@your-github-handle</span>
+      <span>02 / XX</span>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide 3 以降 — 本文スライド
+       ============================================================ -->
+  <section data-label="章タイトル — スライドタイトル">
+    <div class="meta-line">
+      <span><span class="accent">Chapter 1</span> · 章のテーマ</span>
+      <span>03 / XX</span>
+    </div>
+    <div class="content">
+      <div class="content-eyebrow">ラベル</div>
+      <h2 class="content-title">スライドの主張を 1 文で</h2>
+      <p class="content-subtitle">補足説明</p>
+      <hr class="rule">
+      <!-- コンテンツをここに -->
+    </div>
+    <div class="brand">
+      <span>@your-github-handle</span>
+      <span>03 / XX</span>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       最終スライド — Credits
+       ============================================================ -->
+  <section data-label="Credits — 貢献者">
+    <div class="meta-line">
+      <span><span class="accent">Credits</span></span>
+      <span>XX / XX</span>
+    </div>
+    <div class="content">
+      <h2 class="content-title">この教材に関わった人</h2>
+      <ul class="credits-list">
+        <li><a href="https://github.com/your-github-handle">@your-github-handle</a></li>
+        <!-- PR を出したら自分の名前を追加してください -->
+      </ul>
+    </div>
+    <div class="brand">
+      <span>@your-github-handle</span>
+      <span>XX / XX</span>
+    </div>
+  </section>
+
+</deck-stage>
+</body>
+</html>
diff --git a/content/ai-workflows/README.md b/content/ai-workflows/README.md
@@ -0,0 +1,6 @@
+# ai-workflows
+
+ツールを横断した実務・業務への応用事例カテゴリ。
+
+特定ツールの機能解説ではなく「実際にこう使う」という文脈のコンテンツを集める。
+例：コードレビューフロー、ドキュメント自動生成、業務自動化の事例など。
diff --git a/content/claude-api/README.md b/content/claude-api/README.md
@@ -0,0 +1,5 @@
+# claude-api
+
+Claude API の活用方法を解説する教材カテゴリ。
+
+SDK の使い方・Tool Use・Prompt Caching など、API レベルでの実装例を扱う。
diff --git a/content/claude-code/README.md b/content/claude-code/README.md
@@ -0,0 +1,21 @@
+# claude-code
+
+Claude Code の機能・使い方を解説する教材カテゴリ。
+
+各フォルダが 1 投稿（HTML スライドまたは記事）に対応する。
+
+## 投稿例
+
+| フォルダ名 | 内容 |
+|-----------|------|
+| `intro/` | Claude Code とは何か（入門） |
+| `setup/` | 環境構築・インストール手順 |
+| `claude-md/` | CLAUDE.md の書き方と効果 |
+| `hooks/` | Hooks の仕組みと実用例 |
+| `mcp/` | MCP サーバーの導入・活用 |
+| `memory/` | メモリ・コンテキスト管理 |
+| `slash-commands/` | カスタムスラッシュコマンドの作り方 |
+
+## 新しい投稿を追加するには
+
+`_templates/slides/` または `_templates/article/` をコピーして、このフォルダ直下に配置してください。
diff --git a/03-claude-md/index.html → content/claude-code/claude-md/index.html b/03-claude-md/index.html → content/claude-code/claude-md/index.html
@@ -10,9 +10,9 @@
 <meta property="og:description" content="毎回の説明をゼロにする CLAUDE.md の使い方を 12 枚で。">
 <meta property="og:url" content="https://watanabe-kohei-jp.github.io/lectures/03-claude-md/">
 
-<link rel="stylesheet" href="../shared/theme.css">
-<script src="../shared/deck-stage.js"></script>
-<script src="../shared/progress-strip.js" defer></script>
+<link rel="stylesheet" href="../../../shared/theme.css">
+<script src="../../../shared/deck-stage.js"></script>
+<script src="../../../shared/progress-strip.js" defer></script>
 </head>
 <body>
 

diff --git a/01-claude-code-intro/README.md → content/claude-code/intro/README.md b/01-claude-code-intro/README.md → content/claude-code/intro/README.md
diff --git a/01-claude-code-intro/_assets/_split-icons.py → ...claude-code/intro/_assets/_split-icons.py b/01-claude-code-intro/_assets/_split-icons.py → ...claude-code/intro/_assets/_split-icons.py
diff --git a/...ude-code-intro/_assets/use-automation.png → ...ude-code/intro/_assets/use-automation.png b/...ude-code-intro/_assets/use-automation.png → ...ude-code/intro/_assets/use-automation.png
diff --git a/01-claude-code-intro/_assets/use-code.png → ...nt/claude-code/intro/_assets/use-code.png b/01-claude-code-intro/_assets/use-code.png → ...nt/claude-code/intro/_assets/use-code.png
diff --git a/01-claude-code-intro/_assets/use-comm.png → ...nt/claude-code/intro/_assets/use-comm.png b/01-claude-code-intro/_assets/use-comm.png → ...nt/claude-code/intro/_assets/use-comm.png
diff --git a/...laude-code-intro/_assets/use-creative.png → ...laude-code/intro/_assets/use-creative.png b/...laude-code-intro/_assets/use-creative.png → ...laude-code/intro/_assets/use-creative.png
diff --git a/01-claude-code-intro/_assets/use-doc.png → ...ent/claude-code/intro/_assets/use-doc.png b/01-claude-code-intro/_assets/use-doc.png → ...ent/claude-code/intro/_assets/use-doc.png
diff --git a/01-claude-code-intro/_assets/use-learn.png → ...t/claude-code/intro/_assets/use-learn.png b/01-claude-code-intro/_assets/use-learn.png → ...t/claude-code/intro/_assets/use-learn.png
diff --git a/...laude-code-intro/_assets/use-research.png → ...laude-code/intro/_assets/use-research.png b/...laude-code-intro/_assets/use-research.png → ...laude-code/intro/_assets/use-research.png
diff --git a/01-claude-code-intro/_assets/use-slide.png → ...t/claude-code/intro/_assets/use-slide.png b/01-claude-code-intro/_assets/use-slide.png → ...t/claude-code/intro/_assets/use-slide.png
diff --git a/01-claude-code-intro/index.html → content/claude-code/intro/index.html b/01-claude-code-intro/index.html → content/claude-code/intro/index.html
@@ -25,9 +25,9 @@
   ============================================================
 -->
 
-<link rel="stylesheet" href="../shared/theme.css">
-<script src="../shared/deck-stage.js"></script>
-<script src="../shared/progress-strip.js" defer></script>
+<link rel="stylesheet" href="../../../shared/theme.css">
+<script src="../../../shared/deck-stage.js"></script>
+<script src="../../../shared/progress-strip.js" defer></script>
 </head>
 <body>
 
@@ -51,7 +51,7 @@ <h1 class="cover-title">
     </div>
 
     <a class="cover-qr" href="https://co-lect.github.io/lectures/">
-      <img src="../shared/qr.svg" alt="教材サイトの QR コード" width="140" height="140">
+      <img src="../../../shared/qr.svg" alt="教材サイトの QR コード" width="140" height="140">
       <span>スマホで開く</span>
     </a>
 

diff --git a/02-setup/index.html → content/claude-code/setup/index.html b/02-setup/index.html → content/claude-code/setup/index.html
@@ -10,9 +10,9 @@
 <meta property="og:description" content="プランの選択からインストール・認証・初起動まで。Claude Code を動かすまでの 12 枚。">
 <meta property="og:url" content="https://watanabe-kohei-jp.github.io/lectures/02-setup/">
 
-<link rel="stylesheet" href="../shared/theme.css">
-<script src="../shared/deck-stage.js"></script>
-<script src="../shared/progress-strip.js" defer></script>
+<link rel="stylesheet" href="../../../shared/theme.css">
+<script src="../../../shared/deck-stage.js"></script>
+<script src="../../../shared/progress-strip.js" defer></script>
 </head>
 <body>
 

diff --git a/content/other-tools/README.md b/content/other-tools/README.md
@@ -0,0 +1,3 @@
+# other-tools
+
+Cursor・GitHub Copilot など、Claude Code 以外の AI ツールを扱う教材カテゴリ。
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# other-tools

		Cursor・GitHub Copilot など、Claude Code 以外の AI ツールを扱う教材カテゴリ。