ツバサのメモ帳

AIに聞きながらGitHub Pagesでブログを構築した話

GitHubもHTMLも知らなかった非エンジニアが、AIの力を借りてブログサイトを作るまでの記録

更新日:2026年4月20日

この記事でわかること

  • 非エンジニアがAIに聞きながらGitHub Pagesブログを構築した具体的な流れ
  • AIにどんな質問をして、どんな作業を任せたか
  • SEOやLLMOの設計にAIをどう活用したか
  • 実際につまずいたポイントと対処法

こんにちは、ツバサです。このブログ「ツバサのメモ帳」は、GitHub Pagesという無料のホスティングサービスで運営しています。記事数は現在140本以上。Google AdSenseの広告も掲載しています。

こう書くと技術に詳しい人のブログに見えるかもしれませんが、自分はエンジニアではありません。EC関係の仕事をしている会社員で、AIを使い始めるまでGitHubという言葉すら聞いたことがありませんでした。

この記事では、そんな状態からAIに質問しながらブログサイトを構築していった過程を、時系列でまとめています。

GitHubもHTMLも知らない状態からスタートした

ブログを始めたいと思った理由は単純で、EC業務で調べたことの備忘録を残しておきたかったのと、せっかくなら広告収入も得られる形にしたかったからです。

最初に検討したのはnoteとWordPressでした。noteは書くことに集中できるけれどAdSenseが使えない。WordPressは月額1,000円前後のレンタルサーバー代がかかる。そんな中で見つけたのがGitHub Pagesでした(比較の詳細は「noteでなくGitHub Pagesを選んだ理由」にまとめています)。

ただ、その時点ではGitHubが何をするためのサービスなのかも分かっていませんでした。「プログラマーが使うもの」という認識しかなく、自分には関係のない世界だと思っていました。

転機になったのは、たまたまClaude(Anthropicが作ったAI)に「無料でブログを作る方法はありますか?」と聞いたことです。返ってきた選択肢の一つにGitHub Pagesがあり、「HTMLファイルを置くだけでサイトが公開される」「費用は0円」と書かれていました。HTMLも書けないのに大丈夫なのか不安でしたが、「分からないことはその都度AIに聞けばいい」と思って始めることにしました。

AIに聞きながら構築するとはどういうことか

「AIに聞きながら」というのは、具体的には2つのツールを使い分けています。

1つ目はClaude(チャット版)。ブラウザで会話するAIで、「サイトの構成をどうするか」「SEO的にtitleタグは何文字が良いか」「サイトマップの書き方」のような相談をしています。戦略を考える部分はここでやります。

2つ目はClaude Code。ターミナル(コマンドを入力する黒い画面)で動くAIツールで、「このHTMLファイルのtitleタグを変更して」「sitemap.xmlにこのURLを追加して」のような、ファイル操作を指示すると実際にファイルを書き換えてくれます。手を動かす部分はこちらに任せています。

なお、Claude Proプラン(月額20ドル、約3,000円)に加入すると両方使えます。GitHub Pages自体は無料なので、ブログ運営にかかる費用はこのAI利用料だけです。

誤解されやすい点:AIに記事の文章を書かせているわけではありません。自分がこのブログでAIに任せているのは、HTMLページの組み立て、CSS(デザイン)の調整、SEO関連の技術設定、git操作といった「技術的な作業」です。記事の中身は自分で調べて自分で書いています。

実際にやったことを時系列で振り返る

1. サイトの骨組みを作った

最初にAIに「シンプルなブログのHTMLテンプレートを作って」と頼みました。トップページ、記事ページ、プライバシーポリシーの3ファイルが出てきて、デザインの好みを伝えると修正してくれました。落ち着いた配色・余白多め・スマホ対応、くらいの指定で十分です。

GitHubのアカウント作成やリポジトリの設定も、手順をAIに聞きながらやりました。「GitHub Pagesで公開するには何をすればいいか」と聞けば、スクリーンショット抜きでもテキストの手順だけで進められます。

2. 記事を増やしていった

テンプレートができたら、中身を入れ替えて記事を増やしていきます。「この記事のHTMLファイルを、既存のテンプレートに合わせて作って」とClaude Codeに指示すると、ファイルが生成されます。自分の作業は記事の内容を考えることと、出来上がったファイルを確認してGitHubにアップロード(push)することです。

3. SEO関連のファイルを設置した

検索エンジンに見つけてもらうために必要なファイルがいくつかあります。sitemap.xml(サイトの全ページ一覧)、robots.txt(クローラーへの指示)、構造化データ(FAQ等のJSON-LD)などです。これらの存在を知ったのもAIに教えてもらってからで、書き方もすべてAIに聞きました。

4. AdSenseに申請・合格した

記事が10本を超えた段階でGoogle AdSenseに申請しました。プライバシーポリシーの文面をAIに相談し、AdSenseのスクリプトコードをHTMLに埋め込む作業もAIに指示しました。審査は通りましたが、正直なところGitHub Pagesだから通ったというよりコンテンツの中身で判断されていると思います。

5. 100ページを超えて運用フェーズに入った

記事が100本を超えたあたりから、新規記事の追加よりも既存記事の改善やSEO分析の比重が増えました。Google Search Consoleのデータを見て、どのページが検索に表示されているか、クリック率が低いページのtitleを改善するといった作業です。この分析もAIに手伝ってもらっています。

SEOとLLMOもAIに聞きながらやった

サイトの構築だけでなく、検索エンジン対策(SEO)とLLM最適化(LLMO)の設計にもAIを活用しました。

具体的にAIに相談・実行してもらったのは、各記事のtitleタグとmeta descriptionの最適な文字数設計、FAQ構造化データ(JSON-LD)の生成と全記事への設置、内部リンク構造の設計(どの記事からどの記事にリンクを張るか)、llms.txt(AIチャットボットがサイト情報を読み取るためのファイル)の作成と更新、Google Search Consoleのデータ分析と改善提案などです。

自分一人ではJSON-LDの書き方を調べるだけで半日かかっていたと思います。AIに「この記事のFAQを構造化データにして」と頼めば数秒でコードが出てきます。非エンジニアにとって、この部分の時間短縮効果は大きいです。

LLMOについてはまだ試行錯誤の段階ですが、llms.txtを設置したことでAIチャットボットがこのサイトの情報を参照しやすくなっているはずです。SEOだけでなくAIからの流入も意識した設計ができるのは、GitHub PagesでHTMLを自由に触れるからこそです。

非エンジニアが実際に詰まったポイント

AIがあれば何でもスムーズに進むかというと、そんなことはありません。実際に困った場面をいくつか挙げます。

gitの操作で事故を起こす

gitは変更履歴を管理するツールですが、操作を間違えると「コンフリクト」(変更の衝突)が起きてファイルがぐちゃぐちゃになります。自分は何度かこれをやりました。AIに状況を説明すれば復旧手順を教えてくれますが、最初は何が起きたのか自分でも理解できないので説明のしようがなく、かなり焦りました。

AIの回答が間違っていて遠回りする

AIは万能ではなく、たまに古い情報や不正確な手順を教えてくることがあります。たとえばサービスの料金情報をAIに聞いて記事に書いたら、実際の価格と違っていたことがありました。AIが出した情報は公式サイトで裏を取る習慣をつけないと、間違ったまま公開してしまいます。

Googleになかなかインデックスされない

GitHub Pagesの新規サイトはドメインの信頼性が低いため、Googleに記事を認識してもらうまで時間がかかります。サイトマップを送信してもすぐには反映されず、1ページずつ手動でインデックスリクエストを送る作業を地道に続けました(この話は「Googleにインデックスされるまで」にまとめています)。

CSSが崩れて原因が分からない

AIに作ってもらったデザインが、スマホで見ると表が画面からはみ出していたり、文字が重なっていたりすることがありました。「スマホで表示が崩れている」とAIに伝えれば直してくれますが、自分で気づかないと放置してしまう。公開後にスマホで表示を確認する作業は毎回やるようにしています。

まとめ:AIがあれば非エンジニアでもブログは作れるか

結論として、作れます。ただし条件があります。

「AIに全部お任せ」では回らなくて、自分が考える部分と、AIに任せる部分を切り分ける必要があります。このブログの場合は「何を書くか」「どう見せるか」の判断は自分でやり、「HTMLの組み立て」「SEOの技術設定」「ファイル管理」をAIに任せるという分担に落ち着きました。

もう一つ必要なのは、AIの回答を鵜呑みにしない姿勢です。AIが出してきた情報が正しいかどうか、必ず自分で確認する。この手間を省くと、間違った情報を掲載したり、サイトの設定がおかしくなったりします。

逆に言えば、この2つさえ意識しておけば、GitHubを聞いたこともなかった人間でも140本以上の記事を持つサイトを運営できています。技術的な壁は、AIのおかげで思っていたよりずっと低かったです。

項目内容
使っているAIClaude Pro(月額20ドル)
ホスティングGitHub Pages(無料)
月額コスト約3,000円(AI利用料のみ)
記事数140本以上
広告Google AdSense、Amazon アソシエイト
AIに任せていることHTML構築、CSS、SEO技術設定、git操作
自分でやっていること記事の企画・執筆、公開判断、情報の裏取り

よくある質問

Q. AIでブログを構築するのにいくらかかりますか?

GitHub Pagesのホスティングは無料です。AIツール(Claude Pro)が月額20ドル(約3,000円)かかります。独自ドメインを取得する場合は年間1,500円程度が追加されます。合計で月3,000〜4,000円程度が目安です。

Q. プログラミングの知識がなくても大丈夫ですか?

大丈夫です。HTMLやCSSの書き方、gitの操作はすべてAIに聞きながら進めました。プログラミングの知識よりも「何を作りたいか」を言葉で説明する力の方が重要です。ただし、AIの出力を確認して修正を依頼するやりとりは必要です。

Q. どのAIを使えばいいですか?

このブログではAnthropicのClaude(Claude Pro、月額20ドル)を使っています。構成やSEOの相談にはClaudeのチャット版、ファイル編集にはClaude Codeを使い分けています。ChatGPTやGeminiでも同様のことは可能です。

Q. WordPressと比べてどちらが良いですか?

WordPressは管理画面から記事を書けるので技術に触れたくない人には向いています(レンタルサーバー代が月1,000円前後)。GitHub Pagesは月額0円でHTMLを完全にコントロールできるため、SEOやLLMOを細かく設計したい場合に有利です。

Q. AIを使えば記事も自動で書けますか?

このブログでは記事の内容は自分で書いています。AIに任せているのはHTMLの組み立て、SEOの技術設定、git操作といった技術的な部分です。記事テーマのリサーチにAIを使うことはありますが、文章をそのまま生成させてはいません。

Q. Googleにインデックスされるまでどのくらいかかりますか?

新規サイトの場合、最初の記事が認識されるまで1〜3週間かかることがあります。サイトマップをSearch Consoleに送信し、URLインスペクションツールでリクエストを送ると早まることがあります。全ページのインデックスには数ヶ月かかるのが実情です。

Q. GitHub PagesでAdSenseの審査は通りますか?

通ります。GitHub Pagesかどうかは審査に影響しません。コンテンツの質と量、プライバシーポリシーの設置、サイトの操作性が審査基準です。このブログもGitHub PagesでAdSense審査に合格しています。

ツバサ

ツバサ

EC関係の仕事をしています。このサイトは自分が調べたことの備忘録です。Photoshopは少し使えますが苦手で、ちょっとした画像補正はもっぱらスマホアプリ派。アプリで対応しきれない本格的なレタッチはプロに依頼しています。

noteでなくGitHub Pagesを選んだ理由|AdSenseが使いたかった tsubasa-memo.github.io/github-pages-vs-note.html Googleにインデックスされるまで|サイトマップ送信からの記録 tsubasa-memo.github.io/google-index-not-found.html AIに引用されやすい記事の書き方|LLMO(LLM最適化)を調べた tsubasa-memo.github.io/llmo-article-writing.html 個人ブログのSEOを勉強した記録|最初にやった5つの施策【備忘録】 tsubasa-memo.github.io/blog-seo-basics.html 個人ブログにGoogle AdSenseを申請してみた|審査から承認までの記録 tsubasa-memo.github.io/adsense-application.html