AIで作ったホームページの注意点とは？実際のコード確認でわかった問題点

ChatGPTやClaudeなどの生成AIを使えば、専門的なコーディングの知識がなくても、ホームページを作れる時代になりました。
デザインをAIに読み込ませたり、「こんなホームページを作りたい」と伝えたりするだけで、HTMLやCSS、JavaScriptまで作成してくれます。

一方で、いざホームページが完成すると、

• AIで作ったコードって、セキュリティ的に大丈夫？
• 見た目はできたけど、このまま公開していいの？
• そもそも、作ったファイルをどうやって公開するの？

と、不安や疑問を感じる方も多いのではないでしょうか。

結論からいうと、AIで作ったホームページだから危険というわけではありません。
ただし、見た目が完成していても、安全性やSEO、公開後の運用まで問題ないとは限りません。

実際に弊社でも、Figmaでデザインを作成し、Claudeでコーディングしたホームページについて「セキュリティなどに問題がないか確認してほしい」というご相談をいただきました。

今回は、その際に実際のコードを確認して感じたことをもとに、AIコーディングの注意点や、ホームページを公開する前に知っておきたいポイントをご紹介します。

AIでホームページを作ってみた方も、これからAIを使って制作しようと考えている方も、ぜひ参考にしてみてください。

AIで作ったホームページは、そのまま公開しても大丈夫？

AIで生成したホームページは、適切に作られていれば公開することができます。

ただし、「ブラウザできれいに表示されていること」と「安心して公開・運用できること」は別の話です。

例えば、デザインは問題なく表示されていても、HTMLの構造が整理されていなかったり、不要なコードが大量に含まれていたりすることがあります。
また、お問い合わせフォームや外部サービスとの連携がある場合には、個人情報の取り扱いやセキュリティ面も確認しなければなりません。

AIコーディングで注意したいポイントは、大きく分けると次の5つです。

もちろん、これらはAIで作ったホームページに限った問題ではありません。
人間がコーディングした場合でも、実装方法によっては同じような問題が発生します。

大切なのは、AIが作ったかどうかではなく、完成したコードが適切に設計・実装されているかを確認することです。

実際にClaudeで作られたホームページを確認してみました

実際に、弊社にもこんなご相談がありました。
お客様はFigmaでホームページのデザインを作成し、そのデザインをもとに、Claudeを使ってコーディングを進められていました。

見た目としてはある程度完成していたものの、AIが生成したコードについて、セキュリティ上の問題や脆弱性がないか不安を感じていらっしゃいました。
そこで、公開や今後の運用を見据えて、一度エンジニアにHTMLなどの中身を確認してほしい、というご相談をいただいたのです。

実際にファイルを確認したところ、主に静的なHTMLのみで構成されており、セキュリティ面だけでなく、HTMLの設計やSEO、今後の管理方法など、制作会社として気になる点もいくつかありました。

今回の確認で特に感じたのは、AIはホームページを形にすることが得意でも、公開後の更新や運用まで考えた構造になっているとは限らないということです。

もちろん、AIへの指示内容や制作する方の知識によって、仕上がりは大きく変わります。
それでは、実際にどのような部分が気になったのか、具体的にご紹介します。

AIコーディングで実際に気になった5つの注意点

ここからは、実際にAIで制作されたホームページを確認するなかで、気になった5つのポイントをご紹介します。
なお、今回ご紹介する内容は、あくまで一つの事例です。AIが生成するコードは、使用するAIツールやプロンプト（指示内容）、制作時の要件、修正の進め方などによって異なります。

そのため、すべてのAI生成サイトに同じ問題があるわけではありませんが、AIコーディングでホームページを制作する際に、確認しておきたいポイントの一つとして参考にしていただければと思います。

1. h1タグが設定されていなかった

h1は、そのページが何について書かれているのかを示す見出しです。
今回のHTMLでは、h2やh3といった見出しタグは使用されていたものの、ページ全体の主題を表すh1タグがありませんでした。

例えば、ホームページのメインタイトルが見た目には大きく表示されていても、HTML上では単なるdivやpタグになっていることがあります。
h1がないからといって、直ちに検索順位が下がるわけではありません。
しかし、SEOやアクセシビリティ、ページの情報構造を考えるうえでは、適切な見出しを設定しておくことが大切です。

弊社であれば、デザイン上の見た目だけでなく、ページの内容に合わせてh1・h2・h3などの見出し構造も考慮して制作します。
見た目の完成度と、検索エンジンやユーザーに伝わりやすいHTML構造は別の話。

こうした部分は、AIコーディングで見落としやすいポイントの一つだと感じました。

2. HTMLの構造が十分に整理されていなかった

今回のコードにはheaderやsectionなどのタグが使われていましたが、mainやnavといった要素が不足していました。
これらは、ページの中でそれぞれの領域がどのような役割を持っているかを示すHTML要素です。

• header：ページやセクションのヘッダー
• nav：主要なナビゲーション
• main：ページの中心となるコンテンツ
• footer：ページやセクションのフッター

こうした意味を持つHTML要素を適切に使用することを、セマンティックHTMLと呼びます。
適切なHTML構造は、スクリーンリーダーなどの支援技術を利用する方にとっても重要です。

AIに「このデザインをHTMLにして」と依頼するだけでは、見た目を再現することが優先され、こうした構造まで十分に考慮されない場合があります。

もちろん、AIでも適切な指示をすれば改善できます。
だからこそ、AIに何を指示するべきかを判断するWeb制作の知識が重要になると感じたポイントの一つです。

3. SVGのコードが大量にHTMLへ埋め込まれていた

また、今回特に目立ったのがSVGの記述量でした。
SVGとは、ロゴやアイコンなどによく使用される画像形式の一つです。
今回のHTMLでは、多数のSVGが直接埋め込まれており、大量のpathタグによってソースコードが長くなっていました。

SVGをHTMLに直接記述すること自体は、決して間違いではありません。
CSSで色を変更したり、アニメーションを設定したりする場合には、むしろ便利なこともあります。

ただし、ロゴや共通アイコンなど、繰り返し使用するものまで大量に埋め込まれていると、修正や管理が大変になる場合があります。
例えば、ロゴを変更したいときに、複数のHTMLファイルを一つずつ修正しなければならない、といったケースです。

今回気になったのは、セキュリティというよりも、将来的な保守や修正のしやすさという点でした。

4. 画像がBase64形式で埋め込まれていた

もう一つ気になったのが、画像の扱い方です。
通常、ホームページでは画像をjpgやpng、WebPなどのファイルとして保存し、HTMLやCSSから読み込みます。
今回、一部の画像はBase64という形式でHTML内に直接埋め込まれていました。

Base64とは、画像などのデータを文字列として表現する方法で、扱い方には注意が必要です。
Base64形式には、以下のような特徴があります。

• Base64化によって元のバイナリデータより約33％データ量が増える
• HTMLファイル自体が大きくなりやすい
• 画像を独立したファイルとしてキャッシュしにくい
• 画像の差し替えや管理が煩雑になりやすい

通信時の圧縮などによって実際の転送量への影響は変わるため、必ず表示速度が遅くなるというわけではありません。
今回のようなケースでは、画像を適切なファイルとして書き出し、外部ファイルで管理する方が扱いやすいと感じました。

5. ブラウザのコンソールに警告が表示されていた

ブラウザの開発者ツールを確認すると、いくつかの警告が表示されていました。
ただし、確認できたものの多くは外部サービスに関連する警告であり、今回確認した範囲では、HTML自体に起因する重大なJavaScriptエラーや、直接セキュリティ上の問題を示すエラーとは判断できませんでした。

また、今回のホームページは、アニメーションや複雑な動作を伴う機能がほとんどない、比較的シンプルな構成でした。
そのため、JavaScriptによる不具合が発生する箇所も比較的限られていたと考えられます。
一方で、今後アニメーションやお問い合わせフォーム、外部サービスとの連携などを追加する場合には、確認すべき項目も増えていきます。

ブラウザのコンソールにエラーや警告が表示された場合は、その内容を確認し、原因やホームページへの影響を把握することが大切です。
外部サービスに起因する警告など、必ずしも修正が必要ではないものもありますが、表示や機能に影響するエラーについては適切な対応が必要です。

エラーや警告をそのまま放置するのではなく、内容に応じて修正の必要性や優先度を判断すること。 こうした確認も、ホームページを安心して公開・運用するための大切な工程です。

セキュリティだけじゃない！AIコーディングでありがちな問題

今回の事例以外にも、AIを活用したホームページ制作では、注意しておきたいポイントがあります。

スマートフォンでレイアウトが崩れてしまう

パソコンではきれいに表示されていても、スマートフォンやタブレットでは文字がはみ出したり、画像が不自然に切れたりすることがあります。
AIにレスポンシブ対応を依頼していても、すべての画面幅で適切に表示されるとは限りません。
実際の端末や複数の画面サイズで確認することが大切です。

AIに修正をお願いしたら、別の場所が崩れてしまった

「ここの余白だけ直して」とお願いしたはずが、別の部分のデザインまで変わってしまった。
AIコーディングを経験した方なら、心当たりがあるかもしれません。
修正を繰り返すうちに、似たようなCSSが増えたり、使われていないコードが残ったりすることもあります。

こうした状態が続くと、後から修正する際に、どのコードを変更すればいいのかわからなくなる場合があります。

お問い合わせフォームが正しく動作しない

お問い合わせフォームは、見た目だけでは判断できない機能の一つです。
入力画面が完成していても、実際にはメールが送信されなかったり、入力内容が適切に処理されていなかったりすることがあります。

また、フォームには次のような対策も必要です。

• 入力内容の検証
• 不正送信やスパムへの対策
• 個人情報の適切な取り扱い
• サーバー側での安全なデータ処理

特に、お問い合わせフォームを設置する場合には、公開前の動作確認が非常に重要です。

APIキーや認証情報が公開されてしまう

AIを使って外部サービスと連携する際、APIキーやパスワードなどの認証情報を、公開されるHTMLやJavaScriptに誤って記述してしまうことがあります。
本来サーバー側で管理するべき秘密情報が公開されると、第三者による不正利用につながるおそれがあります。

また、AIにコードの修正を依頼する際にも、パスワードや秘密鍵、顧客情報などを不用意に入力しないよう注意が必要です。

AIサービスにどのような情報を送信しているのか、利用するサービスの設定やデータの取り扱いについても確認しておきましょう。

外部ライブラリや素材の利用条件がわからない

AIが生成したコードには、外部のJavaScriptライブラリやフォント、画像などが含まれる場合があります。

利用しているライブラリのバージョンが古かったり、素材の利用条件が確認できていなかったりすると、公開後のトラブルにつながる可能性があります。

AIが提案したものをそのまま使用するのではなく、必要に応じてライセンスや依存関係を確認することも大切です。

AIでホームページを作ったけど、公開方法がわからない！そんなときは？

AIでホームページを作ってみたものの、完成したHTMLやCSSのファイルを前にして、「ここからどうやって公開するの？」と困ってしまう方もいらっしゃるのではないでしょうか。

ClaudeやChatGPTなどのAIを使えば、ホームページの見た目やコードを作ることはできます。
しかし、作成したファイルを自分のパソコンで表示できることと、インターネット上に公開することは別の話です。

ホームページを公開するには何が必要？

一般的なホームページの公開には、次のような準備が必要です。

• サーバーの準備：ホームページのファイルを設置する場所
• ドメインの取得・設定：ホームページのURLとなるアドレス
• ファイルのアップロード：HTML・CSS・画像などをサーバーへ配置する作業
• SSL（HTTPS）の設定：ブラウザとサーバー間の通信を暗号化するための設定
• 公開後の動作確認：表示崩れやリンク切れ、フォームなどの確認

一般的な企業ホームページでは、独自ドメインを取得し、レンタルサーバーなどの公開環境を用意したうえで、制作したファイルをサーバーにアップロードする方法がよく利用されています。
ただし、ファイルをアップロードすればすべて完了というわけではありません。HTTPSの設定や表示・動作確認に加え、公開後の更新や管理についても考えておく必要があります。

また、HTMLだけで構成されたホームページなのか、WordPressなどのCMSを利用するのかによっても、必要な作業は異なります。
SEO・AIOを意識したホームページ運用では、公開後もコンテンツを追加・改善し、検索ユーザーにとって役立つ情報を発信し続けられる環境づくりが大切です。

「公開作業だけお願いしたい」でも大丈夫です

「AIでホームページは作れたけど、サーバーやドメインのことはよくわからない」
「ファイルはあるけど、何をアップロードすればいいのかわからない」

そんな段階でも、お気軽にご相談ください。

株式会社リースエンタープライズでは、AIで作成されたホームページについても、ファイルの確認から公開方法のご相談、必要に応じた修正やWordPress化までサポートしています。
せっかくAIで作ったホームページ。公開するところで止まってしまうのは、もったいないことです。

どこまでできていて、何が必要なのか。まずは一緒に整理するところからお手伝いできればと思います。

既存のAI生成コードは、そのまま活かせる？

もちろん、活かせる場合もあります。
HTMLやCSSが整理されていて、WordPress化しやすい構造になっていれば、既存のコードをベースに制作を進めることも可能です。
一方で、コードが複雑になっていたり、同じ記述が大量に重複していたりする場合には、既存コードを修正し続けるよりも、デザインを活かして再構築した方が効率的なこともあります。

今回のケースでも、既存のAI生成コードを一つずつ修正しながらWordPress化するより、弊社側でAIも活用しながら再構築した方が、今後の運用も含めて効率的ではないかと感じました。

今あるものを活かすべきか、部分的に修正するべきか、再構築した方がよいか。

この判断こそ、Web制作会社がお手伝いできる部分だと考えています。

AIコーディングは便利！だからこそWeb制作の知識が活きる

ここまで注意点をご紹介してきましたが、私たちはAIコーディング自体を否定しているわけではありません。
むしろ、弊社でもAIを積極的に活用しています。
AIによって制作スピードが上がったり、これまで技術的なハードルが高かった方でもホームページを形にできたりすることは、大きなメリットです。

ただ、AIが出力したものをそのまま採用するのではなく、制作の目的に合っているか、SEOやアクセシビリティを考慮できているか、運用しやすい構造になっているかを判断することが大切です。
例えば、今回のようなHTML構造の整理や、画像の管理方法、WordPress化を見据えた設計などは、私たちがこれまでのWeb制作で培ってきた知識や経験を活かせる部分です。

AIを使うか、使わないかではなく、AIをどう活かして、より良いホームページを作るか。

これからのWeb制作では、その考え方がますます重要になっていくのではないでしょうか。

「AIでここまで作ったけど、最後だけ助けて」もお気軽にご相談ください

AIを使ってホームページを作ってみたものの、最後の仕上げや公開作業で困ってしまうこともあると思います。

「自分でここまで作ったのに、制作会社へ相談してもいいのかな？」

そんなふうに遠慮する必要はありません。
株式会社リースエンタープライズでは、ホームページ制作やWordPress構築などの経験を活かし、AIで制作されたホームページについてもご相談を承ります。

例えば、次のようなお悩みです。

• AIで作ったHTMLやCSSを一度確認してほしい
• セキュリティ面に問題がないか相談したい
• スマートフォンの表示崩れを修正したい
• SEOを考慮したHTML構造に整えたい
• AIで作ったデザインをWordPress化したい
• サーバーへのアップロードや公開作業を手伝ってほしい
• 今後も自分で更新できるホームページにしたい

「コードを少し見てほしい」という段階でも、「公開から運用までお願いしたい」という段階でも、まずは現在の状況をお聞かせください。
内容によっては、既存のコードを活かして対応できる場合もあれば、再構築をご提案した方がよい場合もあります。

無理にすべてを作り直すのではなく、目的やご予算、今後の運用方法に合わせて、一緒に考えていければと思います。

AIで作ったホームページの、その先へ。

完成まであと一歩のところでお困りの方も、安心してお気軽にご相談ください。

AIコーディング・ホームページ制作について相談する

AIコーディングについてよくある質問

Q. AIで作ったホームページを、そのまま公開しても大丈夫ですか？

AIで制作したこと自体が問題になるわけではありません。ただし、セキュリティや表示崩れ、SEO、動作確認など、公開前に確認しておきたい項目があります。
特にフォームや外部サービスとの連携がある場合は、慎重なチェックをおすすめします。

Q. ClaudeやChatGPTで作ったコードも確認してもらえますか？

はい。
AIで生成されたHTML、CSS、JavaScriptなどについても、内容に応じて確認・改善をご相談いただけます。
実際に確認できる範囲や必要な作業は、ファイル構成や実装内容によって異なります。

Q. AIで作ったホームページの公開方法がわかりません。相談できますか？

もちろんです。
HTMLファイルのアップロード方法や、サーバー・ドメインの設定など、公開に必要な作業についてもご相談いただけます。
サイトの構成に応じて、適切な公開方法をご案内します。

Q. AIで作ったサイトをWordPressにすることはできますか？

可能です。
ただし、既存コードをそのまま利用するよりも、デザインを活かしてWordPress向けに再構築した方が効率的な場合もあります。
まずは現在のファイルや今後の運用方法を確認し、適切な方法をご提案します。

Q. AIで作ったホームページはSEOに弱いのでしょうか？

AIで作ったこと自体がSEO上の不利になるわけではありません。重要なのは、適切なHTML構造、コンテンツの品質、表示速度、ユーザーの使いやすさなどです。
AI生成コードでも、こうした要素を考慮して改善することができます。

Q. AIコーディングで情報漏洩が起こることはありますか？

可能性はあります。
例えば、公開コードにAPIキーや認証情報を含めてしまったり、AIサービスに機密情報を不用意に入力したりするケースです。
公開前には秘密情報の取り扱いを確認し、必要に応じて専門家によるチェックを行うことが大切です。

Q. AIで作ったコードは全部作り直す必要がありますか？

必ずしも作り直す必要はありません。
コードの状態や今後の運用方法によっては、そのまま活用できる部分もあります。
修正するべきか、再構築するべきかを含めてご相談いただけます。

Q. 一部分の修正だけでも相談できますか？

もちろんです。
レイアウト崩れやHTMLの修正、公開前のチェックなど、部分的なご相談も承ります。
実際の対応範囲や費用は、コードの状態や作業内容を確認したうえでご案内します。