「AIにお願いしたら、あっという間にホームページができた」——2026年のいま、専門知識がなくてもAIでWebサイトを作れる時代になりました。ChatGPTやClaudeに「こんなサイトを作って」と頼めば、それらしいページが数分で出てきます。

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

本記事では、AIで作ったサイトを実際に公開する方法を、非エンジニアの方にもわかるように解説します。あわせて、AIが生成したコードを公開するときに見落としがちなセキュリティの注意点（特にAPIキー）にも触れます。ここを知らずに公開すると思わぬトラブルになることがあるので、ぜひ最後まで読んでみてください。

AIが作るサイトは、特に指定しなければ「HTML」

まず押さえておきたいのが、AIに作ってもらったサイトの中身は、多くの場合「HTML」というシンプルな形式だということです。

HTMLは、Webページの見た目や文章を記述するための、いわばWebの共通言語です。ChatGPTやClaudeに「ホームページを作って」とお願いすると、特に技術的な指定をしなければ、多くはこのHTML（と、見た目を整えるCSS、動きをつけるJavaScript）がまとまった1つのファイル、あるいは数個のファイルとして出てきます。

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

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

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

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

このうち、サーバーとドメインを用意してくれるのがレンタルサーバーのサービスです。中でも、初心者にも扱いやすく国内シェアも大きいのがエックスサーバーです。

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

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

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

なお、「お金をかけずにまず試したいだけ」という場合は、Netlify（Netlify Drop）やCloudflare Pagesといった無料で静的サイトを公開できるサービスもあります。ただし、独自ドメインでしっかり運用したい・サポートが受けられる環境がいい・将来的にWordPressなども使いたい、という場合は、レンタルサーバーを1つ持っておくと安心です。

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

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

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

まずはエックスサーバーを契約します。申し込み時に独自ドメインが無料でついてくるキャンペーンが実施されていることも多いので、これから始める方はドメインもまとめて用意すると手間が省けます。

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

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

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のサイトを前提に説明してきました。非エンジニアの方がAIで作るサイトは、その多くがこのHTMLタイプです。

一方で、AIによっては「その場で計算する」「ログインできる」といった、より本格的な動的なアプリを作ることもあります。こうしたものは、HTMLを置くだけの公開方法では動かないことがあり、専用の仕組みが必要になる場合があります。

ただ、非エンジニアの方が最初に作るサイト（会社紹介・お店の紹介・プロフィール・ポートフォリオなど）は、ほとんどがHTMLで完結する「静的なサイト」です。まずはHTMLのサイトを公開してみて、必要になったら次のステップを考える、という進め方で十分です。

まとめ

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

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

「作る」だけでなく「公開する」ところまでできると、AIで作ったサイトが一気に自分の資産になります。これから始める方は、まず置き場所となるサーバーを用意するところからはじめてみましょう。この記事の手順どおりに進めれば、AIで作ったサイトをそのまま公開できます。