Vibeコーディングを試してみた

公開日:2026/01/15

この記事をざっくりまとめると・・・

バイブコーディングを試してみました。自分自身のフローとそこで感じることをまとめるとAIとの向き合い方を改めて感じる次第です

・・・ということが書いてあります。

GoogleのAIモードによると

バイブコーディング(Vibe Coding)とは、「なんとなくこんな感じ」「もっといい雰囲気にして」といった開発者の直感や「バイブス(雰囲気)」をAIに自然言語で伝え、AIがコードを生成・修正しながらアプリケーションを形にしていく新しい開発手法です。

だそうです。

私自身、もともとはプログラムを書いたりしていましたし、今もフロントエンド関連のコーディングは行うことができますが、昨年から少し話題になっていたことバイブコーディングをこの年末年始に触れてみようと思い、「ある仕組みのプロトタイプ」ということを前提にして試してみました。そしてその流れは今も継続しています。

その中で感じたバイブコーディングについて少し今思うところ(2026年1月時点)を記しておこうと思います。

改めてバイブコーディングとは

再掲になりますが、GoogleのAIモードの回答によると

バイブコーディング(Vibe Coding)とは、「なんとなくこんな感じ」「もっといい雰囲気にして」といった開発者の直感や「バイブス(雰囲気)」をAIに自然言語で伝え、AIがコードを生成・修正しながらアプリケーションを形にしていく新しい開発手法です。明確な仕様書ではなく、曖昧な表現や感覚的な指示でAIと対話的に開発を進めるのが特徴で、プログラミング知識が少ない人でもアイデアを素早く形にできる可能性を秘めています。
※AIが参考にしたページ https://bcg-jp.com/article/9133/

とのことです。ポイントはやはり「明確な仕様書ではなくても」ということと「対話的に開発を進める」ということですね。

今回使ってみたAIはClaude

実際に私がバイブコーディングのために「対話」をしたAIはClaudeです。もっとプログラム構築によっても良かったのですが、普段使っているものがClaudeでしたので、一旦はそれに合わせてやってみたというところです。

何を作ってみたか?

仕事の内容なので詳細は語ることができませんが、方向性としてはPHPとMySQLを使ったウェブシステムです。データベースからデータを取得したり、データをデータベースに書き込んだり・・の代物です。数年前に実際に自分で色々と調べながら書いたことはあるのですが、だいぶ開発から離れていたこともあるので、具体的なSQL構文の書き方とかPHPの関数のあり方とかをすっかり忘れていたことと、プログラムを書いていた方ならなんとなくわかると思いますが、指が覚えていなかったのでバイブコーディングにトライしてみたという感じです。

準備したものは何か?

プログラムから離れていたとはいえ、要件に対してまず自分の頭と手書きで考えたのはざっくりした仕様とデータテーブルのリレーション関連。バイブコーディングにおいては、先述の通り「明確な仕様書」はなくてもいいのでしょうが、とはいえ何かしらの仕様はメモレベルでも持っておいた方がいいと思ったので用意しました。仕様を考える中で自然とデータテーブルの構成も考えていくことになります。

結果的に実際にAIと何かしらの対話を始める前には

  • ✅ メモレベルの仕様書
  • ✅ phoMyAdminにはデータテーブルの作成

が一旦完了している感じでした。

ざっくり言えば、やりたいことを材料と共に整理したという感じでしょうか?

どういうふうに始めたか?

まずは、「PHPとMySQLを使ったウェブシステムを作りたい」というところから始めました。

文が分になってる(恥)

具体的にどうしたいかを求められたので、phpMyAdminからデータテーブルの構造の画面キャプチャをとってAIに送り、「このデータの一覧を表示させるページを作成したい」と指示をだしました。ここでのポイントはデータ構造などを書き込まずキャプチャで送ってみたというところです。

書き出されたphpプログラムを動かしてみたらきちんとデータが表示されました。狙い通りのデータが狙い通りに表示されまたある程度のデザインもされているではありませんか。CSSが書き込まれいるのです。そして、さらに例えばボタン周りにはきちんとホバーのアクションやアイコンでのわかりやすさが施されていました。

さらに他のページも作ってみたら起こったこと

これをいいことに他のページについてもやりたいことと欲しいデータのもとになるphpMyAdminのキャプチャの画像を送って・・を繰り返し一通りプロトタイプとしては十分なページ数が完成しました。

そこで発生したのは、コードの煩雑さです。初期段階での「仕様」というものにはフォルダ構成やファイル構成についての言及や検討はしていなかったので、それぞれのファイルに同じ処理が同じように記載されている状況になりました。

プロトタイプだから・・という判断もありましたが、やはり元々は自分で作ってきた側の人間なので整理したくなります。そこでテキストにてフォルダ構成を「├」の記号を使いながら指示を出して全体的に整理をするように指示をだしました。

すると、まとめるものはまとめ、個別に記載するものは記載し・・を実装してくれました。結果としてまだ荒い部分はあるなぁという印象ですが、ここは後ほどのメンテナンスでどうにでもなるなという印象。

追加でしたいことをどう伝えるか

追加でしたいことやまだデータテーブルが用意できていないものに関しては、適宜その旨を相談しながらバイブコーディングを行いました。例えば、まだリレーションを組む先のデータテーブルができていないとあらかじめ伝えた上で仮として作成してくれたり、やりたい処理に対してのデータテーブルの構造の評価をしてくれたりします。

これは一人で構築していながらも複数の意見を聞きながらしている気分にさせてくれます。

どこまで使えるものか?

ユーザー視点で言えば、おそらくバイブコーディングのままでもほぼ問題ないものが仕上がっていく感じはあります。しかしそれはあくまで表面上の話で、やはりシステムというものは、開発側の操作性つまりはメンテナンス性も必要です。保守面と拡張面を鑑みた場合、最終的な部分ではやはり自分の手を今後加えていくことが大切でしょう。そういう意味では、プログラミングの知識がいらない・・はまだ少し乱暴な表現な気がします。

確かにプログラミングの知識がいらなくても何かしらのシステムはできます。

これはなんとなくですが、HTMLの知識がなくてもホームページが作れますよなアプリケーションと同じような気がします。ちょっと昔でいう「テーブルコーディングでもホームページはみれるものが作れる」に近いかもしれません。どこが問題かは想像できるかと思います。

バイブコーディングをしてみた感想

正直、「素晴らしい」です。便利です。しかし、はじめと終わりは自分でやっておきたいという感想でした。これは、はじめと終わりは自分でやらないとだめという意味ではなく、個人的にはそこは自分でやっておきたいという※印をつけての個人の感想です。

特に今私は独立したこともあり、自分の枠組みの中でしか開発ができない状況(環境)になっていることもあり誰かと一緒に開発するという文脈が作れていないことも影響しているのかと思いますが、今回のような開発における役割分担とやり取りがあるというのは、とても意味があるものだと感じています。加えてやっぱりスピードが違うのは大きいですね。

実は心がけていたこと

最後にバイブコーディングをしながらも、自分自身が心がけていたことを記載しておきます。それは、「頼り過ぎないこと」です。任せるというよりも手伝ってもらう感じで対話を繰り返しました。ここはやはりこれまでの記事でも書いてきたことですが、AIと自分の関わり方を考えた上で気を付けておきたいことです。もし興味があれば、周辺記事もご覧ください。

バイブコーディングの様子についてはまた機会があればレポートしてみようと思います。

代表 稲本浩介

著者:稲本浩介

コミュニケーション設計所代表/情報アーキテクト
「わかりやすく伝えるにはどうしたらいいか?」を常に考える福岡の情報アーキテクト(IA)。前職では主にWebサイト制作にディレクターやエンジニアとして関わり、ホームセンターや老舗菓子メーカーのEC事業の構築および運用にゼロから携わる 。その活動は、ウェブサイトの枠に限定せず、動画やイベント実施などコミュニケーションという視点でのわかりやすさを追求。大学や社会人講座、企業における講演経験もあり多方面にて活動中。
▶︎ X(Twitter): @sevenina

FAQ

ときどきお尋ねいただくことをまとめました。

ECサイトの構築はできますか?
ご要望やご予算に応じて、モールへの出店、出品、自社ECの構築など最適なものをご提案いたします。ECサイトと言っても、商品構成や運用体制、顧客との関わり方などによって、構築方法や運用方法は大きく異なります。しっかりとした継続運用ができる環境を整えることができるよう一緒に考えましょう。
なお、弊社はmakeshopとパートナー契約を結んでおります。
商品の販促に関して相談することはできますか?
もちろんです。私たちはデジタルを活用した販促活動にこだわることなく、時にはアナログ(フィジカル)な販促活動もご提案します。様々な手法やツールを網羅的に把握することで最適解を導き出し、ご提案いたします。
ウェブサイトの解析はできますか?
主に、GoogleAnalytics(GA4)を活用し、解析を行います。サイトの特性に応じて解析期間などを設け、定期的にレポーティングも可能です。可能であれば一定期間のお取り組みの中で解析と改善を繰り返すPDCAサイクルを回すことができればと考えております。