クライアント向けの操作マニュアルを作成するのは、意外と時間のかかる作業です。スクリーンショットを撮影し、適切な説明文を書き、順序立てて構成する。1つのマニュアルに数時間かかることも珍しくありません。
この記事では、Claude Codeを使ってスクリーンショットからマニュアルを自動生成するワークフローを紹介します。
スクリーンショットを screenshot/ フォルダに入れて、Claude Codeに「マニュアルを生成して」と指示するだけで、画像付きのMarkdownマニュアルが出力されます。
必要なもの
| 項目 | 説明 |
|---|---|
| Claude Code | Anthropicのコマンドラインツール |
| スクリーンショット | 操作手順を撮影した画像ファイル |
| 下書き（任意） | マニュアルの構成案があるとより精度が上がる |
プロジェクト構成
以下のディレクトリ構成でファイルを準備します。
manual/
├─ CLAUDE.md # メイン指示書
├─ screenshot/ # スクリーンショットを配置
│ ├─ FS-20260119-admin.shopify.com_650.png
│ └─ ...
├─ draft/ # 下書き（任意）
│ └─ variation.md
├─ output/ # 完成したマニュアルの出力先
├─ docs/
│ └─ session-context.md # 案件の背景・文脈
└─ .claude/
└─ commands/
└─ proofread.md # 校正用カスタムコマンド
各ファイルの役割を説明します。
CLAUDE.md：メイン指示書
CLAUDE.md はClaude Codeがプロジェクトを理解するための指示書です。処理フロー、画像選択ルール、出力形式などを記載します。
# マニュアル自動生成プロジェクト
## 概要
screenshot/ 内のスクリーンショットを使用して、
クライアント向けユーザーマニュアル（Markdown形式）を生成する。
## 処理フロー
### Step 1: コンテキスト理解
1. `docs/session-context.md` を読んで案件の背景を理解
2. `draft/` 内の下書きがあれば構成を把握
### Step 2: 画像分析
1. `screenshot/` 内の全画像を視覚的に確認
2. ファイル名から撮影日・対象サイトを推測
3. 各画像の内容（どの画面か、何の操作か）を把握
### Step 3: マニュアル生成
1. 下書きの構成に沿って、または論理的な順序で構成
2. 各ステップに適切なスクリーンショットを挿入
3. 初心者向けの丁寧な説明文を作成
4. 「よくある質問」「まとめ」セクションを追加
### Step 4: 出力
- `output/` ディレクトリにMarkdownファイルを出力
- ファイル名: `[トピック名].md`
## 画像選択ルール
### ファイル名の解釈
- `admin.shopify.com` → Shopify管理画面
- `myshopify.com` → ストアのフロントエンド
- 連番が若い → 作業の早い段階
### 選択基準
- 1つの説明に対して1枚の画像
- 操作の「前」と「後」がわかる画像を優先
- UIの重要な部分が見えている画像を選択
## 出力形式
### Markdown記法
- 見出し: ## ステップ1：〇〇
- 画像: 
- 表: パイプテーブル形式
- 強調: <strong>太字</strong> で重要な用語やボタン名を強調
### トーン
- 初心者向けの丁寧な説明
- 専門用語は避けるか、使う場合は補足説明を追加
- 「〜してください」「〜します」の統一した文体
session-context.md：案件の背景
Claude Codeは会話の文脈を知らないため、案件の背景を説明するドキュメントが必要です。
# セッション・コンテキスト
## 案件概要
- クライアント: 浄水器カートリッジEC
- 目的: Shopifyの操作マニュアル作成（クライアント用）
- クライアント特徴: PC初心者レベル、丁寧な説明が必要
## 作成するマニュアル
### 1. 商品バリエーションの設定方法
- 「標準タイプ / 高除去タイプ」のオプション追加
- バリエーションごとの価格・画像設定
### 2. 商品ページに画像を追加する方法
- 商品別テンプレートの作成
- HEROセクションの追加
## スクリーンショットのファイル名規則
- `FS-YYYYMMDD-domain_NNN.png`: FireShot形式
- `スクリーンショット YYYY-MM-DD HH.MM.SS.png`: macOS標準形式
## 作業環境
- テストストア: code-plus-store.myshopify.com
- 本番サイト参考: aqua-up.com
案件固有の情報（クライアント名、商品名、テストストアのURLなど）を記載することで、Claude Codeが適切な画像を選択できるようになります。
proofread.md：校正用カスタムコマンド
.claude/commands/proofread.md を作成すると、/proofread コマンドで校正を実行できます。
# /proofread コマンド
## 概要
指定されたMarkdownファイルの誤字脱字や技術的な誤りをチェックする。
## 使用方法
/proofread <ファイルパス>
## 修正すべきもの
1. 明確な誤字・脱字・スペルミス
2. 助詞の誤用（文意が通じない場合のみ）
3. 用語の誤り（例: 「テーマ」と「テンプレート」の混同）
4. 画像パスの誤り（存在しないファイル参照）
## 修正してはいけないもの
1. Markdown記法のスタイル
2. 表現上の軽微な問題
3. 読点の位置
実行手順
1. スクリーンショットを配置
操作手順を撮影したスクリーンショットを screenshot/ ディレクトリに配置します。
ファイル名に日付やドメイン名が含まれていると、Claude Codeが画像の用途を推測しやすくなります。FireShotやmacOS標準のスクリーンショット機能を使うと、自動的に日時がファイル名に入るので便利です。
2. Claude Codeを起動
cd manual/
claude
Claude Codeが起動すると、CLAUDE.md を自動的に読み込みます。
3. マニュアル生成を指示
マニュアルを生成して
Claude Codeが以下の処理を自動で行います。
docs/session-context.mdを読んで背景を理解screenshot/内の画像を視覚的に分析draft/の下書きと照合して画像を選択output/にMarkdownマニュアルを出力
4. 校正（任意）
/proofread output/variation.md
カスタムコマンドで誤字脱字をチェックできます。
5. PDF化
VS Codeの拡張機能「Markdown PDF」を使うと、MarkdownファイルをワンクリックでPDFに変換できます。
- VS Codeで出力されたMarkdownファイルを開く
- コマンドパレット（Ctrl+Shift+P）→「Markdown PDF: Export (pdf)」
- 同じディレクトリにPDFが生成される
精度を上げるコツ
下書きを用意する
下書きがなくてもマニュアルは生成できますが、構成案があると精度が上がります。
## ステップ1：管理画面にログイン
<!-- スクリーンショット：ログイン画面 -->
## ステップ2：商品管理を開く
<!-- スクリーンショット：商品管理画面 -->
このように <!-- スクリーンショット：〇〇 --> の形式でプレースホルダーを入れておくと、Claude Codeが対応する画像を選択して挿入します。
ファイル名を工夫する
スクリーンショットのファイル名に情報を含めると、画像選択の精度が上がります。
| ファイル名 | Claude Codeの解釈 |
|---|---|
admin.shopify.com_650.png | Shopify管理画面 |
step1-login.png | ステップ1のログイン画面 |
variation-setting.png | バリエーション設定画面 |
複数回に分けて生成する
大量のスクリーンショットがある場合、1回で全てを処理しようとすると精度が下がることがあります。
まず「ステップ1〜3」の部分だけマニュアルを生成して
このように範囲を指定して、段階的に生成する方法も有効です。
一度プロジェクト構成を作っておけば、別のマニュアル作成にも流用できます。クライアント向けマニュアルの作成工数を削減したい方は、ぜひ試してみてください。
関連記事
【Gemini×Claude Code】画面録画からマニュアルを作ってもらう方法
VS CodeでMarkdown記法をPDFに変換・整形する方法
