← 文殊の会 トップへ戻る
🎯 GOAL
このガイドで実現すること
単なるWeb公開ではなく、AI（Claude Code）を相棒にしたiPhone完結のWebサイト運用を実現します。
▼ 完成する運用フロー
🗣
iPhoneのClaudeアプリに話しかける
「ヘッダー画像を変えて」「お問い合わせページ追加して」など
▼
🤖
Claude CodeがHTMLを編集
指示通りにファイルを編集・追加・修正
▼
🐙
GitHubに自動コミット&プッシュ
Claude Codeがそのまま反映
▼
🌐
数分でWebに自動デプロイ
GitHub Pagesが公開URLに反映
💎 このスキームの真価
コードを書けなくても、iPhoneでChatのように指示するだけで、本格的なWebサイトの編集・更新・追加・デプロイが完結します。
🤖 ABOUT
Claude Code とは？
Anthropic社のAI「Claude」を使って、コードの編集・実行・Git操作までを一貫して行えるAIコーディングツールです。
📱
モバイル対応
Claude iOSアプリで利用
💡 iPhone上での使い方
Claude公式iOSアプリから、Claude Codeのリモート実行機能を呼び出します。GitHubリポジトリを連携することで、iPhoneだけで編集→デプロイまで完結できます。
⚠️ 機能の最新状況について
Claude Codeのモバイル/Web対応機能は急速に進化しています。最新の利用方法は公式ドキュメントを必ずご確認ください。
📚 Claude Code 公式ドキュメントを見る
🗺 ROADMAP
2つのフェーズで進めます
最初に「土台」を整え、その後「Claude Codeでの運用」に移行します。
1️⃣
フェーズ1：基盤の構築（初回のみ）
GitHubアカウント作成 → リポジトリ作成 → 初回HTMLアップロード → GitHub Pages有効化
2️⃣
フェーズ2：Claude Code連携（以降ずっと）
Claude iOSアプリにGitHubを連携 → 以降はiPhoneでClaudeに話しかけるだけでWebが更新される運用へ
PREREQUISITES
事前準備
作業を始める前に、以下のものを準備してください。
04
Claude Codeを安定して使うにはPro以上のプランが推奨されます。無料プランでも一部機能は利用可能。
05
ファイル名は「index.html」に。最小限のHTMLでOK（その後Claude Codeで肉付け可能）。
06
GitHub Pagesの有効化設定に使用。標準アプリでOK。
PHASE 1 ／ 基盤の構築
初回セットアップ
この3ステップは初回のみ。一度設定すれば、あとはClaude Codeで運用するだけです。
STEP 1 / 3 📱 GitHubアプリ
リポジトリを作成する
iPhoneの「GitHubアプリ」を開いて、ファイルの保管場所を作ります。
💡 リポジトリとは？
GitHubにおけるファイルの保管場所（フォルダのようなもの）です。
1
iPhoneでGitHubアプリを起動してログイン
3
メニューから「New Repository」を選択
4
リポジトリ名を入力
例：my-website / portfolio / my-blog など
💡 半角英数字＋ハイフン（-）で命名。日本語・記号・スペースは使えません。
5
公開設定を「Public」に設定
⚠️ 必ずPublic。Privateは無料プランでGitHub Pagesが使えません。
6
「Initialize with a README」のチェックはONのまま
空リポジトリだとClaude Codeの初回連携でエラーになる場合があるため
7
「Create Repository」をタップして完了
STEP 2 / 3 📱 GitHubアプリ
HTMLファイルをアップロードする
作成したリポジトリに、最初のindex.htmlをアップします。このあとはClaude Codeが編集してくれるので、最小限のHTMLでOK。
⚠️ 最重要ポイント：ファイル名は必ず「index.html」（半角・小文字）。
3
メニューから「Upload files」を選択
4
iPhoneのファイルアプリからHTMLファイルを選択
iCloud Drive、ダウンロード等から選択可能
5
ファイル名が「index.html」になっているか確認
⚠️ Index.html や INDEX.html はNG。半角小文字のみ。
STEP 3 / 3 📱 Safari
GitHub Pages を有効化する
iPhoneのSafariアプリに切り替えて操作します。GitHubアプリでは設定画面が開けないためです。
🔄
アプリを切り替えてください
ここから先はiPhoneのSafariを使います。PCのブラウザは不要です。
2
アドレスバーに「github.com」と入力してアクセス
3
ログインして対象のリポジトリを開く
📱 横向きにすると見やすくなります。
4
上部タブの「Settings」をタップ
💡 見えない場合：上部タブを横にスワイプ。
5
画面を下にスクロールして左メニューの「Pages」を選択
6
「Branch」を「None」→「main」に変更
9
1〜2分後にページを更新すると公開URLが表示
⏱ すぐ表示されない場合は1〜3分待ってからリロード。
▼ 発行されるURL
https://[ユーザー名].github.io/[リポジトリ名]/
✅ フェーズ1完了！
これで土台ができました。次のフェーズでClaude Codeを連携すれば、もう手動アップロードは不要です。
PHASE 2 ／ Claude Code連携
AI運用フェーズへ
ここからが本番。Claude CodeとGitHubを連携して、iPhoneで話しかけるだけのWeb運用を実現します。
STEP 4 🤖 Claude iOSアプリ
Claudeアプリをセットアップ
Claude公式iOSアプリにログインして、Claude Code機能を有効化します。
1
App StoreからClaude公式アプリをインストール
2
アプリを起動してClaudeアカウントでログイン
アカウント未作成の場合はその場で作成可能
3
設定（プロフィール）画面からClaude Code関連の機能を確認
💡 機能名・表示位置はバージョンによって変わるため、最新情報は公式ドキュメントを参照してください。
4
有料プラン（Pro以上）の利用を推奨
Claude Codeの利用上限が大きく緩和されます
📚 最新の利用方法を公式で確認
STEP 5 🔗 GitHub連携
GitHubリポジトリを連携
Claude Codeに、フェーズ1で作ったGitHubリポジトリを連携させます。
💡 連携方法は2通り
① Claudeアプリ内のGitHub Connector機能を使う（推奨）
② Claude CodeにリポジトリURLを直接共有して操作させる
1
Claudeアプリの設定から「Connectors」または「Integrations」を開く
3
GitHubの認証画面が開くので、許可をタップ
対象リポジトリへのアクセス権限を付与
4
連携対象のリポジトリ（フェーズ1で作ったもの）を選択
⚠️ 全リポジトリではなく、対象のものだけを選択することも可能。セキュリティのため推奨。
⚠️
UIは変更される可能性があります
Connectors機能の名称・表示位置はアプリのバージョンによって異なります。見つからない場合は
公式ドキュメントまたは
サポートページを参照。
Claudeに話しかけて編集する
連携が完了したら、あとはClaudeに話しかけるだけ。実際の指示例を紹介します。
✨ 魔法のような体験
コードを書かず、ファイル操作もせず、ただチャットするだけでWebサイトが更新されます。
📝
例1：ページを編集する
▼ Claudeへの指示例
GitHubの[リポジトリ名]の
index.htmlを開いて、
タイトルを「My Portfolio」に変更し、
背景色をネイビーにして。
変更後はそのままコミットして
プッシュしてください。
➕
例2：新しいページを追加
▼ Claudeへの指示例
about.html という自己紹介ページを
新規作成して、index.htmlから
リンクできるようにして。
作成後はGitHubにプッシュ。
🎨
例3：デザインを丸ごとリニューアル
▼ Claudeへの指示例
今のサイトをミニマルでモダンな
デザインに刷新して。
フォントは日本語の読みやすいものを使い、
スマホでも見やすくして。
完了したらコミット&プッシュ。
🐛
例4：エラーや不具合の修正
▼ Claudeへの指示例
公開ページで○○の表示がおかしい。
原因を特定して修正してプッシュして。
⚡ プッシュ後、数分でWebに反映
GitHub Pagesは自動的に最新のコミットを公開します。Claudeがプッシュした内容も、特別な操作なしに数分でWebサイトに反映されます。
💎 BEST PRACTICES
運用のコツ
Claude Code運用をスムーズにするための実践的なコツをまとめました。
🎯
指示は具体的に
「いい感じにして」より「ヘッダーを高さ80pxにして、ロゴを左、メニューを右に配置」と書くと精度が上がります。
🔍
変更前にプレビュー確認を依頼
「コミット前にどう変わるか教えて」と頼めば、意図しない変更を防げます。
💾
大きな変更前にバックアップを依頼
「念のため現在のindex.htmlをindex_backup.htmlとしてコピーしてからやって」と頼むと安心。
📝
コミットメッセージも任せる
「変更内容に合わせて分かりやすいコミットメッセージを書いて」と指示すれば、履歴管理も自動。
↩️
困ったらロールバック
「直前のコミットに戻して」「3つ前の状態に戻して」と頼めば、問題の変更を取り消せます。
🔄
反映が遅い時は待つ
プッシュ後すぐは反映されません。1〜3分待ってからWebページをリロードしてください。
🆘 TROUBLESHOOTING
困ったときのQ&A
よくあるつまずきポイントと解決方法。タップで開閉します。
最も多いトラブルです。順番に確認：
- ファイル名が「index.html」（半角小文字）か
- 1〜3分待ったか（公開直後は反映に時間が）
- Branchが「main」か（Settings→Pages）
- リポジトリがPublicか
- URLの末尾に 「/」 を付けてみる
アプリのバージョンや地域・プランによって表示が異なります：
- Claudeアプリを最新版にアップデート
- 有料プランでないと使えない機能の可能性
- 「Settings」→「Connectors」「Integrations」「Tools」など類似名称を探す
- 見つからなければ公式ドキュメントまたはサポートを確認
考えられる原因：
- 連携が外れている → 設定画面で再連携
- 権限不足 → GitHub側で書き込み権限を許可
- コミット&プッシュを明示していない → 「変更後にコミットしてプッシュして」と明確に指示
- 対象リポジトリの指定漏れ → 「[ユーザー名]/[リポジトリ名]の～」と具体的に指定
すぐにロールバックしましょう：
- Claudeに「直前のコミットを取り消して、その前の状態に戻して」と指示
- または、GitHubアプリでリポジトリの「Commits」履歴から該当コミットをrevert
- 大きな変更前は「現在の状態をindex_backup.htmlにコピーしてから作業して」と依頼すると安全
iPhoneがGitHubアプリを優先するために起こります：
- Safariのアドレスバーに直接 github.com と打つ
- リンクを長押し→「開く」を選択
- アプリに飛んだ後、Safariに戻って再度アクセス
iPhoneの画面が狭く隠れていることが多いです：
- 上部タブを左にスワイプ（横スクロール）
- iPhoneを横向きに
- URLに直接 /settings/pages を追加
プランによって利用上限が異なります：
- 無料プランは厳しい制限あり → Pro以上のプランを検討
- 上限到達時は時間経過で回復するのを待つ
- 大規模な変更は分割して指示すると消費を抑えられる
最新の上限・料金は
公式サイトで確認してください。
空のリポジトリだとmainブランチが作られていません：
- STEP 2に戻ってindex.htmlをアップ
- 1ファイル以上Commitすると、自動的にmainブランチが生成
- その後Settings→Pagesでmainを選択可能に
最初は
Claude自身に聞くのがおすすめ：
- 「私のリポジトリ[名前]の現状を確認して、できることを提案して」
- 「○○したいんだけど、どんな指示を出せばいい？」
- 「このサイトの改善点を教えて」
Claudeが対話しながら、適切な指示の出し方を一緒に考えてくれます。
- 一時停止：Settings→Pages→Branchを「None」に
- 完全削除：Settings→一番下の「Danger Zone」→「Delete this repository」
- 削除すると元に戻せないので注意
📚 Claude Code 公式ドキュメント
📚 GitHub Pages 公式ドキュメント
SUMMARY
まとめ
iPhone × Claude Code × GitHub の運用フロー全体像。
完成するワークフロー
PHASE 1 ／ 初回のみ
基盤の構築
GitHubでリポジトリ作成 → index.htmlアップ → Pages有効化
PHASE 2 ／ STEP 4-5
Claude Code連携
Claude iOSアプリ → GitHub Connector → リポジトリ連携
PHASE 2 ／ STEP 6
日常運用（無限ループ）
Claudeに指示 → 自動編集 → 自動コミット&プッシュ → 自動デプロイ
完成系
📱 iPhoneで話しかけるだけ
コードを書かずに、Webサイトを編集・更新・追加・公開