コンテンツにスキップ / Skip to content
</>
Vibe Coder Guide
Vibe Coder ガイド

Claude Code でウェブアプリを構築 ― コーディング不要

プログラミングの知識は不要。このガイドに沿って、安全にプロジェクトを作成・公開しましょう。

なぜこの仕組みが必要?

Claude Codeを使えば、プログラマーでなくてもウェブサイトやアプリを作ることができます。しかし、お客様が使うシステムは、家の建築と同じで、設計(コード)を現場監督(エンジニア)がチェックしてから施工(公開)する必要があります。この仕組みで、自由に設計しながらも安全に引き渡せます。

お客様のデータを守る

家の引き渡し前に検査するように、公開前にエンジニアがセキュリティをチェック。個人情報やパスワードの漏れを防ぎます。

開発スピードは落とさない

モデルハウスのパンフレット(LP)は自由にすぐ作れます。検査が必要なのは、お客様が実際に使うシステムだけです。

変更履歴が残る

設計変更の履歴が全て残る図面管理と同じ。「誰が」「いつ」「何を」変えたか分かり、問題が起きても前の状態に戻せます。

プロジェクトの流れ

Tier 1かTier 2かで、プロジェクトの進め方が変わります。

新しいプロジェクトのアイデア

何を作りたいですか?

Tier 1?Tier 2?

「プロジェクト分類」ページで確認

Tier 1 / Tier 2
Tier 1

テンプレートからリポジトリ作成

GitHubのtier1-templateを使用

Claude Codeで開発

LP・デモ・プロトタイプ

mainにプッシュ

自動で公開!🎉

Tier 2

要件定義書を作成

Claude / ChatGPTで下書き

エンジニアに共有

Slackやメールで送付

エンジニアがシステム準備

DB・認証・API・初期コード

Claude Codeで画面開発

基盤の上にフロントエンドを構築

プルリクエストを作成

エンジニアがレビュー

承認 → 公開!🎉

修正依頼 → 修正

2つの分類

プロジェクトはリスクに応じて2つに分かれます。

Tier 1Tier 1 — 自由に公開
  • LP・デモ・プロトタイプ向け
  • テンプレートから自分でリポジトリを作成
  • エンジニアのレビュー不要
  • mainプッシュで自動公開
詳しく見る
Tier 2Tier 2 — レビュー必要
  • お客様向けアプリ向け
  • まず要件定義書を作成
  • エンジニアがシステムを先に準備
  • レビュー後に公開
詳しく見る

各ページへ

詳しい情報は各ページをご覧ください。

💡 ヒント: ページ内の技術用語()にカーソルを合わせると定義が表示されます。