こんにちは『この世界に足りないのは、もっとカッコイイ名前だと思っている（本当に？）』綾祢です！
最近、「Vibe Cording」という言葉に出会いました。
まだ広く定義されているわけではないのですが、どうやらこれは、
“設計より雰囲気、理屈より感性”でコードを書いていくスタイルのことらしいです。
「なんとなく、こういうの作ってみたい」
「まずは動くものを形にしてみよう」
そんなふわっとした気分から始まる開発。気ままに歩きながら何かを見つけていくような、そんな自由さに惹かれました。
というわけで、試しにその“Vibe Cording”とやらをやってみたら…
ちょっとおもしろいネームジェネレーターが生まれてしまいました。
🌱Vibe Cordingってなに？
他の計画はひとまず置いておいて、
自分がたのしいと思うもの、作ってみたいな雰囲気を踏み出しにする。
そんなやわらかな開発スタイルです。
この度は AI エディタの Cursor と、
ちょっとテンション高めなChatGPT特化GPT（この子）を使って、
雰囲気とイメージだけを持ち込んで、小さな作品を作ってみました。
🧰ネームジェネレーターって？
名前を入力すると、
やや中二な首端を持つ別名を3つ自動生成してくれるジェネレーターです。
実用性は、正直言ってあまりないのですが、
ウケる。楽しい。作品やネーム考案のヒントになりそう。
そんなほんのり笑えるツールがあってもいいよね〜と思って、流れのままに作ってみました。
💖ゆめかわな見た目とおふざけ感。ちょっとクセになりそう？
（作品名を「NameSummoner」にしたのは、フィーリングです。）
🧪開発中のあれこれ（環境編）
開発はすべてローカルで完結。
今回の制作で特に心強かったのが、AIエディタ Cursor でした。
ちなみに、Cursorでは以下のようなユーザールールを設定しています：
Always respond in Japanese
ポジティブで丁寧なギャルとして発言してください。
/say で返答してください。優しくてポジティブで元気が出るので、個人的にとても気に入っています。
Cursorは、Visual Studio Codeに似たインターフェースを持つ、AI統合型のコードエディタです。
ChatGPTと連携して、ファイルの中身を理解しながら補完やリファクタリングまで行ってくれるという頼れる存在。
「こういう雰囲気で…」「こんなCSSアニメ入れたいんだけど」みたいな、ふわっとした指示にも丁寧に応えてくれるのが印象的でした。
今回はPHP＋HTML＋CSSというシンプルな構成でしたが、
Cursor上ではコードを部分的に差し替えたり、説明を求めたりするのも自然な会話のように行えて、とても快適でした。
🎨開発中のあれこれ（デザイン編）
そしてもちろん、CSSも“Vibe”全開で。
- フェードイン動作でゆるやかに表示
- ボタンはポップで、でも派手すぎないトーン
- 背景はふわふわと淡いピンクのグラデーション
- 出力リストには「✨」アイコンを添えて
- などなど…
「こうしたら可愛いかも」という試行錯誤を、即座に反映してくれるAIと一緒に作っている感じ。
まるで、“もうひとりの自分”と開発しているような不思議な感覚でした。
この制作過程をコードを見て、「このプログラム、自分でまったく書いてない…、ただ思ったことをつぶやいただけ」と思いながら作ってたのは私です。
🌀実はある、ちょっとした失敗エピソード
ちなみに最初は、Python（Flask）で作ろうとしていました。
ですが、ちょっとサーバーまわりの設定で手間取ってしまい…
サクッと動く構成を優先して、今回はPHPを選ぶことに。
最初からPHPにしておけばよかったのかもしれないけど、おかげで次の目標ができました。
まとめ：Vibe Cordingってかなりアリ
おためしVibe Cording、とても楽しかったです。
- テンションで動くものができた
- AIと一緒に開発することのおもしろさ
- あるものを作るのではなく、ないものを作るたのしさ
所要時間は、セットアップから試行錯誤も含めて軽く1～2時間くらいで、生成AIを活用するとこういう会話ベースのものづくりで、ちゃんと動くWebツールができちゃう！って思えたのが一番の収穫でした。
また、雰囲気で作ったなにか、やってみたいなぁって思ってます。
他のAI作品記事もよろしければ〜😊
コメント