画面キャプチャ撮影リスト
教材に表示する画面キャプチャの一覧です。 下の「ファイル名」のとおりに保存 すれば、各ページに自動で表示されます。
保存先
すべて次のフォルダに入れてください（無ければ作成済みです）。
claude-code-academy/static/img/screenshots/
ファイル形式は PNG を推奨します（.png）。
差し込みのしくみ
教材ページには、すでに画像の「枠」が入っています（撮影前は「📷 準備中」と表示）。 指定のファイル名で画像を上のフォルダに置くと、ページを更新するだけで本物の画像に切り替わります。マークダウンの編集は不要です。
撮影リスト
| 章 | 撮影する画面 | 保存するファイル名 |
|---|---|---|
| 事前準備 | winver の Windows バージョン画面 | prep-os-windows.png |
| 事前準備 | 「このMacについて」の macOS 画面 | prep-os-mac.png |
| インストール | PowerShell を検索して開くところ（Windows） | install-win-powershell.png |
| インストール | ターミナルを検索して開くところ（Mac） | install-mac-terminal.png |
| インストール | claude --version の結果 | install-version-check.png |
| ログイン | ログイン方法の選択画面（サブスクを選ぶ） | login-method.png |
| ログイン | ログイン後の入力待ち画面 | login-ready.png |
| 基本操作 | ファイル作成前の「許可」確認画面 | basic-permission.png |
| 実践 | できあがった議事録ファイルの中身 | task-result.png |
| エージェント作成 | /agents のメニュー画面 | agents-menu.png |
| MCP接続 | /mcp の接続状態画面 | mcp-status.png |
撮影のコツ
- 個人情報・社外秘は写さない（メールアドレス・実名・社内パスなどはぼかすか別名に）
- 画面の 必要な部分だけ を切り取る（全画面より見やすい）
- Windows：
Win + Shift + S／Mac：⌘ + Shift + 4で範囲選択スクショ - 文字がはっきり読める解像度で
追加したいとき
別の画面も載せたい場合は、教材ページに次のように1行書くだけです。
<Screenshot src="/img/screenshots/任意の名前.png" caption="説明文" />