うちのblog環境 (2026年3月)
目次
要旨 #
2026年3月から Claude (クロード) AI による blog 執筆を試験的に始めたところ、劇的に環境が変わったのでまとめておくことにした。
基本構成 #
以前の記事 うちのblog環境 (2025年1月) に続いて、今回の環境を第5世代とし、比較してみる。
| サービス | 第4世代 | 第5世代 |
|---|---|---|
| 個人ドメインのレジストラ | Cloudflare Registrar | Cloudflare Registrar |
| 公開DNSサービス | Cloudflare DNS サービス | Cloudflare DNS サービス |
| blogシステム | Hugo | Hugo |
| 公開Webサービス | Cloudflare Pages | Cloudflare Pages |
| blog ビルド用リポジトリ | GitHub | GitHub |
| 執筆端末 | Windows PC | Windows PC |
| ビルド&テスト機 | Rocky Linux VM | Rocky Linux VM |
| 使用エディタ | Microsoft VS Code | Zed Editor |
| 執筆者 | 人間 100% | 人間 + Claude AI 85% |
| AI 環境 | － | Claude Code (Zed Extension) |
変遷 (つづき) #
第5世代 (2026年3月～) #
- AI アシスト型執筆スタイルを取り入れた。Claude AI Pro プランを採用。
- AI 導入に伴い、エディタを Zed Editor に変更。
- Windows 版 Zed は 2025年秋に正式リリースされ、その後急速に改善が進んでいる。
- Zed + Claude Agent (Claude Code) での blog 執筆イメージ
AI アシストによる執筆方式 #
AI 環境で執筆する流れ #
- 書きたいことや手順に起こしたいことをざっくり問い、そのまま記事にするように伝えると、骨格と手順が Hugo フォーマットの index.md で生成される
- Claude AI Agent がファイルを直接修正してくれるので、いわゆる AI チャットからの「コピペ」は一切不要。
- 実機での確認が必要な場合は、自分で確認した上でチャット内で記事と実態の違いを指摘し、修正させる。
- 変更する度に Hugo でビルド確認し、エラーが出たら Claude が自分で修復するため、修正によりファイル構造が破損することはまずない。
- 変更するごとに、一旦ローカル環境の Hugo Server でプレビューし人間が内容を確認する。
- 修正がある場合は引き続き Claude にチャットで指示するか、人間が直接ファイルを編集する。
クエリ詠唱例 #
Hugo フォルダ全体をプロジェクトフォルダとして参照させているため、以下のような指示にも対応してくれる。
| 詠唱 | 応答 |
|---|---|
| H2 タグのフォントサイズを少し大きくしてください | フォントフェイスやサイズ (CSS) の変更 |
| 各テーブルの各セル内の余白を小さくしてください | テーブルデザイン (CSS) の変更 |
| 箇条書きの行間を少し狭くしてください | 各種レイアウトの余白 (CSS) の調整 |
| 引用コラムのようなエリアを作る ShortCode を用意してください | 新しい Hugo ShortCode の開発と実装 |
| ○○の章で記載した内容を SVG 形式の画像にして、その章の先頭に貼り込んでください | SVG のイメージ図の作成と figure shortcode の記述 |
| 全ての記事の章のレベル # → ## のように1段下げてください | 全文書の見直し MarkDown の書式と章立てを修正 |
| (Hugoアップデート時に警告が出たため) Deprecate の原因を調べて修正してください。Release Notes の URL は○○です。 | Hugo のドキュメントを参照し設定ファイルを適切に修正、また今後のバージョンアップの際の注意点のメモを出力 |
| 今回の変更のまとめを MarkDown で保存してください | とてもわかりやすいドキュメントを出力 |
| commit コメントに今までの内容を英語で記載し、commit & push してください | git stage → 英語でコメントしつつ git commit → GitHub push |
このように「フォルダ内で編集できるファイル」であれば、対話だけで完結する。
AI アシスト執筆における役割分担 #
いまのところ、分担としてはこういうイメージになる。
| 担当 | 役割 | 具体的な作業 |
|---|---|---|
| 人間 | 企画・担当編集者・リアル確認 | コンテンツの企画 方向性の提示 抽象的あるいは具体的指示 実物での裏取り 最終指示 |
| AI | ライター・編集アシスタント | 実文書の作成 抽象的な指示から具体的な修正 修正選択肢の提示と実行 Gitコミットと送信 |
一番手を動かさなければいけなかった、例えば MarkDown の文法を調べたり、画像の取り込みの ShortCode を書く、CSS の調整といった作業をオフロードし、全体の構成や記載内容の調整に専念できる。
「書く内容を AI に丸投げし、確認や裏取りもしない」といった使い方が一部横行しているようだが、AI の時代においても最終責任は人間が持つようにしなければならないと思っている。
翻訳版の作成 #
今回 Hugo のマルチリンガル機能を使って、このブログのいくつかの記事を Claude AI で英語化してみた。
○○ (フォルダ名) の記事の英語版を作成してください
これだけでほぼ完了である。
言い訳になるが「翻訳記事の作成」については AI に丸投げ気味であり、誤訳があってもごめんなさいになりそうだ。私(人間)ががんばったのは、修正できる範囲でイメージ図を英語版で作り直したことだけ。 日本語版 Windows のスクリーンショットを英語版で取り直すのは困難(面倒)なため、そのままだったりする。 一応、翻訳版記事については AI を使ったことの注釈を入れてある。
さいごに #
ツッコミがありましたら、Bluesky の DM へ投げていただければそっと対応させていただく所存です。よろしくお願いします。