Claude CodeでWebアプリを作ってGitHub Pagesで公開する

今回のハンズオンでは、一人完結型アプリ（まずは自分一人が使うアプリ）を作ります。 GitHubアカウントさえあれば、ゼロから公開まで一気に進められます。

1. GitHub・Gitの準備

GitHubアカウントの作成、リポジトリの作成、Gitインストール、SSH設定、cloneまではGitHub初心者ガイドを参照してください。

2章以降は以下の状態から進めます。

• GitHubアカウント作成済み
• リポジトリ my-first-site 作成済み（Public、GitHub Pages 有効）
• ~/Desktop/claude/my-first-site に clone 済み

2. Claude Code でWebアプリを作成

デスクトップ版Claudeアプリを起動。

Code（Claude Code）を選択 → New session をクリック → 作業ディレクトリを指定（~/Desktop/claude/my-first-site）

あとはプロンプトを入力して、index.htmlを編集する。

プロンプト例:

• HTML+JavaScriptでポモドーロタイマーを作って！ 1つのファイルにしてindex.htmlに上書きして。
• 複利計算機をHTML+JavaScriptで作って！ 構成はHTMLファイル(index.html)が1つ。

右上のところからプレビューを選ぶと表示される（自動で表示されることも）。

途中、操作の許可を求めてくることがあるので対応する。

3. 作ったWebアプリをGitHubにアップして公開する（デプロイ）

Claude Codeに依頼する：

変更をgitでコミットしてpushして（git push -u origin main で）

途中、操作の許可を求めてくることがあるので対応する。

しばらく（1分くらい）待ってから公開URLにアクセスして確認。

公開URL: https://ユーザー名.github.io/my-first-site/

4. Webアプリの修正と反映

修正依頼プロンプト例:

• 背景をもっと明るくしてください
• 数値入力をスライダーにしてください
• ボタンの間隔をもっと広げて
• 参考: AIへの指示に使えるUI用語集 — 動く実例つき

途中、操作の許可を求めてくることがあるので対応する。

納得したら、アップを依頼:

変更をgitでコミットしてpushして

しばらく（1分くらい）待ってから公開URLにアクセスして確認。

このように修正と反映を繰り返して、Webアプリを仕上げよう！

5. リポジトリの公開設定について

今回はリポジトリをPublic（公開）に設定しているため、ファイルの中身や変更履歴は誰でも閲覧できる状態になっている。 HTML + JavaScript + CSSだけのシンプルなアプリであれば大きな問題になることは少ないが、以下のようなケースではPrivate（非公開）に変更するのがおすすめ。

• 試行錯誤の履歴を見られたくない
• 意図しないファイルを公開してしまうリスクを避けたい

変更方法：リポジトリの Settings → Danger Zone（ページ下部） → Change repository visibility

ただし、GitHub Free（無料版）の場合、PrivateにするとGitHub Pagesは使えなくなる。 PrivateのままGitHub Pagesを使うにはGitHub Pro以上（有料）が必要。

無料のまま非公開で運用したい場合は、Cloudflare Pagesなど別のホスティングサービスが選択肢となる。

7. Tips

• GitHubへのアップを依頼するとき
  • 短めに githubにアップ で
• 返答でファイル更新させない
  • 末尾に アイディアください どうでしょうか 考え聞かせて などをつける
  • プランモードでも良いが切り替えが面倒
• バイブコーディングでWebアプリを作るときに便利な用語集
  • AIへの指示に使えるUI用語集 — 動く実例つき

2026-04-20 (last updated: 2026-05-06)　タツヲ (yto)