はじめに
技術記事を書くとき、スクリーンショットを撮って、適切な箇所に挿入して、説明文を書いて...という作業が面倒だと感じたことはありませんか？
今回、Claude Codeに「書きかけの記事とスクリーンショットを渡して記事を完成させてもらう」という実験をしてみたところ、予想をはるかに超える結果が得られました。
実験の背景
ConoHa VPSにClaude Codeをインストールする手順をまとめた記事を書いていたのですが、以下の状況でした：
- 基本的なコマンドは記載済み
- 11枚のスクリーンショットを撮影済み（ファイル名は
screenshot_2025-06-19 9.26.03.pngのような自動生成名） - どのスクリーンショットをどこに挿入すればいいか整理できていない
- 記事の構成や説明が不完全
Claude Codeへの依頼内容
シンプルに以下のように依頼しました：
記事をarticle.mdに書いています。スクショもこのディレクトリにあります。 記事を完成させてくれ。スクショ画像を読み取り、適切な箇所に挿入してくれ。
Claude Codeの作業プロセス
1. まずは状況把握から
Claude Codeは最初にディレクトリ構造と記事の内容を確認しました：
# ディレクトリ内容の確認 ls ~/Desktop/article # 既存記事の内容確認 cat article.md
2. 全スクリーンショットの内容解析
驚いたのは、11枚全てのスクリーンショットを個別に読み取って、それぞれの内容を正確に把握したことです：
- Ubuntu パッケージ更新時のピンク画面
- サービス再起動の選択画面
- Claude Code認証のターミナル画面
- ブラウザでの認証コード表示
- Claude Code起動後の画面
- VPSコンソールでの実際の使用例
- GitHub CLIの認証画面
- などなど...
3. 記事構成の整理と改善
元の記事は単純なコマンドの羅列でしたが、Claude Codeは以下のように構造化してくれました：
# ConohaVPSにClaudeCodeをインストールして外出先でも仕事をできるようにする ## 1. 基本セットアップ ## 2. Claude Codeのインストールと認証 ## 3. GitHub CLIのインストール ## 4. 実際の使用例 ## まとめ
4. スクリーンショットの適切な配置
各スクリーンショットを内容に応じて最適な位置に配置し、説明文も追加してくれました：
 上記のような画面が表示されますが、何もせずENTERを押してください。 
さらに想定外のサービス
ファイル名の改善提案
私が「スクショの名前がわかりづらいので、適切なファイル名に変えてくれ」と依頼すると、Claude Codeは以下のような適切な名前に一括変更してくれました：
# Before: screenshot_ 2025-06-19 9.26.03.png # After: ubuntu-package-update-dialog.png mv "screenshot_ 2025-06-19 9.26.03.png" "ubuntu-package-update-dialog.png" mv "screenshot_ 2025-06-19 9.26.08.png" "ubuntu-service-restart-dialog.png" mv "screenshot_ 2025-06-19 9.28.48.png" "claude-code-auth-terminal.png" # ... 11ファイル全て
さらに、記事内の画像参照も自動で更新してくれました。
セキュリティ監査まで実施
「画像を加工して、サーバー名やユーザー名など、ハッキングに利用されそうなところは隠したつもりです。改めて全ての画像をチェックし、ハッキングに利用されそうな情報が表示されていないかを確認してください。」
この依頼に対して、Claude Codeは全画像を再度精査し、以下のような詳細なセキュリティレポートを提供してくれました：
## 🚨 修正が必要な箇所 1. 重要なセキュリティ上の懸念 - claude-code-auth-terminal.png - Claude認証URLに含まれる認証トークンが一部表示 - claude-code-auth-success.png - ログイン済みメールアドレスの断片が表示 - claude-code-welcome-screen.png - サーバー名の部分が表示 2. 中程度のリスク - github-cli-device-activation.png - GitHub ユーザー名が表示 ## ✅ 安全な画像 - ubuntu-package-update-dialog.png - Ubuntu標準のダイアログのみ - ubuntu-service-restart-dialog.png - システムサービス名のみで問題なし
Claude Codeの優れた点
1. マルチモーダル能力の活用
テキストと画像を同時に理解し、それらを組み合わせて最適な記事構成を提案してくれました。
2. プロアクティブな改善提案
依頼されていない部分まで、より良い記事にするための提案をしてくれました：
- 記事の構造化
- 説明文の追加
- ファイル名の改善
- セキュリティチェック
まとめ
「記事を完成させてくれ」という単純な依頼に対して、Claude Codeは：
✅ 11枚のスクリーンショットを全て正確に解析
✅ 記事構成を論理的に整理
✅ 適切な位置への画像挿入と説明文追加
✅ ファイル名の改善
✅ セキュリティ監査まで実施
想像していた以上のクオリティで応えてくれました。
特に印象的だったのは、単なる指示実行ではなく、「より良い記事にするためには何が必要か」を考えて提案してくれた点です。これは、AI がクリエイティブパートナーとして機能している証拠だと感じました。
技術記事を書く際の新しいワークフローとして、Claude Codeとの協働は非常に有効だと確信しています。皆さんもぜひ試してみてください。
この記事も、実はClaude Codeが私の体験をもとに構成・執筆したものです。メタ的ですが、Claude Codeの能力を示す好例だと思います。
