50代から育てるポートフォリオTIME · MONEY · SMALL MEDIA

自分の小さなメディア / 実験ログ

セミリタイアにむけて、お金をかけずに自分のサイトを作ってみた

・WordPressと、このサイトの作り方(Notion+GitHub+Cloudflare+生成AI)の違いと費用 ・作り方を決めてから公開するまでの流れと、つまずいたところ

coconeco約9分で読めます

セミリタイアにむけて、ブログの運用を、今度こそ続けようと思い、Webサイトを構築してみました。この記事では、初期投資もランニングコストもなるべくかけない方針を探りながら構築した手順を紹介します。

参考記事:ブログ収益化の仕組みを整理してみました。

このサイトの作り方

全体の仕組み

このサイトは、3つのサービスをつないで動いています。

  • 書く:Notion(メモやドキュメントを書くアプリ)で記事を書く。
  • 組み立てる:GitHub(プログラムを保管・管理するサービス)が、30分おきに記事を取りに行き、サイトの形に組み立てる。
  • 届ける:Cloudflare Pages(サイトを公開するサービス)で、サイトとして公開する。
Notion → GitHub → Cloudflare Pages の流れ
Notion → GitHub → 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)

急がない。でも、止まらない。

このログは個人の考え方と体験の記録で、特定の金融商品や個別銘柄の購入を勧めるものではありません。契約や運用の判断が必要な場合は、条件を確認し、必要に応じて専門家に相談してください。

記録する人

会社員を続けながら、 これからの働き方を試しています。

50代、会社員。専門家ではありません。だからこそ、調べ、試し、迷った道筋まで共有します。時間と収入を、自分のペースで育てるための小さな作業机です。

このサイトについて →