マニュアルの手動編集

generate-manual で生成された manual.md を手動で編集し、manual.pdf を微調整する方法です。

概要

/teamkit:generate-manual コマンドは manual.md（Marp形式のMarkdown）と manual.pdf を自動生成します。 生成後に内容を微調整したい場合、manual.md を直接編集してPDFを再生成できます。

ファイル構成

.teamkit/<feature>/
├── manual.md              # Marp形式のマニュアル（編集対象）
├── manual.pdf             # 生成されるPDF
└── mock/
    └── screenshots/       # スクリーンショット画像
        ├── screen_a.png
        └── screen_b.png

.teamkit/themes/
└── A4-Manual.css          # 共有テーマファイル

手順1: manual.md を編集する

.teamkit/<feature>/manual.md をテキストエディタで開き、内容を修正します。

Marp の基本構文

manual.md は Marp 形式の Markdown です。以下の構文が使われています。

フロントマター

---
marp: true
theme: A4-Manual
paginate: true
---

theme: A4-Manual は共有テーマ .teamkit/themes/A4-Manual.css を参照します。この行は変更しないでください。

改ページ（スライド区切り）

---

水平線 --- がページの区切りになります。改ページを追加・削除することでページの分割を調整できます。

ページレイアウト

<!-- class: content -->

この Marp ディレクティブはグローバルに適用され、以降のすべてのスライドに content クラスが付与されます。

  • タイトルページ（1ページ目）: クラスなし → 縦中央寄せ
  • 2ページ目以降: content クラス → 縦上寄せ

注意: <!-- class: content -->（アンダースコアなし）はグローバルディレクティブで、以降の全スライドに適用されます。 <!-- _class: cover -->（アンダースコアあり）はローカルディレクティブで、そのスライドのみに適用されます。

画像の埋め込み

![画面名 w:560](mock/screenshots/screen_id.png)

w:560 は Marp の画像ディレクティブで、幅560pxで表示します。A4スライドの約半分の幅です。 値を変更することで画像サイズを調整できます。

  • w:400 — 小さめに表示
  • w:560 — 標準（推奨）
  • w:800 — 大きめに表示

手順2: PDF を再生成する

編集後、以下のコマンドでPDFを再生成します。プロジェクトルートまたは worktree のルートで実行してください。 

npx --yes @marp-team/marp-cli \
  .teamkit/<feature>/manual.md \
  --pdf \
  --allow-local-files \
  --html \
  --theme-set .teamkit/themes/A4-Manual.css \
  -o .teamkit/<feature>/manual.pdf

オプション説明

オプション 説明
--pdf PDF形式で出力
--allow-local-files ローカル画像ファイル（スクリーンショット）の読み込みを許可
--html Markdown内のHTMLタグを有効化
--theme-set カスタムテーマファイルのパスを指定
-o 出力先ファイルパス

よくある編集例

テキストの修正

通常のMarkdownと同じように、テキストを直接編集するだけです。

改ページの追加

内容が多くて1ページに収まらない場合、区切りたい位置に --- を追加します。 

### 3.1 ユースケースA

（前半の内容）

---

（後半の内容）

改ページの削除

不要な改ページがある場合、該当する --- 行を削除します。

スクリーンショットのサイズ変更

# 小さくする
![画面名 w:400](mock/screenshots/screen_id.png)

# 大きくする
![画面名 w:800](mock/screenshots/screen_id.png)

# フル幅にする（余白なし）
![画面名 w:960](mock/screenshots/screen_id.png)

スクリーンショットの追加・削除

スクリーンショット画像は mock/screenshots/ ディレクトリに配置されています。 新しい画像を追加する場合は同ディレクトリに配置し、Markdown内で参照します。 

---

**新しい画面名**
主な操作: 操作A、操作B

![新しい画面名 w:560](mock/screenshots/new_screen.png)

テーブルの編集

標準のMarkdownテーブル構文で編集できます。

| 項目名 | 必須 | 入力形式 | 説明 |
|--------|------|----------|------|
| フィールドA | ○ | テキスト | 説明文 |
| フィールドB | - | セレクト | 説明文 |

注意事項

  • 再生成で上書きされる: /teamkit:generate-manual を再度実行すると、手動編集した内容は上書きされます。 手動編集した manual.md をバックアップするか、再生成前にコミットしてください。
  • status.json は更新されない: 手動でPDFを再生成しても status.json は更新されません。 status.json の更新が必要な場合は /teamkit:generate-manual を使用してください。
  • テーマファイルは共有: .teamkit/themes/A4-Manual.css は全機能で共有されています。 テーマを変更すると他の機能のマニュアルにも影響します。
  • 画像パスは相対パス: スクリーンショットのパスは manual.md からの相対パスです。 ファイルを移動する場合はパスも合わせて修正してください。

VS Code でのプレビュー

VS Code の Marp for VS Code 拡張機能をインストールすると、 manual.md のプレビューをリアルタイムで確認しながら編集できます。

  1. VS Code で Marp for VS Code 拡張機能をインストール
  2. manual.md を開く
  3. Cmd + Shift + V でプレビューを表示

ヒント: VS Code のプレビューではカスタムテーマが反映されない場合があります。 最終確認は必ずPDF出力で行ってください。

関連ガイド