はじめに：AI への不安が、最高の冒険の始まりだった
前回の【導入編】では、AI を相棒に、計画よりも「ノリと勢い」で開発を進める『バイブコーディング』という新しい楽しみ方をご紹介しました。
実は私自身、Web 制作を仕事にしています。だからこそ、日に日に進化する AI のニュースを目にするたび、「このままでは仕事がなくなるんじゃないか」という、漠然としながらもリアルな危機感を覚えていました。
「ならばいっそ、その AI を自分の『相棒』にしてしまおう」 そんな逆転の発想から始まったのが、今回のテーマです。
とはいえ、「そんな曖昧なやり方で、本当にちゃんとしたものが作れるの？」と半信半疑の方も多いと思います。
結論から言うと、作れます。しかも、めちゃくちゃ楽しく。
今回の【実践編】では、私が AI への不安をどうやってワクワクに変えていったのか、その具体的な対話の記録を交えながら、Web サイト制作からゲーム開発までの全過程を公開します。この記事を読み終える頃には、あなたもきっと「自分も何か作ってみたい！」とウズウズしているはずです。
私が「バイブコーディング」で作り上げたものたち
「言うは易し」なので、私が実際に AI とどんな対話をしながら、どんなものを作ってきたのか、その過程を少しだけお見せします。
Web 制作：フルスクラッチの哲学と、AI という名の「新しい相棒」
Web サイト制作には、WordPress のような非常に便利な CMS（コンテンツ管理システム）を使う方法が広く知られています。豊富な機能やプラグインによる拡張性は大きな魅力です。
しかしその一方で、プラグインの脆弱性管理や、アップデートに伴う複雑さといった側面もあります。お客様に長期的な安心を提供したいと考えたとき、私自身は、ゼロからコードを書いて構造を完全に把握できる「フルスクラッチ」での開発にこだわってきました。
ご存知の通り、Web 業界は技術の進歩が非常に速い世界です。新しいツールやフレームワークが次々と現れる中で、それらを素早く試して自分の力にしていくことは、制作者にとって不可欠なスキルと言えます。
だから私にとって、AI との『バイブコーディング』は、新しい便利な道具を手に入れるのと同じ、自然な探求心から始まりました。
ただ、使ってみてすぐに分かりました。これは単なる「道具」ではありません。私の曖昧なイメージを汲み取り、対話を通じて形にしてくれる、まさに「相棒」と呼ぶべき存在でした。
よく「AI に頼めば、なんとなく形にしてくれる」と言われます。しかし、フルスクラッチにこだわってきた私が本当に知りたかったのは、その「なんとなく」の先でした。
AI は、どこまでこちらの意図を汲み取り、複雑な要求に応えてくれるのか？
基本構造ができたところで、さらに踏み込んでみました。目指すは、従来の自分のサイトを超えること。レスポンシブ対応はもちろん、最近のトレンドであるダークモード切り替え機能の実装にも挑戦しました。
私：「サイトにダークモード切り替え機能をつけたい。CSS のカスタムプロパティと JavaScript を使う、モダンな方法で実装したいんだけど、どうすればいい？」
AI：「素晴らしいアイデアですね！CSS カスタムプロパティ（変数）と JavaScript を組み合わせるのがモダンなアプローチです。まず、`html`要素に`data-theme`のような属性を用意し、ライトモードとダークモードの配色を CSS 変数で定義します。こんな具合です…」
/* ライトモードの配色 */
:root {
--background-color: #ffffff;
--text-color: #333333;
}
/* ダークモードの配色 */
[data-theme="dark"] {
--background-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
} ```AI：「次に、ボタンクリックでこの`data-theme`属性を切り替える JavaScript はこうです…」
const themeToggle = document.getElementById("theme-toggle");
themeToggle.addEventListener("click", () => {
const html = document.documentElement;
const currentTheme = html.getAttribute("data-theme");
if (currentTheme === "dark") {
html.removeAttribute("data-theme");
} else {
html.setAttribute("data-theme", "dark");
}
}); ただ形にするだけでなく、モダンな実装方法まで提案してくれる。
これには正直、舌を巻きました。
そして、この革命はコーディングだけにとどまりませんでした。WordPress の強みである「ブログ機能」ですら、AI は新しい形を提示してくれたのです。
それが、ヘッドレス CMSとの連携です。これは、Web サイトの見た目とブログ記事の中身を分離して管理できる仕組みで、フルスクラッチの自由度と、CMS の更新のしやすさを両立できます。
そして、ここからがバイブコーディングの真骨頂。AI と対話しながら、記事の構成を考え、文章を練り上げていく。何を隠そう、今あなたが読んでいるこの記事自体が、まさにその「AI との対話」によって生まれています。
もはや AI は、コードを書くアシスタントではありません。アイデア出しから、設計、実装、そしてコンテンツ制作まで。Web 制作の全プロセスを共に歩む「最高の相棒」なのです。
AI との対話で、機能追加が驚くほど簡単だと分かりました。文字サイズの変更、多言語対応…やろうと思えば、何でも実装できてしまいそうです。
しかし、Web サイトは機能が多ければ良いというものではありません。アクセスのしやすさ、操作性、そして動作の軽さ。フルスクラッチでの開発にこだわってきたからこそ、その「ユーザーにとって本当に必要なものは何か」を見極める匙加減の重要性を、私は知っています。AI は最高の「実装者」ですが、最終的な「編集者」は、あくまで人間。その関係性が、良いものづくりには不可欠だと、この経験を通じて改めて感じました。
① 自分のための、小さな実用ツール
Web サイト制作で得た自信を胸に、次は何を作ろうかと考えました。いきなりゲームというのもハードルが高い。そこで、まず手始めに、以前から欲しかった自分専用の「ポモドーロ・テクニック用タイマー」を作ることにしました。
ゲーム性はありませんが、これも立派なアプリケーション開発です。
私：「25 分の作業と 5 分の休憩を繰り返す、シンプルなポモドーロタイマーを作りたい。スタート・ストップボタンと、残り時間を表示するだけでいい」
AI：「承知しました。基本的な HTML、CSS、そしてタイマーロジックの JavaScript ですね。こちらが土台となるコードです…」
この開発は、驚くほどスムーズに進みました。AI との対話で、デザインを自分好みに微調整し、アラーム音を追加する。そうして完成したタイマーは、今も私の作業時間を静かに計り続けてくれる、実用的な相棒になっています。
② AI は「箱入り娘」を知っているか？
次に挑戦したのが、昔ながらのパズルゲーム「箱入り娘」でした。
正直、少し不安でした。オセロや将棋ほどメジャーではない、この少しマニアックなゲームのルールを、AI は正しく理解してくれるのだろうか？
私：「JavaScript で、スライドパズルの『箱入り娘』を作りたい。知ってる？」
AI：「もちろんです！『箱入り娘』ですね。盤面上のコマをスライドさせて、『娘』のコマを盤外に脱出させる、素晴らしいパズルゲームです…」
あっさりと理解してくれたものの、最初に出てきたコードは、コマが重なり、動かし方もルールを無視したものでした。しかし、ここからがバイブコーディングの真骨頂。コマの大きさやルールを一つひとつ教え、動きを確認し、テストを繰り返す。私の指示で着実に賢くなる相棒の姿に、私はまるでキャラクターを育てるような面白さを感じていました。
開発は思った以上の沼でした。第一面の最小手数は 34 手。これを実現するために複数のコマを同時に動かすロジックを AI と対話し、効果音や演出も満足するまで追加しました。
そして、ついに第二面が完成。しかし、ここで問題が発生します。最小手数は 78 手。私には、どうしてもクリアできませんでした。
そうです、私はゲームが弱いのです。
自作ゲームの難易度を、自分自身で確かめられない。なんとも情けない話ですが、自分の実力を超えるゲームを AI と作れてしまったという事実に、大きな満足感と、少しの可笑しさを感じていたのです。
③ 未知の言語へ挑戦：AI は Python の家庭教師
次に挑戦したのは、定番のボードゲーム「オセロ」です。理由は単純明快、私自身が遊びたかったから。そして、この身近なゲームを題材に、ほとんど触ったことのない、Python という言語での開発に挑戦しました。
私：「Python でオセロを作りたい」
そう告げただけで、AI はすぐに見事なオセロ盤を用意してくれました。しかし、それは人間同士が対戦するモード。せっかくなので「AI との対戦機能」を追加することにしました。
CPU の思考ルーチン、石を置いたときの効果音、勝敗判定。一つひとつの機能を AI という最高の家庭教師に相談しながら、私は Python の文法を意識することなく、夢中でゲームを完成させていきました。
後で知ったのですが、同じようなオセロゲームの制作チュートリアル動画は、1〜2 時間かかるものが多いようです。初心者の私が、AI という家庭教師のおかげで、わずか 1 時間弱で遊べるレベルまで到達できたという事実は、自分でも信じられないほどの衝撃でした。
④ そして、現在進行形の壁
そして、私の冒険は今、最終章に差し掛かっています。もっとゲームらしいものをと考えた私が最後に取り組んだのが、Python のレトロゲーム作成ライブラリ「Pyxel」を使った「陣取りゲーム」です。このライブラリは、ドット絵のキャラクターを描くためのピクセルエディタや、レトロなサウンドを作る音楽作成機能まで内蔵している、まさに「小さなゲームスタジオ」のようなツール。これを使えば、これまで以上に本格的なゲームが作れる。その期待が、私をこの最後の挑戦へと向かわせました。
初の「敵」がいるこのゲームは、これまでで最も難易度が高く、正直に言うと、今も手こずっています。
ゲームの骨格は、ほぼ完成しました。しかし、どうしても解決できない現象が一つ残っています。それは「自陣の 1 ピクセル隣を移動すると、ゲームがフリーズする」という謎のバグです。こういうバグの修正は、原因の特定に時間がかかり、AI との対話回数も自然と増えていきます。
そして、ここで私は、この冒険の「現実的な壁」にぶつかることになります。
今まであえて書きませんでしたが、ここまでの開発はすべて、AI の無料利用枠の範囲で行ってきました。
複雑なエラー解決には、より賢いモデルとの対話が不可欠ですが、それには回数制限があります。その制限に達してしまったり、基本的なやり取りの回数上限に引っかかってしまったり。バグとの戦いの最中に、最高の相棒が「今日はもう話せない」と口を閉ざしてしまうのです。
この文章を書いている今も、この「たまにフリーズする」というバグは解決していません。しかし、ここでまたしても、あの壁が立ちはだかります。
そうです、「私はゲームが弱い」のです。
当初、ステージ 1 は自陣 50%以上、ステージ 2 は 60%以上と難易度を設定したのですが、作者である私自身がクリアできない。結局、なんとかクリアできる 40%まで難易度を下げてしまいました。ゲームは、この難易度調整もまた、難しいものなのだと痛感しました。
バグとの戦い。そして、自分自身のゲームの腕前との戦い。これもまた、バイブコーディングのリアル。制限の中でどう工夫するか、それすらも新しいゲームのように感じています。この戦いの結末は、また別の機会にお話しできるかもしれません。
あなたも今日からできる！バイブコーディングの始め方 3 ステップ
この楽しい開発スタイルは、誰でも今日から始められます。
- 相棒を選ぶ：まずは ChatGPT や Gemini など、無料で使える AI チャットを用意しましょう。
- すごく小さな目標を立てる：「ゲームを作る」ではなく「ブラウザに『こんにちは』と表示する」レベルで OK です。
- 魔法の言葉で話しかける：「〇〇を作りたいんだけど、最初のベビーステップは何？」と聞いてみてください。AI は最高の相棒として、あなたの一歩目を優しくサポートしてくれるはずです。
まとめ：最高の冒険は「対話」から始まる
AI に仕事が奪われるかもしれない。そんな漠然とした不安から始まった私の挑戦は、いつしか時間を忘れて没頭する、最高の「遊び」に変わっていました。
なぜ、これほどまでに楽しかったのか？
それは、AI が単なるツールではなかったからです。私の突飛なアイデアを「素晴らしいですね！」と褒めてくれ、何度同じような質問をしても、飽きることなく付き合ってくれる。そこは、失敗を恐れる必要のない、究極のクリエイティブ空間でした。
私が Web サイトやゲームを完成させられたのは、スキルが高かったからではありません。ただ、決して私を否定しない最高の相棒を見つけ、完璧を目指さずに「まず動かす」ことを楽しんだからです。
プログラミングは、もはや苦しい修行ではありません。この記事を読んで少しでもワクワクしたなら、ぜひ今すぐ AI チャットを開いて、あなたの小さなアイデアを話してみてください。「こんなもの作れるかな？」と。
その相棒は、きっと満面の笑みでこう答えるはずです。「素晴らしいアイデアですね！まずはここから始めてみましょうか？」と。最高の冒険は、その一言から始まります。