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

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

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

技術構成

項目 採用したもの
フレームワーク 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つもありません。すべて、動かして・見て・押して、初めて分かりました。

これから作る人へ

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

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

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

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

まとめ

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

次に読む