Claude Code × GitHub 入門｜非エンジニアでもできるコード管理と公開の始め方

冒頭

従業員15人の人材紹介会社で、経営企画を担当しているとする。先月 Claude Code を使って、求人情報を一覧表示する社内向けの Web ページを作った。日本語で指示を出すだけで、見た目のきれいなページが動くようになった。ところが、翌週パソコンの調子が悪くなり、作ったファイルが一部壊れてしまった。バックアップを取っていなかったため、もう一度 Claude Code にイチから作り直してもらうことになった。

この失敗を防ぐ方法がある。GitHub（ギットハブ）だ。GitHub は、コードをインターネット上に安全に保存できるサービスだ。しかも、保存したコードをそのまま Web サイトとして公開することもできる。エンジニア専用のツールだと思われがちだが、Claude Code と組み合わせれば、あなたが GitHub の操作を覚える必要はほとんどない。Claude Code に「GitHub に保存して」と伝えるだけでよい。

この記事で分かること:

• GitHub とは何か、非エンジニアにとってなぜ必要なのか
• Claude Code を使って GitHub にコードを保存する手順（日本語の指示だけで完結）
• 保存したコードを Web サイトとして公開する方法
• チームでコードを共有・管理するための基本

記事の最後に、Claude Code × GitHub の操作手順をまとめたチェックリスト PDF を無料でダウンロードできる。

GitHub とは何か — 非エンジニアのための説明

図: GitHub の基本的な仕組み

GitHub を一言で表すなら、コードの Google ドライブだ。Google ドライブが文書や写真をクラウドに保存するように、GitHub はプログラムのコードをクラウドに保存する。

ただし、Google ドライブとの大きな違いが1つある。GitHub は変更の履歴をすべて記録する。「4月10日にトップページの文言を変えた」「4月15日に問い合わせフォームを追加した」といった変更が、いつ・誰が・何を変えたかという情報とセットで残る。もし変更後に不具合が出ても、変更前の状態に戻せる。これが、プロのエンジニアたちが GitHub を使う最大の理由だ。

非エンジニアのあなたにとって、GitHub が役立つ場面は主に3つある。

1つ目は、バックアップ。Claude Code で作った Web サイトやツールのコードを GitHub に保存しておけば、パソコンが壊れてもコードは残る。新しいパソコンで GitHub からダウンロードすれば、すぐに復元できる。

2つ目は、公開。GitHub に保存したコードは、Vercel（ヴァーセル）や Netlify（ネットリファイ）といった無料のホスティングサービスと連携すると、そのまま Web サイトとしてインターネット上に公開できる。独自ドメイン（自社の URL）も設定できる。

3つ目は、チーム共有。社内の他のメンバーや外部の制作会社に「この GitHub のリポジトリ（保管庫）を見てください」と URL を1本送るだけで、コードの全体像を共有できる。メールでファイルを何往復もやりとりする必要がなくなる。

そして、ここが最も重要なポイントだが、Claude Code を使えば、あなたが GitHub の操作方法を覚える必要はほとんどない。「GitHub にアップロードして」「昨日の状態に戻して」「新しいページを追加して GitHub に保存して」。こうした日本語の指示を Claude Code に伝えるだけで、GitHub の操作はすべて Claude Code が代行してくれる。

GitHub を使い始める準備

図: GitHub を始めるまでの4ステップ

GitHub を使い始めるには、いくつかの準備が必要だ。難しい操作はないが、初めてだと「本当にこれで合っている？」と不安になるかもしれない。ここでは、1つずつ順番に説明する。

ステップ1: GitHub アカウントの作成

まず、GitHub の Web サイト（github.com）にアクセスして、無料アカウントを作る。必要なのはメールアドレスとパスワードだけだ。クレジットカードは不要。個人利用であれば、無料プランで十分だ。無料プランでも、コードの保存・公開・共有はすべてできる。

1つ注意点がある。GitHub のユーザー名は、公開リポジトリの URL に含まれる。たとえば、ユーザー名が tanaka-corp なら、リポジトリの URL は github.com/tanaka-corp/プロジェクト名 になる。会社として使うなら、会社名や屋号を含むユーザー名にしておくとよい。

ステップ2: Git がインストールされているか確認する

Git（ギット）は、GitHub にコードを送るために必要なソフトウェアだ。GitHub が「クラウドの保管庫」だとすると、Git は「保管庫にファイルを送る配送係」のようなものだ。

Mac をお使いの場合、Git は最初からインストールされていることが多い。Windows の場合は、別途インストールが必要なことがある。

Claude Code に確認してもらうのが一番手軽だ。Claude Code を起動して、次のように伝える。

（コピーして使える指示文）

私のパソコンに Git がインストールされているか確認して。 インストールされていない場合は、インストール方法を教えて。

Claude Code がパソコンの状態を確認し、Git のバージョンを教えてくれる。もしインストールされていなければ、インストール手順も案内してくれる。

ステップ3: Git の初期設定

Git を使う前に、あなたの名前とメールアドレスを設定する必要がある。これは、コードの変更履歴に「誰が変更したか」を記録するための設定だ。

Claude Code に次のように伝える。

（コピーして使える指示文）

Git の初期設定をして。 名前: 田中太郎 メールアドレス: tanaka@example.com

少しだけ操作の説明が入るが、そのまま Claude Code の案内に従えば大丈夫だ。意味が分からなくても問題ない。

ステップ4: GitHub との接続設定

パソコンから GitHub にコードを送るためには、GitHub のアカウントとパソコンを紐づける設定が必要だ。これを「認証」と呼ぶ。

Claude Code に次のように伝える。

（コピーして使える指示文）

GitHub にコードを送れるように、認証の設定をして。 GitHub のユーザー名は tanaka-corp です。

Claude Code が設定方法を案内してくれる。途中でブラウザが開いて GitHub にログインを求められることがある。画面の指示に従ってログインすれば、設定は完了だ。

この準備は最初の1回だけで済む。次回からは、Claude Code に「GitHub に保存して」と伝えるだけでよい。

Claude Code で GitHub にコードを保存する

ここからが本題だ。Claude Code で作ったプロジェクトを GitHub に保存する手順を紹介する。

初めて保存する場合（リポジトリの作成）

Claude Code で Web サイトやツールを作った後、そのプロジェクトを GitHub に保存するには、次のように伝える。

（コピーして使える指示文: 初回保存）

このプロジェクトを GitHub に保存して。 リポジトリ名は company-website にして。 説明文は「自社Webサイトのソースコード」にして。 公開範囲はプライベート（自分だけ見える）にして。

Claude Code は以下の操作を自動で行ってくれる。

1. プロジェクトを Git で管理する状態にする（git init）
2. すべてのファイルを記録する（git add, git commit）
3. GitHub 上に新しいリポジトリ（保管庫）を作る
4. パソコン内のファイルを GitHub に送る（git push）

完了すると、「GitHub にプッシュしました」「リポジトリの URL は https://github.com/あなたのユーザー名/company-website です」といった報告が返ってくる。この URL にブラウザでアクセスすると、あなたのコードが GitHub 上で見られるようになっている。

公開範囲を「プライベート」にしておけば、あなた（と招待したメンバー）以外はコードを見ることができないので、安心してほしい。

変更を追加保存する場合

Web サイトを修正したり、新しいページを追加した後、その変更を GitHub に保存するには、次のように伝える。

（コピーして使える指示文: 追加保存）

今の変更を GitHub に保存して。 変更内容の説明は「問い合わせフォームを追加した」にして。

これだけで、最新の変更が GitHub に反映される。変更の履歴も自動で記録されるので、「いつ、何を変えたか」が後から確認できる。

過去の状態に戻す場合

変更後に不具合が出た場合、GitHub に保存した過去の状態に戻すこともできる。

（コピーして使える指示文: 状態を戻す）

昨日の状態に戻して。 問い合わせフォームを追加する前の状態に戻したい。

Claude Code が変更履歴を確認し、指定した時点のコードに戻してくれる。この「やり直しが効く」安心感は、GitHub を使う最大のメリットの1つだ。

保存したコードを Web サイトとして公開する

図: Web サイトの公開方法の比較

GitHub にコードを保存したら、次はそれを Web サイトとしてインターネット上に公開してみよう。Vercel（ヴァーセル）という無料のサービスを使うと、GitHub と連携して自動的に公開できる。

Vercel とは

Vercel は、GitHub に保存したコードを自動で Web サイトとして公開してくれるサービスだ。個人や小規模な Web サイトであれば無料で利用できる。

Vercel の仕組みは単純だ。GitHub のリポジトリと Vercel を1回連携すると、以降は GitHub にコードを保存するたびに、Vercel が自動で最新版の Web サイトを公開してくれる。つまり、Claude Code で「変更を GitHub に保存して」と伝えるだけで、Web サイトの更新まで完了する。

公開までの手順

1. Vercel の Web サイト（vercel.com）にアクセスし、GitHub アカウントでログインする
2. 「New Project」を選び、先ほど GitHub に保存したリポジトリを選択する
3. 「Deploy」ボタンを押す

これだけだ。1〜2分で Web サイトが公開される。Vercel が自動で URL を発行してくれる（例: company-website.vercel.app）。この URL をブラウザで開けば、あなたの Web サイトが表示される。

独自ドメイン（例: tanaka-corp.jp）を使いたい場合は、Vercel の設定画面でドメインを追加できる。ドメイン自体は別途取得が必要だが（年額1,000〜3,000円程度）、Vercel との連携設定は画面の案内に従うだけで完了する。

公開後の更新フロー

一度設定が済めば、以降の更新は驚くほど単純だ。

1. Claude Code に「トップページのお知らせを更新して」と伝える
2. Claude Code がコードを修正する
3. Claude Code に「GitHub に保存して」と伝える
4. 自動的に Web サイトが更新される（1〜2分で反映）

従来のレンタルサーバーでは、FTP ソフト（ファイル転送用のソフト）でファイルをアップロードし直す必要があった。GitHub + Vercel の連携なら、その手間がゼロになる。

チームでコードを共有・管理する

1人で使うだけでなく、社内のメンバーや外部の制作会社とコードを共有したい場面もあるだろう。GitHub はチームでの共同作業にも対応している。

メンバーを招待する

GitHub のリポジトリに他のメンバーを招待するには、Claude Code に次のように伝える。

（コピーして使える指示文: メンバー招待）

GitHub のリポジトリに suzuki@example.com を招待して。 権限は「書き込み可能」にして。

招待されたメンバーにメールが届き、承認すると同じリポジトリにアクセスできるようになる。

権限は3段階から選べる。

外部の制作会社にコードを見せたいだけなら「読み取りのみ」、社内メンバーが修正もできるようにしたいなら「書き込み可能」を選ぶとよい。

変更履歴を確認する

誰が・いつ・何を変えたかは、GitHub 上で確認できる。ブラウザで GitHub のリポジトリにアクセスし、「Commits」（コミット: 変更の記録）をクリックすると、変更の一覧が時系列で表示される。

Claude Code に聞くこともできる。

（コピーして使える指示文: 履歴確認）

最近の変更履歴を5件見せて。 誰がいつ何を変えたか分かるように一覧で出して。

GitHub を使うときに知っておくと便利な用語

GitHub に関する記事やドキュメントを読んでいると、専門用語が出てくることがある。すべてを覚える必要はないが、よく見かける5つだけ押さえておくと安心だ。

これらの操作は、すべて Claude Code に日本語で指示すれば代行してもらえる。「この用語の意味を理解していないと使えない」ということはない。

実践: ゼロから Web サイトを作って GitHub で公開するまで

ここまでの内容を1つの流れにまとめてみよう。従業員15人の会社で、会社案内の Web サイトを Claude Code で作り、GitHub に保存し、Vercel で公開するまでの全手順だ。

手順1: Claude Code でサイトを作る

（コピーして使える指示文）

会社案内の Web サイトを作って。

ページ構成:

• トップページ（会社概要、事業内容、お知らせ）
• サービス紹介ページ
• 会社情報ページ（代表挨拶、沿革、アクセス）
• お問い合わせページ（フォーム付き）

デザイン:

• 清潔感のある白基調のデザイン
• コーポレートカラーは紺色（#1a365d）
• スマホでも見やすいレスポンシブ対応

会社情報:

• 会社名: 株式会社田中商事
• 設立: 2015年
• 従業員数: 15名
• 事業内容: 人材紹介

Claude Code が数分でサイトを生成してくれる。

手順2: GitHub に保存する

（コピーして使える指示文）

このプロジェクトを GitHub に保存して。 リポジトリ名は tanaka-shoji-website にして。 説明は「株式会社田中商事の会社案内サイト」にして。 プライベートリポジトリにして。

手順3: Vercel で公開する

Vercel の Web サイトにアクセスし、GitHub アカウントでログインして、先ほど作ったリポジトリを選んで「Deploy」を押す。1〜2分後に URL が発行される。

手順4: 以降の更新

（コピーして使える指示文）

トップページのお知らせに「2026年5月より新オフィスに移転します」を追加して。 追加したら GitHub に保存して。

この1つの指示で、サイトの修正 → GitHub への保存 → Vercel での自動公開がすべて完了する。

利用料金のまとめ

GitHub × Claude Code × Vercel の組み合わせにかかる費用を整理する。

Claude Code の Pro プラン（月額約3,000円）があれば、GitHub もVercel も無料枠で十分に使える。従来のレンタルサーバー（月額500〜2,000円）＋ Web 制作会社への更新依頼費（1回5,000〜30,000円）と比較すると、Claude Code を使って自分で更新できるようになる分、大幅にコストを削減できる。

まとめ

GitHub は「コードのバックアップ・公開・共有」を担う、なくてはならないサービスだ。Claude Code と組み合わせれば、あなたが GitHub の操作を覚える必要はほとんどない。「保存して」「公開して」「戻して」。日本語の指示だけで、プロのエンジニアと同じコード管理の仕組みを使える。まずは Claude Code で作った小さなプロジェクトを1つ、GitHub に保存するところから始めてみてほしい。

特典

この記事で紹介した手順をまとめた、Claude Code × GitHub 操作チェックリスト PDF を用意した。アカウント作成から初回保存、公開設定、更新フローまで、手順ごとのチェックボックス付きで進められる。Claude Code に伝える指示文（プロンプト）もそのまま掲載しているので、コピー＆ペーストで使い始められる。

→ Claude Code × GitHub 操作チェックリストをダウンロードする（無料） /resources

参考リファレンス

• GitHub 公式サイト: github.com
• Vercel 公式サイト: vercel.com
• Anthropic 公式サイト: claude.ai
• Claude Works 関連記事:「Claude Code とは｜非エンジニアが知っておきたい全体像と始め方」（/articles/501）
• Claude Works 関連記事:「Claude Code と GitHub Copilot の違い｜非エンジニアが選ぶならどっち？」（/articles/515）
• Claude Works 関連記事:「Claude 料金プラン完全ガイド」（/articles/506）