はじめに
何度もブログを作ろうとしてきた。これまで一番続いた環境が GitHub Pages と microCMS の組み合わせ。何記事か書いて、そのうち手が止まる。そんなことを繰り返していた。
そもそもネタが多い方ではない。それでもたまに「これは書いておきたい」と思うことがある。いつも環境のせいにして自前で構築しようとする。途中で技術的に行き詰まる。「書きたいのに」と言って書くまでの手順が面倒になる。そうしているうちにモチベーションが消える。
今回は AI と一緒に作ることにした。面倒を極限まで無くして言い訳の余地を潰す。
結果、コードを1行も書かずに、手軽に執筆できる高速動作のブログが完成した。
完成した環境
まず先にゴールを見せておく。
graph LR
A["Notion（執筆）"] --> B["GitHub（ソース管理）"]
B --> C["Cloudflare Pages（ビルド・配信）"]
C --> D["manulma.me（公開）"]
C --> E["プレビュー環境（下書き確認・認証付き）"]
- 執筆: Notion（PC でもモバイルでも）
- フレームワーク: Astro（静的 HTML 生成、ゼロ JS、SEO に強い）
- ホスティング: Cloudflare Pages（独自ドメイン、自動ビルド）
- プレビュー: 下書き記事を含む確認環境（認証付きで自分だけアクセス可能）
- 記事執筆サポート: Claude Code / Claude AI のどちらからでも Notion に記事を書ける
Notion で記事を書いたら、あとはビルドするだけ。表示は速い。SEO のベースも整っている。自分にとって「手軽さ」をずっと追い求めてきた結論がこの構成になった。
なぜ何度も挫折したか
Notionの有料契約をしていて、Notionで文章を書く気持ちよさはわかっていた。ブログの執筆環境は絶対にNotionにするとずっと思っていた。PC からもモバイルからも書けるのは魅力的だ。
でも、Notion からブログにコンテンツを引っ張ってくるのは結構大変だった。UI が固定でよければテンプレートがいくつかオープンソースで公開されていたけど、それだと自分の好みに合わない。かといってゼロから作る技術力と時間はなかった。
環境構築に時間を取られて、肝心の「書く」に辿り着けない。これがいつものパターンだった。
AI と技術選定
Claude Code に要望を伝えて、技術構成を一緒に決めた。こちらから出した条件は3つ。
- SEO: 個人ブログでも note や Zenn に負けないベースを作りたい
- Notion: 執筆環境として必須
- 独自ドメイン: 今回はちゃんとドメインを取ってやる
Claude Code が提案してきたのが Astro だった。静的 HTML を生成するフレームワークで、JavaScript をほとんど出力しないから表示が速く、SEO にも強い。知らないフレームワークだったけど、理にかなっていたので採用した。
ホスティングは最初 GitHub Pages を提案された。でも GitHub Pages は public リポジトリでないと無料で使えない。「Netlify は？」とこちらから聞いたら「Cloudflare Pages もあるよ」と返ってきて、いくつか比較検討した結果 Cloudflare に決めた。
技術選定のプロセス自体が Claude Code との対話で進んでいった。自分が要望と制約を出して、Claude Code が選択肢を提示して、一緒に絞り込む。この進め方は心地よかった。
コードを書かずに構築できた
自分が書いたコードはゼロだ。
Astro のプロジェクト構成、Notion API との連携、SEO 用のメタタグ、RSS フィード、サイトマップ、OGP 対応。全部 Claude Code が書いた。こちらは出来上がったものを確認して、気になるところを指摘して直してもらう、というやり取りの繰り返しだった。
本当にすごい時代になったと思う。これまで自分で構築しようとして何度も技術的に行き詰まってやめたことが、対話だけで実現できる。
ただ、AI にも苦手なことはある。
Cloudflare の管理画面の設定は、Claude Code の指示通りだと項目が見つからなかったり、UIが変わっていたりすることがあった。更新の早いサービスだと、AI の知識が少しずれていることがあるようだ。そういう部分は自分でググって解決した。
プレビュー環境を作る
本番環境だけでなく、下書きを確認できるプレビュー環境も作った。
仕組みはシンプルで、本番ブランチとは別にプレビュー用のブランチを用意して、プレビュー側だけ下書き記事を含めてビルドする。プレビュー環境には認証をかけて自分だけがアクセスできるようにした。
「本番とプレビューを分ける」こと自体は、自分のこれまでのWeb開発の知見が少なからず活かせていそうで嬉しいポイントだ。設計は自分、実装は AI。任せっきりじゃない、自分が居る意味を感じる瞬間だ。
どこからでも書ける
今回の環境のポイントは、記事を書く手段が複数あることだ。
- Notion: 最もベーシック。PC でもスマホでも。あとからClaudeで見直すこともできる
- Claude Code: ターミナルから Notion MCP 経由で記事を作成・編集
- Claude AI: claude.ai のプロジェクト機能で、Notion MCP 経由で記事を作成・編集
どの手段でも最終的には Notion に記事が入る。あとはビルドするだけ。
そして、そのビルドも手軽にした。Cloudflare Pages の Deploy hooks を使って、iPhone のショートカットからワンタップでビルドを実行できるようにしている。Notion で記事を書いて、ショートカットをタップして、数十秒後にはサイトに反映される。PC を開く必要すらない。
「書きたいこと」はあるけど「文章にする」のが面倒、という自分にとって、AI が執筆を手伝ってくれるのは大きい。考えの種を渡して、構成を一緒に練って、文章に仕上げてもらう。最終的に自分の言葉になっているかは自分で確認する。
このポータビリティの良さが、続けられる環境の鍵だと思っている。
おわりに
AI の時代だからこそ、自分の考えを発信することに価値があると思っている。
「自分だけのブログ環境」は、もう特別な技術がなくても作れる。note や Zenn のようなプラットフォームも良いけれど、自分の場所を持つという選択肢が、AI のおかげで現実的になった。
発信の内容も同じだ。全部を AI に書かせるのでは意味がない。でも、考えの種を AI に育ててもらって、読みやすい形に整えてもらう。そうすることで、今まで発信されることのなかった考えが外に出ることになる。
AI の助けを存分に受けて、誰か必要としている人に届いてくれると嬉しい。
今回は、文章を書かないことを他責にできない環境が整ってしまった。