Publee
microCMSとClaudeで、自分だけのデザインのブログを作る
自分のブログを持ちたいと思ったとき、多くの人は二択にぶつかります。noteのような投稿サービスは手軽だけれど、見た目はどのアカウントも同じで「自分のサイト」という感じがしない。かといってWordPressは、サーバー契約にテーマ選び、プラグインやアップデートの管理と、書くこと以外の仕事が多い。
この記事では、その間を取る方法を紹介します。記事はmicroCMSで書き、サイトの見た目はClaudeに日本語で注文して作ってもらい、PubleeでURLにして公開する。コードは1行も書きませんが、デザインは既製テーマから選ぶのではなく、あなたの注文どおりのオーダーメイドになります。サーバーの契約も保守もありません。
この方法の仕組み
microCMSは「ヘッドレスCMS」と呼ばれるサービスで、記事を書く管理画面と、記事をデータとして取り出すAPIだけを提供します。サイトの見た目は自分で用意する必要があり、ここが初心者の最初の壁になっています。
そこで、見た目の部分をClaude(AIエージェントのClaude Code)に任せます。Claudeは一度の指示で、microCMSのAPIから公開中の記事を取得し、記事一覧と記事ごとのページを静的なHTMLとして生成し、Publeeで公開するところまでを行います。
この組み合わせには利点が4つあります。
- デザインを既製テーマから選ぶ必要がありません。「余白を多めに」「見出しは明朝体で」と言葉で注文して、自分のデザインに寄せていけます
- ビルド環境もサーバー契約も不要です。PubleeはHTMLを渡すと10秒でURLを返します
- 公開されるのは生成済みのHTMLだけなので、microCMSのAPIキーが公開ページに含まれません(ブラウザから直接APIを呼ぶ方式との大きな違いです)
- 記事を追加したら、もう一度Claudeに頼むだけで同じURLのまま中身が更新されます
用意するもの
- microCMSのアカウント(microcms.ioで無料登録)
- Claude Code(ターミナルで動くClaude。claude.com/claude-codeからインストール)
- Publeeのアカウント(無料。登録なしでも公開できますが7日で削除されるため、ブログとして続けるなら登録をおすすめします)
ステップ1: microCMSでブログAPIを作る
microCMSで無料登録してサービスを作ると、「APIを作成」という画面になります。ここでテンプレートから「ブログ」を選んでください。
これだけで、タイトル・内容・アイキャッチ・カテゴリの項目を持つ記事の入れ物ができあがります。スキーマ設計のような難しい作業は必要ありません。
ステップ2: 記事を書く
サイドバーの「ブログ」→ 右上の「追加」で執筆画面が開きます。タイトルと内容を書いて、右上の「公開」を押すだけです。noteやWordPressと同じ感覚のエディタなので、迷うところはないはずです。本文の途中に写真を入れたいときも、エディタの画像ボタンからアップロードするだけです。
何本か書くと、コンテンツ一覧はこうなります。テンプレートに最初から入っているサンプル記事は、開いて右上の「…」メニューから「下書きに戻す」を選んでおきましょう。ブログに載るのは「公開中」の記事だけです。
ステップ3: APIキーをコピーする
サイドバーの「1個のAPIキー」を開き、コピーボタンでAPIキーを控えます。これは記事をAPIで読み取るための鍵で、次のステップでClaudeに渡します。
このキーは初期設定では読み取り(GET)専用です。記事の書き換えや削除はできない鍵なので、万一漏れても記事が壊されることはありません。
ステップ4: Claudeに組み立てと公開を頼む
ClaudeがPubleeへ公開できるように、ターミナルで次のコマンドを一度だけ実行します(初回の公開時にブラウザが開き、Publeeへのログインを求められます)。
claude mcp add --transport http publee https://publee.app/api/mcp
つづいて claude を起動し、次のプロンプトを貼り付けます。書き換えるのは冒頭の3か所だけです。
microCMSから記事を取得して、ブログサイトを作り、Publeeで公開してください。
- サービスドメイン: ○○○○(管理画面URLの ○○○○.microcms.io の部分)
- エンドポイント: blogs
- APIキー: (ステップ3でコピーしたキー)
条件:
- トップページに記事一覧を新しい順で表示し、記事ごとに個別ページも作る
- スマホでもきれいに表示する
- 落ち着いた、余白の多いデザインにする
- 誰でも見られる公開設定(public)にする
- 公開が終わったらURLを教えてください
1〜2分で https://○○○.publee.site というURLが返ってきます。実際にこの手順どおりに作ったブログがこちらです(記事は、microCMSに入れた架空の喫茶店のお知らせ2本です)。
microCMSの本文に入れた写真も、見てのとおりそのまま反映されます。
このデモサイトは実際にPubleeで公開しています。
喫茶こもれび ブログ — この記事の手順どおりに公開したデモサイトmicroCMSとClaudeで作ったブログのデモサイトkomorebi-blog.publee.site
デザインの注文は会話でできます。「もっと明るい配色にして」「見出しをゴシック体にして」と伝えれば、その場で作り直して再公開してくれます。テーマの一覧から近いものを探すのではなく、言葉で自分のイメージに寄せていけるのが、この方法のいちばんの違いです。
記事を更新したいとき
microCMSで新しい記事を書いて「公開」を押したら、Claudeに一言だけ頼みます。
microCMSに記事を追加しました。ブログを更新してください。
Publeeは公開済みのサイトを上書き更新できるので、URLは変わらないまま中身だけが新しくなります。SNSのプロフィールに貼ったリンクはそのまま使えます。なお、上書き更新にはPubleeへのログイン(無料)が必要です。
料金: 無料でどこまでできるか
microCMSは個人ブログなら無料のHobbyプランで十分です(詳細はmicroCMSの料金ページを参照)。Publee側は次のとおりです。
| プラン | 料金 | 保存期間 | 特徴 |
|---|---|---|---|
| 登録なし | 0円 | 7日で自動削除 | まず試したいときに |
| Free(無料登録) | 0円 | 無期限・同時3サイトまで | URLは自動発行のランダムな文字列 |
| Pro | 月1,480円 | 無期限 | 好きなURLを選べる・検索エンジンに載せられる |
ひとつ注意があります。無料プランのサイトは検索結果に載らない設定(noindex)になっています。「検索から読者に見つけてもらうブログ」にしたい場合はProが必要です。SNSやプロフィールからのリンク先として運用するなら、無料のままで問題ありません。Proでは独自ドメイン(○○.com など)も月500円で追加できます。
よくある質問
Q. noteやWordPressと比べてどうですか? noteは書き始めるまでが最速ですが、デザインは共通で、あなたのサイトというよりnoteのページです。WordPressはなんでもできる反面、サーバー契約・テーマ選び・プラグインやアップデートの管理がついて回ります。この方法は「書く場所(microCMS)」「デザイン(Claude)」「置き場所(Publee)」を分けることで、保守なしで自分のデザインを持てるのが特徴です。一方で生成されるのは静的なサイトなので、コメント欄や会員機能のような動的な機能が必要なら、WordPressなどが向いています。
Q. プログラミングの知識は必要ですか? 不要です。コードはすべてClaudeが書きます。あなたがするのは、microCMSで記事を書くことと、Claudeに日本語で頼むことだけです。
Q. microCMSのAPIキーをClaudeに渡して大丈夫ですか? このキーは読み取り専用で、記事の書き換えはできません。また、生成・公開されるのは静的なHTMLなので、キーが公開ページに含まれることもありません。
Q. カテゴリやアイキャッチ画像も反映できますか? できます。本文の途中に入れた画像は何もしなくてもそのまま表示されます。カテゴリやアイキャッチのような別項目は、プロンプトの条件に「カテゴリ別の一覧も作って」「アイキャッチ画像を記事一覧に表示して」と足すだけです。microCMSのブログテンプレートには、どちらの項目も最初から入っています。
Q. ブログ以外にも使えますか? 使えます。microCMSのテンプレートにある「お知らせ」「バナー」も同じ手順で公開できます。お店のホームページ自体をClaudeで作る手順はClaudeでお店のホームページを自作して公開する方法にまとめています。
Q. Claude Code以外のAIエージェントでもできますか? 「APIから記事を取得してHTMLを組み立てて公開する」流れ自体は、他のAIエージェントでも可能です。Publeeの公開APIとMCPの詳細はMCPでHTMLを一瞬で共有URLにするで解説しています。