バイブコーディング熱いですね。私も今では時間があればバイブコーディングしてます。
なので、私の知っている範囲ですが、こんな感じでバイブコーディングすると捗るよというTipsを書き下してみます。対象はClaude Codeですが他の類似ツールでも通用するはずです。
プロンプトの書き方: 曖昧でも大丈夫
なんかダッシュボードっぽいやつ作って。カード並んでて、スマホでも見れる感じで
これだけで計画立てて実行してくれます。
出来上がったダッシュボードはこちら。ここからさらに指示を行い、微調整を通じて欲しいものに近づけていくことができます。
最初は雑な指示でも何かしら作ってくれます。曖昧すぎる場合には、逆に質問してくれます。技術的な詳細に入った時に以下のように細かい指示をすれば大丈夫です。
- ローディングイメージを追加して
- レイアウトを綺麗にして
- ボックスのデザインがうるさいのでシンプルにして
以前の振り返り: 過去に遡って対応してくれます
以前実装した検索機能が今はこんな状態だけど、こうできない？
Claude Codeの場合は、重要な事柄は以下のように先頭にシャープをつけて記述することで、専用のファイル(CLAUDE.md)に保存することができます。
# PHPのバージョンは8.2.1
反復的な改善
対象が複雑なものになればなるほど、一回で欲しいものが得られることは稀になってきます。その際には、以下のように成果物に対して指示を行い、徐々に欲しいものに近づけていくアプローチが効果的です。
- デザインをモダンにして
- ここにボタンを追加して
- 遅いから早くして
- もっとポップな感じに
- これまでに作ったA機能とB機能を統合して
AIが得意なこと、不得意なこと
✅ 得意なこと: 提携的な実装(GoogleログインやX連携など)
Googleログインできるようにして
✅ 得意なこと: リファクタリング
古い実装が残っているのでリファクタリングして
✅ 得意なこと: コードの説明
このロジックを説明して
✅ 得意なこと: アイデア出し
生成AIを活用した機能のアイデアを出して
❌ 不得意なこと: 具体的なロジック
曖昧な説明ではなく、ステップバイステップでロジックを実装するように指示する必要があります
❌ 不得意なこと: デザインの細かい調整
3px右へではなくちょっと右へ
トラブルシューティング
エラーが起きてもパニックにならず、エラーメッセージやスクリーンショットを入力しましょう。高確率で修正してくれます。
エラーが出ています: エラーメッセージ or スクショの画像
問題が長期化しているのでデバッグ情報を出力するようにして
まとめ
- 完璧主義は捨てましょう - まず動くものから、そのあとは対話を通じて改善。
- 対話を楽しみましょう - AIは相棒として動いてくれるので、上手くいったら「ありがとう」を忘れずに。
- 実験を怖がらない - おかしくなっても簡単に元に戻してくれます。
- 自然体で話しましょう - 詳細に入らない場合は技術用語である必要はありません。
- 創造性を大切に - AIは壁打ちにも付き合ってくれるので、どんどん機能改善を行なっていくことができます。
私の個人プロジェクトはベースのプログラムは存在していましたが、バイブコーディングだけでここまできています。Googleログイン、X連携、OpenAI API連携なども実装済みです。
Let's Vibe Coding!!!
DMM 生成AI 学び放題では、初心者から上級者まで、安心して進められる「学習コース」を用意しています。開発・営業・マーケ… あなたにピッタリな学習ステップで、日々成長を実感できるような、体系化されたカリキュラムをご活用ください！