備忘録・Claude Codeでブログ下書きを自動生成する手順のおさらい
今日の格闘の概要
少し間が空いていたので、ここで備忘録として、Claude Code（アンソロピック社が提供するAIコーディングアシスタントで、チャット形式で指示を出すとファイルの読み書きやコード編集を代わりにやってくれるツールです）を使って、ブログ記事の下書きを自動で作る一連の流れを再確認しました。
やったことは、その日の作業のメモを書く → Claude Codeにコマンドを打つ → 下書きを直す → HTMLに変換する → WordPressの該当の記事の項目に貼り付ける、という7つのステップです。今回はこの手順そのものを整理してメモに残し、実際に動かして再確認しました。
実践したこと
まず、その日にあったことやつまずいたことを箇条書きでメモファイルに書き残します。ここで、あっと再発見したことがありました。それは、ファイル名を半角英数字にすることです。日本語のファイル名だと読み込みエラーになることがあるとのことなので、memo-folder.md のような名前を使いました。前回もつまずいた覚えがあったはずなのに、また同じところで手が止まってしまい、自分で少し苦笑いしてしまいました。
ここでもう一度、身にしみて重要だと認識し直したのが、保存場所についてです。保存場所はどこでもいいわけではなく、CLAUDE.md（Claude Codeに守らせたいルールを書いておくファイル）と同じ階層に置くことが大事です。箇条書きで書いたメモファイルも、CLAUDE.mdと同じ階層のフォルダの中に置きます。たとえばわたしの場合は、Gドライブに入れているGoogleドライブのマイドライブの中のBlog、その下の階層のkiwo.jp（これはブログのURLと同じです）、そしてその下にClaude Codeというフォルダを作ってCLAUDE.mdを置いているので、そこと同じフォルダの中にメモファイルを入れました。これをきちんと守っておかないとClaude CodeがCLAUDE.mdを呼び出せない、ということを改めて発見し、なるほどそうだったのかと腑に落ちました。
次に、VS Code（テキストエディタの一種）で「ファイル → フォルダーを開く」から作業フォルダを開きました。エクスプローラーの左上が「CLAUDE CODE」になっていることを確認するのがポイントです。ここを開いていないと、CLAUDE.mdやスキル（あらかじめ登録しておいた定型の指示セット）が効かないためで、この確認をうっかり飛ばしてしまいそうになったことも、改めて思い出しました。
続いて、VS Codeで開いたフォルダの内容を確認して、記事のドラフトを生成していきます。この段階で、画面向かって右側に「Claude Code」のチャット欄が見えているかどうかを確認します。
もしClaude Codeのチャット欄が見えていなければ、VS CodeでClaude Codeが有効になっていない可能性があるので、左端の赤いスパークアイコンをクリックしてClaude Codeのチャット欄を開きます。
Claude Codeのチャット欄が表示されたら、「/write-blog メモのファイル名.md」と入力してEnterキーを押します。今回のケースで言えば、次のようになります。
/write-blog memo_claude-code-blog-workflow.md
すると「どの記事フォルダに保存しますか？」と聞かれるので、記事フォルダ名を答えます。今回のケースで言えば、「15.Claude Codeでのブログ記事の執筆手順・おさらい」という記事フォルダです。その後「Allow write to …draft.md?」という確認が出るので「Yes」で承認すると、指定した記事フォルダの中に draft.md が生成されました。
生成された draft.md はエクスプローラーから開いて、自分の言葉で加筆修正します。キーボードで直接書き加えることもできますし、Claude Codeのチャット欄に「この部分をこう直して」と頼むこともできます。音声で指示を出す場合は、入力欄をクリックしてからWindowsキー + Hを押して話し、Enterで送信する方法も試しました。
下書きの修正が終わったら、次のように入力してHTMLに変換します。
draft.md を読んで、WordPress用のHTMLに変換してください。h2・h3・p・ul・liなどの構文だけ使い、styleやclassは付けないでください。同じ記事フォルダに article.html として保存してください。
「Allow write to …article.html?」の確認に「Yes」で答えると、記事フォルダの中に article.html が生成されます。最後に、この article.html の中身をVS Codeでコピーし、WordPressの投稿編集画面で「カスタムHTML」ブロックに貼り付けてプレビュー確認する、というところまでが一連の流れです。
躓いたポイントと解決策
今回の手順を組む中で、注意が必要だと分かった点がいくつかありました。
一つ目は、ファイル名の文字コードです。メモファイルの名前を日本語にすると読み込みエラーになることがあるため、memo-folder.md のように半角英数字のファイル名にする必要がありました。日本語タイトルを付けたくなる場面ですが、ここは半角英数字で統一するのが確実な対処法です。
二つ目は、VS Codeで開くフォルダの間違いです。作業フォルダとして必ず G:\マイドライブ\Blog\kiwo.jp\Claude Code を開く必要があり、エクスプローラーの左上が「CLAUDE CODE」になっているかを確認するようにしました。ここを開き忘れると、CLAUDE.mdに書いたルールやスキルの設定が反映されないため、地味に見落としやすいポイントだと感じました。
三つ目は、拡張機能の見分け方です。VS Codeには似たようなアイコンのCopilotという別のAIツールもあるため、左端の赤いスパークアイコンがClaude Codeの目印であることを覚えておく必要がありました。「New session」「Ask Claude to edit…」「Local / Web タブ」といった表示があればClaude Codeだと判断できます。
四つ目は、音声入力の使い方です。Windowsキー + Hで音声入力を使う際、話す内容を溜めてから続けて話すと、前の文とくっついてしまうことが分かりました。対策として、1つの指示を話したらそのつどEnterで送信し、次の指示は改めてWindowsキー + Hから話し始めるようにしました。もし入力欄に文章が溜まってしまった場合は、Ctrl + A → Deleteで一括削除できることも確認しました。
まとめと次回の目標
ファイルの構造を改めて確認できたことは、地味ですが、わたしにとって収穫でした。
ファイル名を半角英数字にすること。分かっていたつもりでも、久しぶりに手を動かすとやはり忘れてしまうもので、体で覚え直す必要があるのだと実感しました。
Claude Codeを使ってブログ下書きを生成する7ステップの手順を整理し、ファイル名の付け方や作業フォルダの開き方、音声入力の送信方法など、つまずきやすいポイントを一つひとつ洗い出せたことで、次にまた迷わず取り組めそうだという安心感を得られました。
次回は、この手順を実際に別の記事のメモで試してみて、HTMLへの変換からWordPressへの貼り付けまで、最後まで通しで運用できるかを確認したいと思います。