こんにちは！
ジェイライン代表のトータル山本です！
今回は、ここ数日ずっとハマっていたことについて書いてみたいと思います。
それが、
バイブコーディング。
最近よく聞く言葉ですよね。
ざっくり言えば、自分でコードを全部書くのではなく、
「こういうものを作って」
「ここを直して」
「この機能を追加して」
とAIに話しかけながら、プログラムを作っていく方法です。
で、今回ですね。
コードが書けない私が、ChatGPTとCodexを使って、実際に3日ほどバイブコーディングをやってみました。
その結果、
WebアプリとWordPressプラグインを作るところまでいけました。
自分でもちょっと驚いています（笑）。
今回は、
- そもそも私はどのくらいコードが書けないのか
- 実際に何を作ったのか
- ChatGPTとCodexをどう使ったのか
- 3日間やってみて大変だったこと
- 「AIがコードを書ける時代」に何が大事になるのか
このあたりを、完全に非エンジニア側の目線で書いてみます。
まず最初に。私はプログラマーではありません
私はWeb業界にはもう30年近くいます。
ただし、
プログラマーではありません。
ここ大事です。
HTMLは何となく分かります。
昔はホームページビルダーのようなソフトも使っていました。
その後、CMSを使うようになって、今ではWordPressが中心です。
でも、
PHPを書けと言われても無理。
JavaScriptを書けと言われても無理。
CSSも、見れば何となくは分かるけれど、自分でゼロから書けと言われるとかなりつらい。
そんなレベルです。
いわゆる、
ノーコード・ローコード寄りで30年Webの仕事をしてきた人間
です。
ですので今回の話は、
「プログラマーがAIを使ったら便利だった」
という話ではありません。
むしろ、
「コードを書けない人間が、AIを使ってどこまでいけるのか？」
という話です。
バイブコーディングって何？
これも私なりの理解ですが、
バイブコーディングとは、
AIと会話しながらソフトウェアを作っていく方法
だと思っています。
昔なら、
仕様書を書く。
プログラマーに説明する。
見積もりを取る。
何週間か待つ。
できたものを確認する。
修正を依頼する。
という流れだったと思います。
それが今は、
「こんなアプリを作りたい」
とAIに相談する。
↓
AIが設計案やプロンプトを作る。
↓
Codexに作らせる。
↓
実際に動かしてみる。
↓
「ここ使いにくい」
「このボタン大きくして」
「ここでエラーが出た」
とまたAIに伝える。
↓
修正する。
この繰り返しです。
要するに、コードを書く代わりに、
「何を作りたいのか」を言葉で伝える。
これが中心になります。
今回作ったのは「LP制作支援ツール」
今回、私が作ったものは大きく2つあります。
1つ目がWebアプリ。
2つ目がWordPressのプラグインです。
どちらも目的は同じで、
ランディングページ制作を効率化するための仕組み
です。
私は長年、LPを作ってきました。
その中で、
「最初に問題提起をした方がいい」
「その次に解決策を出した方がいい」
「この位置でCTAを入れる」
「料金表はここ」
「実績はこの辺」
といった、自分なりの型があります。
もちろん業種によって変わりますが、反応が取りやすい構成というのはある程度あります。
その経験をアプリに落とし込もうと思ったんです。
業種・サービス・ターゲットを入れるとLP構成を作る
今回作ったWebアプリでは、
- 業種
- サービス内容
- ターゲット
- 訴求したい内容
- 市場や競合の情報
などを入力して、
そこからLPの構成を組み立てるようにしました。
さらに最終的には、
WordPressのGutenberg、つまりブロックエディターで使える形
にしたかった。
ここが私にとってかなり重要でした。
なぜなら、全部HTMLで作ってしまうと、後から編集するのが面倒だからです。
デザインは良くても、後から触れないのは困る
最近のAIツールは、本当にデザインがきれいです。
私も以前、AIにLPを作ってもらったことがあります。
見た目だけなら、
「おお、すごいじゃん」
というものができます。
ただし。
CSSが大量に入っていたり。
HTMLを直接修正しなければいけなかったり。
コードが分からない私からすると、
後で直すのが怖い。
これが結構大きな問題なんですよね。
文章を1行変えたい。
料金を変えたい。
写真を差し替えたい。
そんな軽微な修正なのに、毎回コードを触る。
これは嫌なんです。
私は普段、WordPressのブロックエディターに慣れています。
文章をクリックして直す。
画像をクリックして差し替える。
ブロックを移動する。
この感覚を残したかった。
そこで、
LPらしいデザインは保ちつつ、後からGutenbergで普通に編集できる仕組み
にしようと思いました。
そこでWordPressプラグインを作ってみた
Webアプリだけでは、WordPressに貼り付けた時に普通のブログっぽい見た目になってしまいます。
そこで、
専用のWordPressプラグイン
も作ることにしました。
流れとしては、
- WebアプリでLPを設計する
- WordPress用のブロックを書き出す
- WordPressへ貼り付ける
- 専用プラグインでLPらしいデザインにする
- その後は通常のブロックエディターとして編集する
という感じです。
大きな見出し。
カード。
CTA。
料金表。
こうしたLPらしいパーツを使いながら、後から自分でも触れる。
これが今回一番作りたかったものです。
そして私はコードを書いていません
ここが一番面白かったところです。
基本的に、
私はコードを書いていません。
「ここをこうしたい」
「ボタンをもう少し大きくしたい」
「この機能を追加したい」
「エラーが出た」
「これだと使いづらい」
ということを伝えているだけです。
もちろん最終的な判断は私がします。
「これは違う」
「この構成じゃ売れない」
「もっとここを強くした方がいい」
そういう話はします。
でも、コードそのものはAI側が書いています。
これまでなら完全に専門外だったことを、自分で試せるようになった。
これは本当に大きいなと思いました。
ChatGPTで相談して、Codexに作らせる
今回の流れはかなり単純です。
まずChatGPTで、
「こういうものを作りたい」
と相談します。
そこで仕様を整理してもらう。
Codexに渡すための指示文も作ってもらう。
それをCodex側へ持っていく。
Codexが実際にファイルを作ったり、修正したりする。
できたものを確認する。
またChatGPTに戻って、
「これどう思う？」
「ここ直した方がいいよね？」
と相談する。
またCodexへ修正を依頼する。
この往復です。
私はChatGPTのことを最近「ジン」と呼んでいるんですが（笑）、
ジンと相談しながらCodexに手を動かしてもらう。
そんな感じです。
「5分でアプリ完成！」ではありません
ここは強調しておきたいです。
AIを使えば、
「こういうアプリ作って」
と言ったら5分後に完成！
みたいな世界ではありませんでした。
少なくとも私の場合は。
今回も、だいたい3日くらい触っています。
もちろん3日間ずっと画面に張り付いていたわけではありません。
動画編集をしたり、別の仕事をしたりしながら、合間にやっています。
ただ、
作る。
試す。
直す。
また試す。
という工程は普通にあります。
一発で完成なんてしません。
最初にできたものを見た時なんて、
「なんじゃこりゃ」
という状態でした（笑）。
そこから少しずつ修正していったわけです。
AIだからといって「考えなくていい」わけではない
ここも重要です。
AIがコードを書いてくれる。
だから、
「何も考えなくても誰でもすごいものが作れる」
という話ではありません。
むしろ逆かもしれません。
今回のLP制作ツールも、
そもそも私の中に、
「反応の取れるLPはこういう構成にする」
という経験があったから作れました。
もし何も知らずに、
「売れるLPを作るアプリを作って」
と言っただけなら、たぶん私が欲しかったものにはなりません。
つまり、
AIが「どう作るか」を助けてくれるようになった分、「何を作るか」がさらに重要になった。
私は今回、そこを強く感じました。
プログラミング技術のハードルは確実に下がった
昔は、
HTMLを書ける。
CSSを書ける。
PHPを書ける。
JavaScriptを書ける。
それ自体が大きなスキルでした。
もちろん今後も、高度な開発では専門家が必要だと思います。
ただ、小さなWebアプリやWordPressのちょっとした機能であれば、
非エンジニアでもAIを使ってかなりのところまで作れる。
これは確実に起きている変化だと思います。
私自身、今までなら、
「それはプログラマーに頼まないと無理だな」
で終わっていたものを、
「ちょっと自分で作ってみるか」
と思えるようになりました。
この差はものすごく大きいです。
これから制作会社に必要なのは「作る技術」だけじゃない
これはWeb制作会社側にも大きな変化だと思っています。
単純に、
「ホームページが作れます」
だけでは、どんどん弱くなるかもしれません。
だってAIがかなり作れるようになってきていますからね。
そうなると価値が出るのは、
何を作れば売上につながるのか。
どんな導線にすれば問い合わせが増えるのか。
どんなコンテンツを作ればいいのか。
SNSや広告とどうつなげるのか。
こういった設計部分だと思います。
これはまさに、ジェイラインが長年やってきたコンテンツマーケティングともつながります。
作るだけではなく、
何のために作るのか。
そこがますます重要になるんじゃないでしょうか。
コードが書けないことが、逆に強みになるかもしれない
今回やってみて、ちょっと面白いことも感じました。
私はコードが書けません。
でも、だからこそ、
「コードが書けない人でも使えるものにしたい」
という視点になります。
後から簡単に編集できるようにしたい。
なるべく管理画面だけで完結したい。
CSSを触らなくても済むようにしたい。
専門用語を減らしたい。
これはプログラマーとは少し違う視点かもしれません。
自分が分からないからこそ、
「分からない人が使えるもの」
を考えられる。
これは案外、悪くないなと思っています。
まだ始まったばかり。でも、かなり面白い
今回、3日間ほどバイブコーディングをやってみて、
一番感じたのは、
「これは面白い」
ということです。
もちろん、まだ試作品の段階です。
エラーも出ます。
直したいところもあります。
もっと使いやすくしたい。
もっとデザインも改善したい。
でも、
今までなら自分では絶対に作れなかったものを、自分で形にできた。
これは私にとってかなり大きな変化です。
これから価値が高くなるのは「何を作るかを考えられる人」かもしれない
AIがコードを書いてくれる。
画像も作ってくれる。
文章も書いてくれる。
動画まで作れるようになってきた。
そうなると、
人間に残る仕事は何なのか。
今回やってみて、私は一つ、
「何を作るのかを決めること」
だと思いました。
何のために作るのか。
誰が使うのか。
どうなれば便利なのか。
どこに価値があるのか。
どうすれば売上につながるのか。
この辺りは、やはり経験や現場感覚が必要です。
AIが何でも作ってくれる時代だからこそ、
設計する人の価値
はむしろ上がるのかもしれません。
まとめ｜コードが書けなくても「作る側」に入れる時代になった
今回、ChatGPTとCodexを使って、
コードが書けない私が、
WebアプリとWordPressプラグインを作ってみました。
一発で完成する魔法ではありません。
時間もかかります。
修正も必要です。
失敗もします。
それでも、
今までなら「自分には無理」と諦めていたものを、自分で試作できる。
これは本当に大きな変化です。
そしてこれからは、
「コードが書けるかどうか」
だけではなく、
「何を作るのか」
「何のために作るのか」
「誰に使ってもらうのか」
を考えられる人の価値が、どんどん高くなるんじゃないかと思っています。
私自身まだ始めたばかりですので、これからもいろいろ試してみます。
うまくいったこと。
失敗したこと。
「これは使えるぞ」と思ったこと。
また現場ラジオやブログで紹介していきたいと思います。
今回の「現場ラジオ」は動画でもご覧いただけます
今回の記事の内容は、YouTubeの「現場ラジオ」でもお話ししています。
ChatGPT Atlas×Codexで何ができる？コードが書けない私が3日間バイブコーディングしてみた【現場ラジオ】
【ここにYouTube動画を埋め込み】
合同会社ジェイライン
トータル山本
＼ 最新情報をチェック ／
