※この記事はVibeコーディングしかできない人に向けています。
自分のこと
どうも、ながもんです。
自分はプログラミングのコードなんて一から書いたこともない完全な非エンジニアです。
ですが、最近流行りのAIエージェントツールとチャットで会話しながら作っていく、いわゆる「Vibeコーディング」でWebアプリを企画してリリースまで持っていくことができました。
今回は、コードが書けない自分がAIと一緒に開発を進める中で、「こうやって指示を出して進めれば途中で破綻せずに最後まで走り切れるな」と実感したコツをいくつかまとめてみました！
1. AIは作るものがイケてるか判断できない
多分Vibeコーディングをしている人は全員思っていると思うのですが、AIは人間的な「いい感じ」「イケてる」状態をまだ正確に判断することはできません。
なので、どういう状態が「いい感じ」「イケてる」のかを示してやる必要があります。
一番手っ取り早いのは具体例を画像で見せることかなと思います。結構有効なことが多いです。
ただ画像など指示が具体的であればあるほど、「それが正解なら手に寄せますわ」と思われ、それにめちゃ寄る可能性も高くなります。
なので、画像等で具体的に示しつつも自分の理想とする状態があるなら、その状態を言語化するのが一番バランスが良いのかなと感じています。
自分の場合は強いこだわりがないのであ最初に機能的な要件のみを提示して、UI等は全てAIに任せています。
あまりにも想像と違う場合を除いて、AIが提示してくるものを見てから具体的に修正を指示しています。
最初に提示してくるもはよくも悪くも「それっぽい」ものになるので、最初にどこまで指示を出すかは完全に好みになりますね。
そこから自分好みの見た目や仕組みに変更していく感じですね。
2. つくりたいものを頭に思い浮かべ、使ってみる
頭の中だけで指示を組み立てるのではなく、とにかく一度形にさせて自分が真っ先のユーザーとして使ってみることが重要です。
実際に動くプロトタイプを触ってみると、「あ、ここはボタンじゃなくてアコーディオンが良いな」「この文字量だとスマホで読めないな」というリアルな課題が見えてきます。
「頭で思い描く ➔ 作らせる ➔ 自分で触る ➔ 違和感をAIにフィードバックする」の高速ループこそがVibeコーディングの真骨頂です。
3. ある程度の仕様は作ってみよう
仕様の書き方なんてわからへんわ！という人も多いかと思いますが、人間に見せるわけではないのでそおkまでがっつり作る必要はないです。
最初はメモぐらいで大丈夫ですl。
・アプリの用途や目的、どんな人に使って欲しいのか
・ざっくりどんな画面があるか、何のボタンがあるか、何の機能があるか
・どんなデザインがいいのか、どんな色がいいのか
これらをmdファイルに書いて渡すだけでもある程度のものができます。
出てきたものをベースに、違うなと思うところを細かく修正していくのが良いかと思いますね！
4. プロンプト、仕様、結果は全て残しておく
これ、結構大事でAIに何かをさせる時は履歴は全て情報になります。
なので、1、2で書いた指示等は全てmdファイルに記載してプロジェクトの中に置いておくことを推奨します。
細かい修正等はチャットとしてプロンプトに記載してもいいですが、大掛かりなものは全てプロンプトに残しましょう。
逆にAIにメモさせるのもありです。
「仕様変更や追加があった場合は、最初に記載したプロンプトに追加して。経緯が明確な場合は経緯も書いて」とかでも一旦はメモしてくれるのではないでしょうか。
これをやるかやらないかで、やればやるだけ資産が増えていくことになるのでぜひお勧めしします。
5. とりあえず作ってみる
最後はyたっぱりあれこれ悩む前に、「とりあえずAIに投げて作らせてみる」のが一番の近道です。
うだうだいう前にやりましょう。やってみないとなかなかどういうもんができるかわかりませんし、やったら1発でわかります。
AIが「いいかんじ」に作ってくれるので以外とできるかも！？って感じになりますよ！
6. ふんわり自分が作ったもの紹介
で、今回そんなVibeコーディングノリで作ってみたのが『あれあるマップ』というWebアプリです！
・あれあるマップ：https://arearu-map.pages.dev
引っ越しとか部屋探しの時って、「セブンもマックもスーパーも徒歩10分圏内に全部揃ってる街に住みたいな〜」とか思ったことありませんか？
賃貸サイトで物件探す前に、「そもそも自分の希望のお店がぜんぶ揃ってるエリアってどこやねん」ってのを一発で地図上に緑色で可視化してくれるサービスです。
自分自身もともとコードなんて全く書けない状態からだったんですが、AIに指示を出して見た目を整えてもらったり、Google Analyticsを入れたりSEO対策をしたり、SNSでのワンタップシェア機能までサクッと数日で形にすることができました。
「コード書けへんからアプリ開発なんて無理や…」と思っている人こそ、ぜひAIを相棒にしてVibeコーディングで自分の欲しいものを形にしてみてください！