INDEX目次を開く ＋

「AIにお願いしたら、あっという間にホームページができた」——2026年のいま、専門知識がなくてもAIでWebサイトを作れる時代になりました。

でも、いざ作ってみると次の壁にぶつかります。「作ったサイトを、どうやってインターネットに公開するの？」

本記事では、AIで作ったHTMLサイトをエックスサーバーへアップロードして公開する方法を解説します。あわせて、公開前に確認したいAPIキーなどのセキュリティ上の注意点も取り上げます。

最初に確認：そのまま公開できるファイルか

AIで作ったサイトは、すべて同じ方法で公開できるわけではありません。まず、受け取ったファイルを確認してください。

受け取ったもの公開方法の目安
index.html、CSS、画像が入っているこの記事の方法でエックスサーバーへアップロードできる
index.htmlがなく、開発用のファイルだけが入っているAIサービス側の公開機能を使うか、公開用ファイルを書き出す作業が必要
ログイン、データベース、外部APIを使う機能があるファイルのアップロード以外に、サーバー側の仕組みや設定が必要

この記事の方法が特に向いているのは、会社・店舗・ポートフォリオ・ランディングページなど、完成したHTMLファイルを長く公開したい場合です。公開先がまだ決まっていない場合は、先にAIで作ったサイトの無料・有料ホスティング比較をご覧ください。

HTMLサイトならファイルを置いて公開できる

まず押さえておきたいのが、ブラウザに表示されるページは最終的にHTML、CSS、JavaScriptで構成されるということです。

ChatGPTやClaudeから index.html を受け取った場合は、そのHTMLと、見た目を整えるCSS、動きをつけるJavaScript、画像をまとめてサーバーへ置けば公開できます。index.htmlが見当たらない場合は、AIサービスの公開・書き出し機能を確認してください。

そして嬉しいことに、HTMLで作られたサイトは、レンタルサーバーにファイルを置くだけで公開できます。難しいプログラムを動かす必要はありません。「置き場所（サーバー）」と「住所（ドメイン）」を用意して、ファイルをアップロードする——基本はこれだけです。

サイトの公開に必要な3つのもの

AIで作ったHTMLサイトを公開するために必要なのは、次の3つです。

必要なもの役割たとえるなら
レンタルサーバーファイルの置き場所土地・建物
独自ドメインサイトのURL（住所）住所・表札
HTMLファイルサイトの中身建物の中身

このうち、サーバーとドメインをまとめて用意できるのがレンタルサーバーです。エックスサーバーなら、HTMLサイトの公開に加えて、独自ドメインのメールやPHP、将来のWordPress運用も同じ契約にまとめられます。

なぜエックスサーバーで公開できるのか

「AIで作ったサイトを、専用のサービスじゃなくて普通のレンタルサーバーに置いていいの？」と不安に思うかもしれませんが、HTMLのサイトなら、エックスサーバーのような一般的なレンタルサーバーで問題なく公開できます。理由は次のとおりです。

  • HTMLファイルをそのまま置くだけで表示される——特別な設定や変換は不要です
  • ブラウザだけでアップロードできる——「ファイルマネージャー」機能があり、FTPソフトを別途インストールしなくてもファイルを上げられます
  • 無料の独自SSL（https化）が使える——後述するセキュリティ面でも安心です
  • 独自ドメインが取得・設定できる——自分だけのURLでサイトを公開できます

なお、「お金をかけずにまず試したいだけ」という場合は、XServer StaticやCloudflare Pagesといった無料で静的サイトを公開できるサービスもあります。一方、仕事用の独自ドメインメール、PHPのフォーム、日本語サポート、将来のWordPressまで必要なら、通常のレンタルサーバーが向いています。

エックスサーバーで公開する手順

ここからは、実際の公開手順を4ステップで紹介します。

1. レンタルサーバーを契約する

まずはエックスサーバーを契約します。個人・小規模事業のHTMLサイトなら、基本的にスタンダードプランから検討すれば十分です。独自ドメイン永久無料特典には契約期間などの条件があるため、申し込み前に最新条件を確認してください。

契約すると、次のような「サーバーパネル」という管理画面が使えるようになります。

エックスサーバーのサーバーパネル（ログイン後の管理画面）

2. 独自ドメインを設定する

契約後、サーバーパネルからサイトのURLとなる独自ドメインを設定します。ドメインを追加すると、そのドメイン用のフォルダが自動で作られます。

エックスサーバーのドメイン追加画面

3. HTMLファイルをアップロードする

サイトの中身であるHTMLファイルを、サーバーにアップロードします。方法は2つあります。

  • ファイルマネージャー（かんたん）：サーバーパネルの「ファイルマネージャー」を開き、ブラウザ上でファイルをアップロードします。ソフトのインストールが不要なので初心者におすすめです
  • FTPソフト：FileZillaなどのFTPソフトを使ってアップロードする方法もあります

エックスサーバーのファイルマネージャーで public_html を開いた画面

アップロード先は、対象ドメインの中にある public_html というフォルダです。ここが「インターネットに公開されるフォルダ」で、この中にファイルを置くと公開されます。

このとき、トップページのファイル名は必ず index.html にしておきましょう。ブラウザでドメインにアクセスしたときに最初に表示されるのが index.html です。画像やCSSファイルがある場合は、それらも一緒に、AIが出力したときのフォルダ構成のままアップロードします。

アップロードしたHTMLファイル（index.htmlなど）

4. httpsで表示されるか確認する

アップロードが終わったら、設定したドメインにブラウザでアクセスして、サイトが表示されるか確認します。エックスサーバーでは無料の独自SSL（Let's Encrypt）が使え、ドメイン追加時に自動で有効になります。https://（鍵マーク付き）で表示されていればOKです。

エックスサーバーのSSL設定画面（無料独自SSLがON）

公開する前に確認したいセキュリティのこと

ここが本記事でいちばんお伝えしたいポイントです。AIが生成したコードは、見た目や動きを優先していて、セキュリティの配慮が抜けていることがあります。 公開前に、最低限つぎの点だけは確認しておきましょう。

① APIキーがコードに書き込まれたままになっていないか（最重要）

AIに「〇〇のAPIを使った機能を作って」とお願いすると、生成されたHTMLやJavaScriptの中に、APIキー（サービスを利用するためのパスワードのようなもの）がそのまま書き込まれていることがあります。

ここで知っておいてほしいのは、Webサイトのソースコードは、公開すると誰でも見られるということです。ブラウザの「ページのソースを表示」や開発者ツールから、中身は丸見えになります。

つまり、APIキーがコードに書かれたまま公開すると、第三者にキーを抜き取られ、勝手に使われて高額な請求が発生する恐れがあります。これはAIで作ったサイトで特に起こりやすい事故です。

  • 公開するファイルの中に、sk- から始まる文字列や、secret service_role、パスワードのような値が書かれていないか、公開前に確認しましょう
  • もしAIが作った機能が、こうした秘密のキーを必要とするものだった場合、それは本来サーバー側（バックエンド）で動かすべきもので、HTMLを置くだけの公開方法には向きません。その機能を外すか、別の仕組みを検討する必要があります

なお、すべてのキーが危険というわけではありません。たとえばSupabaseの「publishable（公開用）キー」のように、はじめから公開される前提で作られ、アクセス制限で守られているキーもあります（実際にこの仕組みでフォームを動かしているサイトもあります）。とはいえ見分けが難しい場合は、「秘密にすべきキーが混ざっていないか」を意識し、不安なものは公開しないのが安全です。

② 問い合わせフォームは「送信の仕組み」が別に必要

AIが「お問い合わせフォーム」付きのサイトを作ってくれることがあります。ただし、HTMLのフォームは、見た目があるだけでは送信できません。入力された内容を受け取って処理する「送信の仕組み」を、フォームの裏側に用意する必要があります。方法はいくつかあります。

  • 外部のフォームサービスを使う（FormspreeやGoogleフォームなど。非エンジニアの方にはこれが手軽です）
  • SupabaseなどのサービスにJavaScriptから送る（少し技術寄りですが、静的なHTMLのままでも実現できます）
  • PHPで自前の送信処理を作る——ここはエックスサーバーの強みです。エックスサーバーは静的なHTMLだけでなくPHPも動くため、PHPのプログラムを置けば、フォームの内容をエックスサーバーのメール機能で送信することもできます（NetlifyやCloudflare Pagesのような純粋な静的ホスティングにはできないことです）

大事なのは、AIが作ったフォームが「見た目だけ」なのか「本当に送信できる」のかを、公開後に必ずテストして確かめることです。送信されていないことに気づかないと、問い合わせを取りこぼしてしまいます。

③ 常時SSL（https）にしておく

いまのWebサイトは https で表示されるのが当たり前になっています。http（鍵マークなし）のままだと、閲覧者に警告が出たり、信頼性が下がったりします。エックスサーバーなら無料の独自SSLが使えるので、必ず有効にして https:// で表示されるようにしましょう。

④ 公開して良いファイルだけをアップロードする

AIとのやり取りのメモ、下書き、設定ファイルなどを、うっかり一緒にアップロードしないようにしましょう。public_html には、公開して良いファイルだけを置くのが基本です。

「AIが作ったサイト」が動的なアプリだった場合

ここまでは、AIが作ったHTMLのサイトを前提に説明してきました。

一方で、「その場で計算する」「ログインできる」といった動的なアプリは、HTMLを置くだけでは動かないことがあります。使用したAIサービスの公開機能を使うか、必要なサーバー処理に対応した環境を選びます。

会社紹介・お店の紹介・プロフィール・ポートフォリオなどは、HTMLで完結する静的サイトとして作れるケースが多くあります。ログインやデータベースが不要なら、構成を複雑にせず静的サイトとして公開する方法も検討できます。

まとめ

AIで作ったサイトを公開する流れを、あらためて整理します。

  • index.htmlを含む静的サイトなら、レンタルサーバーにアップロードして公開できる
  • 必要なのは「サーバー」「ドメイン」「HTMLファイル」の3つ。エックスサーバーなら初心者でも扱いやすい
  • 手順は「契約 → ドメイン設定 → public_html にアップロード → httpsで表示確認」の4ステップ
  • 公開前に、APIキーがコードに残っていないかだけは必ず確認する

仕事や事業で長く使うHTMLサイトなら、独自ドメイン、メール、PHP、日本語サポートまで一つにまとめられることがレンタルサーバーの利点です。無料公開で十分か迷う場合は、公開先の比較記事で用途を確認してから選んでください。