あることを最初に明確にしておきたい。
これを保存しておいてね :)
私は開発者じゃない。一度もなったことがない。コンピュータサイエンスの学位も持ってない。プログラミングのブートキャンプも受けたことがない。大抵のコードを読んでも、何をしているか説明できない。
でも、先週末、動くウェブアプリケーションを世に送り出した。実際のユーザーが登録した。実際のデータが保存された。実際の機能が動いた。
全部、Claude Code だけで2日間で作った。そして、その経験が実際どうだったかを、ありのまま話す。よく見せようとしたバージョンじゃない。めちゃくちゃで、イライラして、でも breakthrough だらけの現実を。
なぜなら、"AI でアプリを作った"というネットの話はどれも簡単そうに聞こえるから。楽なことなんて全然ない。でも、十分に可能なんだ。
土曜の朝：アイデア
簡単なツールを作りたかった。複数プラットフォームの投稿を計画して、日にちの間をドラッグ＆ドロップで移動できて、公開済みとしてマークできるコンテンツカレンダー。画期的なものじゃない。でも、自分のワークフローに本当に必要だったものだ。
土曜の朝9時に、初めてターミナルで Claude Code を開いた。
9時15分には、もう最初のミスをしていた。
ミス #1: 計画なしで始める
Claude Code への最初のプロンプトはこれだった：
コンテンツカレンダーアプリを作って
Claude は大量のファイルを生成した。画面に何かが表示された。それは、一度もカレンダーを見たことがない人がデザインしたようなコンテンツカレンダーだった。
ここで90%の人が諦める。 曖昧なプロンプトを入力して、曖昧な結果を得て、バイブコーディングは機能しないと結論づける。
問題は Claude じゃなかった。問題は私だった。何も与えていなかったんだ。
やるべきだったこと：
最初に Plan Mode を使うべきだった。Claude Code で Shift + Tab を押して、Act Mode から Plan Mode に切り替える。Plan Mode では、Claude は作る前に考える。質問をしてくる。アーキテクチャをマッピングする。何を作ろうとしているのかを見せてくれる。
私は戻って、正しくやり直した：
コンテンツカレンダーのウェブアプリを作りたい。コードを書く前に、計画を立てよう。
アプリに必要なもの：
- 週表示：7列（月曜から日曜）
- タイトル、プラットフォーム（Twitter、LinkedIn、Instagram）、ステータス（下書き、予約済み、公開済み）で投稿を追加できる機能
- ドラッグ＆ドロップで投稿を日付間で移動
- Tailwind CSS を使ったシンプルでクリーンなデザイン
- データはローカルデータベースに保存し、セッション間で永続化
どんな技術スタックを使うべき？ フォルダ構成は？ 何かを作る前にアーキテクチャを説明して。
Claude は詳細な計画を返してきた。フレームワークは Next.js。データベースは SQLite。スタイリングは Tailwind。ファイルごとにクリーンなフォルダ構成がレイアウトされていた。
学んだ教訓：常に Plan Mode で始める。何が欲しいかを詳細に説明する。計画に使う5分が、再構築に2時間かかるのを防ぐ。
ミス #2: 全部を一度に作ろうとする
計画を立てた後、興奮した。Claude に全部を一度に作れと指示した。
結果はめちゃくちゃだった。一部の機能は動いた。他は中途半端に実装されていた。ドラッグ＆ドロップは壊れていた。データベースは正しく保存されていなかった。どこから修正を始めればいいのか全くわからなかった。
やるべきだったこと：
一度に一つの機能だけ作る。これがバイブコーディングの黄金律だ。
やり直して、この順序で進めた：
セッション1：基本的なページレイアウトだけ。7列。機能なし。
セッション2：投稿を作成する機能を追加（シンプルなフォームだけ）。
セッション3：保存した投稿を正しい曜日の列に表示。
セッション4：ドラッグ＆ドロップ機能を追加。
セッション5：ステータス機能を追加（下書き／予約済み／公開済み）。
セッション6：見た目を良くする。
各機能ごとに別々の会話にした。 新しいコンテキスト。明確なタスク。クリーンな結果。
一度に一つの機能を作ると、それぞれが完璧に動いた。全部を一度に作ろうとすると、何も動かなかった。
学んだ教訓：機能ごとに一つの会話。複数の機能を同じ Claude Code セッションで混ぜてはいけない。
ミス #3: [CLAUDE.md](http://claude.md/) ファイルを作らなかった
土曜の午後までに、基本的なレイアウトが動くようになり、興奮していた。でも、同じ問題に繰り返し直面した：
Claude は不必要に複雑さを追加し続けた。単純な try-catch でいいのに、凝ったエラーハンドリングシステムを作ったり、クリーンな遷移だけが必要なのにアニメーションライブラリを追加したり、小さな変更を依頼しただけでフォルダシステム全体を再構築したりした。
同じことを何度も修正していた。
それから、CLAUDE.md について読んだのを思い出した。
プロジェクトルートにファイルを作成した：
CLAUDE.md
プロジェクトルール
- これはシンプルなコンテンツカレンダーです。すべてを最小限に保つこと。
- Next.js 14 と App Router を使用すること。
- スタイリングはすべて Tailwind CSS を使用すること。他のCSSフレームワークは使用しない。
- データベースには SQLite と Prisma ORM を使用すること。
- シンプルに保つこと。不要な抽象化やデザインパターンは避けること。
- 「見た目を良くして」と言った場合の意味：すっきりとした間隔、読みやすいフォント、控えめなホバー効果、角丸。
- 私に事前に確認せずに、新しい依存関係を追加しないこと。
- 既存のコードをリファクタリングする前に、私に確認すること。
コードスタイル
- シンプルで読みやすいコード。初心者でも理解できること。
- 明確な変数名。略語は使用しない。
- コメントは、自明でないロジックに対してのみ記述すること。
このファイルを作成してから、体験は劇的に変わった。Claude は過剰にエンジニアリングしなくなった。ランダムなライブラリを追加しなくなった。私が触れるよう指示していないものを再構築しなくなった。
Claude が私の望まないことをするたびに、新しいルールを [CLAUDE.md](http://claude.md/) に追加した。 日曜の夜までにこのファイルには30以上のルールが記述され、Claude はそれらすべてを完璧に守っていた。
学んだ教訓：初日に [CLAUDE.md](http://claude.md/) を作成する。常に更新する。これは Claude Code の中で最も強力なツールだ。
ミス #4: スクリーンショットを使わなかった
土曜の夕方。アプリは機能的には動くが、見た目が醜い。こう入力した：
デザインをもっとモダンでプロフェッショナルにして
Claude は変更を加えた。見た目は変わった。より良くはならず、ただ違うだけだった。
視覚的な問題を言葉で説明しようとしていた。これは非常に非効率だ。
そこで、自分の好きなデザインのウェブサイトのスクリーンショットを撮り始めた。それを Claude Code に直接貼り付けた：
[クリーンなカレンダー UI のスクリーンショット]
カレンダーをこんな感じにしたい。具体的には：
- 背景はこの正確なグレーの色合い
- 各投稿にはこの丸みを帯びたカード
- 要素間の間隔はこのくらい
- アクティブな日が青くハイライトされる方法
Claude はデザインをほぼ完璧に再現した。一度目で。
そして、何かがおかしいと思ったときは、説明する代わりにスクリーンショットを撮り、問題のある部分を丸で囲み、貼り付けて「この間隔がおかしい」とか「このフォントが小さすぎる」と言った。
学んだ教訓：視覚的なフィードバックには、言葉の10倍スクリーンショットが効果的。何が見えているかを説明する代わりに、常に画像を貼り付けること。
日曜日：すべてがまとまった
日曜の朝までに、クリーンなデザイン、ドラッグ＆ドロップ、永続データ、機能するデータベースを備えたアプリが動いていた。コードのほとんどを理解しないまま、全部を構築していた。
でも、それは自分のラップトップ上にしか存在しなかった。デプロイする時だ。
ミス #5: デプロイを怖がる
デプロイは恐ろしく聞こえた。サーバー。ドメイン。DNS。設定ファイル。
もうやめようかと思った。ほぼ「ローカルで動けば十分だ」と決めかけた。
でも、踏み切って Claude に尋ねた：
このアプリをインターネット上に公開デプロイしたい。Vercel が一番簡単だと聞いたので使いたい。正確な手順を教えて。
Claude は7つのステップを示した：
- コードを GitHub にプッシュする（Claude が Git の設定を手伝ってくれた）
- Vercel にサインアップする（無料）
- Vercel を GitHub リポジトリに接続する
- データベースの環境変数を設定する
- デプロイをクリックする
- 90秒待つ
- 公開 URL を取得する
手順に従った。3分後、アプリが公開された。5人に URL を送った。彼らが開いた。動いた。
学んだ教訓：デプロイは怖くない。ただのチェックリストだ。Claude がすべての手順を案内してくれる。
始める前に知っておきたかった12のルール
2日間で学んだすべてを、ルールにまとめた：
ルール1： 毎回 Plan Mode で始める。Shift + Tab。作る前に考える。
ルール2： 機能ごとに一つの会話。新しいコンテキストはより良いコンテキスト。
ルール3： 初日に CLAUDE.md を作成する。すべての修正が恒久的なルールになる。
ルール4： 視覚的な問題にはすべてスクリーンショットを使う。問題を丸で囲み、直接貼り付ける。
ルール5： 最初は最もシンプルなバージョンを作る。シンプルなバージョンが動いてから、複雑さを追加する。
ルール6： 欲しいものを詳細に説明する。プロンプトが具体的であればあるほど、出力は良くなる。「ログインページを作って」はゴミを生む。「メールとパスワードのフィールド、下に「パスワードをお忘れですか」リンク、青い送信ボタンがあり、成功時に /dashboard にリダイレクトするログインページを作って」は、求めたものを正確に得られる。
ルール7： 会話が長くなったら /compact を使う。コンテキストが埋まると Claude の品質は落ちる。
ルール8： 動く機能ごとに Git にコミットする。Claude がこれを手伝ってくれる。何かが壊れたら、ロールバックできる。
ルール9： 何かが壊れたら、エラーメッセージをコピーして Claude に貼り付ける。「何かを修正する前に、根本原因を診断して」と言う。Claude はほとんどの場合、すぐに問題を見つける。
ルール10： すべてのコード行を理解しようとしない。各ファイルが何をするのか、どうつながっているのかを理解する。それで十分、Claude を効果的に指示できる。
ルール11： Claude が同じことを何度も修正するループに陥ったら、止める。新しい会話を始める。関連するファイルだけと、問題の明確な説明を貼り付ける。
ルール12： 完璧になる前に公開する。バージョン1は美しくある必要はない。動けばいい。バージョン2でいつでも良くできる。
あの週末以降に作ったもの
あれから3週間。それ以降に作ったもの：
- ログインとファイルアップロード機能付きのクライアントオンボーディングポータル
- コンテンツの指標を追跡する内部ダッシュボード
- フォームから PDF 請求書を作成するシンプルな請求書ジェネレーター
- トピックごとにリンクを保存・整理するブックマークマネージャー
今でも、ほとんどのコードは読めない。ファイルの中で何が起こっているかの80%は理解していない。でも、何を作りたいかを明確に説明できるので、Claude が作ってくれる。エラーを Claude に見せて、問題をデバッグできる。動く製品をインターネットにデプロイできる。
それがバイブコーディングだ。あなたはプログラマーじゃない。あなたはプロダクトマネージャーだ。Claude がプログラマーだ。あなたの仕事は、何を作るべきかを知り、それを明確に伝えることだ。
多くの人は、何かを作る前にコードを学ぶ必要があると自分に言い続けるだろう。
今週末にターミナルを開いた人は、月曜の朝までに動くアプリを手にしているだろう。私に起こったことが、まさにそれだからね。
フォローはこちら [@eng_khairallah1](https://x.com/@eng_khairallah1) で。AI コース、ツール、ワークフローを毎週更新しています。
これがお役に立てば幸いです。Khairallah ❤️
