概要

Claude Proを契約したのをいいことに、Claude Codeをフル活用して自ブログ用のCMSを作ってきました。ので、そのかんたーんな中身と、Claude Proの所感なんかについて書いていこうかなという感じです。

技術系カテゴリにしてますが、つらつらと書いていくだけなのでほぼ雑記みたいなものと思っていただいて大丈夫です。よければ最後までお付き合いください。

これまで

元々このぼくこは.devは

1. VScodeで記事作る
2. githubにcommit&pushする
3. それをトリガーにしてcloudflare pagesでビルド&デプロイ

という流れで動いていました。が、これだとgithubのリポジトリで色々見えちゃいますし、コミットログが記事作成で汚れますし、何より「ブログ書くのにVScode使うのなんかダサいし」みたいなモヤモヤがずっとありました。

じゃあmicroCMSなりなんなり、いい感じのサービスを使えばいいじゃないかという感じですが、既存のそういったサービスはどうにも見た目が好きじゃなかったり、自作するにしても面倒だったりで後回しにしてしまっておりました。

救世主Claude Code

そんなときに現れた（？）救世主が結構前から話題のClaude Codeくんです。

最近、筋トレやあれこれの解決みたいなところで使うLLMは専らClaudeで、無料プランだとレートリミットがキツイのでそろそろお金いれるか…となりました。

で、22$/月のClaude Proを契約すると、Claude Codeも使えるようになるんですよね。せっかくだしなんか作るぞ！ってことで真っ先に思い付いたのが、自ブログ用のCMSだったわけです。

機能

よくあるmarkdownエディターです！というのは味気ないので、基本的な機能とは別で実装した、独自要素みたいなものを書いていこうと思います。

以前記事にしたのですが、nuxt contentは以下のように書いてあげることでmarkdownから直接vueコンポーネントを呼び出して描画することができます。

::ComponentName
Hello!
::

せっかくだしエディター側でもこれを取り入れよう！ということで、カスタムコンポーネント各種を挿入できるメニューを追加してきました。

プレビューでレンダリングできないと意味ないので、CMSでもnuxt contentと同様にレンダラーはMDCを使っています。

技術的な中身

興味なかったら読み飛ばしてください。

フロントエンドはお馴染みのNuxt4 + Shadcn-vue + tailwindCSSです。たたき台はClaude Codeに作ってもらうにしても、自分でいじる部分も相当あるので、まあ多少なりともわかるものを使った方がいいよね……というチョイスです。

バックエンドは色々ありますが、記事保存用のDBはdrizzle-orm、画像はCloudflare R2のバケットにアップロードして～という感じ。Nuxtはserver/apiに色々入れてあげれば、簡単にAPIも実装できるのでわかりやすくて助かります。他を知らないので比較はできないのですが。

できたものは、自宅サーバーでVM建ててそこでdocker composeで動かしています。cms本体のコンテナと、外部公開用のcloudflare tunnelのコンテナで合計2つですね。

設計

設計はClaude CodeのPlanモードをふんだんに使ってきました。ブログ側のfrontmatterを読んだりconfigを読んだ上で、CSM側で設計をする……みたいな、プロジェクトを横断する作業が必要だったので、ここはエージェントだからこそ簡単にできる部分かもですね。

一部技術スタック以外は全部Opus 4.6との壁打ちで決めました。

実装

実装はほんとシンプルというかなんというか、設計時に出力させたPLAN.mdに沿ってとりあえず動きそうな見た目を作らせるだけです。

今回はロードマップに分けるように指示し、1フェーズずつテストを行わせる感じで実装をさせました。

なんやかんや、1時間くらいClaude Codeが働いてる横でアニメを視聴し、全てのフェーズが完了しました。

まあ当然一発で理想通り動くはずもなく……ここからバグ修正地獄が始まります。

Opus 4.6最強伝説

バックエンドは特に複雑なものでもないので特に問題なく動きました。色々面倒だったのはフロントエンド側ですね。

見た目の修正とか、更新かけるとフィールドの文字が消えるみたいな現象は自力で治せる範囲なので自力で治しました。が、保存ボタンがなんか機能しなかったり、一覧ページが上手く描画されないことがあったりと自力で調査するには面倒な問題がいくつも発生し……。

そういった問題、自分で見てもよくわからなかったのでとりあえずClaude CodeでSonnet 4.6にぶん投げていたのですが、ものによっては1時間くらい自走させても一向に解決しなかったりで割と行き詰まってました。

今思えば「自分で1時間くらい見てわからない時点でOpus 4.6に投げればよかったな」って感じなんですが、とにかくトークンを節約したい一心でひたすらSonnetを走らせていました。

ついにしびれを切らしてOpusにしたらなんと衝撃、人力 + Sonnetで2時間かかって解決しなかった不具合が10分で解決しました。大人しく賢いやつを使いましょうというまなび。

Claude Pro契約してみて（利点と欠点）

一言でいうと、めっちゃ良いです。が、メリット同様デメリットもあるので、そこら辺を少し書けたらなと思います。

メリット

• Claudeがたくさん使える
• Claude Codeが使える
• Cowokerが使える（使ったことないので謎ですが）

デメリット

• レートリミットが割とキツイ（特に週間制限）

デメリットはマジでこれだけです。残念ながら、毎日開発させたら普通に週間制限叩いてしまいます。ただ、そこまでヘビーに開発しないよ！という人ならリミット気にすることもないと思うので、結局使い方かな～って感じです。

/compactとか/clearは積極的に使って、コンテキストを肥大化させないことがトークン節約において大事だなという学びを得ましたね。

無料プランでも使えるSonnet 4.6の使い心地が好きで、なおかつ個人開発を多少なりともやるみたいな人は契約して損することは絶対にないと思います！オススメです。

蛇足

さっき週間制限叩いてる画像貼ったと思うんですが、実はこれちょっとバグの影響があるんですよね。

というのも、僕が契約した直後の先週あたり、Claudeのトークンが使われすぎるみたいな問題があり、それに巻き込まれたものこの100%という数字にはある程度含まれているのです。

その問題の対応として、Claudeを作っているAnthropicさんたちは契約プランごとにClaudeを使えるクレジットを配布してくれました。僕はProプランなので$20を受け取れるはずだったんですが……

謎の力によって2倍である$40を受け取ることができました。バグの話出てた頃は「契約するタイミングミスったな～」とか考えていたのですが、結果的にラッキーな展開になりましたね。ありがたいです。

おわり

ということで、Claude Pro契約して作ったCMSの紹介と、Claude Proの所感でした。今回の記事は最初から最後まで全部CMS側で作ってみたので、いい感じに動いてくれよ！と今祈りながら書いております。

最後まで読んでいただきありがとうございました。良ければいいねボタンも押してくれると僕が喜びます。では！