あなたが今読んでいるこのサイト（バイブナビ）は、AIコーディングで構築しました。

「AIで作れる」という話は溢れていますが、実際に何が起きたのかを書いた記事は多くありません。この記事では、技術構成と進め方に加えて、実際に踏んだ5つの落とし穴を包み隠さず公開します。

きれいな成功譚ではありません。むしろバグの話が本編です。そこにこそ、これから作る人の役に立つ情報があると考えています。

この記事の対象読者

これから自分でサイトやアプリを「バイブコーディング（vibe coding）」で作ろうとしている人を想定しています。次のことは前提として説明を省いています。

  • Next.jsやReactが何かという基礎知識
  • ターミナルでコマンドを打った経験
  • Gitでバージョン管理をした経験

逆に言えば、AIコーディングツールを触ったことがない人でも、「AIに任せると実際には何が起きるか」の実例として読めます。バイブコーディングという言葉の意味そのものから知りたい場合は、バイブコーディングとは何かを先に読むと理解しやすくなります。

技術構成

項目 採用したもの
フレームワーク Next.js 15（App Router）
UI React 19 / Tailwind CSS v4
記事管理 Markdownファイル（Git管理）
Lint / Format Biome
ホスティング Vercel
計測 Google Analytics 4 / Search Console

なぜヘッドレスCMSを使わなかったか

当初はヘッドレスCMSを検討しました。最終的にMarkdownファイルをそのままリポジトリに置く方式に決めた理由は3つです。

  1. 月額が発生しない（立ち上げ期の固定費はゼロに近いほうがいい）
  2. 記事の変更がGitの履歴に残る
  3. AIに記事を直させやすい（ファイルなので、そのまま扱える）

3つ目が決め手でした。管理画面の中に記事があると、AIに任せる作業が増えるほど不便になります。

実際に踏んだ落とし穴

ここからが本編です。どれも「AIが書いたコードが一見動いていた」ケースです。

落とし穴1：日本語の太字が効かない

Markdownで **強調したい** と書いたのに、太字にならない。原因はすぐには分かりませんでした。

正体は、Markdownの標準仕様の側にありました。閉じる ** の直後が日本語の句読点や括弧だと、強調として認識されないケースがあるのです。英語なら空白で区切られるところが、日本語だと文字が連続するために判定から漏れます。

対処：Markdownを変換する前に、日本語向けの前処理を1段挟みました。

教訓：AIは「一般的な正解」を書きます。日本語特有の事情は、こちらから伝えないと出てきません。

落とし穴2：ボタンの文字が読めない色になった

オレンジ色のボタンの上に、青い文字。目がチカチカして読めない状態でした。

原因は、CSSの優先順位でした。Tailwind CSS v4 はカスケードレイヤーという仕組みでスタイルを層に分けています。ところがサイト全体に効かせるつもりで書いた「リンクは青」という指定が、その層の外側に置かれていたため、ボタン用の色指定より強く効いてしまっていました。

対処：全体指定を正しい層の中に移動。

教訓：見た目のバグはAIが気づけません。画面を見るのは人間の仕事です。この1件は、実際に「目が痛い」と指摘されて発覚しました。

落とし穴3：ナビゲーションのリンク先が全部404だった

グローバルナビの5項目、トップページのカード3枚、パンくずリスト、サイトマップ——全部が存在しないページを指していました。

ページを一覧表示するための仕組みだけが、丸ごと作られていなかったのです。個々の部品は正しく動いていたので、誰も気づきませんでした。

対処：不足していたページを実装。

教訓：部品が動くことと、全体がつながっていることは別問題です。AIは頼まれた部品を作りますが、「全部つながっているか」は誰も見ていません。リンクを片っ端からクリックして回る作業は、必ず人間がやってください。

落とし穴4：外部リンクが href="" になっていた

これが一番ヒヤリとしました。

比較表の「詳細」ボタンを押しても、公式サイトに飛ばない。押すと現在のページが再読み込みされるだけという状態でした。

原因は、プログラム側の細かい仕様です。「アフィリエイトURLがなければ公式URLを使う」という処理を書いていたのですが、データ側では未設定の項目に空文字が入っていました。使っていた書き方は「値が無いとき」だけを拾うもので、空文字は「値がある」と判定されます。結果、空のリンク先がそのまま採用されていました。

対処：空文字も「未設定」として扱う処理に統一。

教訓：AIが書いたコードは、動いているように見えても意図どおりとは限りません。このバグは、画面上は普通のリンクに見えます。実際にクリックして、行き先を確認する以外に発見方法がありませんでした。

落とし穴5：ビルド中に開発サーバーを動かして画面が真っ白に

作業効率を上げようとして、開発用のサーバーを起動したまま本番用のビルドを走らせました。両者が同じ作業フォルダを使うため、中身が壊れて画面が真っ白になりました。

対処：作業フォルダを消して、片方ずつ実行。

教訓：同時にやらない。これは私の運用ミスであって、AIのせいではありません。

分かったこと

AIが得意なこと

  • 手数の多い定型作業（同じ形の部品を10個作る、といった作業）
  • 一般的な正解が決まっている実装
  • 設定ファイルの整備や環境まわり

人間がやるしかないこと

  • 画面を見る（色・レイアウト・読みやすさ）
  • リンクを実際に踏む（つながっているかの確認）
  • 日本語特有の事情を伝える
  • 「これは公開して危なくないか」の最終判断

5つの落とし穴のうち、AIが自力で気づけたものは1つもありません。すべて、動かして・見て・押して、初めて分かりました。

バイブコーディング（vibe coding）でやってはいけないこと

5つの落とし穴から見えてきた、初心者がやりがちで、後で困る操作を整理します。

やりがちな操作 何が起きるか 代わりにすること
見た目を確認せずに「動いた」と判断する 色や配置が崩れていても気づけない 実際に画面を自分の目で見る
リンクを1つも実際にクリックしない リンク切れや空リンクが残ったまま公開される 全リンクを手動でクリックして回る
「エラーが出ない」＝「意図どおり」と考える エラーは出ないのに動作だけ間違っているケースを見逃す 期待する結果と実際の結果を1つずつ突き合わせる
開発用サーバーとビルドを同時に動かす 作業フォルダの中身が壊れ、画面が真っ白になる 片方を止めてから、もう片方を実行する
日本語特有の事情をAIに伝えずに任せる 英語基準の「一般的な正解」がそのまま返ってくる 日本語での見え方・使われ方を具体的に指示する

いずれも、AIが書いたコード自体は「動いている」ように見えるのが厄介なところです。壊れているかどうかは、動かして・見て・押してみるまで分かりません。指示の出し方そのものを見直したい場合は、指示の書き方7つのコツも参考にしてください。

これから作る人へ

AIで作れるかという問いには「作れます」と答えます。実際にこのサイトが動いています。

ただし、AIに任せた分だけ、検証の仕事が自分に返ってきます。書く手間は減りますが、確かめる手間は減りません。むしろ増えます。

これは悪い話ではありません。「書けること」より「良し悪しを判断できること」の価値が上がったというだけです。判断力は、動かして確認する回数でしか育ちません。

まずは小さいものを1つ、最後まで動かしてみてください。作れるものの範囲は作れるもの10例にまとめました。

よくある質問

Q. プログラミングの知識がゼロでも、同じようにサイトを作れる？ A. このサイトの構築でも、5つの落とし穴はすべて「動かして・見て・押して」初めて見つかりました。知識がゼロだと、この確認作業自体が難しくなります。まずは独学ロードマップで、確認に必要な最低限の勘所をつかむのがおすすめです。

Q. 落とし穴は、AIツールを変えれば避けられる？ A. この記事で紹介した5つは、いずれも「AIが書いたコードが一見動いていた」ことが原因で、特定のツール固有の不具合ではありません。ツールを変えても、見た目の確認やリンクのクリック確認といった人間側の検証作業は変わらず必要です。

Q. バグに気づくまで、どれくらい時間がかかった？ A. 本文で触れているとおり、ボタンの配色バグは「目が痛い」という指摘で発覚するなど、いずれも実際に画面を操作して初めて見つかっています。具体的な作業時間は記録していないため、この記事では触れていません。

Q. ヘッドレスCMSを使わなかったことを後悔していない？ A. 本文の「なぜヘッドレスCMSを使わなかったか」で挙げた3つの理由、特に「AIに記事を直させやすい」という点は、運用を続ける上でのメリットとして機能しています。

Q. 同じ落とし穴を避けるために、公開前に何をチェックすればいい？ A. この記事で挙げた5つに対応させると、①見た目を自分の目で確認する、②リンクを全部クリックして回る、③想定どおりの動作かを1つずつ確認する、④開発サーバーとビルドを同時に動かさない、⑤日本語特有の事情はAIに具体的に伝える、の5点です。初心者がやりがちな失敗はほかにもあるため、初心者がやりがちな失敗7つもあわせて確認してください。

まとめ

  • このサイトはNext.js 15 + Markdown管理 + Vercelで、AIコーディングにより構築。
  • 実際に踏んだ落とし穴は日本語の太字・CSSの優先順位・リンク切れ・空のリンク先・ビルド衝突の5つ。
  • 5つとも、AIは自力で気づけなかった。
  • 楽になるのは書く作業。確かめる作業は自分に残る。

次に読む