自宅のPCで始めた開発を、カフェではスマホで続ける。
AIと一緒に、場所を選ばない開発体験を。
開発は机の前だけじゃない。アイデアが浮かぶのは、いつも予想外の場所。
電車の中で浮かんだアイデアを、その場でプロトタイプに。帰宅後、PCで本格開発。
待ち時間の5分でバグ修正。まとまった時間がなくても、開発は進められる。
「続きどこまでやったっけ？」がなくなる。どこから再開しても、AIが文脈を把握。
GitHubが「橋渡し役」になって、PCとスマホをつなぎます
キーポイント：Claude GitHub App を一度インストールすれば、
PC・スマホどちらからでも同じリポジトリにアクセスできます！
目的に合わせて3つのテンプレートを用意しました。
CLAUDE.md も設定済みですぐに開発スタート！
開発ルール（技術スタック、コーディング規約など）を記載した CLAUDE.md が最初から設定されています。 PC/スマホどちらから開発しても、同じルールで Claude が動作します。 必要に応じてプロジェクトに合わせてカスタマイズしてください。
データベースも認証もなし。アイデアをすぐ形にしたい時に最適。LPやプロトタイプ作成に。
Vercel（PRごとにプレビューURL自動生成）
LP、ポートフォリオ、プロトタイプ、アイデア検証
データベース・ユーザー認証完備。Webアプリを本格的に作りたいならこれ。
Railway（DB込みで一括管理）
会員制サイト、ダッシュボード、業務アプリ、SaaS
Fullstack + バージョン管理API。将来スマホアプリを追加する予定ならこれ。
Railway（DB込みで一括管理）
Web + スマホアプリ、外部連携、マルチプラットフォーム
GitHubの「テンプレートリポジトリ」機能を使えば、ボタンを押すだけでテンプレートから新しいリポジトリを作成できます。 ZIPのダウンロードやファイルのコピーは不要です。
まず、ZIPからテンプレート用のリポジトリを作成し、テンプレートとして設定します。
下のボタンからテンプレートをダウンロードし、GitHubに新しいリポジトリとしてアップロードします。 （「GitHub Desktop で使う」タブの手順を参考に）
my-template-fullstack などわかりやすい名前に
GitHubでリポジトリを開き、上部メニューの「Settings」タブをクリックします。
General セクションを下にスクロールし、「Template repository」のチェックボックスをオンにします。
Template repositories let users generate new repositories with the same directory structure and files.
✅ これでテンプレートリポジトリの設定完了！
テンプレート設定後は、ボタン一つで新規プロジェクトを作成できます。
GitHubで先ほど作成したテンプレートリポジトリにアクセスします。
緑色の「Use this template」ボタンが表示されているので、クリックして「Create a new repository」を選択します。
プロジェクト名を入力し、「Create repository」ボタンをクリック。 テンプレートの全ファイルがコピーされた新しいリポジトリが作成されます！
my-new-project
💡 ポイント：テンプレートから作成したリポジトリは、元のテンプレートとは完全に独立しています。 コミット履歴もクリーンな状態でスタートできます。
下のボタンからお好みのテンプレート（ZIP）をダウンロードします。
展開したフォルダを、プロジェクト名に変更します。
GitHub Desktop を開いて、フォルダをリポジトリ化します。
ローカルのリポジトリをGitHubに公開します。
github.com/new にアクセスして、新しいリポジトリを作成します。
下のボタンからテンプレートをダウンロードし、展開します。
GitHubのリポジトリページで、テンプレートのファイルをアップロードします。
次のセクション「環境構築ステップ」の STEP 2 から進めてください。
Claude Code でGitHub連携すれば、すぐに開発を始められます！
始める前に、これだけ揃えておきましょう
順番にやれば、30分で開発環境が整います
前のセクションの手順で、テンプレートからGitHubリポジトリを作成します。
すでに完了している場合は次へ進んでください。
💡 テンプレートには CLAUDE.md が含まれているので、開発ルールの設定は完了しています！
PCのブラウザから Claude Code を開いて、GitHubと連携します。
リポジトリアクセス
→ 必要なリポジトリだけ選択するのが安全です
スマホのClaudeアプリでも同じようにGitHubと連携します。
リポジトリを選択
PC で一度 GitHub App をインストールすれば、スマホ側では同じ GitHub アカウントで認証するだけで、同じリポジトリにアクセスできます。
テンプレートに応じたデプロイサービスと連携します。これでPRプレビューや自動デプロイが使えるようになります。
🌱 Simple テンプレート → Vercel
✨ Vercelの魅力：PRを作成すると自動でプレビューURLが生成されます。マージ前に画面確認できるので、開発がスムーズに！
🏗️ Fullstack / 🚀 API-Ready テンプレート → Railway
💡 Railwayの魅力：アプリとDBを一括管理。mainにマージすると自動でデプロイされます。
実際にPC→スマホの連携ができるか、簡単なテストをしてみましょう。
アイデアから完成まで、こんな風に進みます
作りたいものを、普通の言葉で説明するだけ。専門用語は不要です。
「個人輸入代行の見積もりが簡単にできるWebアプリを作りたい。商品URLを入れると、送料込みの合計金額が出るようにしたい」
PCの claude.ai/code でセッションを開始。AIがコードを書いてくれます。
「見積もりアプリを作って。まずは商品URL入力と金額表示の画面から」
Claude が作業完了すると、自動でPRを作成。Vercel連携済みなら、プレビューURLで画面確認できます。
Claude がPR作成 → Vercelがプレビュー生成 → 画面確認 → OKならマージ
スマホ：GitHubアプリで通知タップ → 「Merge」ボタン
PC：GitHubのPRページで「Merge pull request」をクリック
スマホのClaudeアプリ「コード」で続きの作業。修正や追加機能の依頼ができます。
「さっきの見積もりアプリ、消費税の計算も追加して」
テンプレートに応じたサービスでデプロイ。世界中からアクセスできるようになります。
GitHub連携 → PRごとにプレビューURL自動生成 → マージで本番反映
GitHub連携 → DB自動セットアップ → mainマージで自動デプロイ
それぞれの得意分野を活かして、効率よく開発
| 作業内容 | おすすめデバイス | 理由 |
|---|---|---|
| 新機能の開発 | 💻 PC | 大きな画面で確認しながら進められる |
| データベース設計 | 💻 PC | 複雑な構造は画面が大きい方が楽 |
| バグ修正 | 🔄 どちらも | 簡単なものならスマホでもOK |
| テキスト修正 | 📱 スマホ | サクッと直すならスマホで十分 |
| アイデアのメモ | 📱 スマホ | 思いついたらその場で記録 |
| PRの確認・マージ | 🔄 どちらも | GitHub上で完結するのでどちらでも |
経験から得た、開発をスムーズに進めるヒント
「あれもこれも」と詰め込まず、1つずつ依頼する方が品質が上がります。
Claude が作成したPRは内容を確認して、問題なければすぐマージ。
使いながら、よく使うルールや設定を追記していきましょう。
Simpleテンプレートなら、PRごとにプレビューURLが自動生成。マージ前に画面確認できます。
AIが作ったコードは、必ず自分の目で動作確認。意図通りか確かめましょう。
「いい感じに」より「〇〇を△△に変更して」の方が結果が良くなります。
わからないことは遠慮なく質問。「これどういう意味？」と聞けばOK。
場所を選ばない開発スタイルで、
あなたのアイデアを形にしましょう