AIでホームページを作って起きたトラブル3連発と、非エンジニアの解決法

AIに任せればホームページも一瞬で完成する——そう思っていた時期が、私にもありました。結論から言うと、AIでサイトは作れますが、公開の前後で普通にトラブルは起きます。ただし、非エンジニアでもほとんどのケースは「エラー文や症状をコピーしてAIに貼る」だけで解決できました。この記事では、私が実際にぶつかった3つのトラブルと、原因が半分も分からなくても直せた方法を正直に共有します。

AIでサイトは作れるけど、公開前後でトラブルは普通に起きる

プログラミングを学んだことがない私が、AIツールだけを相棒にホームページを作ってみました。作っている最中は「思ったより進むな」という感触だったのですが、実際に世の中へ公開する段階になって、続けざまにトラブルが起きました。

ここで先に言っておきたいのは、AIでサイトを作ること自体はできるけれど、「一切トラブルなく完成する」わけではないということです。特に、自分のパソコンの中では正常に見えていたものが、公開したとたんに崩れる、というパターンが多かったです。

ただ、落ち込む必要はありませんでした。私が遭遇した3つのトラブルは、どれもエンジニアでない私が、原因を深く理解しないまま解決できたからです。この記事では、その具体的な中身と、実際にやった手順を順番に書いていきます。同じようにAIで副業・個人事業のサイトを作ろうとしている方の、心の準備になればうれしいです。

トラブル①：公開直後に全ページが404 Not Found（Vercel 404）

最初のトラブルは、いちばん心臓に悪いものでした。サイトを公開した直後、トップページも含めて全ページが「404 Not Found」になったのです。 404というのは、ざっくり言うと「そのページが見つかりません」という意味のエラー表示です。せっかく作ったサイトが、公開したとたんに全部消えたように見えるので、正直かなり焦りました。

原因は、ホスティング（サイトをインターネット上に置いてくれるサービス）側の設定が、私の作り方に合っていなかったことでした。具体的には、フレームワークの設定が旧来の「静的サイト向け」のままになっていたのです。ここは私も後から知った部分で、最初は何が悪いのか見当もつきませんでした。

そこでやったのは、とてもシンプルなことです。エラーの状況をそのままAIに伝えました。 すると、設定画面のどこを直せばいいか、順を追って教えてくれました。

• Framework Preset（フレームワークの種類を選ぶ設定）を正しいものに変更する
• 必要な設定ファイルを追加する

この2つを教えてもらった通りにやったら、404はきれいに解消しました。「Vercel 404」のような公開直後のトラブルは、多くの場合サイト本体ではなく設定側に原因があるのだと、このとき身をもって学びました。

トラブル②：スマホだけメニューが透けて文字と重なる

次のトラブルは、パソコンで見ている限りまったく気づけないものでした。パソコンでは正常に表示されているのに、スマホで開くとメニューの背景が透けてしまい、後ろにある文章と重なって読めなくなっていたのです。

これはトラブル①のような分かりやすいエラー表示が出るわけではなく、「なんとなく見た目が変」というタイプの不具合です。副業や個人事業のサイトだと、訪問者の多くがスマホで見る可能性が高いので、これは放置できないと思いました。

ここでも私は難しいことはしていません。AIに向かって、日本語でこう伝えただけです。

「スマホでメニューが透けてる。直して」

それだけで、修正は完了しました。背景がなぜ透けていたのか、内部で何をどう直したのかは、私はきちんと説明できません。でも、症状を素直な日本語で伝えるだけで直せたというのは、非エンジニアにとって本当にありがたい体験でした。

AIツールでのサイト制作全般については、[運営者紹介（/about）]も合わせて読んでもらえると、私の立ち位置（コード経験ゼロの当事者）が伝わると思います。

トラブル③：手元では動くのに公開版だけアニメーションが止まる

3つ目は、いちばん理由が分かりにくいトラブルでした。手元の環境（自分のパソコンで確認しているとき）ではアニメーションがちゃんと動くのに、公開版だけアニメーションが止まってしまうという現象です。

動く場所と動かない場所があるので、「自分の設定ミスなのか、それともサイトの問題なのか」の切り分けすらできませんでした。原因は、スタイル（見た目を決める部分）の内部的な名前の食い違いで、本番のビルド（公開用にサイトを組み立て直す処理）のときだけ発生するものでした。

正直に書くと、AIがしてくれた原因説明は半分も理解できませんでした。 「内部の名前がずれていて本番ビルドで噛み合わなくなる」というあたりまでは、なんとなく雰囲気で受け取ったものの、細かい仕組みはお手上げです。

それでも結果として、AIが原因を特定し、修正まで済ませてくれて解決しました。ここで感じたのは、理解できないこと自体は問題にならないということです。エンジニアなら原因を完全に把握して直すのでしょうが、私は「AIが特定して直してくれたなら、それでいい」と割り切ることにしました。AIでのサイト制作エラーは、こうやって理解を飛ばして前に進める場面が意外と多いです。

非エンジニアの結論：原因を理解しなくても「症状をAIに貼る」で進める

3つのトラブルを振り返って、私がたどり着いた結論はシンプルです。非エンジニアの最強の解決法は「エラー文・症状をコピーしてAIに貼る」こと。 そして、原因を理解する必要はなかった、ということです。

実際にやったことを整理すると、こうなります。

どのケースも、私がやったのは「起きていることをそのまま言葉やコピペで渡す」ことだけでした。難しいエラー文でも、意味が分からないまま貼って大丈夫でした。むしろ、変に自分で言い換えようとせず、表示された文字をそっくりそのまま渡すほうが正確に伝わる印象です。

もちろん、これで100%どんなトラブルも解決するとは言えませんし、私もまだ手探りの途中です。それでも、「AI任せの制作でもトラブルは起きるけれど、非エンジニアなりに対処できた」という実感は、これから始める人の安心材料になると思っています。

まとめ

AIでホームページは作れますが、公開の前後で404や表示崩れ、本番だけ動かないアニメーションといったトラブルは普通に起きました。私が実際にぶつかった3つのケースは、どれもプログラミング未経験のまま『エラー文・症状をコピーしてAIに貼る（伝える）』だけで解決できました。原因を完全に理解する必要はなく、表示された内容をそのまま渡すのがコツです。トラブルは失敗ではなく公開したから起きる普通のこと、と捉えると気が楽になります。