セミリタイアにむけて、ブログの運用を、今度こそ続けようと思い、Webサイトを構築してみました。この記事では、初期投資もランニングコストもなるべくかけない方針を探りながら構築した手順を紹介します。
参考記事:ブログ収益化の仕組みを整理してみました。
このサイトの作り方
全体の仕組み
このサイトは、3つのサービスをつないで動いています。
- 書く:Notion(メモやドキュメントを書くアプリ)で記事を書く。
- 組み立てる:GitHub(プログラムを保管・管理するサービス)が、30分おきに記事を取りに行き、サイトの形に組み立てる。
- 届ける:Cloudflare Pages(サイトを公開するサービス)で、サイトとして公開する。
WordPressでいう「管理画面」が、Notionに置き換わっているイメージです。全体で、週末1回でできました。
⓪ 作り方をClaudeに相談して決める
最初に、生成AIのClaudeに「なるべくコストをかけず、SEO・AIO・AEOに強い作り方」を聞いてみました。
📌 AIO・AEOとは
AIO:Googleで検索すると、結果のいちばん上に、AIがまとめた回答(AIによる概要)が出ることがあります。そこに、参照元として自分のサイトが表示されるようにする工夫。
AEO:ChatGPTやGeminiなどの生成AIに、チャットで質問したとき、AIが答えの根拠として自分のサイトを紹介・引用してくれるようにする工夫。
提案されたのが、今の「Notion+GitHub+Cloudflare Pages」の組み合わせ。
表示が速いこと、検索エンジンやAIが読みとりやすい情報を入れやすいこと、無料で運用できることが理由とのことなので、これで進めることにしました。
① 仕様書を作る
いきなり作り始めず、まずは「どんなサイトにするか」を書き出します。
- 誰向けの、どんなサイトか
- ページの構成:トップ、記事一覧、記事、このサイトについて、プライバシーポリシー
- Notionで管理する項目:タイトル、タグ、公開日、更新日、サムネイル、公開するかどうか
- 欲しい機能:タグでの絞り込み、サイトマップ、SNSでシェアされたときの画像、アクセス解析など
② Notionを準備する
記事やカテゴリ・タグのデータベースを作り、仕様書どおりの項目で用意する。
Notionのデータを読み込むための鍵(APIシークレット)とIDを控える。(⑥で利用)
💬 データベースは、AIに聞きながら作りました。
③ Claudeにコードを作ってもらう
仕様書をClaudeに渡して、サイトのプログラム一式を、zipファイルで受け取りました。
Notionから記事を取ってくる仕組みから、30分おきに自動で組み立てる設定まですべて。
💬 自分で書いていたら、何ヶ月かかったことか・・・
④ GitHubにリポジトリを作る
GitHubで、新しいリポジトリ(プログラムの保管場所)を「公開」で作り、zipの中身を、ブラウザからアップロードする。
⑤ Cloudflare Pagesを準備する
Cloudflareで、空のプロジェクトを作り、アカウントIDを控え、操作用の鍵(APIトークン)を発行する。(⑥で利用)
💬 もちろんAIに聞きながら実施しましたが、AIの情報が古かったりしたので、実際の自分の画面をキャプチャするなどして、指示してもらいました。
⑥ つないで、公開する
GitHubのリポジトリの設定(Settings → Secrets and variables → Actions)に、②と⑤で控えた鍵やIDを登録する
サイトを公開し、成功を確認する。
※Cloudflare Pagesの無料枠では、GitHubと直接つないで組み立てる回数に、月500回の上限があります。このサイトは、GitHub側で組み立ててからCloudflareに送る方式なので、この上限の対象外とのことです。
WordPressと比べてみる
WordPressで作る場合
日本語のサイトで使われているCMS(記事を書いて管理する仕組み)のうち、82.9%がWordPressとされています(2026年9月時点)。
始めるのに必要なのは、レンタルサーバー(月額)、独自ドメイン(〇〇.com など、サイトの住所。年額)、WordPress本体(無料)の3つ。
国内でよく使われているエックスサーバーの場合、いちばん安いプランで、12ヶ月契約なら月990円(キャンペーン価格、2026年10月現在)です。
- サーバー代(年額)= 990円 × 12ヶ月 = 11,880円
もうひとつ、WordPressは、本体やプラグイン(機能を足す部品)を、自分で更新し続ける必要があります。古いバージョンのままだと、サイトを書き換えられる被害につながることがあり、IPA(情報処理推進機構)も注意を呼びかけています。
比較表
| 項目 | WordPress(レンタルサーバー) | このサイト(Notion+GitHub+Cloudflare) |
|---|---|---|
| サイトの費用 | サーバー代 年1万1,880円〜(ドメイン無料特典あり) | サーバー代0円、ドメイン代1,369円 |
| AIの費用 | 使わなくても作れる | Claude 有料プラン 月20ドル(約3,140円) |
| 書く場所 | WordPressの管理画面 | Notion |
| 始めるまで | 管理画面からインストール | 設定が多い。AIに手伝ってもらう |
| 日々の手間 | 本体・テーマ・プラグインの更新 | ほぼなし。自動更新が止まっていないかの確認くらい |
| 困ったとき | 検索すれば、たいてい答えがある | AIに聞けば、すぐ答えが返ってくる |
- AI代(年額)= 20ドル(約3,140円)× 12ヶ月 = 240ドル(約3万8,000円)
※1ドル=157円で計算(2026年9月30日時点の公示仲値157.30円をもとに、1円未満を切り捨て)。 ※独自ドメイン1,369円は[要記入:年額か初年度か、取得したサービス名]。
AI代まで含めると、WordPressより高い、という結果に。ただ、AIは調べものや記事づくりにも使っている道具なので、いったん別枠で考えています。
どちらで始めるか
WordPressは利用者が多いため、困ったことがあっても検索すればたいてい解決策が見つかります。また、最近ではわからないことをAIに質問しながら進めることも可能です。
一方、このサイトの構築方式(Notion × GitHub × Cloudflare)は、わからないことをClaudeなどのAIに聞けばすぐに答えが返ってきて、場合によってはコード作成まで手伝ってくれます。ただその反面、正直なところ「仕組みをすべて自分では理解しきれていない」と感じる部分も出てきます。
なので、ざっくり分けると、こんな感じかなと思います。
- WordPress:解説記事などを参考にしながら、仕組みを理解してじっくり進めたい人
- このサイトの方式:仕組みの完全な理解よりも、AIの手を借りて手早く形にしたい人(※AIの有料プランに月3,000円ほどかけられる人)
もし迷うなら、まずは情報の多いWordPressからスタートして、慣れてきたら新しいやり方を検討するくらいでちょうど良いと思います。
ちなみにこのサイトは、「運用コストをかけない」「書くこと以外の負担を減らす」という点を一番に考えて、Notionで記事を書く方式を選びました。
少し運用してみて、わかったこと、手を入れたところ
自動更新が、止まることがある
GitHubの公開リポジトリでは、60日間なにも更新がないと、定期的に動く仕組みが自動で止まるようです。止まっていたら、手動で動かせば元に戻ります。
💬 書かない期間が続くと、サイトにもバレる仕組みw
画像の説明を、2つに書き分ける
画像には、2種類の説明があります。
- alt(代替テキスト):画像が表示されないときや、読み上げソフトで読まれる説明。検索エンジンやAIが、画像の内容を知る手がかりにもなる。
- キャプション:画像の下に表示する説明。
Notionの画像には、キャプション欄が1つしかないので、「alt:」で始めて書いたときは、表示せずaltとしてだけ使う、というルールにしました。
Notionの画面のままで、2つを書き分けられるので、楽。
リンクの開き方を、サイト内と外部で分ける
- サイト内の記事へのリンクは、同じタブで開く。
- 外部のサイトへのリンクは、新しいタブで開く。
外部のサイトを見終わったあと、読んでいた記事にそのまま戻ってこられるように、こうしています。
いちばん効いたのは、デザインの作り直し
最初のサイトは、世界観も見やすさもなかった
公開した時点のサイトは、記事のカテゴリをざっくり決めて、トップページに新しい順に並べ、色もシンプルにしただけのものでした。
ひととおり動いてはいるけれど、誰に向けた、どんなサイトなのかが伝わらないし、読みやすさも、いまひとつ。
先に、コンセプトを決める
そこで、見た目をいじる前に、細田高広さんの『コンセプトの教科書』を読んで、このサイトのコンセプトづくりを実践してみました。
誰に向けて、何を届けるサイトなのかを、ドキュメントにまとめています。
コンセプトの中身は、このサイトについてに書いています。
Figmaでデザインを起こし、Claudeで実装する
まとめたドキュメントを、Figma(デザインを作るツール)に読み込ませて、デザインを起こしてもらいました。
そのデザインをもとに、Claudeにコードを作ってもらい、サイトに反映しています。
コンセプトを先に決めておくと、デザインの判断に迷いにくい、というのが実感です。
💬 仕組みより先に、世界観。順番が逆だった。
これから実装したいこと
- よく読まれている記事を、アクセスのデータに応じて出し分ける
- サイト内検索
- メルマガ:配信できるようになったら、仕事で使い慣れているHubSpot(顧客管理やメール配信ができるツール)も使ってみたい
【参考】関連データ
| 項目 | 内容・詳細データ |
|---|---|
| このサイトの仕組み | Notionで書く → GitHubが30分おきに組み立て → Cloudflare Pagesで公開 |
| このサイトの費用 | サーバー代0円、独自ドメイン1,369円 |
| 生成AIの費用 | Claude 有料プラン 月20ドル(約3,140円)、年240ドル(約3万8,000円)。1ドル=157円で換算 |
| WordPressのシェア | 日本語サイトのCMSのうち82.9%(2026年9月15日時点、W3Techs) |
| WordPressの費用例 | エックスサーバー スタンダード 12ヶ月契約で月990円(キャンペーン価格、通常1,100円)、年1万1,880円 |
| Cloudflare Pages 無料枠 | GitHub連携での組み立ては月500回まで、1サイト2万ファイルまで |
| GitHub Actions | 公開リポジトリでは無料。60日間更新がないと定期実行が自動で停止 |
| デザインツール | Figma 無料版(Starter) |