【教材にない裏ワザ】Claudeとスプレッドシートで実現!GitHub Pagesに無料ブログを作る方法

記事
ライフスタイル
本文:無料ブログ開設をClaude(クロード)で叶えた話
「自分のポートフォリオサイトにブログ機能を持たせたい!」
そんな思いを抱えながらWebデザインのオンラインスクールを受講していました。しかし、カリキュラムが進んで最終段階になっても、教材にはブログの作り方が出てきません。

「無料でブログを開設する方法はないかな……?」

そう模索していた私が、AIの「Claude」に相談しながら、GoogleスプレッドシートとGitHub Pagesを使って理想の無料ブログシステムを構築するまでの道のりをご紹介します!

目次(今回のトピック)
理想のブログの条件と、ひらめいたアイデア

Claudeとのやり取りで形になった「スプレッドシート連携」

ブラウザ上の操作だけで完結するスマートな公開手順

AI生成画像のクオリティを保つ軽量化のコツ

理想のブログの条件と、ひらめいたアイデア
ブログを始めるにあたって、私が重視したのは「書き込みやすさ」と「運用の手軽さ」でした。記事を書いた後に、あれこれと面倒なファイルを編集するような作業は避けたかったのです。

スクールの教材では、「GitHub Pagesを使えば無料でWebサイトを公開できる」と学びました。これまでの学習で、文字はHTML、装飾はCSS、動きはJavaScriptで制御することは分かっています。ブログの本質は「文字(テキスト)データ」です。

そこで、「GitHub Pagesの無料版でも、Googleスプレッドシートと連携させれば、容量を気にせず簡単に記事を管理できるのでは?」というアイデアがひらめきました。

Claudeとのやり取りで形になった「スプレッドシート連携」
このひらめきをClaudeに相談してみたところ、「面白いアイデアですね、出来ますよ!」と嬉しい返事が返ってきました。

さっそくClaudeから、ベースとなるスプレッドシートのテーブル形式(列の構成)の指示を受けました。スプレッドシートをURLで共有できるように設定し、以前にClaudeと一緒に作成したポートフォリオサイトのコードを基にカスタマイズを進めます。

日付、記事本文、タブ(カテゴリー)、コード(装飾用)などを細かく分けた管理テーブルが完成!記事の入力はすべて使い慣れたスプレッドシート上で行えるようになりました。

ブラウザ上の操作だけで完結するスマートな公開手順
最初は「ブラウザ上の操作だけでは完結しないかもしれない」という壁にぶつかりそうになりましたが、Claudeと試行錯誤のやり取りを重ねることで、非常にシンプルな運用フローにたどり着きました。

記事の作成・管理:Googleスプレッドシートに入力するだけ。

Webへの反映:ブラウザ上でGitHubのリポジトリ(フォルダ)にプッシュ(アップロード)・コミット(保存)する。

これだけの操作で、自動的に最新の記事がWeb上に公開される仕組みが出来上がりました。特別なツールを起動することなく、ブラウザさえあればどこからでも更新可能です。

AI生成画像のクオリティを保つ軽量化のコツ
ブログに欠かせないアイキャッチ画像や挿入画像には、AI生成画像を活用しています。しかし、nanobananaなどのAIで画像を作ると、1枚あたり「約1,000KB(1MB)」もの大容量になってしまいます。そのまま使うとページの読み込みが遅くなってしまいますよね。

そこで、ひと手間加えることで劇的に軽量化しています。

AIで画像を生成する。

Canvaを使い、最適なアスペクト比とサイズに調整する。

1枚あたり約80KB程度までサイズを落として保存する。

元のサイズから約10分の1に軽量化していますが、人間の目で見る分には、画像の質を落とさずに十分きれいに見える状態を維持できています。これでサイトの表示速度もサクサク快適です!
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら