From a1458cae24357e5a382b70813106d5e3a8ef7b7b Mon Sep 17 00:00:00 2001 From: yoshida-takeshi-classmethod Date: Thu, 12 Feb 2026 17:14:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?add:SKILL=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/skills/marp-creator/SKILL.md | 474 ++++++++++++++++++++ .claude/skills/marp-creator/sample-slide.md | 375 ++++++++++++++++ .claude/skills/organize-content/SKILL.md | 242 ++++++++++ .claude/skills/slide-design/SKILL.md | 317 +++++++++++++ workflow-README.md | 276 ++++++++++++ 5 files changed, 1684 insertions(+) create mode 100644 .claude/skills/marp-creator/SKILL.md create mode 100644 .claude/skills/marp-creator/sample-slide.md create mode 100644 .claude/skills/organize-content/SKILL.md create mode 100644 .claude/skills/slide-design/SKILL.md create mode 100644 workflow-README.md diff --git a/.claude/skills/marp-creator/SKILL.md b/.claude/skills/marp-creator/SKILL.md new file mode 100644 index 0000000..ea0e1b3 --- /dev/null +++ b/.claude/skills/marp-creator/SKILL.md @@ -0,0 +1,474 @@ +--- +name: marp-creator +description: スライド設計書からMarp形式の資料を生成するスキル。Marp資料作成フローのステップ2-Bとして使用する。最終成果物となるスライドファイルを作成する。 +version: 1.0.0 +--- + +# Marp Creator Skill + +スライド設計書（slide-designの出力）から、Marp形式のスライド資料を生成する。このスキルの出力が最終成果物となる。 + +## Overview + +以下を実現する。 + +- スライド設計書に基づいたMarpファイルの生成 +- 適切なレイアウトクラスの適用 +- Marp記法の正確な使用 +- 画像配置の指定 +- ページネーションの制御 + +出力されたMarpファイルは、Marp CLIやVSCode拡張でPDFやHTMLに変換できる。 + +## Input + +ユーザーから以下の情報を受け取る。 + +| 項目 | 説明 | 形式 | +|------|------|------| +| スライド設計書 | slide-designの出力 | `03_slide-design_[資料名].md` | +| 画像ファイル | 使用する画像（任意） | パスまたは配置予定の説明 | + +## Output + +以下の構造を持つMarpファイルを生成する。 + +### ファイル名規則 + +`04_marp_[資料名].md` + +接頭辞 `04_` により、このファイルがステップ2-Bの最終成果物であることを明示する。 + +### ファイル構造 + +```markdown +--- +marp: true +theme: classmethod +paginate: true +title: [資料タイトル] +description: [資料の説明] +--- + + + + +![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) + +# [資料タイトル] + +[日付や執筆者情報] + +--- + + + + +## [セクション名] +[セクションの説明文] + +--- + +# [スライドタイトル] + +[本文や箇条書き] + +--- + +[以下、全スライドを記載] +``` + +## Workflow + +### Step 1: スライド設計書の読み込み + +`03_slide-design_[資料名].md` を読み込み、以下を把握する。 + +- 資料タイトルと説明 +- スライド枚数と各スライドの構成 +- 使用するレイアウトクラス +- 図表の配置位置 + +### Step 2: テンプレートの参照 + +スキルディレクトリ内の `sample-slide.md` を参照し、以下を確認する。 + +- Front matter の記述方法 +- 各レイアウトクラスの使用例 +- 画像配置の記法 +- コメント記法（``） + +テンプレートファイルはスキルと同じディレクトリに配置されている。 + +### Step 3: Front matter の作成 + +ファイル冒頭のメタデータを作成する。 + +```yaml +--- +marp: true +theme: classmethod +paginate: true +title: [資料タイトル] +description: [資料の説明（1〜2文）] +--- +``` + +### Step 4: 表紙スライドの作成 + +表紙（titleレイアウト）を作成する。 + +```markdown + + + +![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) + +# [資料タイトル] + +[日付や執筆者情報] + +--- +``` + +**注意点:** +- `_class` の前にアンダースコアを付ける +- ページネーションは false に設定 +- ロゴのURLは固定値を使用 + +### Step 5: 各スライドの生成 + +スライド設計書に基づき、各スライドを生成する。 + +**基本的なスライド記法:** + +```markdown +--- + +# [スライドタイトル] + +[本文や箇条書き] + +--- +``` + +**セクションスライドの記法:** + +```markdown +--- + + + + +## [セクション名] +[説明文] + +--- +``` + +**図表を含むスライド（content-image）:** + +```markdown +--- + + + +# [スライドタイトル] + +![w:700px]([画像パスまたはプレースホルダー]) + +[キャプションや説明文] + +--- +``` + +**横並びレイアウト（content-image-right）:** + +```markdown +--- + + + +# [スライドタイトル] + +![w:500px]([画像パス]) + +- [ポイント1] +- [ポイント2] +- [ポイント3] + +--- +``` + +**カラムレイアウト（column-layout）:** + +```markdown +--- + + + +# [スライドタイトル] + +
+ +## [左カラム] +- [項目1] +- [項目2] + +
+ +
+ +## [右カラム] +- [項目1] +- [項目2] + +
+ +--- +``` + +### Step 6: レイアウトクラスの適用 + +スライド設計書で指定されたレイアウトクラスを正確に適用する。 + +| レイアウトクラス | コメント記法 | ページネーション | +|-----------------|-------------|-----------------| +| title | `` | false | +| section | `` | false | +| 基本（指定なし） | コメント不要 | true（デフォルト） | +| image | `` | true | +| content-image | `` | true | +| content-image-right | `` | true | +| content-image-left | `` | true | +| column-layout | `` | true | +| small-text | `` | true | +| no-header | `` | true | + +**幅調整が必要な場合:** +- content-image-right/left では、`content-60` などのクラスを追加して幅を調整できる +- 例: `` + +### Step 7: 画像の配置 + +図表が必要な箇所に画像を配置する。 + +**画像記法:** +```markdown +![w:700px](images/diagram.png) +``` + +**サイズ指定:** +- `w:XXpx`: 幅を指定（例: w:400px, w:700px） +- `h:XXpx`: 高さを指定（例: h:300px） + +**画像が未準備の場合:** +プレースホルダーを使用する。 + +```markdown +![w:700px](https://placehold.jp/300x200.png) + +``` + +または、コメントのみを記載する。 + +```markdown + +``` + +### Step 8: 箇条書きと強調の適用 + +スライド設計書の内容を、適切に箇条書きや強調で表現する。 + +**箇条書き:** +```markdown +- 項目1 +- 項目2 +- 項目3 +``` + +**番号付きリスト:** +```markdown +1. ステップ1 +2. ステップ2 +3. ステップ3 +``` + +**強調（見出しの一部を青色にする）:** +```markdown +## 見出しの一部を**青色のアクセントカラー**にする +``` + +見出し内の `**` で囲まれた部分は青色のアクセントカラーになる。 + +### Step 9: 参考リンクの配置 + +スライド設計書に「参考リンク」がある場合、スライド末尾に配置する。 + +**参考リンクの記法:** +```markdown +参考: [リンクタイトル](URL) +``` + +リンクはスライドの本文の最後に配置し、「参考:」のラベルを付ける。 + +### Step 10: ページネーションの制御 + +適切にページネーションを制御する。 + +- 表紙（title）: `` +- セクション（section）: `` +- その他: デフォルト（true）のまま + +### Step 11: ファイル出力 + +`04_marp_[資料名].md` を出力する。 + +ファイル作成後、以下をユーザーに伝える。 + +- 出力ファイルのパス +- スライド枚数 +- 次のアクション（プレビュー、PDF変換など） +- 画像が未配置の場合はその旨 + +## Marp記法リファレンス + +### Front matter + +```yaml +--- +marp: true +theme: classmethod +paginate: true +title: スライドタイトル +description: スライドの説明 +--- +``` + +### スライド区切り + +```markdown +--- +``` + +3つのハイフンで区切る。 + +### レイアウトクラス指定 + +```markdown + +``` + +コメント形式で指定。`_class` の前にアンダースコアを付ける。 + +### ページネーション制御 + +```markdown + +``` + +個別スライドでページ番号を非表示にする。 + +### 画像サイズ指定 + +```markdown +![w:400px](path/to/image.png) +![h:300px](path/to/image.png) +``` + +### 見出し強調 + +```markdown +## 見出しの一部を**青色**にする +``` + +見出し内の `**` 囲みは青色のアクセントカラーになる。 + +### コードブロック + +````markdown +```typescript +const message: string = "Hello, Marp!"; +console.log(message); +``` +```` + +### 引用 + +```markdown +> 引用文 +``` + +### テーブル + +```markdown +| 列1 | 列2 | 列3 | +|-----|-----|-----| +| A | B | C | +``` + +### カスタムCSS（スライド固有） + +```markdown + + +
+強調したいコンテンツ +
+``` + +## Error Handling + +| エラー | 原因 | 対処 | +|--------|------|------| +| スライド設計書が読めない | パスが間違っている | ユーザーに正しいパスを確認 | +| テンプレートが見つからない | パスが変更された | ユーザーに最新のパスを確認 | +| レイアウトが正しく表示されない | クラス名が間違っている | sample-slide.mdを参照して修正 | +| 画像が表示されない | パスが間違っている | 画像ファイルの配置を確認 | + +## Example Session + +``` +User: /marp-creator @Projects/顧客A/AI活用提案/Marp/03_slide-design_AI活用提案.md + +Claude: +1. スライド設計書を読み込み +2. テンプレート（sample-slide.md）を参照 +3. Front matterを作成 +4. 表紙スライドを生成 +5. 各スライドを設計書に基づいて生成 + - セクションスライド3枚 + - 内容スライド15枚 + - レイアウトクラスを適切に適用 +6. 図表が必要な箇所にプレースホルダーを配置 +7. 04_marp_AI活用提案.md を出力 + +[出力完了メッセージ] +Marp資料を作成しました: Projects/顧客A/AI活用提案/Marp/04_marp_AI活用提案.md + +スライド枚数: 19枚 +使用レイアウト: title, section, 基本, content-image, content-image-right + +次のアクション: +- VSCodeのMarp拡張でプレビュー表示 +- PDF変換: Marp CLIで `marp 04_marp_AI活用提案.md --pdf` +- 画像を配置: images/フォルダに図表を配置し、パスを修正 + +画像が未配置の箇所: +- スライド5: AI活用の全体像図 +- スライド9: 導入プラン工程表 +- スライド12: 効果予測グラフ +``` + +## Notes + +- このスキルはMarp資料作成フローのステップ2-B（最終ステップ） +- 出力ファイルが最終成果物となる +- テンプレート（sample-slide.md）を正確に参照し、Marp記法を守る +- レイアウトクラスの指定ミスに注意（`_class` のアンダースコア、コメント記法） +- 画像は後から差し替え可能。プレースホルダーやコメントで位置を明示する +- 生成後、VSCodeのMarp拡張でプレビュー確認を推奨 diff --git a/.claude/skills/marp-creator/sample-slide.md b/.claude/skills/marp-creator/sample-slide.md new file mode 100644 index 0000000..1ed9213 --- /dev/null +++ b/.claude/skills/marp-creator/sample-slide.md @@ -0,0 +1,375 @@ +--- +marp: true +theme: classmethod +paginate: true +title: サンプルスライド +description: サンプルスライドです。 +--- + + + + + + +![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) + +# このページはタイトルに適しています + +20XX/XX/XX ここには日付や執筆者の名前など +必要な情報を入力して下さい + +--- + + + + +## レイアウト：中扉・セクション +テキストは左寄せの中央に配置、背景色はグレーになります + +--- + +# 基本のレイアウト + +基本のレイアウトを使用する際は必ずスライドタイトルに h1 を利用してください + +# 最初のh1以外でもh1を使うことができます + +スライドタイトルの下に一本の線が引かれるのでタイトルと内容がハッキリと区別できます + +--- + +# 通常のマークダウン記法 + +通常のマークダウン記法はそのまま利用することができます。 + +# 見出し + +**太字**, *斜体*, ***太字斜体***, ~~取り消し線~~, `インライン`, [リンク](https://example.com) + + +- リスト +1. 番号付きリスト + + +> 引用 + + +```ts +// コードブロック +console.log("Hello, World!"); +``` + +| テーブル | 列2 | 列3 | +| -------- | --- | --- | +| A | B | C | + +--- +# 通常のMarp記法(よく使うものを抜粋) + +## 見出しの一部を**青色のアクセントカラー**にする + +```md +## 見出しの一部を**青色のアクセントカラー**にする +見出し内で**に囲まれた部分は青色のアクセントカラーになります +``` + +画像の横幅・縦幅を変える + +![w:100](https://placehold.jp/150x150.png) + +```md +![w:100](https://placehold.jp/150x150.png) +w:100 幅100pxで表示 +h:100 縦100pxで表示 +``` + +--- + + + +# ヘッダーなしレイアウト（no-header） + +このスライドではヘッダー部分が非表示になります +フルスクリーンでコンテンツを表示したい場合に便利です + +--- + + + +# タイトル・図のみ + +![w:800px](https://placehold.jp/300x200.png) + +--- + + + +# タイトル・図のみ(影付き) + +![w:800px](https://placehold.jp/ffffff/8c8c8c/300x200.png) + +--- + + + +# タイトル・図のみ(複数) + +![w:500px](https://placehold.jp/300x200.png) +![w:500px](https://placehold.jp/300x200.png) + +--- + + + + +# レイアウト：タイトル・図・テキスト + +![w:700px](https://placehold.jp/300x200.png) + +ここにテキストを入れてください。 + +--- + + + +# レイアウト：タイトル・図・テキスト(複数) + +![w:500px](https://placehold.jp/300x200.png) +![w:500px](https://placehold.jp/300x200.png) + +ここにテキストを入れてください + +--- + + + + + + +# 文章と図を横並びに表現(図が右側) + +![w:500px](https://placehold.jp/300x200.png) +- content-image-rightクラスは、右側に画像を配置するレイアウトを提供 +- デフォルトでは右側50%の幅になります +- `content-xx`で左側のテキスト領域の幅を調整できます + - content-30: テキスト領域30% + - content-40: テキスト領域40% + - content-60: テキスト領域60% + - content-70: テキスト領域70% + - content-80: テキスト領域80% + +--- + + + + +# 文章と図を横並びに表現(図が左側) + +![w:400px](https://placehold.jp/300x200.png) +![w:400px](https://placehold.jp/300x200.png) + +- content-image-leftクラスは、左側に画像を配置するレイアウトを提供 +- デフォルトでは左側50%の幅になります +- `content-xx`で左側のテキスト領域の幅を調整できます + - content-30: テキスト領域30% + - content-40: テキスト領域40% + - content-60: テキスト領域60% + - content-70: テキスト領域70% + - content-80: テキスト領域80% + + +--- + + + +# 横並びレイアウト（column-layout） + +
+ +## 左カラム +- ポイント1 +- ポイント2 +- ポイント3 +
+ +
+ +## 中央カラム +1. 手順1 +2. 手順2 +3. 手順3 +
+ +
+ +## 右カラム +1. 方法1 +2. 方法2 +3. 方法3 +
+ +--- + + + + + + + +# テキストの中央揃え（text-center） + + +# 見出しレベル1のテキスト h1-text-center +## 見出しレベル2のテキスト h2-text-center +### 見出しレベル3のテキスト h3-text-center +#### 見出しレベル4のテキスト h4-text-center +##### 見出しレベル5のテキスト h5-text-center +###### 見出しレベル6のテキスト h6-text-center +通常のテキスト text-center + +--- + + + +# スライド全体のテキストの縦方向中央揃え（align-center） + + +# 見出しレベル1のテキスト +## 見出しレベル2のテキスト +### 見出しレベル3のテキスト + +--- + + + + + + + +# テキストの色変更（red） + + +# 見出しレベル1のテキスト h1-text-red +## 見出しレベル2のテキスト h2-text-red +### 見出しレベル3のテキスト h3-text-red +#### 見出しレベル4のテキスト h4-text-red +##### 見出しレベル5のテキスト h5-text-red +###### 見出しレベル6のテキスト h6-text-red +通常のテキスト text-red + + +--- + + + +# テキストの色変更（blue） + +## 見出しは通常色のまま + +text-blueクラスを使用すると、段落テキストのみが青色になります。見出しは元の色を保持します。 + +--- + +# コードブロック + +```ts +type User = { + id: number; + name: string; + email: string; + isActive: boolean; +}; + +const users: User[] = [ + { id: 1, name: "山田太郎", email: "taro@example.com", isActive: true }, + { id: 2, name: "鈴木花子", email: "hanako@example.com", isActive: false }, + { id: 3, name: "佐藤次郎", email: "jiro@example.com", isActive: true }, +]; + +function printActiveUsers(userList: User[]) { + console.log("アクティブなユーザー一覧:"); + userList + .filter(user => user.isActive) + .forEach(user => { + console.log(`ID: ${user.id}, 名前: ${user.name}, メール: ${user.email}`); + }); +} + +function activateUser(userList: User[], id: number) { + const user = userList.find(u => u.id === id); + if (user) { + user.isActive = true; + console.log(`${user.name} をアクティブにしました。`); + } else { + console.log("該当ユーザーが見つかりません。"); + } +} + +printActiveUsers(users); +activateUser(users, 2); +printActiveUsers(users); +``` + +コードの大きさに合わせて自動でコードブロック内のテキストが小さくなります + +--- +# その他 + +## 数式の表示 +$$ +\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n +$$ + + +## 折りたたみ +
+詳細を開く +詳細内容をここに記載します +
+ + +## カスタムCSSの適用 + + +
+このスライド専用のカスタムスタイルを適用できます +
+ +--- + + + +# ページネーション制御 + +このスライドはページ番号がスキップされます（`_paginate: skip`）。 +このスライドはページ番号が表示されなくなります（`_paginate: false`）。 + +目次や表紙などでページ番号を表示したくない場合に使用します + +--- + + + +# 文字を小さくする + +`small-text` クラスを使用すると、スライド全体のフォントサイズが20%程度縮小されます。 + +情報量が多いスライドや、通常のサイズでは収まりきらない内容を表示する際に便利です。 + +--- + + + +![w:450px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) + +# ぜひお試しください！ \ No newline at end of file diff --git a/.claude/skills/organize-content/SKILL.md b/.claude/skills/organize-content/SKILL.md new file mode 100644 index 0000000..9113792 --- /dev/null +++ b/.claude/skills/organize-content/SKILL.md @@ -0,0 +1,242 @@ +--- +name: organize-content +description: メモや箇条書きを構造化されたMarkdownに整理するスキル。Marp資料作成フローのステップ1として使用する。提案書や勉強会資料の内容整理に適している。 +version: 1.0.0 +--- + +# Content Organizer Skill + +散在するメモや箇条書きを、論理的に整理された構造化Markdownファイルに変換する。この段階ではMarpの記法やスライド枚数を意識せず、伝えたい内容の構造化に集中する。 + +## Overview + +資料作成の最初のステップとして、以下を実現する。 + +- メモや箇条書きから主要トピックを抽出 +- トピックを論理的な順序に並び替え +- 重複内容の統合 +- 見出しレベルの適正化 +- 不足している要素の指摘 + +出力された整理済みファイルは、後続のスライド化フェーズ（SKILL: slide-design, marp-creator）で使用する。 + +## Input + +ユーザーから以下の情報を受け取る。 + +| 項目 | 説明 | 形式 | +|------|------|------| +| メモファイル | 整理対象の内容 | Markdownファイルまたはテキスト | +| 資料の目的 | 提案書、勉強会、説明資料など | テキスト | +| 対象者 | 顧客、社内メンバー、エンジニアなど | テキスト | +| 出力先 | ファイルの配置場所 | パス（例：Projects/[案件名]/Marp/）※ご自身のフォルダ構成に合わせて変更 | + +出力先が指定されていない場合は、ユーザーに確認する。 + +## Output + +以下の構造を持つMarkdownファイルを生成する。 + +### ファイル名規則 + +`02_organized_[資料名].md` + +接頭辞 `02_` により、このファイルがステップ1の成果物であることを明示する。 + +### ファイル構造 + +```markdown +# [資料タイトル] + +## 資料の概要 + +**目的:** [資料の目的を1〜2文で記載] +**対象者:** [想定する読者・聴衆] +**作成日:** [YYYY-MM-DD] + +--- + +## [メイントピック1] + +[導入文や概要を地の文で記載] + +### [サブトピック1-1] + +[内容を説明] + +- 必要に応じて箇条書き +- 2項目程度なら地の文でも可 + +### [サブトピック1-2] + +[内容を説明] + +**図表:** [ここに○○の図を挿入予定] + +--- + +## [メイントピック2] + +... + +--- + +## 補足・メモ + +[追加情報や検討事項があれば記載] +``` + +### 出力時の注意事項 + +- 見出しレベルはh1〜h3を使用（h4以降は原則使わない） +- 箇条書きは3項目以上の並列な内容で使用 +- 2項目程度なら「AとB」のように地の文で記載 +- 図表の配置位置を `**図表:**` で明示（実際の画像は後で差し込む想定） +- セクション間は `---` で区切る + +## Workflow + +### Step 1: 入力の確認 + +ユーザーから提供されたメモファイルを読み込み、以下を確認する。 + +- 資料の目的（提案書、勉強会資料、説明資料など） +- 対象者（顧客、社内メンバー、技術者レベルなど） +- 出力先のパス + +これらが明示されていない場合は、AskUserQuestionツールで確認する。 + +### Step 2: トピックの抽出 + +メモから主要なトピックを洗い出す。以下の観点で分析する。 + +- 何について説明するのか（主題） +- なぜそれを伝えるのか（目的） +- どのように説明するのか（手順、比較、事例など） + +重複する内容や関連性の高い項目をグループ化する。 + +### Step 3: 論理的な並び替え + +トピックを適切な順序に配置する。一般的な構成パターンは以下の通り。 + +**提案書の場合:** +1. 現状の課題 +2. 解決策の提案 +3. 実現方法 +4. 期待される効果 +5. 次のステップ + +**勉強会資料の場合:** +1. 背景・動機 +2. 基礎知識 +3. 具体的な内容（デモ、事例など） +4. まとめ・次のアクション + +**説明資料の場合:** +1. 概要 +2. 詳細説明（機能、仕様など） +3. 使い方・運用方法 +4. 補足情報 + +ただし、これらはあくまで参考例であり、資料の目的に応じて柔軟に構成を調整する。 + +### Step 4: 見出しレベルの調整 + +見出しの階層を整理する。 + +- h1: 資料タイトルとメイントピック +- h2: サブトピック +- h3: さらに細分化が必要な場合のみ + +h4以降は使用しない。階層が深くなる場合は、トピックの分割を検討する。 + +### Step 5: 箇条書きと地の文の使い分け + +CLAUDE.mdのガイドラインに従い、適切に表現を選択する。 + +**箇条書きを使う:** +- 3つ以上の並列な項目 +- 手順やステップ +- チェックリストや仕様一覧 + +**地の文を使う:** +- 2つ程度の項目（「AとB」のように文中で述べる） +- 因果関係や論理の流れがある内容 +- 説明や考察 + +### Step 6: 不足要素の確認 + +整理後の内容を見直し、以下が不足していないか確認する。 + +- 各トピックの説明が十分か +- 論理の飛躍がないか +- 図表が必要な箇所で明示されているか +- 対象者にとって分かりやすい表現か + +不足が見られる場合は、ファイル末尾の「補足・メモ」セクションに記載する。 + +### Step 7: ファイル出力 + +指定された出力先に `02_organized_[資料名].md` を作成する。 + +ファイル作成後、以下をユーザーに伝える。 + +- 出力ファイルのパス +- 主要なトピック構成の概要 +- 追加で検討が必要な項目（あれば） + +## 判断基準 + +整理時の判断基準を以下に示す。 + +| 項目 | 基準 | +|------|------| +| トピックの粒度 | 1トピックで5〜10分程度説明できる内容 | +| 見出しレベル | h1〜h3まで、h4以降は使わない | +| 箇条書き項目数 | 3〜7項目程度。それ以上なら分割を検討 | +| 1段落の長さ | 3〜5文程度。長い場合は段落を分ける | +| 図表の必要性 | 言葉だけで説明しにくい箇所には図表を推奨 | + +## Error Handling + +| エラー | 原因 | 対処 | +|--------|------|------| +| 入力ファイルが読めない | パスが間違っている | ユーザーに正しいパスを確認 | +| 資料の目的が不明 | 情報が不足している | AskUserQuestionで確認 | +| 出力先が指定されていない | パラメータ不足 | ユーザーに出力先を確認 | +| トピックが抽出できない | メモが断片的すぎる | ユーザーに追加情報を依頼 | + +## Example Session + +``` +User: /organize-content @Projects/顧客A/AI活用提案/Marp/01_memo_AI活用提案.md + +Claude: +1. メモファイルを読み込み +2. 資料の目的と対象者を確認（不明な場合は質問） +3. トピックを抽出（現状課題、AI活用案、導入効果など） +4. 論理的な順序に並び替え +5. 見出しレベルを調整 +6. 箇条書きと地の文を適切に使い分け +7. 02_organized_AI活用提案.md を出力 + +[出力完了メッセージ] +整理済みファイルを作成しました: Projects/顧客A/AI活用提案/Marp/02_organized_AI活用提案.md + +主要な構成: +- 現状の課題 +- AI活用の提案 +- 具体的な導入プラン +- 期待される効果 + +次のステップとして、スライド設計書の作成（/slide-design）を実行できます。 +``` + +## Notes + +- このスキルはMarp資料作成フローの第1ステップ +- 出力ファイルは次のステップ（slide-design）の入力となる +- CLAUDE.mdのガイドラインに従い、自然な文体を心がける +- 強調表現（太字）��本当に注目してほしい箇所のみに使用 +- AIらしい表現（「様々な」「活用する」など）は避ける diff --git a/.claude/skills/slide-design/SKILL.md b/.claude/skills/slide-design/SKILL.md new file mode 100644 index 0000000..bdabcb2 --- /dev/null +++ b/.claude/skills/slide-design/SKILL.md @@ -0,0 +1,317 @@ +--- +name: slide-design +description: 整理済みMarkdownからスライド設計書を作成するスキル。Marp資料作成フローのステップ2-Aとして使用する。各スライドの構成、レイアウト、内容を定義する。 +version: 1.0.0 +--- + +# Slide Design Skill + +整理済みMarkdown（organize-contentの出力）から、スライド設計書を作成する。この設計書は、最終的なMarp資料を生成する前の中間成果物であり、スライド構成を事前確認できる。 + +## Overview + +以下を実現する。 + +- 整理済み内容を適切なスライド枚数に分割 +- 各スライドのタイトルと使用レイアウトを決定 +- 1スライドあたりの情報量を調整 +- 図表の配置位置を明示 +- スライド全体の流れを可視化 + +出力されたスライド設計書は、後続のMarp資料作成（SKILL: marp-creator）で使用する。 + +## Input + +ユーザーから以下の情報を受け取る。 + +| 項目 | 説明 | 形式 | +|------|------|------| +| 整理済みファイル | organize-contentの出力 | `02_organized_[資料名].md` | +| スライド枚数の目安 | 希望するスライド枚数（任意） | 数値（例：20枚程度） | +| 発表時間 | プレゼン時間（任意） | 分単位（例：15分） | + +スライド枚数や発表時間が指定されていない場合は、内容から適切な枚数を判断する。 + +**目安:** +- 5分プレゼン：5〜8枚 +- 10分プレゼン：10〜15枚 +- 15分プレゼン：15〜20枚 +- 30分プレゼン：20〜30枚 + +## Output + +以下の構造を持つスライド設計書を生成する。 + +### ファイル名規則 + +`03_slide-design_[資料名].md` + +接頭辞 `03_` により、このファイルがステップ2-Aの成果物であることを明示する。 + +### ファイル構造 + +```markdown +# スライド設計書: [資料タイトル] + +**作成日:** [YYYY-MM-DD] +**想定スライド枚数:** [X]枚 +**想定発表時間:** [Y]分 + +--- + +## スライド構成一覧 + +| No. | タイトル | レイアウト | 備考 | +|-----|----------|-----------|------| +| 1 | [資料タイトル] | title | 表紙 | +| 2 | [セクション名] | section | 第1章の開始 | +| 3 | [具体的なタイトル] | 基本 | 箇条書き3項目 | +| ... | ... | ... | ... | +| N | （裏表紙） | all-text-center align-center | ロゴのみ | + +--- + +## スライド詳細 + +### スライド1: [資料タイトル] + +**レイアウト:** title +**ページネーション:** false + +**内容:** +- タイトル: [資料タイトル] +- サブタイトル: [日付や執筆者情報] +- ロゴ: ClassMethodロゴ + +--- + +### スライド2: [セクション名] + +**レイアウト:** section +**ページネーション:** false + +**内容:** +- セクションタイトル: [セクション名] +- 説明文: [1〜2文の説明] + +--- + +### スライド3: [具体的なタイトル] + +**レイアウト:** 基本 + +**内容:** +- タイトル: [具体的なタイトル] +- 本文: + - [ポイント1] + - [ポイント2] + - [ポイント3] +- 参考リンク: [リンクタイトル](URL)（該当する場合のみ） + +--- + +### スライド4: [図表を含むタイトル] + +**レイアウト:** content-image + +**内容:** +- タイトル: [図表を含むタイトル] +- 図表: [○○の図を配置] +- 説明文: [図表の説明] + +--- + +[以下、全スライドの詳細を記載] + +--- + +### スライドN: （裏表紙） + +**レイアウト:** all-text-center align-center +**ページネーション:** false + +**内容:** +- ロゴ: ClassMethodロゴ + +--- + +## レビューポイント + +設計書確認時に以下を検討してください。 + +- [ ] 各スライドの情報量は適切か +- [ ] スライドの順序は論理的か +- [ ] 図表の配置は適切か +- [ ] 全体の流れにメリハリがあるか +- [ ] 想定時間内に収まるスライド枚数か + +--- + +## 修正が必要な場合 + +以下の調整を検討してください。 + +- 情報量が多すぎる → スライドを分割 +- スライド枚数が多すぎる → 内容を統合 +- 図表が不足 → 視覚的な要素を追加 +- メリハリがない → セクションスライドを追加 +``` + +## Workflow + +### Step 1: 整理済みファイルの読み込み + +`02_organized_[資料名].md` を読み込み、以下を把握する。 + +- 資料の目的と対象者 +- メイントピックの数と内容 +- サブトピックの構造 +- 図表が必要な箇所 +- 参考リンク（該当する箇所に引き継ぐ） + +### Step 2: スライド枚数の決定 + +発表時間や内容量から、適切なスライド枚数を決定する。 + +**判断基準:** +- 1スライドあたり30秒〜1分程度を想定 +- 表紙、セクションスライド、裏表紙を含める +- 内容スライドは1スライド1メッセージを基本とする + +### Step 3: スライドの分割 + +整理済み内容を個別のスライドに分割する。 + +**分割の基準:** +- 1スライドに箇条書き5項目まで +- 長い説明は複数スライドに分割 +- 図表がある場合は専用スライドを用意 +- トピックの切り替わりでセクションスライドを挿入 + +### Step 4: レイアウトの選択 + +各スライドに適したレイアウトクラスを選択する。 + +| レイアウトクラス | 使用場面 | +|-----------------|----------| +| title | 表紙（1枚目） | +| section | セクション区切り（大きなトピックの開始時） | +| （指定なし）基本 | テキスト中心のスライド、箇条書きが主体 | +| image | 図表のみを大きく表示したい場合 | +| content-image | 図表とキャプションを組み合わせる場合 | +| content-image-right | 文章と図表を横並び（図が右） | +| content-image-left | 文章と図表を横並び（図が左） | +| column-layout | 複数項目を横並びで比較する場合 | +| small-text | 情報量が多く、文字を小さくする必要がある場合 | +| all-text-center align-center | 裏表紙（最終スライド、ロゴのみ中央配置） | + +**選択の指針:** +- デフォルトは基本レイアウト +- 図表がある場合は image, content-image, content-image-right/left を選択 +- 比較表や複数の選択肢を示す場合は column-layout +- 情報量が多い場合は内容を分割。分割が難しい場合のみ small-text + +### Step 5: 1スライドあたりの情報量調整 + +各スライドの情報量を適切に調整する。 + +**情報量の目安:** +- タイトル: 10〜20文字程度 +- 箇条書き: 3〜5項目 +- 各箇条書き項目: 20〜40文字程度 +- 説明文: 2〜3文程度 + +情報量が多すぎる場合は、スライドを分割するか、内容を簡潔にする。 + +### Step 6: 図表の配置指示 + +図表が必要な箇所を明示する。 + +- どのような図表が必要か（構成図、フロー図、グラフなど） +- 図表のサイズ（幅の目安：w:400px, w:700px など） +- 図表とテキストの配置関係 + +図表の実際のファイルは、Marp資料作成時に配置する。この段階では「○○の図を配置」のように指示するだけでよい。 + +### Step 7: 全体の流れ確認 + +スライド全体の流れを確認し、以下をチェックする。 + +- 論理的な順序になっているか +- 各セクションの分量バランスは適切か +- メリハリがあるか（セクションスライドの配置） +- 冗長な部分はないか + +### Step 8: スライド設計書の出力 + +`03_slide-design_[資料名].md` を出力する。 + +ファイル作成後、以下をユーザーに伝える。 + +- 出力ファイルのパス +- 想定スライド枚数 +- レビューポイント +- 次のステップ（marp-creator）への案内 + +## 判断基準 + +スライド設計時の判断基準を以下に示す。 + +| 項目 | 基準 | +|------|------| +| 1スライドの情報量 | 箇条書き3〜5項目、または2〜3文の説明 | +| スライド枚数 | 発表時間（分）× 1〜1.5枚 | +| セクションスライド | 3〜5スライドごと、または大きなトピックの切り替わ�� | +| 図表専用スライド | 図表が主要な説明要素の場合は専用スライドにする | +| レイアウト変更 | 単調にならないよう、5〜7スライドごとにレイアウトを変える | + +## Error Handling + +| エラー | 原因 | 対処 | +|--------|------|------| +| 整理済みファイルが読めない | パスが間違っている | ユーザーに正しいパスを確認 | +| 内容が少なすぎる | 整理済みファイルの内容不足 | organize-contentの再実行を提案 | +| スライド枚数が適切に決まらない | 発表時間や内容量が不明 | ユーザーに希望枚数を確認 | + +## Example Session + +``` +User: /slide-design @Projects/顧客A/AI活用提案/Marp/02_organized_AI活用提案.md +15分のプレゼンを想定しています + +Claude: +1. 整理済みファイルを読み込み +2. 15分 → 15〜20枚を目安にスライドを設計 +3. 内容を分析（4つのメイントピック、図表3箇所） +4. スライドに分割（表紙1枚、セクション3枚、内容15枚、裏表紙1枚、計20枚） +5. 各スライドのレイアウトを選択 +6. 情報量を調整 +7. 03_slide-design_AI活用提案.md を出力 + +[出力完了メッセージ] +スライド設計書を作成しました: Projects/顧客A/AI活用提案/Marp/03_slide-design_AI活用提案.md + +想定スライド枚数: 20枚 +想定発表時間: 15分 + +スライド構成: +- 表紙 +- 現状の課題（セクション + 内容3枚） +- AI活用の提案（セクション + 内容5枚） +- 具体的な導入プラン（セクション + 内容4枚） +- 期待される効果（内容2枚） +- まとめ（1枚） +- 裏表紙 + +レビューポイントを確認の上、問題なければ次のステップ（/marp-creator）でMarp資料を生成できます。 +``` + +## Notes + +- このスキルはMarp資料作成フローのステップ2-A +- 出力ファイルは次のステップ（marp-creator）の入力となる +- スライド設計書の段階で構成を確認し、必要に応じて修正できる +- レイアウトの選択により、視覚的なメリハリを付ける +- 1スライド1メッセージを基本とし、情報を詰め込みすぎない +- 最終スライドには裏表紙（ロゴのみ中央配置）を追加する +- 02_organizedに参考リンクがある場合は、該当スライドの「参考リンク」欄に引き継ぐ diff --git a/workflow-README.md b/workflow-README.md new file mode 100644 index 0000000..ca51a02 --- /dev/null +++ b/workflow-README.md @@ -0,0 +1,276 @@ +# Marp資料作成フロー + +Marpで提案書や勉強会資料を効率的に作成するためのワークフローと、対応するClaude CodeのSKILLSの使い方を説明する。 + +> **Note:** このフローで使用するフォルダ構成やパスは一例です。ご自身のプロジェクト構成に合わせて適宜変更してください。 + +## 概要 + +資料作成を段階的に進めることで、内容の質とスライドの視覚効果を両立させる。いきなりMarp形式で書き始めるのではなく、内容整理とスライド化を分離する。 + +**対象となる資料:** +- 提案書（顧客向けプレゼン） +- 勉強会資料（社内・社外） +- 説明資料（技術解説、製品紹介など） + +**主な利点:** +- 内容の論理性とスライドの見た目を分けて最適化できる +- 中間成果物により、全体構成を事前確認できる +- 各工程でフィードバックを受けやすい +- 段階的な確認で手戻りを減らせる + +## フロー全体像 + +3つのステップで資料を作成する。 + +``` +メモ・要件 + ↓ +[ステップ1] 内容整理 + ↓ +02_organized_*.md（整理済み内容） + ↓ +[ステップ2-A] スライド設計 + ↓ +03_slide-design_*.md（スライド設計書） + ↓ +[ステップ2-B] Marp資料作成 + ↓ +04_marp_*.md（最終成果物） +``` + +### ステップ1: 内容整理 + +メモや箇条書きを構造化されたMarkdownに整理する。Marpの記法やスライド枚数は意識せず、伝えたい内容の構造化に集中する。 + +**使用SKILL:** `organize-content` +**入力:** メモファイル、資料の目的、対象者 +**出力:** `02_organized_[資料名].md` + +### ステップ2-A: スライド設計 + +整理した内容をスライドに分割し、各スライドの構成を定義する。この段階でレイアウトや情報量を調整する。 + +**使用SKILL:** `slide-design` +**入力:** `02_organized_[資料名].md`、発表時間 +**出力:** `03_slide-design_[資料名].md` + +### ステップ2-B: Marp資料作成 + +スライド設計書に基づき、Marp形式の最終資料を生成する。 + +**使用SKILL:** `marp-creator` +**入力:** `03_slide-design_[資料名].md` +**出力:** `04_marp_[資料名].md` + +## フォルダ構成（参考例） + +以下は資料を管理するフォルダ構成の一例。案件と社内タスクで分類し、テーマと資料形式で整理している。 + +``` +Projects/ + └── [案件名]/ + └── [テーマ]/ + └── Marp/ + ├── 01_memo_[資料名].md # メモ・要件 + ├── 02_organized_[資料名].md # 整理済み内容 + ├── 03_slide-design_[資料名].md # スライド設計書 + ├── 04_marp_[資料名].md # 最終成果物 + └── images/ # 使用する画像 + +Work/ + └── [タスク名]/ + └── [テーマ]/ + └── Marp/ + ├── 01_memo_[資料名].md + ├── 02_organized_[資料名].md + ├── 03_slide-design_[資料名].md + ├── 04_marp_[資料名].md + └── images/ +``` + +**階層の説明:** +- レベル1: 案件名またはタスク名 +- レベル2: テーマ（提案内容や活動テーマ） +- レベル3: 資料形式（Marp、将来的にWord、PowerPointなども） + +**具体例:** +``` +Projects/顧客A案件/セキュリティ提案/Marp/ +Work/AWS勉強会/Lambda最新機能/Marp/ +``` + +この構成により、1つの案件で複数の提案テーマがある場合や、将来的に異なる資料形式を使う場合にも対応できる。 + +### ファイル命名規則 + +接頭辞により作業段階を明示する。 + +| 接頭辞 | 説明 | 例 | +|--------|------|-----| +| 01_memo_ | 最初のメモや要件 | 01_memo_AI活用提案.md | +| 02_organized_ | ステップ1の出力（整理済み） | 02_organized_AI活用提案.md | +| 03_slide-design_ | ステップ2-Aの出力（設計書） | 03_slide-design_AI活用提案.md | +| 04_marp_ | ステップ2-Bの出力（最終成果物） | 04_marp_AI活用提案.md | + +## SKILLSの使い方 + +### organize-content + +メモや箇条書きを整理済みMarkdownに変換する。 + +**実行方法:** +``` +/organize-content +``` + +**必要な情報:** +- メモファイルのパス +- 資料の目的（提案書、勉強会など） +- 対象者（顧客、社内メンバーなど） +- 出力先（任意のMarp作業フォルダ） + +**実行例:** +``` +User: /organize-content @Projects/顧客A/AI活用提案/Marp/01_memo_AI活用提案.md + +Claude: → 02_organized_AI活用提案.md を出力 +``` + +### slide-design + +整理済み内容からスライド設計書を作成する。 + +**実行方法:** +``` +/slide-design +``` + +**必要な情報:** +- 整理済みファイルのパス（02_organized_*.md） +- 発表時間（任意、例：15分） +- スライド枚数の目安（任意、例：20枚程度） + +**発表時間とスライド枚数の目安:** +- 5分プレゼン：5〜8枚 +- 10分プレゼン：10〜15枚 +- 15分プレゼン：15〜20枚 +- 30分プレゼン：20〜30枚 + +**実行例:** +``` +User: /slide-design @Projects/顧客A/AI活用提案/Marp/02_organized_AI活用提案.md +15分のプレゼンを想定しています + +Claude: → 03_slide-design_AI活用提案.md を出力（想定19枚） +``` + +**設計書確認後の調整:** +スライド設計書を確認し、必要に応じて以下を調整する。 +- 情報量が多すぎる → スライドを分割 +- スライド枚数が多すぎる → 内容を統合 +- 図表が不足 → 視覚的な要素を追加 +- メリハリがない → セクションスライドを追加 + +### marp-creator + +スライド設計書からMarp資料を生成する。 + +**実行方法:** +``` +/marp-creator +``` + +**必要な情報:** +- スライド設計書のパス（03_slide-design_*.md） +- 画像ファイル（任意、後から差し替え可能） + +**実行例:** +``` +User: /marp-creator @Projects/顧客A/AI活用提案/Marp/03_slide-design_AI活用提案.md + +Claude: → 04_marp_AI活用提案.md を出力 +``` + +**生成後のアクション:** +- VSCodeのMarp拡張でプレビュー表示 +- PDF変換: `marp 04_marp_AI活用提案.md --pdf` +- 画像を配置: images/フォルダに図表を配置し、パスを修正 + +## Marpテンプレート + +`/sample-slide.md` に、使用可能なレイアウトの一覧とサンプルがある。 + +### 主要なレイアウトクラス + +| レイアウトクラス | 用途 | +|-----------------|------| +| title | 表紙 | +| section | セクション区切り | +| （指定なし）基本 | テキスト中心、箇条書きが主体 | +| image | 図表のみを大きく表示 | +| content-image | 図表とキャプション | +| content-image-right | 文章と図表を横並び（図が右） | +| content-image-left | 文章と図表を横並び（図が左） | +| column-layout | 複数項目を横並び | +| small-text | 情報量が多い場合の文字縮小 | + +詳細はsample-slide.mdを参照。 + +## 反復的な改善 + +初回作成後、以下のサイクルで品質を高める。 + +1. スライド設計書を確認し、構成の過不足をチェック +2. 必要に応じてステップ1の整理済みmdを���正 +3. 再度スライド設計書を生成 +4. 問題なければMarp資料を生成 + +各工程で確認とフィードバックを受けることで、手戻りを最小限にできる。 + +## トラブルシューティング + +### スライド枚数が多すぎる + +- 内容を絞り込む（整理済みmdを修正） +- 複数のスライドを統合する（設計書で調整） +- 発表時間を見直す + +### 情報が1スライドに収まらない + +- スライドを分割する（設計書で調整） +- 箇条書きを簡潔にする +- small-textレイアウトを検討（最終手段） + +### 図表が多すぎて作業が進まない + +- 重要な図表に絞る +- プレースホルダーで先に進め、後から画像を差し替え +- テキストのみで説明できる箇所は図表を省略 + +### レイアウトが思い通りにならない + +- sample-slide.mdでレイアウトのサンプルを確認 +- `_class` のコメント記法が正しいか確認 +- Marp拡張でプレビューしながら調整 + +## SKILL配置について + +本リポジトリの `.claude/skills/` フォルダをそのまま利用できる。リポジトリをクローンすれば、Claude Codeから各SKILLを呼び出せる。 + +``` +.claude/skills/ + ├── organize-content/ + │ └── SKILL.md + ├── slide-design/ + │ └── SKILL.md + └── marp-creator/ + ├── SKILL.md + └── sample-slide.md +``` + +## 参考資料 + +- [.claude/skills/organize-content/SKILL.md](.claude/skills/organize-content/SKILL.md)：内容整理SKILLの詳細 +- [.claude/skills/slide-design/SKILL.md](.claude/skills/slide-design/SKILL.md)：スライド設計SKILLの詳細 +- [.claude/skills/marp-creator/sample-slide.md](.claude/skills/marp-creator/sample-slide.md)：Marpテンプレート From d988cd4275669b53cbca692a96ce406742d8fee7 Mon Sep 17 00:00:00 2001 From: yoshida-takeshi-classmethod Date: Tue, 17 Feb 2026 17:46:29 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20marp-creator=E3=82=B9=E3=82=AD?= =?UTF-8?q?=E3=83=AB=E3=82=92=E6=AE=B5=E9=9A=8E=E7=9A=84=E9=96=8B=E7=A4=BA?= =?UTF-8?q?=E3=83=91=E3=82=BF=E3=83=BC=E3=83=B3=E3=81=AB=E5=BE=93=E3=81=A3?= =?UTF-8?q?=E3=81=A6=E5=86=8D=E6=A7=8B=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/skills/marp-creator/SKILL.md | 511 +++--------------- .claude/skills/marp-creator/build-marp.md | 414 ++++++++++++++ .../skills/marp-creator/get-sample-slide.md | 30 + .../organize-content.md} | 91 +--- .claude/skills/marp-creator/sample-slide.md | 375 ------------- .../SKILL.md => marp-creator/slide-design.md} | 133 +---- workflow-README.md | 276 ---------- 7 files changed, 547 insertions(+), 1283 deletions(-) create mode 100644 .claude/skills/marp-creator/build-marp.md create mode 100644 .claude/skills/marp-creator/get-sample-slide.md rename .claude/skills/{organize-content/SKILL.md => marp-creator/organize-content.md} (59%) delete mode 100644 .claude/skills/marp-creator/sample-slide.md rename .claude/skills/{slide-design/SKILL.md => marp-creator/slide-design.md} (61%) delete mode 100644 workflow-README.md diff --git a/.claude/skills/marp-creator/SKILL.md b/.claude/skills/marp-creator/SKILL.md index ea0e1b3..c4f59b5 100644 --- a/.claude/skills/marp-creator/SKILL.md +++ b/.claude/skills/marp-creator/SKILL.md @@ -1,474 +1,115 @@ --- name: marp-creator -description: スライド設計書からMarp形式の資料を生成するスキル。Marp資料作成フローのステップ2-Bとして使用する。最終成果物となるスライドファイルを作成する。 -version: 1.0.0 +description: Marpでスライド資料を作成するスキル。メモの整理、スライド設計、Marpファイル生成の3ステップで資料を作成する。提案書や勉強会資料の作成時に使用する。 --- -# Marp Creator Skill +# Marp Creator -スライド設計書（slide-designの出力）から、Marp形式のスライド資料を生成する。このスキルの出力が最終成果物となる。 +Marpで提案書や勉強会資料を作成する。内容整理とスライド化を分離し、段階的に進めることで質の高い資料を作成する。 -## Overview +## ワークフロー -以下を実現する。 +3つのステップで資料を作成する。 -- スライド設計書に基づいたMarpファイルの生成 -- 適切なレイアウトクラスの適用 -- Marp記法の正確な使用 -- 画像配置の指定 -- ページネーションの制御 - -出力されたMarpファイルは、Marp CLIやVSCode拡張でPDFやHTMLに変換できる。 - -## Input - -ユーザーから以下の情報を受け取る。 - -| 項目 | 説明 | 形式 | -|------|------|------| -| スライド設計書 | slide-designの出力 | `03_slide-design_[資料名].md` | -| 画像ファイル | 使用する画像（任意） | パスまたは配置予定の説明 | - -## Output - -以下の構造を持つMarpファイルを生成する。 - -### ファイル名規則 - -`04_marp_[資料名].md` - -接頭辞 `04_` により、このファイルがステップ2-Bの最終成果物であることを明示する。 - -### ファイル構造 - -```markdown ---- -marp: true -theme: classmethod -paginate: true -title: [資料タイトル] -description: [資料の説明] ---- - - - - -![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) - -# [資料タイトル] - -[日付や執筆者情報] - ---- - - - - -## [セクション名] -[セクションの説明文] - ---- - -# [スライドタイトル] - -[本文や箇条書き] - ---- - -[以下、全スライドを記載] ``` - -## Workflow - -### Step 1: スライド設計書の読み込み - -`03_slide-design_[資料名].md` を読み込み、以下を把握する。 - -- 資料タイトルと説明 -- スライド枚数と各スライドの構成 -- 使用するレイアウトクラス -- 図表の配置位置 - -### Step 2: テンプレートの参照 - -スキルディレクトリ内の `sample-slide.md` を参照し、以下を確認する。 - -- Front matter の記述方法 -- 各レイアウトクラスの使用例 -- 画像配置の記法 -- コメント記法（``） - -テンプレートファイルはスキルと同じディレクトリに配置されている。 - -### Step 3: Front matter の作成 - -ファイル冒頭のメタデータを作成する。 - -```yaml ---- -marp: true -theme: classmethod -paginate: true -title: [資料タイトル] -description: [資料の説明（1〜2文）] ---- -``` - -### Step 4: 表紙スライドの作成 - -表紙（titleレイアウト）を作成する。 - -```markdown - - - -![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) - -# [資料タイトル] - -[日付や執筆者情報] - ---- +メモ・要件（任意の形式・ファイル名） + ↓ +[ステップ1] 内容整理 → 01_organized_*.md + ↓ +[ステップ2] スライド設計 → 02_slide-design_*.md + ↓ +[ステップ3] Marp資料作成 → 03_marp_*.md（最終成果物） ``` -**注意点:** -- `_class` の前にアンダースコアを付ける -- ページネーションは false に設定 -- ロゴのURLは固定値を使用 +## 開始ステップの判断 -### Step 5: 各スライドの生成 +入力ファイルの種類に応じて、開始するステップを自動判断する。 -スライド設計書に基づき、各スライドを生成する。 +| 入力ファイル | 開始ステップ | +|-------------|-------------| +| メモ・要件（接頭辞なし） | ステップ1から開始 | +| `01_organized_*.md` | ステップ2から開始 | +| `02_slide-design_*.md` | ステップ3から開始 | -**基本的なスライド記法:** +各ステップは1つずつ実行し、出力後に次のステップへ進むか確認する。途中から再開する場合は、該当する接頭辞のファイルを入力として渡す。 -```markdown ---- +## ステップ1: 内容整理 -# [スライドタイトル] +メモや箇条書きを構造化されたMarkdownに整理する。Marpの記法やスライド枚数は意識せず、伝えたい内容の構造化に集中する。 -[本文や箇条書き] +**入力:** メモファイル、資料の目的、対象者 +**出力:** `01_organized_[資料名].md` ---- -``` +詳細な手順は [organize-content.md](organize-content.md) を参照。 -**セクションスライドの記法:** +## ステップ2: スライド設計 -```markdown ---- +整理した内容をスライドに分割し、各スライドの構成を定義する。レイアウトや情報量を調整する中間成果物を作成する。 - - +**入力:** `01_organized_[資料名].md`、発表時間（任意） +**出力:** `02_slide-design_[資料名].md` -## [セクション名] -[説明文] +**発表時間とスライド枚数の目安:** +- 5分: 5〜8枚 +- 10分: 10〜15枚 +- 15分: 15〜20枚 +- 30分: 20〜30枚 ---- -``` +詳細な手順は [slide-design.md](slide-design.md) を参照。 -**図表を含むスライド（content-image）:** +## ステップ3: Marp資料作成 -```markdown ---- +スライド設計書に基づき、Marp形式の最終資料を生成する。 - +**入力:** `02_slide-design_[資料名].md` +**出力:** `03_marp_[資料名].md`（最終成果物） -# [スライドタイトル] +詳細な手順は [build-marp.md](build-marp.md) を参照。 -![w:700px]([画像パスまたはプレースホルダー]) +## レイアウトクラス一覧 -[キャプションや説明文] +| レイアウトクラス | 用途 | +|-----------------|------| +| title | 表紙 | +| section | セクション区切り | +| （指定なし）基本 | テキスト中心、箇条書きが主体 | +| image | 図表のみを大きく表示 | +| content-image | 図表とキャプション | +| content-image-right | 文章と図表を横並び（図が右） | +| content-image-left | 文章と図表を横並び（図が左） | +| column-layout | 複数項目を横並び | +| small-text | 情報量が多い場合の文字縮小 | ---- -``` +テンプレートとサンプルの取得方法は [get-sample-slide.md](get-sample-slide.md) を参照。 -**横並びレイアウト（content-image-right）:** +## ファイル命名規則 -```markdown ---- +| 接頭辞 | 説明 | +|--------|------| +| 01_organized_ | ステップ1の出力（整理済み） | +| 02_slide-design_ | ステップ2の出力（設計書） | +| 03_marp_ | ステップ3の出力（最終成果物） | - +## 反復的な改善 -# [スライドタイトル] - -![w:500px]([画像パス]) - -- [ポイント1] -- [ポイント2] -- [ポイント3] - ---- -``` - -**カラムレイアウト（column-layout）:** - -```markdown ---- - - - -# [スライドタイトル] - -
- -## [左カラム] -- [項目1] -- [項目2] - -
- -
- -## [右カラム] -- [項目1] -- [項目2] - -
- ---- -``` +初回作成後、以下のサイクルで品質を高める。 -### Step 6: レイアウトクラスの適用 +1. スライド設計書を確認し、構成の過不足をチェック +2. 必要に応じて整理済みmdを修正 +3. 再度スライド設計書を生成 +4. 問題なければMarp資料を生成 -スライド設計書で指定されたレイアウトクラスを正確に適用する。 +## トラブルシューティング -| レイアウトクラス | コメント記法 | ページネーション | -|-----------------|-------------|-----------------| -| title | `` | false | -| section | `` | false | -| 基本（指定なし） | コメント不要 | true（デフォルト） | -| image | `` | true | -| content-image | `` | true | -| content-image-right | `` | true | -| content-image-left | `` | true | -| column-layout | `` | true | -| small-text | `` | true | -| no-header | `` | true | - -**幅調整が必要な場合:** -- content-image-right/left では、`content-60` などのクラスを追加して幅を調整できる -- 例: `` - -### Step 7: 画像の配置 - -図表が必要な箇所に画像を配置する。 - -**画像記法:** -```markdown -![w:700px](images/diagram.png) -``` - -**サイズ指定:** -- `w:XXpx`: 幅を指定（例: w:400px, w:700px） -- `h:XXpx`: 高さを指定（例: h:300px） - -**画像が未準備の場合:** -プレースホルダーを使用する。 - -```markdown -![w:700px](https://placehold.jp/300x200.png) - -``` - -または、コメントのみを記載する。 - -```markdown - -``` - -### Step 8: 箇条書きと強調の適用 - -スライド設計書の内容を、適切に箇条書きや強調で表現する。 - -**箇条書き:** -```markdown -- 項目1 -- 項目2 -- 項目3 -``` - -**番号付きリスト:** -```markdown -1. ステップ1 -2. ステップ2 -3. ステップ3 -``` - -**強調（見出しの一部を青色にする）:** -```markdown -## 見出しの一部を**青色のアクセントカラー**にする -``` - -見出し内の `**` で囲まれた部分は青色のアクセントカラーになる。 - -### Step 9: 参考リンクの配置 - -スライド設計書に「参考リンク」がある場合、スライド末尾に配置する。 - -**参考リンクの記法:** -```markdown -参考: [リンクタイトル](URL) -``` - -リンクはスライドの本文の最後に配置し、「参考:」のラベルを付ける。 - -### Step 10: ページネーションの制御 - -適切にページネーションを制御する。 - -- 表紙（title）: `` -- セクション（section）: `` -- その他: デフォルト（true）のまま - -### Step 11: ファイル出力 - -`04_marp_[資料名].md` を出力する。 - -ファイル作成後、以下をユーザーに伝える。 - -- 出力ファイルのパス -- スライド枚数 -- 次のアクション（プレビュー、PDF変換など） -- 画像が未配置の場合はその旨 - -## Marp記法リファレンス - -### Front matter - -```yaml ---- -marp: true -theme: classmethod -paginate: true -title: スライドタイトル -description: スライドの説明 ---- -``` - -### スライド区切り - -```markdown ---- -``` - -3つのハイフンで区切る。 - -### レイアウトクラス指定 - -```markdown - -``` - -コメント形式で指定。`_class` の前にアンダースコアを付ける。 - -### ページネーション制御 - -```markdown - -``` - -個別スライドでページ番号を非表示にする。 - -### 画像サイズ指定 - -```markdown -![w:400px](path/to/image.png) -![h:300px](path/to/image.png) -``` - -### 見出し強調 - -```markdown -## 見出しの一部を**青色**にする -``` - -見出し内の `**` 囲みは青色のアクセントカラーになる。 - -### コードブロック - -````markdown -```typescript -const message: string = "Hello, Marp!"; -console.log(message); -``` -```` - -### 引用 - -```markdown -> 引用文 -``` - -### テーブル - -```markdown -| 列1 | 列2 | 列3 | -|-----|-----|-----| -| A | B | C | -``` - -### カスタムCSS（スライド固有） - -```markdown - - -
-強調したいコンテンツ -
-``` - -## Error Handling - -| エラー | 原因 | 対処 | -|--------|------|------| -| スライド設計書が読めない | パスが間違っている | ユーザーに正しいパスを確認 | -| テンプレートが見つからない | パスが変更された | ユーザーに最新のパスを確認 | -| レイアウトが正しく表示されない | クラス名が間違っている | sample-slide.mdを参照して修正 | -| 画像が表示されない | パスが間違っている | 画像ファイルの配置を確認 | - -## Example Session - -``` -User: /marp-creator @Projects/顧客A/AI活用提案/Marp/03_slide-design_AI活用提案.md - -Claude: -1. スライド設計書を読み込み -2. テンプレート（sample-slide.md）を参照 -3. Front matterを作成 -4. 表紙スライドを生成 -5. 各スライドを設計書に基づいて生成 - - セクションスライド3枚 - - 内容スライド15枚 - - レイアウトクラスを適切に適用 -6. 図表が必要な箇所にプレースホルダーを配置 -7. 04_marp_AI活用提案.md を出力 - -[出力完了メッセージ] -Marp資料を作成しました: Projects/顧客A/AI活用提案/Marp/04_marp_AI活用提案.md - -スライド枚数: 19枚 -使用レイアウト: title, section, 基本, content-image, content-image-right - -次のアクション: -- VSCodeのMarp拡張でプレビュー表示 -- PDF変換: Marp CLIで `marp 04_marp_AI活用提案.md --pdf` -- 画像を配置: images/フォルダに図表を配置し、パスを修正 - -画像が未配置の箇所: -- スライド5: AI活用の全体像図 -- スライド9: 導入プラン工程表 -- スライド12: 効果予測グラフ -``` +**スライド枚数が多すぎる:** +- 内容を絞り込む（整理済みmdを修正） +- 複数のスライドを統合する（設計書で調整） -## Notes +**情報が1スライドに収まらない:** +- スライドを分割する +- 箇条書きを簡潔にする +- small-textレイアウトを検討（最終手段） -- このスキルはMarp資料作成フローのステップ2-B（最終ステップ） -- 出力ファイルが最終成果物となる -- テンプレート（sample-slide.md）を正確に参照し、Marp記法を守る -- レイアウトクラスの指定ミスに注意（`_class` のアンダースコア、コメント記法） -- 画像は後から差し替え可能。プレースホルダーやコメントで位置を明示する -- 生成後、VSCodeのMarp拡張でプレビュー確認を推奨 +**レイアウトが思い通りにならない:** +- 最新のサンプルスライドを取得して確認（[get-sample-slide.md](get-sample-slide.md)） +- `_class` のコメント記法が正しいか確認 diff --git a/.claude/skills/marp-creator/build-marp.md b/.claude/skills/marp-creator/build-marp.md new file mode 100644 index 0000000..d05c5d2 --- /dev/null +++ b/.claude/skills/marp-creator/build-marp.md @@ -0,0 +1,414 @@ +# Marp資料作成（ステップ3） + +スライド設計書（slide-designの出力）から、Marp形式のスライド資料を生成する。このスキルの出力が最終成果物となる。 + +## 入力 + +ユーザーから以下の情報を受け取る。 + +| 項目 | 説明 | 形式 | +|------|------|------| +| スライド設計書 | slide-designの出力 | `02_slide-design_[資料名].md` | +| 画像ファイル | 使用する画像（任意） | パスまたは配置予定の説明 | + +出力先は入力ファイルと同じフォルダに配置する。 + +## 出力 + +`03_marp_[資料名].md` を生成する。 + +### ファイル構造 + +```markdown +--- +marp: true +theme: classmethod +paginate: true +title: [資料タイトル] +description: [資料の説明] +--- + + + + +![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) + +# [資料タイトル] + +[日付や執筆者情報] + +--- + + + + +## [セクション名] +[セクションの説明文] + +--- + +# [スライドタイトル] + +[本文や箇条書き] + +--- + +[以下、全スライドを記載] +``` + +## ワークフロー + +### Step 1: スライド設計書の読み込み + +`02_slide-design_[資料名].md` を読み込み、以下を把握する。 + +- 資料タイトルと説明 +- スライド枚数と各スライドの構成 +- 使用するレイアウトクラス +- 図表の配置位置 + +### Step 2: サンプルスライドの取得 + +以下のコマンドで最新のサンプルスライドを取得する。 + +```bash +curl -s https://raw.githubusercontent.com/classmethod/classmethod-marp-theme/main/sample-slide.md +``` + +取得したサンプルから以下を確認する。 + +- Front matter の記述方法 +- 各レイアウトクラスの使用例 +- 画像配置の記法 +- コメント記法（``） + +詳細は [get-sample-slide.md](get-sample-slide.md) を参照。 + +### Step 3: Front matter の作成 + +ファイル冒頭のメタデータを作成する。 + +```yaml +--- +marp: true +theme: classmethod +paginate: true +title: [資料タイトル] +description: [資料の説明（1〜2文）] +--- +``` + +### Step 4: 表紙スライドの作成 + +表紙（titleレイアウト）を作成する。 + +```markdown + + + +![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) + +# [資料タイトル] + +[日付や執筆者情報] + +--- +``` + +**注意点:** +- `_class` の前にアンダースコアを付ける +- ページネーションは false に設定 +- ロゴのURLは固定値を使用 + +### Step 5: 各スライドの生成 + +スライド設計書に基づき、各スライドを生成する。 + +**基本的なスライド記法:** + +```markdown +--- + +# [スライドタイトル] + +[本文や箇条書き] + +--- +``` + +**セクションスライドの記法:** + +```markdown +--- + + + + +## [セクション名] +[説明文] + +--- +``` + +**図表を含むスライド（content-image）:** + +```markdown +--- + + + +# [スライドタイトル] + +![w:700px]([画像パスまたはプレースホルダー]) + +[キャプションや説明文] + +--- +``` + +**横並びレイアウト（content-image-right）:** + +```markdown +--- + + + +# [スライドタイトル] + +![w:500px]([画像パス]) + +- [ポイント1] +- [ポイント2] +- [ポイント3] + +--- +``` + +**カラムレイアウト（column-layout）:** + +```markdown +--- + + + +# [スライドタイトル] + +
+ +## [左カラム] +- [項目1] +- [項目2] + +
+ +
+ +## [右カラム] +- [項目1] +- [項目2] + +
+ +--- +``` + +### Step 6: レイアウトクラスの適用 + +スライド設計書で指定されたレイアウトクラスを正確に適用する。 + +| レイアウトクラス | コメント記法 | ページネーション | +|-----------------|-------------|-----------------| +| title | `` | false | +| section | `` | false | +| 基本（指定なし） | コメント不要 | true（デフォルト） | +| image | `` | true | +| content-image | `` | true | +| content-image-right | `` | true | +| content-image-left | `` | true | +| column-layout | `` | true | +| small-text | `` | true | +| no-header | `` | true | + +**幅調整が必要な場合:** +- content-image-right/left では、`content-60` などのクラスを追加して幅を調整できる +- 例: `` + +### Step 7: 画像の配置 + +図表が必要な箇所に画像を配置する。 + +**画像記法:** +```markdown +![w:700px](images/diagram.png) +``` + +**サイズ指定:** +- `w:XXpx`: 幅を指定（例: w:400px, w:700px） +- `h:XXpx`: 高さを指定（例: h:300px） + +**画像が未準備の場合:** +プレースホルダーを使用する。 + +```markdown +![w:700px](https://placehold.jp/300x200.png) + +``` + +または、コメントのみを記載する。 + +```markdown + +``` + +### Step 8: 箇条書きと強調の適用 + +スライド設計書の内容を、適切に箇条書きや強調で表現する。 + +**箇条書き:** +```markdown +- 項目1 +- 項目2 +- 項目3 +``` + +**番号付きリスト:** +```markdown +1. ステップ1 +2. ステップ2 +3. ステップ3 +``` + +**強調（見出しの一部を青色にする）:** +```markdown +## 見出しの一部を**青色のアクセントカラー**にする +``` + +見出し内の `**` で囲まれた部分は青色のアクセントカラーになる。 + +### Step 9: 参考リンクの配置 + +スライド設計書に「参考リンク」がある場合、スライド末尾に配置する。 + +**参考リンクの記法:** +```markdown +参考: [リンクタイトル](URL) +``` + +リンクはスライドの本文の最後に配置し、「参考:」のラベルを付ける。 + +### Step 10: ページネーションの制御 + +適切にページネーションを制御する。 + +- 表紙（title）: `` +- セクション（section）: `` +- その他: デフォルト（true）のまま + +### Step 11: ファイル出力 + +`03_marp_[資料名].md` を出力する。 + +ファイル作成後、以下をユーザーに伝える。 + +- 出力ファイルのパス +- スライド枚数 +- 次のアクション（プレビュー、PDF変換など） +- 画像が未配置の場合はその旨 + +## Marp記法リファレンス + +### Front matter + +```yaml +--- +marp: true +theme: classmethod +paginate: true +title: スライドタイトル +description: スライドの説明 +--- +``` + +### スライド区切り + +```markdown +--- +``` + +3つのハイフンで区切る。 + +### レイアウトクラス指定 + +```markdown + +``` + +コメント形式で指定。`_class` の前にアンダースコアを付ける。 + +### ページネーション制御 + +```markdown + +``` + +個別スライドでページ番号を非表示にする。 + +### 画像サイズ指定 + +```markdown +![w:400px](path/to/image.png) +![h:300px](path/to/image.png) +``` + +### 見出し強調 + +```markdown +## 見出しの一部を**青色**にする +``` + +見出し内の `**` 囲みは青色のアクセントカラーになる。 + +### コードブロック + +````markdown +```typescript +const message: string = "Hello, Marp!"; +console.log(message); +``` +```` + +### 引用 + +```markdown +> 引用文 +``` + +### テーブル + +```markdown +| 列1 | 列2 | 列3 | +|-----|-----|-----| +| A | B | C | +``` + +### カスタムCSS（スライド固有） + +```markdown + + +
+強調したいコンテンツ +
+``` + +## エラー対処 + +| エラー | 原因 | 対処 | +|--------|------|------| +| スライド設計書が読めない | パスが間違っている | ユーザーに正しいパスを確認 | +| レイアウトが正しく表示されない | クラス名が間違っている | 最新のサンプルスライドを取得して確認 | +| 画像が表示されない | パスが間違っている | 画像ファイルの配置を確認 | diff --git a/.claude/skills/marp-creator/get-sample-slide.md b/.claude/skills/marp-creator/get-sample-slide.md new file mode 100644 index 0000000..aad025b --- /dev/null +++ b/.claude/skills/marp-creator/get-sample-slide.md @@ -0,0 +1,30 @@ +# サンプルスライドの取得 + +サンプルスライドはアップデートにより変更される可能性があるため、必ず以下のコマンドで最新版を取得する。 + +## 取得コマンド + +```bash +curl -s https://raw.githubusercontent.com/classmethod/classmethod-marp-theme/main/sample-slide.md +``` + +このコマンドを実行すると、以下の情報を含むサンプルスライドが取得できる。 + +- 各レイアウトクラスの使用例 +- Front matterの記述方法 +- 画像配置の記法 +- コメント記法（``） +- カラムレイアウトやコンテンツ幅調整の例 + +## 取得タイミング + +以下の場面でサンプルスライドを取得する。 + +- Marp資料を作成する前（build-marp実行時） +- レイアウトの使い方を確認したいとき +- 新しいレイアウトクラスの記法を調べたいとき + +## 注意事項 + +- ローカルにキャッシュされたsample-slide.mdは古い可能性があるため、常に上記コマンドで最新版を取得する +- 取得したサンプルを参照しながらMarpファイルを作成する diff --git a/.claude/skills/organize-content/SKILL.md b/.claude/skills/marp-creator/organize-content.md similarity index 59% rename from .claude/skills/organize-content/SKILL.md rename to .claude/skills/marp-creator/organize-content.md index 9113792..e4f5458 100644 --- a/.claude/skills/organize-content/SKILL.md +++ b/.claude/skills/marp-creator/organize-content.md @@ -1,26 +1,8 @@ ---- -name: organize-content -description: メモや箇条書きを構造化されたMarkdownに整理するスキル。Marp資料作成フローのステップ1として使用する。提案書や勉強会資料の内容整理に適している。 -version: 1.0.0 ---- - -# Content Organizer Skill +# 内容整理（ステップ1） 散在するメモや箇条書きを、論理的に整理された構造化Markdownファイルに変換する。この段階ではMarpの記法やスライド枚数を意識せず、伝えたい内容の構造化に集中する。 -## Overview - -資料作成の最初のステップとして、以下を実現する。 - -- メモや箇条書きから主要トピックを抽出 -- トピックを論理的な順序に並び替え -- 重複内容の統合 -- 見出しレベルの適正化 -- 不足している要素の指摘 - -出力された整理済みファイルは、後続のスライド化フェーズ（SKILL: slide-design, marp-creator）で使用する。 - -## Input +## 入力 ユーザーから以下の情報を受け取る。 @@ -29,19 +11,13 @@ version: 1.0.0 | メモファイル | 整理対象の内容 | Markdownファイルまたはテキスト | | 資料の目的 | 提案書、勉強会、説明資料など | テキスト | | 対象者 | 顧客、社内メンバー、エンジニアなど | テキスト | -| 出力先 | ファイルの配置場所 | パス（例：Projects/[案件名]/Marp/）※ご自身のフォルダ構成に合わせて変更 | - -出力先が指定されていない場合は、ユーザーに確認する。 - -## Output +| 出力先 | ファイルの配置場所（任意） | パス | -以下の構造を持つMarkdownファイルを生成する。 +出力先が指定されていない場合は、入力ファイルと同じフォルダに出力する。 -### ファイル名規則 +## 出力 -`02_organized_[資料名].md` - -接頭辞 `02_` により、このファイルがステップ1の成果物であることを明示する。 +`01_organized_[資料名].md` を生成する。 ### ファイル構造 @@ -91,10 +67,10 @@ version: 1.0.0 - 見出しレベルはh1〜h3を使用（h4以降は原則使わない） - 箇条書きは3項目以上の並列な内容で使用 - 2項目程度なら「AとB」のように地の文で記載 -- 図表の配置位置を `**図表:**` で明示（実際の画像は後で差し込む想定） +- 図表の配置位置を `**図表:**` で明示 - セクション間は `---` で区切る -## Workflow +## ワークフロー ### Step 1: 入力の確認 @@ -102,9 +78,8 @@ version: 1.0.0 - 資料の目的（提案書、勉強会資料、説明資料など） - 対象者（顧客、社内メンバー、技術者レベルなど） -- 出力先のパス -これらが明示されていない場合は、AskUserQuestionツールで確認する。 +資料の目的と対象者が明示されていない場合は、AskUserQuestionツールで確認する。出力先は入力ファイルと同じフォルダに配置する。 ### Step 2: トピックの抽出 @@ -118,7 +93,7 @@ version: 1.0.0 ### Step 3: 論理的な並び替え -トピックを適切な順序に配置する。一般的な構成パターンは以下の通り。 +トピックを適切な順序に配置する。 **提案書の場合:** 1. 現状の課題 @@ -139,7 +114,7 @@ version: 1.0.0 3. 使い方・運用方法 4. 補足情報 -ただし、これらはあくまで参考例であり、資料の目的に応じて柔軟に構成を調整する。 +資料の目的に応じて柔軟に構成を調整する。 ### Step 4: 見出しレベルの調整 @@ -153,8 +128,6 @@ h4以降は使用しない。階層が深くなる場合は、トピックの分 ### Step 5: 箇条書きと地の文の使い分け -CLAUDE.mdのガイドラインに従い、適切に表現を選択する。 - **箇条書きを使う:** - 3つ以上の並列な項目 - 手順やステップ @@ -178,18 +151,17 @@ CLAUDE.mdのガイドラインに従い、適切に表現を選択する。 ### Step 7: ファイル出力 -指定された出力先に `02_organized_[資料名].md` を作成する。 +指定された出力先に `01_organized_[資料名].md` を作成する。 ファイル作成後、以下をユーザーに伝える。 - 出力ファイルのパス - 主要なトピック構成の概要 - 追加で検討が必要な項目（あれば） +- 次のステップ（slide-design）への案内 ## 判断基準 -整理時の判断基準を以下に示す。 - | 項目 | 基準 | |------|------| | トピックの粒度 | 1トピックで5〜10分程度説明できる内容 | @@ -198,45 +170,10 @@ CLAUDE.mdのガイドラインに従い、適切に表現を選択する。 | 1段落の長さ | 3〜5文程度。長い場合は段落を分ける | | 図表の必要性 | 言葉だけで説明しにくい箇所には図表を推奨 | -## Error Handling +## エラー対処 | エラー | 原因 | 対処 | |--------|------|------| | 入力ファイルが読めない | パスが間違っている | ユーザーに正しいパスを確認 | | 資料の目的が不明 | 情報が不足している | AskUserQuestionで確認 | -| 出力先が指定されていない | パラメータ不足 | ユーザーに出力先を確認 | | トピックが抽出できない | メモが断片的すぎる | ユーザーに追加情報を依頼 | - -## Example Session - -``` -User: /organize-content @Projects/顧客A/AI活用提案/Marp/01_memo_AI活用提案.md - -Claude: -1. メモファイルを読み込み -2. 資料の目的と対象者を確認（不明な場合は質問） -3. トピックを抽出（現状課題、AI活用案、導入効果など） -4. 論理的な順序に並び替え -5. 見出しレベルを調整 -6. 箇条書きと地の文を適切に使い分け -7. 02_organized_AI活用提案.md を出力 - -[出力完了メッセージ] -整理済みファイルを作成しました: Projects/顧客A/AI活用提案/Marp/02_organized_AI活用提案.md - -主要な構成: -- 現状の課題 -- AI活用の提案 -- 具体的な導入プラン -- 期待される効果 - -次のステップとして、スライド設計書の作成（/slide-design）を実行できます。 -``` - -## Notes - -- このスキルはMarp資料作成フローの第1ステップ -- 出力ファイルは次のステップ（slide-design）の入力となる -- CLAUDE.mdのガイドラインに従い、自然な文体を心がける -- 強調表現（太字）��本当に注目してほしい箇所のみに使用 -- AIらしい表現（「様々な」「活用する」など）は避ける diff --git a/.claude/skills/marp-creator/sample-slide.md b/.claude/skills/marp-creator/sample-slide.md deleted file mode 100644 index 1ed9213..0000000 --- a/.claude/skills/marp-creator/sample-slide.md +++ /dev/null @@ -1,375 +0,0 @@ ---- -marp: true -theme: classmethod -paginate: true -title: サンプルスライド -description: サンプルスライドです。 ---- - - - - - - -![classmethod-logo w:400px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) - -# このページはタイトルに適しています - -20XX/XX/XX ここには日付や執筆者の名前など -必要な情報を入力して下さい - ---- - - - - -## レイアウト：中扉・セクション -テキストは左寄せの中央に配置、背景色はグレーになります - ---- - -# 基本のレイアウト - -基本のレイアウトを使用する際は必ずスライドタイトルに h1 を利用してください - -# 最初のh1以外でもh1を使うことができます - -スライドタイトルの下に一本の線が引かれるのでタイトルと内容がハッキリと区別できます - ---- - -# 通常のマークダウン記法 - -通常のマークダウン記法はそのまま利用することができます。 - -# 見出し - -**太字**, *斜体*, ***太字斜体***, ~~取り消し線~~, `インライン`, [リンク](https://example.com) - - -- リスト -1. 番号付きリスト - - -> 引用 - - -```ts -// コードブロック -console.log("Hello, World!"); -``` - -| テーブル | 列2 | 列3 | -| -------- | --- | --- | -| A | B | C | - ---- -# 通常のMarp記法(よく使うものを抜粋) - -## 見出しの一部を**青色のアクセントカラー**にする - -```md -## 見出しの一部を**青色のアクセントカラー**にする -見出し内で**に囲まれた部分は青色のアクセントカラーになります -``` - -画像の横幅・縦幅を変える - -![w:100](https://placehold.jp/150x150.png) - -```md -![w:100](https://placehold.jp/150x150.png) -w:100 幅100pxで表示 -h:100 縦100pxで表示 -``` - ---- - - - -# ヘッダーなしレイアウト（no-header） - -このスライドではヘッダー部分が非表示になります -フルスクリーンでコンテンツを表示したい場合に便利です - ---- - - - -# タイトル・図のみ - -![w:800px](https://placehold.jp/300x200.png) - ---- - - - -# タイトル・図のみ(影付き) - -![w:800px](https://placehold.jp/ffffff/8c8c8c/300x200.png) - ---- - - - -# タイトル・図のみ(複数) - -![w:500px](https://placehold.jp/300x200.png) -![w:500px](https://placehold.jp/300x200.png) - ---- - - - - -# レイアウト：タイトル・図・テキスト - -![w:700px](https://placehold.jp/300x200.png) - -ここにテキストを入れてください。 - ---- - - - -# レイアウト：タイトル・図・テキスト(複数) - -![w:500px](https://placehold.jp/300x200.png) -![w:500px](https://placehold.jp/300x200.png) - -ここにテキストを入れてください - ---- - - - - - - -# 文章と図を横並びに表現(図が右側) - -![w:500px](https://placehold.jp/300x200.png) -- content-image-rightクラスは、右側に画像を配置するレイアウトを提供 -- デフォルトでは右側50%の幅になります -- `content-xx`で左側のテキスト領域の幅を調整できます - - content-30: テキスト領域30% - - content-40: テキスト領域40% - - content-60: テキスト領域60% - - content-70: テキスト領域70% - - content-80: テキスト領域80% - ---- - - - - -# 文章と図を横並びに表現(図が左側) - -![w:400px](https://placehold.jp/300x200.png) -![w:400px](https://placehold.jp/300x200.png) - -- content-image-leftクラスは、左側に画像を配置するレイアウトを提供 -- デフォルトでは左側50%の幅になります -- `content-xx`で左側のテキスト領域の幅を調整できます - - content-30: テキスト領域30% - - content-40: テキスト領域40% - - content-60: テキスト領域60% - - content-70: テキスト領域70% - - content-80: テキスト領域80% - - ---- - - - -# 横並びレイアウト（column-layout） - -
- -## 左カラム -- ポイント1 -- ポイント2 -- ポイント3 -
- -
- -## 中央カラム -1. 手順1 -2. 手順2 -3. 手順3 -
- -
- -## 右カラム -1. 方法1 -2. 方法2 -3. 方法3 -
- ---- - - - - - - - -# テキストの中央揃え（text-center） - - -# 見出しレベル1のテキスト h1-text-center -## 見出しレベル2のテキスト h2-text-center -### 見出しレベル3のテキスト h3-text-center -#### 見出しレベル4のテキスト h4-text-center -##### 見出しレベル5のテキスト h5-text-center -###### 見出しレベル6のテキスト h6-text-center -通常のテキスト text-center - ---- - - - -# スライド全体のテキストの縦方向中央揃え（align-center） - - -# 見出しレベル1のテキスト -## 見出しレベル2のテキスト -### 見出しレベル3のテキスト - ---- - - - - - - - -# テキストの色変更（red） - - -# 見出しレベル1のテキスト h1-text-red -## 見出しレベル2のテキスト h2-text-red -### 見出しレベル3のテキスト h3-text-red -#### 見出しレベル4のテキスト h4-text-red -##### 見出しレベル5のテキスト h5-text-red -###### 見出しレベル6のテキスト h6-text-red -通常のテキスト text-red - - ---- - - - -# テキストの色変更（blue） - -## 見出しは通常色のまま - -text-blueクラスを使用すると、段落テキストのみが青色になります。見出しは元の色を保持します。 - ---- - -# コードブロック - -```ts -type User = { - id: number; - name: string; - email: string; - isActive: boolean; -}; - -const users: User[] = [ - { id: 1, name: "山田太郎", email: "taro@example.com", isActive: true }, - { id: 2, name: "鈴木花子", email: "hanako@example.com", isActive: false }, - { id: 3, name: "佐藤次郎", email: "jiro@example.com", isActive: true }, -]; - -function printActiveUsers(userList: User[]) { - console.log("アクティブなユーザー一覧:"); - userList - .filter(user => user.isActive) - .forEach(user => { - console.log(`ID: ${user.id}, 名前: ${user.name}, メール: ${user.email}`); - }); -} - -function activateUser(userList: User[], id: number) { - const user = userList.find(u => u.id === id); - if (user) { - user.isActive = true; - console.log(`${user.name} をアクティブにしました。`); - } else { - console.log("該当ユーザーが見つかりません。"); - } -} - -printActiveUsers(users); -activateUser(users, 2); -printActiveUsers(users); -``` - -コードの大きさに合わせて自動でコードブロック内のテキストが小さくなります - ---- -# その他 - -## 数式の表示 -$$ -\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n -$$ - - -## 折りたたみ -
-詳細を開く -詳細内容をここに記載します -
- - -## カスタムCSSの適用 - - -
-このスライド専用のカスタムスタイルを適用できます -
- ---- - - - -# ページネーション制御 - -このスライドはページ番号がスキップされます（`_paginate: skip`）。 -このスライドはページ番号が表示されなくなります（`_paginate: false`）。 - -目次や表紙などでページ番号を表示したくない場合に使用します - ---- - - - -# 文字を小さくする - -`small-text` クラスを使用すると、スライド全体のフォントサイズが20%程度縮小されます。 - -情報量が多いスライドや、通常のサイズでは収まりきらない内容を表示する際に便利です。 - ---- - - - -![w:450px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg) - -# ぜひお試しください！ \ No newline at end of file diff --git a/.claude/skills/slide-design/SKILL.md b/.claude/skills/marp-creator/slide-design.md similarity index 61% rename from .claude/skills/slide-design/SKILL.md rename to .claude/skills/marp-creator/slide-design.md index bdabcb2..a43b1cc 100644 --- a/.claude/skills/slide-design/SKILL.md +++ b/.claude/skills/marp-creator/slide-design.md @@ -1,52 +1,22 @@ ---- -name: slide-design -description: 整理済みMarkdownからスライド設計書を作成するスキル。Marp資料作成フローのステップ2-Aとして使用する。各スライドの構成、レイアウト、内容を定義する。 -version: 1.0.0 ---- - -# Slide Design Skill +# スライド設計（ステップ2） 整理済みMarkdown（organize-contentの出力）から、スライド設計書を作成する。この設計書は、最終的なMarp資料を生成する前の中間成果物であり、スライド構成を事前確認できる。 -## Overview - -以下を実現する。 - -- 整理済み内容を適切なスライド枚数に分割 -- 各スライドのタイトルと使用レイアウトを決定 -- 1スライドあたりの情報量を調整 -- 図表の配置位置を明示 -- スライド全体の流れを可視化 - -出力されたスライド設計書は、後続のMarp資料作成（SKILL: marp-creator）で使用する。 - -## Input +## 入力 ユーザーから以下の情報を受け取る。 | 項目 | 説明 | 形式 | |------|------|------| -| 整理済みファイル | organize-contentの出力 | `02_organized_[資料名].md` | +| 整理済みファイル | organize-contentの出力 | `01_organized_[資料名].md` | | スライド枚数の目安 | 希望するスライド枚数（任意） | 数値（例：20枚程度） | | 発表時間 | プレゼン時間（任意） | 分単位（例：15分） | -スライド枚数や発表時間が指定されていない場合は、内容から適切な枚数を判断する。 - -**目安:** -- 5分プレゼン：5〜8枚 -- 10分プレゼン：10〜15枚 -- 15分プレゼン：15〜20枚 -- 30分プレゼン：20〜30枚 - -## Output - -以下の構造を持つスライド設計書を生成する。 +スライド枚数や発表時間が指定されていない場合は、内容から適切な枚数を判断する。出力先は入力ファイルと同じフォルダに配置する。 -### ファイル名規則 +## 出力 -`03_slide-design_[資料名].md` - -接頭辞 `03_` により、このファイルがステップ2-Aの成果物であることを明示する。 +`02_slide-design_[資料名].md` を生成する。 ### ファイル構造 @@ -110,31 +80,10 @@ version: 1.0.0 --- -### スライド4: [図表を含むタイトル] - -**レイアウト:** content-image - -**内容:** -- タイトル: [図表を含むタイトル] -- 図表: [○○の図を配置] -- 説明文: [図表の説明] - ---- - [以下、全スライドの詳細を記載] --- -### スライドN: （裏表紙） - -**レイアウト:** all-text-center align-center -**ページネーション:** false - -**内容:** -- ロゴ: ClassMethodロゴ - ---- - ## レビューポイント 設計書確認時に以下を検討してください。 @@ -144,24 +93,13 @@ version: 1.0.0 - [ ] 図表の配置は適切か - [ ] 全体の流れにメリハリがあるか - [ ] 想定時間内に収まるスライド枚数か - ---- - -## 修正が必要な場合 - -以下の調整を検討してください。 - -- 情報量が多すぎる → スライドを分割 -- スライド枚数が多すぎる → 内容を統合 -- 図表が不足 → 視覚的な要素を追加 -- メリハリがない → セクションスライドを追加 ``` -## Workflow +## ワークフロー ### Step 1: 整理済みファイルの読み込み -`02_organized_[資料名].md` を読み込み、以下を把握する。 +`01_organized_[資料名].md` を読み込み、以下を把握する。 - 資料の目的と対象者 - メイントピックの数と内容 @@ -231,7 +169,7 @@ version: 1.0.0 - 図表のサイズ（幅の目安：w:400px, w:700px など） - 図表とテキストの配置関係 -図表の実際のファイルは、Marp資料作成時に配置する。この段階では「○○の図を配置」のように指示するだけでよい。 +図表の実際のファイルは、Marp資料作成時に配置する。 ### Step 7: 全体の流れ確認 @@ -244,74 +182,29 @@ version: 1.0.0 ### Step 8: スライド設計書の出力 -`03_slide-design_[資料名].md` を出力する。 +`02_slide-design_[資料名].md` を出力する。 ファイル作成後、以下をユーザーに伝える。 - 出力ファイルのパス - 想定スライド枚数 - レビューポイント -- 次のステップ（marp-creator）への案内 +- 次のステップ（build-marp）への案内 ## 判断基準 -スライド設計時の判断基準を以下に示す。 - | 項目 | 基準 | |------|------| | 1スライドの情報量 | 箇条書き3〜5項目、または2〜3文の説明 | | スライド枚数 | 発表時間（分）× 1〜1.5枚 | -| セクションスライド | 3〜5スライドごと、または大きなトピックの切り替わ�� | +| セクションスライド | 3〜5スライドごと、または大きなトピックの切り替わり | | 図表専用スライド | 図表が主要な説明要素の場合は専用スライドにする | | レイアウト変更 | 単調にならないよう、5〜7スライドごとにレイアウトを変える | -## Error Handling +## エラー対処 | エラー | 原因 | 対処 | |--------|------|------| | 整理済みファイルが読めない | パスが間違っている | ユーザーに正しいパスを確認 | | 内容が少なすぎる | 整理済みファイルの内容不足 | organize-contentの再実行を提案 | | スライド枚数が適切に決まらない | 発表時間や内容量が不明 | ユーザーに希望枚数を確認 | - -## Example Session - -``` -User: /slide-design @Projects/顧客A/AI活用提案/Marp/02_organized_AI活用提案.md -15分のプレゼンを想定しています - -Claude: -1. 整理済みファイルを読み込み -2. 15分 → 15〜20枚を目安にスライドを設計 -3. 内容を分析（4つのメイントピック、図表3箇所） -4. スライドに分割（表紙1枚、セクション3枚、内容15枚、裏表紙1枚、計20枚） -5. 各スライドのレイアウトを選択 -6. 情報量を調整 -7. 03_slide-design_AI活用提案.md を出力 - -[出力完了メッセージ] -スライド設計書を作成しました: Projects/顧客A/AI活用提案/Marp/03_slide-design_AI活用提案.md - -想定スライド枚数: 20枚 -想定発表時間: 15分 - -スライド構成: -- 表紙 -- 現状の課題（セクション + 内容3枚） -- AI活用の提案（セクション + 内容5枚） -- 具体的な導入プラン（セクション + 内容4枚） -- 期待される効果（内容2枚） -- まとめ（1枚） -- 裏表紙 - -レビューポイントを確認の上、問題なければ次のステップ（/marp-creator）でMarp資料を生成できます。 -``` - -## Notes - -- このスキルはMarp資料作成フローのステップ2-A -- 出力ファイルは次のステップ（marp-creator）の入力となる -- スライド設計書の段階で構成を確認し、必要に応じて修正できる -- レイアウトの選択により、視覚的なメリハリを付ける -- 1スライド1メッセージを基本とし、情報を詰め込みすぎない -- 最終スライドには裏表紙（ロゴのみ中央配置）を追加する -- 02_organizedに参考リンクがある場合は、該当スライドの「参考リンク」欄に引き継ぐ diff --git a/workflow-README.md b/workflow-README.md deleted file mode 100644 index ca51a02..0000000 --- a/workflow-README.md +++ /dev/null @@ -1,276 +0,0 @@ -# Marp資料作成フロー - -Marpで提案書や勉強会資料を効率的に作成するためのワークフローと、対応するClaude CodeのSKILLSの使い方を説明する。 - -> **Note:** このフローで使用するフォルダ構成やパスは一例です。ご自身のプロジェクト構成に合わせて適宜変更してください。 - -## 概要 - -資料作成を段階的に進めることで、内容の質とスライドの視覚効果を両立させる。いきなりMarp形式で書き始めるのではなく、内容整理とスライド化を分離する。 - -**対象となる資料:** -- 提案書（顧客向けプレゼン） -- 勉強会資料（社内・社外） -- 説明資料（技術解説、製品紹介など） - -**主な利点:** -- 内容の論理性とスライドの見た目を分けて最適化できる -- 中間成果物により、全体構成を事前確認できる -- 各工程でフィードバックを受けやすい -- 段階的な確認で手戻りを減らせる - -## フロー全体像 - -3つのステップで資料を作成する。 - -``` -メモ・要件 - ↓ -[ステップ1] 内容整理 - ↓ -02_organized_*.md（整理済み内容） - ↓ -[ステップ2-A] スライド設計 - ↓ -03_slide-design_*.md（スライド設計書） - ↓ -[ステップ2-B] Marp資料作成 - ↓ -04_marp_*.md（最終成果物） -``` - -### ステップ1: 内容整理 - -メモや箇条書きを構造化されたMarkdownに整理する。Marpの記法やスライド枚数は意識せず、伝えたい内容の構造化に集中する。 - -**使用SKILL:** `organize-content` -**入力:** メモファイル、資料の目的、対象者 -**出力:** `02_organized_[資料名].md` - -### ステップ2-A: スライド設計 - -整理した内容をスライドに分割し、各スライドの構成を定義する。この段階でレイアウトや情報量を調整する。 - -**使用SKILL:** `slide-design` -**入力:** `02_organized_[資料名].md`、発表時間 -**出力:** `03_slide-design_[資料名].md` - -### ステップ2-B: Marp資料作成 - -スライド設計書に基づき、Marp形式の最終資料を生成する。 - -**使用SKILL:** `marp-creator` -**入力:** `03_slide-design_[資料名].md` -**出力:** `04_marp_[資料名].md` - -## フォルダ構成（参考例） - -以下は資料を管理するフォルダ構成の一例。案件と社内タスクで分類し、テーマと資料形式で整理している。 - -``` -Projects/ - └── [案件名]/ - └── [テーマ]/ - └── Marp/ - ├── 01_memo_[資料名].md # メモ・要件 - ├── 02_organized_[資料名].md # 整理済み内容 - ├── 03_slide-design_[資料名].md # スライド設計書 - ├── 04_marp_[資料名].md # 最終成果物 - └── images/ # 使用する画像 - -Work/ - └── [タスク名]/ - └── [テーマ]/ - └── Marp/ - ├── 01_memo_[資料名].md - ├── 02_organized_[資料名].md - ├── 03_slide-design_[資料名].md - ├── 04_marp_[資料名].md - └── images/ -``` - -**階層の説明:** -- レベル1: 案件名またはタスク名 -- レベル2: テーマ（提案内容や活動テーマ） -- レベル3: 資料形式（Marp、将来的にWord、PowerPointなども） - -**具体例:** -``` -Projects/顧客A案件/セキュリティ提案/Marp/ -Work/AWS勉強会/Lambda最新機能/Marp/ -``` - -この構成により、1つの案件で複数の提案テーマがある場合や、将来的に異なる資料形式を使う場合にも対応できる。 - -### ファイル命名規則 - -接頭辞により作業段階を明示する。 - -| 接頭辞 | 説明 | 例 | -|--------|------|-----| -| 01_memo_ | 最初のメモや要件 | 01_memo_AI活用提案.md | -| 02_organized_ | ステップ1の出力（整理済み） | 02_organized_AI活用提案.md | -| 03_slide-design_ | ステップ2-Aの出力（設計書） | 03_slide-design_AI活用提案.md | -| 04_marp_ | ステップ2-Bの出力（最終成果物） | 04_marp_AI活用提案.md | - -## SKILLSの使い方 - -### organize-content - -メモや箇条書きを整理済みMarkdownに変換する。 - -**実行方法:** -``` -/organize-content -``` - -**必要な情報:** -- メモファイルのパス -- 資料の目的（提案書、勉強会など） -- 対象者（顧客、社内メンバーなど） -- 出力先（任意のMarp作業フォルダ） - -**実行例:** -``` -User: /organize-content @Projects/顧客A/AI活用提案/Marp/01_memo_AI活用提案.md - -Claude: → 02_organized_AI活用提案.md を出力 -``` - -### slide-design - -整理済み内容からスライド設計書を作成する。 - -**実行方法:** -``` -/slide-design -``` - -**必要な情報:** -- 整理済みファイルのパス（02_organized_*.md） -- 発表時間（任意、例：15分） -- スライド枚数の目安（任意、例：20枚程度） - -**発表時間とスライド枚数の目安:** -- 5分プレゼン：5〜8枚 -- 10分プレゼン：10〜15枚 -- 15分プレゼン：15〜20枚 -- 30分プレゼン：20〜30枚 - -**実行例:** -``` -User: /slide-design @Projects/顧客A/AI活用提案/Marp/02_organized_AI活用提案.md -15分のプレゼンを想定しています - -Claude: → 03_slide-design_AI活用提案.md を出力（想定19枚） -``` - -**設計書確認後の調整:** -スライド設計書を確認し、必要に応じて以下を調整する。 -- 情報量が多すぎる → スライドを分割 -- スライド枚数が多すぎる → 内容を統合 -- 図表が不足 → 視覚的な要素を追加 -- メリハリがない → セクションスライドを追加 - -### marp-creator - -スライド設計書からMarp資料を生成する。 - -**実行方法:** -``` -/marp-creator -``` - -**必要な情報:** -- スライド設計書のパス（03_slide-design_*.md） -- 画像ファイル（任意、後から差し替え可能） - -**実行例:** -``` -User: /marp-creator @Projects/顧客A/AI活用提案/Marp/03_slide-design_AI活用提案.md - -Claude: → 04_marp_AI活用提案.md を出力 -``` - -**生成後のアクション:** -- VSCodeのMarp拡張でプレビュー表示 -- PDF変換: `marp 04_marp_AI活用提案.md --pdf` -- 画像を配置: images/フォルダに図表を配置し、パスを修正 - -## Marpテンプレート - -`/sample-slide.md` に、使用可能なレイアウトの一覧とサンプルがある。 - -### 主要なレイアウトクラス - -| レイアウトクラス | 用途 | -|-----------------|------| -| title | 表紙 | -| section | セクション区切り | -| （指定なし）基本 | テキスト中心、箇条書きが主体 | -| image | 図表のみを大きく表示 | -| content-image | 図表とキャプション | -| content-image-right | 文章と図表を横並び（図が右） | -| content-image-left | 文章と図表を横並び（図が左） | -| column-layout | 複数項目を横並び | -| small-text | 情報量が多い場合の文字縮小 | - -詳細はsample-slide.mdを参照。 - -## 反復的な改善 - -初回作成後、以下のサイクルで品質を高める。 - -1. スライド設計書を確認し、構成の過不足をチェック -2. 必要に応じてステップ1の整理済みmdを���正 -3. 再度スライド設計書を生成 -4. 問題なければMarp資料を生成 - -各工程で確認とフィードバックを受けることで、手戻りを最小限にできる。 - -## トラブルシューティング - -### スライド枚数が多すぎる - -- 内容を絞り込む（整理済みmdを修正） -- 複数のスライドを統合する（設計書で調整） -- 発表時間を見直す - -### 情報が1スライドに収まらない - -- スライドを分割する（設計書で調整） -- 箇条書きを簡潔にする -- small-textレイアウトを検討（最終手段） - -### 図表が多すぎて作業が進まない - -- 重要な図表に絞る -- プレースホルダーで先に進め、後から画像を差し替え -- テキストのみで説明できる箇所は図表を省略 - -### レイアウトが思い通りにならない - -- sample-slide.mdでレイアウトのサンプルを確認 -- `_class` のコメント記法が正しいか確認 -- Marp拡張でプレビューしながら調整 - -## SKILL配置について - -本リポジトリの `.claude/skills/` フォルダをそのまま利用できる。リポジトリをクローンすれば、Claude Codeから各SKILLを呼び出せる。 - -``` -.claude/skills/ - ├── organize-content/ - │ └── SKILL.md - ├── slide-design/ - │ └── SKILL.md - └── marp-creator/ - ├── SKILL.md - └── sample-slide.md -``` - -## 参考資料 - -- [.claude/skills/organize-content/SKILL.md](.claude/skills/organize-content/SKILL.md)：内容整理SKILLの詳細 -- [.claude/skills/slide-design/SKILL.md](.claude/skills/slide-design/SKILL.md)：スライド設計SKILLの詳細 -- [.claude/skills/marp-creator/sample-slide.md](.claude/skills/marp-creator/sample-slide.md)：Marpテンプレート