📝

Claude Codeにブログを書くための環境を整えてもらった話

に公開
ブログ
Zenn
CLI
Claude Code
Gemini CLI
tech

Claude Codeにブログを書くための環境を整えてもらった話

はじめに

技術ブログに普段お世話になることがおおく、これを書いているエンジニアの皆さんはすごいなあなどと思いながらただその恩恵を享受していたのですが、
ふと思い立って自分でもブログを書いてみることにしました。
ブログなぞ書いたことはないのですが、今なら便利な生成AIツールに手伝ってもらって楽に書けるのでは？と軽い気持ちでした。
ただ実際には書き始めるまでの準備をするのにも一苦労だったということで、まずは最初の記事として準備の記録をつけてみようと思います。

※この記事はClaude Codeと共同で書いています。

実施した作業の概要

1. リポジトリの初期設定

まず、ブログ記事を管理するためのリポジトリ構造を構築しました。

blog-articles/
├── articles/          # Zenn記事の管理
├── books/            # Zenn本の管理
├── docs/             # ドキュメント類
├── drafts/           # 下書き記事
├── images/           # 画像ファイル
├── templates/        # 記事テンプレート
├── CLAUDE.md         # Claude Code用設定
├── GEMINI.md         # Gemini用設定
└── README.md         # プロジェクト説明

とClaude Codeは言っています。いや実際にリポジトリを作るところから始まったのは確かなんですが、最初に作ったものと後から作ったものが混在しています。
gitのログを見ながら書いてもらうように指示しなかったので、最初から完成形のディレクトリ構造が出てきてしまったようです。
実際はこんな感じでした。

blog-articles/
├── articles/          # 記事の管理
├── docs/             # ドキュメント類
├── drafts/           # 下書き記事
├── images/           # 画像ファイル
├── templates/        # 記事テンプレート
└── README.md         # プロジェクト説明

この時点ではZennとGithubのリポジトリを連携することを考えていなくて(というかそれができることを忘れていて)、Claude Codeにお願いして記事の管理をするのによさそうなディレクトリ構造を考えてもらいました。自分で考えて作っていたらarticles/だけになっていたと思います。

2. ドキュメントの整備

効率的な記事作成とレビューのため、以下のドキュメントを整備しました：

  • general.md - 全体的なガイドライン
  • writing-workflow.md - 記事執筆フロー
  • ai-collaboration-guide.md - AIツールとの協働指針
  • naming-conventions.md - 命名規則
  • publishing-checklist.md - 公開前チェックリスト
  • review-process.md - レビュープロセス
  • template-usage.md - テンプレート使用方法

記事を書くにあたってまず考えたのが、「プログラムと同じようにブログ記事も生成AIに手伝ってもらいたい」ということでした。
ということで、生成AIへの記事や執筆方針をまとめることにしました。そこで出来上がったのが上記のファイル群です。
方針としては、

  • どのAIツールも共通のドキュメントを参照して作業する
  • 人間、Claude Code、Gemini CLIで役割分担をして記事を作成する
  • おおもとのファイルを作ってそこにはリンクだけ貼っておき、必要な時に必要なファイルを参照できるようにする
  • 人間も同じドキュメントを読んで方針を把握できるようにしておく

というものでした。Claude CodeだったりGithub CopilotだったりGemini CLIだったり、いろいろなツールに毎度似たような指示書を作るのに辟易していたので、いつかどこかで見かけた記事を思い出しながら共通のドキュメントを使えるように整備しました。(この記事は保存し忘れていて見つけられませんでした。見つけたら参考として追記します。)
結果出来上がったものが上記7つのファイルです。正直ファイル数多すぎるかなと思っていますし課題も多いというのが現状です。

3. テンプレートファイルの作成

ドキュメント整備と並行して、記事作成を効率化するためのテンプレートファイルも作成しました。

  • dev-log.md - 開発日誌用テンプレート
  • tech-memo.md - 技術メモ用テンプレート
  • tips.md - Tips記事用テンプレート

これらのテンプレートは記事の種類に応じた基本構造や記述項目を定義しており、記事を書く際の指針として活用できます。特に開発日誌用テンプレートは、セッション終了時にClaude Codeに作業記録を下書きとして残してもらう際に役立ちそうです。
このテンプレートについては生成してもらったままで置いてあります。この記事はテンプレートを利用していませんし、実際に記事を書くときにまた編集していこうと思っています。

4. Zenn のセットアップ

書いたブログをどのプラットフォームで公開しようか迷っていたのですが、
Zennにアカウントを作ったときにGithubのリポジトリと連携できると目にしたことを思い出し、Zennを利用することにしました。

参考記事：

ブラウザZennとGithubのリポジトリを連携してから、Zenn CLIをインストールし、記事管理環境を構築します。
大体の作業はClaude Codeにやってもらっていたのですが、WSL環境では権限の問題があるようで、ここは自分で作業することになりました。(sudoを使わせたくなかった)

sudo npm init --yes
sudo npm install zenn-cli
npx zenn init

これで、articles/とbooks/ディレクトリが作成され、Zennの記事管理環境が整いました。

npx zenn preview

構築した環境の特徴

さて、ここまでで一通りの環境構築が完了したわけですが、振り返ってみると記事1本書くためにしては過剰な準備してるのではと思います。

AI協働前提の仕組み

一番の特徴は、最初からAIツールと一緒に記事を書くことを前提にしていることです。
前述の通りClaude CodeとGemini CLIの両方に対応して役割分担し、日本語での記事作成に最適化しました。
また、放っておくと記事全体を書き直して大変なことになりそうだったので、既存ファイルを尊重した増分作業ができるよう設定しています。

正直なところ、AIツールに頼りすぎるのもどうかなという気持ちもあるのですが、開発の時も全面的に頼っているので今更ですね。
自分一人で記事を書くよりも、AIと一緒に書いた方が文章の品質が上がるような気がしています。
少なくとも、誤字脱字は圧倒的に減りそうです。
セッションの最後に開発記録を記事の下書きとして残してもらえば、労力をかけずに開発日誌を書いていつ何をしていたのか見返すこともできそうですね。

品質管理の仕組み

公開前チェックリストによる品質担保や、命名規則の統一、構造化されたドキュメント管理といった仕組みを整えました。
もちろん自分でもチェックしますが、AIツールに任せっぱなしにならないよう気をつけたいと思います。

ただ、ここまでやる必要があったかどうかは正直疑問です。
個人ブログなのに企業のドキュメント管理みたいになってしまいました。
まあ、最初だけ頑張って整備しておけば、後は楽になるはず...という期待を込めています。

今後やることや課題

環境は一通り整ったのですが、まだやりたいことがいくつかあります。

約束や指示を頻繁に忘れる問題の改善

特にClaude Sonnet系のモデルの特徴なのかなと思いますが、頻繁にこちらの指示や約束を忘れます。今回であればai-work-principles.mdというファイルに遵守してほしい約束事を書いているのですが、量が多いからか結構な確率で無視されます。
こんな記事を見かけてよさそうだなと思ったので、確実に原則を守らせるためにClaude CodeにHooksを導入したいと思っています。

現在は口約束みたいな感じでAIツールに「この原則を守ってね」と言っているだけなので、
技術的に強制できるようにしたいところです。

とはClaude Code自身の言(大体の骨子を作った後でブログ記事生成してって指示したらこんな文言が混ざっていた)で、最重要と書いておいても結構軽く扱われていそうです。
コーディングを依頼するときにも同じ問題が発生しているので、早めに身に着けたいですね。

ただ、ツールの自由度に制限をかけるとこちらの確認する頻度が増えたり、自分では思い至らなかったことに気づかせてくれるありがたみも抑えられてしまう・・・というジレンマもあります。
特に私は経験も知識も足りず、個人の性質としても細かいところを詰めるのが苦手なので、Claude Codeに生成してもらったものを見て考慮漏れに気づくことも結構多いので、ガチガチに縛ったはいいけど後から致命的な欠陥に気づいて自分のせいで結局作り直し、みたいなことになりそうなんですよね。
プロジェクトのセットアップをしてもらいながら本を読みたいし、コードを書いてもらいながらご飯を食べたいし、記事を書いてもらいながらゲームをして待ちたいんですが、まだそこまで放っておくのは難しそうだなと思っています。

【7/12追記】

特に困っていた「読んでほしいドキュメントを適切に参照してくれない」という点が致命的なので、応急処置をしました。
1つのファイルにすべての指示を含めることでトークンを節約したいと思って分割したのが裏目に出ている形です。
取り急ぎ、最も重要なai-work-principles.mdとai-collaboration-guide.mdだけは必ず参照するように、Claude Codeに指示を変更してもらいました。

## 参照ファイルの特定方法

**作業開始時の確認手順**:

1. 作業内容にキーワード「レビュー」「校正」「チェック」が含まれる場合 → [review-process.md](./review-process.md) と [publishing-checklist.md](./publishing-checklist.md) を確認
2. すべての作業で必須 → [ai-work-principles.md](./ai-work-principles.md) と [ai-collaboration-guide.md](./ai-collaboration-guide.md) ⚠️ **最重要**
3. 執筆・記事作成の場合 → [writing-workflow.md](./writing-workflow.md) と [template-usage.md](./template-usage.md) を確認
4. ファイル作成・命名の場合 → [naming-conventions.md](./naming-conventions.md) を確認

文体の指定と統一を行う

ブログの文体を規定したドキュメントを作成したいと思います。
今回は

  1. 骨子をAIに作ってもらう
  2. 私が一部を膨らませる
  3. 膨らませた部分をAIに呼んでもらって、文体を合わせて残りの文章を書いてもらう
  4. 思ってもないことを書かれていたら削ったり、足りなかったら付け加えたりという作業を私が行う

という流れで記事を作成したのですが、結果「親しみやすい語り口調で」程度の指示で3. の作業が行われることになったので、もう少し具体的なルールを決めておきたいです。

【7/12追記】

ファイルを追加しました。(リポジトリ構造のファイルはあんまり関係ないですが)

  • repository-structure.md - リポジトリ構造の説明
  • writing-style.md - 文体・表現ガイド

下書き用フォルダの位置づけを考える

この記事を書いていて、メタデータにpublishedという項目があることに気づきました。
つまり下書きか公開するかをこのパラメータで管理できるわけで、draftsディレクトリは要らないのでは？と思っています。
とりあえず走り書きを置いておくとか、アイデアをポンと置いておくとか、記事の体を為さないメモ書きの管理には使えそうなので、使い分けについてもう少し詳しく考えてみようと思います。

分類とタグ付けを行う

記事のカテゴリー分類とタグ付けルールの策定をしたいと思います。
記事が増えてきたときに、読者の方が目当ての記事を見つけやすくなるよう、
体系的な分類方法を考えておきたいです。

まとめと感想

というわけで、Zenn CLIを使ったブログ環境構築が一通り完了しました。
AIツールとの協働をするために最低限の記事管理体制は作れたと思います。

気がついたら7つものドキュメントファイルができていて、記事よりもドキュメントの方が長い状態になってしまいました。

ただ、体系的なドキュメント管理と効率的なワークフローを整備できたので、
継続的な記事作成はできるようになったと思います。

これからは実際に記事を書いて、この環境が本当に使いやすいかどうか検証していきたいと思います。
生成AIは時系列を扱うのが苦手なので順番があべこべになっていたり後から追加したものが最初からあったように書かれていたりしますし、「～と思った」「～と考えている」みたいな筆者の感想や考えっぽいことをAIが捏造したりと改善すべき点はたくさんあるので、ゆっくりと最適化していきたいと思っています。

最後に記事の内容について。
どこまでが自分で書いたもので、どこからがClaude Codeの書いたものかが途中からカオスに混ざり合ってしまい、読みづらい記事になってしまいました。この辺も課題ですね。
これからも記事を継続して書いていくために、少しずつ慣れていければと思います。
最後までお読みいただき、ありがとうございました。

参考資料

この記事の作成にあたって参考にした資料をまとめます。

Zenn関連

AI協働関連

リポジトリ

  • blog-articles - この記事で構築した環境の実際のリポジトリ

本記事は Claude Code を使用して作成されました。

GitHubで編集を提案

Discussion