2025 年になって、めっちゃ便利な組み合わせが誕生した。それが Claude Code on the web と GitHub Pages の組み合わせ
この 2 つを使えば、ブラウザだけで LP、静的サイト、ポートフォリオを 0 円で運用できるようになる
「え、ブラウザだけで？」って思うやろ。そう、VSCode も Cursor も要らんし、ローカル環境も要らん。CMS の管理画面すら要らんのよ。
必要なのはブラウザと GitHub アカウントだけ。あとは Claude に「ページ追加して」って指示するだけで、全部やってくれるんよね
出先で、スマホポチポチして、サイトを作れるようになった。これは革命的やと思う
要点
Claude Code on the web + GitHub Pages の組み合わせで、静的サイト・ポートフォリオをブラウザだけで 0 円運用（AI 料金除く）できる。記事やニュース追加も Claude Code に「ページ追加して」と指示するだけで OK。CMS やローカル環境、コーディングは一切不要
- ブラウザだけで完結（VSCode・ローカル環境不要）
- CMS の管理画面が不要（HTML/Markdown を直接生成）
- GitHub Pages の無料ホスティングで公開可能
- 独自ドメイン設定に対応
- SSL（HTTPS）対応
- 静的サイト前提（決済やログインが不要なサイトに最適）
- ページの追加・更新が GitHub 上のファイル操作で完結
- GitHub Pages のサイト容量上限は約 1 GB（トラフィックは 100GB/月まで無料）
- 404.html によるカスタム 404 ページ対応
- SSR なし
- 環境変数・エッジ機能などは使えない
自動実装に必要なもの
- GitHub アカウント
- Claude Code on the web（Claude Pro / Max プランに含まれる）
流れ
- GitHub アカウントの準備
- GitHub Pages 用のリポジトリ（
xxxx.github.ioっていう名前）を作成 - Claude Code on the web で GitHub に接続
- Claude にサイトを作らせる
GitHub Pages の設定を有効化
- Settings（設定）> Pages に移動
- Branch を main に設定して、Save をクリック
と、こんな流れである
サンプルページ
「モダンなサイト作って」と伝えたらこの感じである
パブリックリポジトリで作る
ちなみに、パブリックリポジトリ（無料）で作る必要がある。
プライベートリポジトリをそのまま GitHub Pages で運用したい場合は、GitHub Pro（個人）または GitHub Team / Enterprise（組織）にアップグレードすれば可能（社内 Wiki、限定資料などに適した方法やね）
GitHub Pages の基本
まず GitHub Pages って何なん？って話やけど、これは GitHub が提供してる無料の静的サイトホスティングサービスなんよ
GitHub にリポジトリを作って、そこに HTML、CSS、JavaScript のファイルを置くだけで、自動的に Web サイトとして公開してくれるわけ。しかも無料。これがめっちゃ便利なんよね
GitHub Pages の特徴を整理するとこんな感じになる
無料で使える範囲が広い
GitHub Pages は基本無料。制限はあるけど、個人のポートフォリオや小規模な LP くらいなら全然余裕よ
具体的な制限としては、リポジトリのサイズが約 1 GB まで、トラフィックが月 100 GB までってのがあるんやけど、普通に使う分には全然問題ないレベルやと思う。月 100 GB のトラフィックって、かなりのアクセス数に耐えられるレベルやからね
HTTPS が標準対応
昔は SSL 証明書を自分で取得して設定して…ってめっちゃ面倒やったんやけど、GitHub Pages は最初から HTTPS に対応してるのよ
だから、セキュリティ的にも安心やし、Google の SEO 的にも有利になるわけ。これが無料で使えるのは、マジでありがたい
独自ドメインも設定できる
username.github.io っていう GitHub のドメインじゃなくて、自分で取得したドメインも使えるんよね
例えば example.com みたいな独自ドメインを設定できるから、ちゃんとしたサイトとして運用できるわけ。独自ドメインの設定も、GitHub の設定画面で簡単にできるから、ハードルは低いよ
静的サイト限定という制約
GitHub Pages の最大の制約は、静的サイトしか公開できんってことやね
つまり、サーバーサイドの処理が必要なサイト、例えば決済機能とかログイン機能とか、データベースを使うサイトは作れんわけよ。まあ、外部 API を使えば、ある程度の動的な機能は実装できるんやけどね
でも、逆に言えば、決済やログインが不要な静的なサイトなら、GitHub Pages で十分ってことなんよ。LP、ポートフォリオ、ドキュメントサイト、ブログみたいなサイトには最適やと思う
カスタム 404 ページも作れる
404.html っていうファイルをリポジトリのルートに置いとくと、存在しないページにアクセスされたときに、そのカスタム 404 ページが表示されるようになるんよ
これ、地味に便利。ユーザーがリンク間違えてアクセスしたときに、ちゃんとしたエラーページを見せられるから、UX が良くなるわけよ
Claude Code on the web が変えるもの
ここからが本題。Claude Code on the web って何なん？って話やけど、これは Anthropic が提供してる、ブラウザ上で動く AI コーディングアシスタントなんよ
Claude Code on the web を使うと、ブラウザ上で Claude に指示を出すだけで、コードを書いてもらえるし、GitHub に直接コミットまでしてくれるのよ。VSCode とかのローカルエディタを開く必要が一切ないわけ
GitHub との連携がめっちゃスムーズ
Claude Code on the web の凄いところは、GitHub と完全に連携してるところ
GitHub アカウントを接続すると、リポジトリの一覧が表示されて、そこから編集したいリポジトリを選べるのよ。そして、Claude に指示を出すと、コードを書いてくれて、コミットや PR まで自動で作ってくれるわけ
これがどれだけ革命的かって、従来は「ローカルでコード書く → git add → git commit → git push → GitHub で PR 作る」っていう一連の作業が必要やったんやけど、Claude Code on the web なら「Claude に指示する → 終わり」なんよ。この差はデカいと思う
コードを書かなくても OK
「でも、Claude に指示するにも、ある程度技術的な知識が必要なのでは？」って思うやろ
実はそんなことないんよ。Claude は自然言語で指示を理解してくれるから、「トップページに新しいセクション追加して」とか「お問い合わせフォームを作って」みたいな、普通の日本語で指示すれば OK なわけ
もちろん、具体的に「Tailwind CSS でモダンなデザインにして」とか「Flexbox でレイアウトして」みたいな技術的な指示を出せば、より精度の高いコードを書いてくれるんやけど、そこまで詳しくなくても十分使えるんよね
Claude Code の消費について
Claude Code on the web は無料じゃなくて、Claude のサブスクリプションに含まれてるサービスなんよ
Claude Pro や Claude Team のプランに入ってると使えるんやけど、使用量には制限があるのよね。コードを書かせるたびに、Claude Code のクレジットを消費する仕組みになってる
やから、無限に使えるわけじゃないんやけど、普通に使う分には十分な量が提供されてるから、そこまで気にしなくても大丈夫やと思う
実践的なセットアップ手順を追ってみる
ここからは、実際にどうやって GitHub Pages と Claude Code on the web を使ってサイトを公開するのか、具体的な手順を追っていくよ
ステップ 1 GitHub アカウントの準備
まず、GitHub アカウントが必要やね。持ってない人は、GitHub の公式サイトでアカウントを作ってくれ
アカウント作ったら、次はリポジトリを作るんやけど、GitHub Pages を使う場合は、リポジトリ名に注意が必要なんよ
ステップ 2 GitHub Pages 用のリポジトリを作成
GitHub Pages には 2 種類の公開方法がある
1 つ目は、username.github.io っていう名前のリポジトリを作る方法。これは、ユーザー単位で 1 つだけ作れるメインのサイトになるわけ
2 つ目は、プロジェクトごとにリポジトリを作って、そこから GitHub Pages を公開する方法。この場合は、username.github.io/repository-name っていう URL になるんよ
今回は、1 つ目の方法で進めるね。username.github.io っていう名前のリポジトリを作るわけ。ここで注意なのは、username の部分は自分の GitHub のユーザー名に置き換えるってことよ
リポジトリを作るときは、Public に設定するか、有料プランにアップグレードする必要があるよ。GitHub の無料プランでは、Private リポジトリから GitHub Pages を公開できんからね
ステップ 3 Claude Code on the web で GitHub に接続
次に、Claude Code on the web にアクセスするわけ。Claude のサブスクリプションに入ってる人は、ブラウザで Claude Code on the web を開けるはずよ
開いたら、GitHub アカウントを接続する作業をするんやけど、これは画面の指示に従えば簡単にできるはず
接続が完了すると、リポジトリに Claude GitHub アプリをインストールする必要があるんよ。このとき、全リポジトリにアクセス権を与えるか、特定のリポジトリだけにアクセス権を与えるか選べるんやけど、セキュリティ的には使うリポジトリだけに絞った方がいいと思う
ステップ 4 Claude にサイトを作らせる
ここからが楽しいところ。Claude Code on the web で、さっき作った username.github.io リポジトリを選択するわけ
そしたら、Claude に指示を出すんよ。例えば、こんな感じ
「HTML、CSS、JavaScript でモダンなコーポレートサイトを作って。レスポンシブ対応で、Tailwind CSS を使ってスタイリングして」
これだけで、Claude がコードを書いてくれるのよ。めっちゃ便利やろ
Claude はファイルを作成して、コードを書いて、最終的にコミットまでしてくれるわけ。自分は何もコードを書いてないのに、プロレベルのサイトが完成するんよね
ステップ 5 GitHub Pages の設定を有効化
Claude にコードを書かせて、GitHub にコミットしたら、次は GitHub Pages の設定を有効化するんよ
GitHub のリポジトリページに行って、Settings（設定）> Pages に移動するわけ。そこで、Branch を main に設定して、Save をクリックするだけ
これで、数分後には https://username.github.io/ っていう URL でサイトが公開されるわけよ。簡単やろ
ステップ 6 ローカルで確認する（オプション）
ここまでブラウザだけで完結してるんやけど、もしローカルで確認したい場合は、ローカルに git pull してきて、適当なローカルサーバーで確認すればいいよ
例えば、npm run dev とか、Python の http.server とか、VSCode の Live Server 拡張とか、色んな方法があるわけ
でも、GitHub Pages で公開する分には、別にローカル確認は必須じゃないから、飛ばしても全然 OK やと思う
ステップ 7 修正や追加を Claude に指示
サイトを公開した後に、「やっぱりこのセクション変えたいな」とか「新しいページ追加したいな」ってなったら、また Claude Code on the web で Claude に指示すればいいだけなんよ
例えば、「お問い合わせページを追加して。フォームには名前、メール、メッセージの入力欄を作って」って指示すれば、Claude が新しいページを作ってくれるわけ
修正も同じで、「トップページのヒーローセクションの背景色を青に変えて」とか指示すれば、Claude がコードを修正してコミットしてくれるのよ
これがどれだけ楽かって、従来なら HTML ファイルを開いて、該当箇所を探して、コードを修正して、コミットして…ってやってたのが、Claude に一言指示するだけで終わるわけやからね
他のホスティングサービスとの比較
GitHub Pages 以外にも、無料で使えるホスティングサービスはあるよね。Vercel、Netlify、Cloudflare Pages あたりが有名やと思う
じゃあ、なんで GitHub Pages を選ぶん？って話やけど、それぞれのサービスには特徴があるから、用途に応じて使い分けるのがベストやと思う
GitHub Pages の強み
GitHub Pages の最大の強みは、シンプルさやと思うんよね
設定がめっちゃ簡単で、GitHub にコミットするだけで自動的に公開されるから、初心者にも優しいわけ。しかも、GitHub と完全に統合されてるから、バージョン管理がしやすいのよ
それに、GitHub Pages は歴史が長いから、安定性も高いし、ドキュメントも充実してるわけ。何か困ったことがあっても、ググれば大体解決策が見つかるレベルよ
Vercel との違い
Vercel は Next.js を開発してる会社が提供してるホスティングサービスやから、Next.js との相性がめっちゃいいんよ
SSR（サーバーサイドレンダリング）とか ISR（インクリメンタル静的再生成）みたいな、動的な機能を使いたい場合は、Vercel の方が向いてると思う
やけど、純粋な静的サイトを公開するだけなら、GitHub Pages で十分やし、むしろ GitHub Pages の方がシンプルで扱いやすいと思うんよね
Netlify との違い
Netlify も人気のホスティングサービスやね。フォーム機能とか、サーバーレス関数とか、色んな機能が統合されてるから、便利っちゃ便利なんよ
やけど、GitHub Pages と比べると、設定項目が多い分、初心者には少しハードルが高いかもしれん。それに、無料プランの制限も GitHub Pages とは違うから、用途によっては GitHub Pages の方が合ってる場合もあるわけ
Cloudflare Pages との違い
Cloudflare Pages は、Cloudflare の CDN を使ったホスティングサービスやね。パフォーマンスがめっちゃいいのが特徴で、グローバルに配信するサイトには向いてると思う
やけど、セットアップが少し複雑やし、Cloudflare のアカウントとか設定とか、色々覚えることが多いんよね。GitHub Pages の方が、シンプルで始めやすいと思う
Next.js + OpenNext + Cloudflare Workers との比較
改めて整理するとこんな感じやね
GitHub Pages は静的サイト専用で、コストは完全無料。セットアップは push するだけやから超簡単。パフォーマンスも CDN キャッシュが効いてて速い。やけど、バックエンド機能はなくて、外部 API を使う形になるわけ
一方、Next.js + OpenNext + Cloudflare Workers の組み合わせは、動的サイトに対応できて、SSR とか ISR が使えるのよ。無料枠はあるけど、それを超えたら従量課金になるから、コストがかかる可能性がある。セットアップは OpenNext の設定が必要で、少し複雑やね。パフォーマンスはグローバルエッジ配信で爆速やし、Workers でバックエンドも実装できるから、機能的には優れてるわけ
どっちがいいかは、作りたいサイトの種類によるよね。静的サイトで十分なら GitHub Pages、動的な機能が必要なら Next.js + OpenNext + Cloudflare Workers って感じで使い分けるのがベストやと思う
どんなサイトに向いてる？
GitHub Pages と Claude Code on the web の組み合わせは、どんなサイトに向いてるのか、具体的なユースケースを挙げてみるね
ポートフォリオサイト
デザイナーやエンジニアのポートフォリオサイトには、めっちゃ向いてると思うんよ
静的サイトで十分やし、デザインも Claude に指示すれば、モダンでオシャレなサイトを作ってくれるわけ。しかも無料で運用できるから、コストを気にせずに公開できるのがいいよね
LP（ランディングページ）
商品やサービスの LP を作るのにも向いてるよ
LP って基本的に静的なページやし、デザインやコピーを Claude に指示すれば、サクッと作れるわけ。A/B テストとかやりたい場合も、複数のバージョンを作って、別の URL で公開すればいいだけやからね
ドキュメントサイト
オープンソースプロジェクトのドキュメントサイトとか、社内の技術ドキュメントサイトとかにも向いてると思う
Markdown で書いたドキュメントを、Claude に HTML に変換してもらって、GitHub Pages で公開すれば、めっちゃ簡単にドキュメントサイトが作れるわけよ
個人ブログ
個人ブログにも使えるよ。Markdown で記事を書いて、Claude に HTML に変換してもらえば、ブログとして公開できるわけ
ただ、記事が増えてくると、手動で管理するのは大変になってくるから、そういう場合は Jekyll とか Hugo みたいな静的サイトジェネレーターを使った方がいいかもしれんけどね
イベントサイト
セミナーやイベントの告知サイトにも向いてると思うんよ
イベント情報を掲載して、申し込みフォームは Google Forms とか外部サービスのリンクを貼っておけば、十分機能するわけやからね
企業のコーポレートサイト
小規模な企業のコーポレートサイトにも使えるよ
会社概要、サービス紹介、お問い合わせフォーム（外部サービス利用）みたいな構成なら、GitHub Pages で十分やと思う
ベストプラクティスを押さえとこう
GitHub Pages と Claude Code on the web を使う上で、知っておくと便利なベストプラクティスをいくつか紹介するね
Claude への指示は具体的に
Claude にコードを書かせるときは、できるだけ具体的に指示した方がいいよ
「サイトを作って」だけやと、Claude も困るわけ。「HTML、CSS、JavaScript でコーポレートサイトを作って。Tailwind CSS を使って、レスポンシブ対応で、ヒーローセクション、サービス紹介、お問い合わせセクションを含めて」みたいに、具体的に指示すれば、Claude も的確なコードを書いてくれるわけよ
ファイル構成をシンプルに保つ
GitHub Pages は静的サイトホスティングやから、ファイル構成はシンプルに保った方が管理しやすいよ
ルートに index.html を置いて、CSS は styles/ ディレクトリ、JavaScript は scripts/ ディレクトリみたいに整理しておくと、後から修正するときも楽やと思う
レスポンシブ対応は必須
今どき、スマホ対応してないサイトはありえんよね
Claude に指示するときも、必ず「レスポンシブ対応で」って伝えるようにするといいよ。Tailwind CSS とか使えば、簡単にレスポンシブ対応できるからね
画像の最適化を忘れずに
画像ファイルは、できるだけ最適化してから使った方がいいよ
GitHub Pages は 1 GB の容量制限があるから、無駄にデカい画像を使うと、すぐに容量がいっぱいになっちゃうわけ。それに、ページの読み込み速度にも影響するからね
WebP 形式を使ったり、画像圧縮ツールで最適化したりすると、容量を節約できるよ
独自ドメインを設定すると信頼性アップ
username.github.io っていうドメインでも全然問題ないんやけど、独自ドメインを設定すると、サイトの信頼性が上がるよね
独自ドメインは、お名前.com とか Google Domains とか、色んなレジストラで取得できるから、予算があれば設定することをおすすめするよ
SEO 対策も忘れずに
静的サイトでも、SEO 対策は大事
メタタグ（title、description）をちゃんと設定したり、見出しタグ（h1、h2、h3）を適切に使ったり、alt 属性を画像に設定したりすると、検索エンジンからの評価が上がるわけよ
Claude に「SEO 対策も含めて」って指示すれば、メタタグとかも自動で設定してくれるから、楽やと思う
バージョン管理の恩恵を受ける
GitHub を使ってる最大のメリットは、バージョン管理ができることやね
もし間違った修正をしちゃっても、Git のコミット履歴から前のバージョンに戻せるわけよ。これがめっちゃ安心やと思う
Claude Code on the web でコミットするときも、コミットメッセージをちゃんと書いておくと、後から履歴を追いやすくなるよ
よくあるトラブルと解決方法
GitHub Pages と Claude Code on the web を使ってると、いくつかのトラブルに遭遇することがあるかもしれん。ここでは、よくあるトラブルとその解決方法を紹介するね
サイトが表示されない
GitHub Pages の設定を有効化したのに、サイトが表示されんってことがあるんよ
まず確認すべきは、Settings > Pages で Branch が正しく設定されてるかどうか。main ブランチを選んでるか、ルートディレクトリを選んでるかチェックしてみて
それと、GitHub Pages の公開には数分かかることがあるから、少し待ってからアクセスしてみるといいよ
404 エラーが出る
特定のページにアクセスすると 404 エラーが出るって場合は、ファイル名や URL が間違ってる可能性があるね
GitHub Pages は、URL の大文字小文字を区別するから、ファイル名が About.html なのに、about.html でアクセスしようとすると 404 になるわけよ
ファイル名と URL を確認してみて
CSS や JavaScript が読み込まれない
CSS や JavaScript が読み込まれなくて、デザインが崩れてるって場合は、パスの指定が間違ってる可能性があるね
絶対パスで指定してる場合は、相対パスに変えてみるといいよ。例えば、/styles/style.css じゃなくて、./styles/style.css みたいにするわけ
独自ドメインが反映されない
独自ドメインを設定したのに、反映されんって場合は、DNS の設定が間違ってる可能性があるね
GitHub Pages で独自ドメインを使うには、DNS レコードに A レコードとか CNAME レコードを追加する必要があるんよ。GitHub の公式ドキュメントに詳しい手順が載ってるから、それを参考に設定してみて
Claude がコミットしてくれない
Claude にコードを書かせたのに、コミットしてくれんって場合は、Claude Code on the web の GitHub 連携がうまくいってない可能性があるね
一度 GitHub の接続を解除して、再接続してみるといいよ。それと、リポジトリに Claude GitHub アプリのアクセス権が付与されてるかも確認してみて
リポジトリの容量が足りない
画像とかファイルをたくさんアップロードしてたら、リポジトリの容量が 1 GB を超えちゃうことがあるんよ
その場合は、不要なファイルを削除したり、画像を最適化したりして、容量を減らす必要があるね
または、画像を外部のホスティングサービス（例えば Cloudinary とか）に置いて、URL で参照する方法もあるよ
まとめ
ここまで、Claude Code on the web と GitHub Pages の組み合わせについて、かなり詳しく解説してきたわけやけど、最後にポイントをまとめておくね
この組み合わせの最大のメリットは、ブラウザだけで完結することやと思うんよ。ローカル環境も要らんし、VSCode も要らんし、CMS も要らん。必要なのは、ブラウザと GitHub アカウントと Claude のサブスクリプションだけ
しかも、コードを書けん人でも、Claude に指示するだけでプロレベルのサイトが作れるわけやから、これは革命的やと思う
もちろん、制限もあるよ。静的サイトしか作れんし、サーバーサイドの処理は使えん。やけど、LP、ポートフォリオ、ドキュメントサイト、個人ブログみたいな用途なら、十分すぎるレベルやと思うんよね
それに、完全無料で運用できるってのがめっちゃデカいと思う。小規模なサイトなら、一切コストをかけずに公開できるわけやからね
自分もこの方法を使って、いくつかサイトを作ってみたんやけど、めっちゃ便利やったわ。特に、「ちょっとしたサイトを作りたいな」ってときに、サクッと作れるのがいいよね
これからサイトを作ろうと思ってる人は、ぜひ Claude Code on the web と GitHub Pages の組み合わせを試してみてほしいわ。マジで世界が変わるから
サンプルページは、実際に Claude Code on the web で作ったコーポレートサイトのサンプルやから、参考にしてみてくれ
Web 制作のハードルがめっちゃ下がった今、誰でも気軽にサイトを作れる時代になったわけやけど、この流れはまだまだ加速していくと思うんよね。AI がコードを書いてくれて、ホスティングは無料で、しかもブラウザだけで完結する。こんな便利な時代、数年前には想像もできんかったわけやからね
