Portfolioはじめに
Claude CodeやCursorといったAIコーディングツールの登場により、プログラミングの専門知識がなくても、Webサイトやアプリケーションを作成できる時代になりました。
しかし、「作ったはいいけれど、どうやって公開すればいいのか？」「更新や修正はどうすればいいのか？」という疑問を持つ方も多いのではないでしょうか。
この記事では、非エンジニアの視点から、Claude Code → GitHub → Vercel という組み合わせを使って、AIで作成したサイトやアプリを公開・管理するワークフローをご紹介します。専門的なコードの解説ではなく、考え方や工夫、「こういう方法もあるかもしれない」というアイディアを中心にお伝えします。
なぜこの組み合わせなのか
世の中にはさまざまなデプロイ方法がありますが、私が現在この組み合わせを選んでいる理由は以下の通りです。
| ツール | 役割 | 選んだ理由 |
|---|---|---|
| Claude Code | AIコーディング | ターミナル上で動作し、プロジェクト全体を把握しながら開発できる |
| GitHub | バージョン管理 | 変更履歴を残せる、複数の作業状態を管理できる |
| Vercel | ホスティング・公開 | GitHubと連携するだけで自動デプロイ、プレビュー機能が便利 |
もちろん、これが唯一の正解ではありません。NetlifyやCloudflare Pages、AWS Amplifyなど、他にも優れた選択肢はあります。ただ、非エンジニアにとっての「わかりやすさ」と「手間の少なさ」という点で、この組み合わせは現時点でかなり使いやすいと感じています。
全体の流れ
AIでコードを作成・編集
ブランチで変更を管理
ブランチごとに自動生成
mainマージで自動デプロイ
基本的な流れはシンプルです。
- Claude CodeまたはCursorでコードを作成
- GitHubにプッシュ（ブランチを分けて）
- Vercelでプレビュー確認（自動でデプロイされる）
- 問題なければGitHubでPRを作成し、mainにマージ
- 本番環境に自動で反映
この流れが一度できてしまえば、あとは「作る → 確認する → 公開する」のサイクルを回すだけです。
開発ツールの使い分け
Claude CodeとCursorは、どちらもAIを活用したコーディングツールですが、使い分けることでより効率的に作業できます。
小規模なページやLP
HTMLを中心としたシンプルなページや、1枚もののランディングページを作る場合は、Cursorが便利です。GUIベースで操作でき、ファイルの作成や編集が視覚的にわかりやすいためです。
規模が大きくなったら
複数のファイルにまたがるプロジェクトや、APIを使った機能を追加したい場合は、ターミナル上でClaude Codeを起動して作業しています。プロジェクト全体を見渡しながら作業できるため、「このファイルを変更したら、あのファイルも直さないと」といった連携が必要な場面で力を発揮します。
GitHubへのプッシュとブランチ管理
作成したコードをGitHubにプッシュする際、私はClaude Codeに直接指示を出しています。
「このブランチ名でプッシュして」と伝えるだけで、Claude Codeがgitコマンドを実行してくれます。ブランチを分けることで、作業中の変更と本番環境を明確に分離できます。
たとえば、「新しいお問い合わせフォームを追加したい」という場合、feature/contact-formのようなブランチを作成してそこで作業すれば、本番サイトには影響を与えずに開発を進められます。
GitHub × Vercel連携の設定
GitHubとVercelを連携しておくと、GitHubにプッシュするだけで自動的にサイトがデプロイされるようになります。
設定方法は、VercelのプロジェクトからGitHubのリポジトリを選択して同期するだけです。一度設定すれば、あとは意識することなく自動で同期されます。
プレビュー確認とPRマージ
GitHubでブランチを切ってプッシュすると、Vercelは自動的にプレビュー（ステージング）環境を作成してくれます。
このプレビュー環境で実際の表示を確認し、問題がなければGitHubでPull Request（PR）を作成してmainブランチにマージします。マージが完了すると、Vercelが自動的に本番環境へデプロイしてくれます。
Claude Codeで変更後、GitHubにプッシュ
Vercelが自動生成したプレビューURLで確認
問題なければGitHubでPull Requestを作成
mainにマージすると自動で本番に反映
Vercelのサービス活用
Vercelは単なるホスティングサービスではありません。Storage機能として、データベース（KV、Postgres）、定期実行（QStash）、メール送信（Resend）なども提供しています。
これらのサービスを活用したコーディングも、Claude Codeで指示すれば対応してくれます。「設定がよくわからない」という場合は、Claude Codeにテキストベースで設定手順をファイルに書き出してもらったり、ChatGPTで確認したりすることもできます。
また、月額$10程度で利用できるSpeed Insightを使えば、サイトのパフォーマンスや使いやすさに関する課題が数値化されます。その課題点をClaude Codeに伝えて改善を依頼する、という使い方も可能です。
スプレッドシートとの連携
Webアプリとスプレッドシートを連携させたい場合、スプレッドシート側の処理は**Google Apps Script（GAS）**で書くのが便利なことがあります。
私の場合、Claude Codeに「やりたいこと」を伝えて、適当なファイルにGASのコードを書き出してもらいます。そのコードを精査してからスプレッドシート側で実行し、問題があればエラー内容をClaude Codeに伝えてコードを改善してもらいます。
このとき、Claude Codeはアプリ側の設計とGASの双方を調査して結果を返してくれるので、両方の整合性を保ちながら開発を進められます。
スマホと音声入力での運用
Claude CodeとGitHubを連携しておけば、スマホやWebブラウザから音声入力で修正指示を出すこともできます。
たとえば移動中に「ブログ記事を追加したい」と思ったら、スマホで音声入力して内容を伝え、到着する頃にはサイトにアップされている——そんな使い方も可能です。
プレビューでチェックして、GitHubでPRしてマージすれば本番反映。パソコンの前にいなくても、ちょっとした更新作業ができるのは便利です。
コストについて
気になるのはコストだと思います。小規模なプロジェクトであれば、意外と低コストで運用できます。
| サービス | プラン | 月額目安 |
|---|---|---|
| GitHub | Free | $0 |
| Vercel | Hobby | $0 |
| Claude Code | API利用 | $20程度〜 |
小規模であれば、GitHubもVercelも無料枠でなんとかギリギリ運用できます。Claude Codeは月$20程度からちまちま使えるので、低コストで「作る → 公開する」が実現できるのは、小規模事業者にとってありがたいポイントです。
もう少し規模が大きくなっても、Claude Code $100、Cursor $20、Vercel Pro $20に多少の従量課金を加えた程度で、複数のサイトやページを管理できます。この規模感でこのコスパは、かなり良いと感じています。
まとめ
Claude Code → GitHub → Vercel という組み合わせは、非エンジニアでも「作る → 確認する → 公開する」というサイクルを回しやすい構成です。
- AIでコードを作成
- GitHubで変更を管理
- Vercelでプレビュー・本番デプロイ
この流れさえ覚えてしまえば、あとはアイディア次第でさまざまなサイトやアプリを公開できます。
もちろん、これ以外にも方法はたくさんあります。自分に合ったやり方を探しながら、AIコーディングの可能性を広げていってください。