HTMLで作ったホームページの公開方法｜レンタルサーバーへのアップロードからWordPressとの併用まで

LP やホームページを HTML のデータ一式で受け取ったとき、「これをどうやって公開するのか」で手が止まる方は少なくありません。ふだん WordPress で制作していると、サイトは「サーバーにインストールした WordPress の中に作るもの」なので、単体の HTML ファイルの置き場所がイメージしづらいからです。

結論から言うと、HTML のサイトの公開は、ファイル一式をサーバーの公開フォルダに置くだけです。WordPress のインストールや設定にあたる作業はなく、手順はむしろ少なくなります。この記事では、レンタルサーバーへのアップロード手順、WordPress で運用中のサイトとの併用、公開後の修正のしかたを順に解説します。

この記事は、Web 制作者のための AI 制作プラットフォーム rafuru（ラフル）を開発・運営するチームによる公式ブログの記事です。rafuru からダウンロードできる納品データ（HTML 一式）を例にしますが、手順は HTML で作られたサイト全般に共通です。

公開に必要なもの

すでにクライアントワークで WordPress サイトを運用しているなら、新しく用意するものはありません。

データ一式が zip でダウンロードされる場合は、先に展開（解凍）しておきます。フォルダの中に index.html があるのを確認してください。index.html は「そのフォルダの URL を開いたときに表示されるページ」という決まりになっています。ここだけ押さえれば、あとは置き場所の話です。

パターン① レンタルサーバーにアップロードして公開する

いちばん基本の形です。アップロードの方法は 2 つあり、ふだん FTP ソフトを使っていないなら、ブラウザで完結するファイルマネージャーがおすすめです。

ファイルマネージャーでアップロードする（ブラウザだけで完結）

各社のサーバー管理画面には、ブラウザ上でファイルを置ける機能があります。

• エックスサーバー: サーバーパネルの「ファイルマネージャ」。公開フォルダは ドメイン名/public_html/ の中
• ロリポップ: 「ロリポップ！FTP」。独自ドメインに設定した公開（アップロード）フォルダの中
• さくらのレンタルサーバ: コントロールパネルの「ファイルマネージャー」。公開フォルダは www/ の中

手順は共通で、次の 3 ステップです。

1. 管理画面からファイルマネージャーを開く
2. 公開フォルダ（上記）の中に、サイト用のフォルダを作る（トップページとして公開するならフォルダ直下でも可）
3. データ一式（index.html と画像フォルダなど）を、階層を保ったままアップロードする

たとえばエックスサーバーで example.com/public_html/lp/ にアップロードすれば、公開 URL は https://example.com/lp/ になります。public_html 直下に置けば https://example.com/ がそのサイトになります。

FTP ソフトでアップロードする

ファイル数が多いときは、FileZilla などの無料 FTP ソフトのほうが速く確実です。接続に必要な「FTP サーバー名・ユーザー名・パスワード」は、サーバー契約時のメールか管理画面に記載されています。接続後の操作は同じで、公開フォルダにデータ一式をドラッグするだけです。

公開前のチェックリスト

• ブラウザで公開 URL を開き、ページが表示されるか
• 画像がすべて表示されているか（表示されない場合は、フォルダごとアップロードできているか確認）
• スマホの実機でも表示を確認
• URL が https:// で始まっているか。http:// のままなら、サーバー管理画面から無料独自 SSL を設定（各社とも数クリックで完了）

パターン② WordPress で運用中のサイトと併用する

「会社のホームページは WordPress、キャンペーン用の LP だけ HTML で追加したい」というケースです。クライアント案件ではこの形がいちばん多いはずです。

サブディレクトリに置く（おすすめ）

WordPress が動いている同じサーバーの公開フォルダの中に、新しいフォルダを作って置くだけです。たとえば WordPress が https://example.com/ で動いているなら、public_html/lp/ にデータ一式を置けば、LP は https://example.com/lp/ で公開されます。

「WordPress のページと衝突しないのか」と不安になるところですが、フォルダとして実際に存在する URL は、WordPress の処理より優先して表示される仕組みになっています。既存サイトには影響しません。注意点は 1 つだけで、フォルダ名を WordPress の固定ページのスラッグ（/lp/ というページが既にあるなど）と重複させないことです。

サブドメインで分ける

https://lp.example.com/ のように分けたい場合は、サーバー管理画面でサブドメインを作成し、その公開フォルダにデータ一式を置きます。本体サイトと完全に切り離せるので、クライアントのサイトに一切触れたくない場合はこちらが安全です。

なお、HTML を WordPress の固定ページに貼り付けて再現する方法もありますが、テーマの CSS と干渉して表示が崩れやすいため、おすすめしません。フォルダを分けて置くほうが、確実で管理もしやすい方法です。

パターン③ 公開後に修正する

公開はゴールではなく、修正依頼はここから来ます。HTML サイトの修正の反映は「直したファイルを、同じ場所に上書きアップロードする」だけです。

rafuru で作ったサイトなら、修正の流れは次のようになります。

1. rafuru でプロジェクトを開き、AI チャットまたはコード編集で修正する
2. 修正後のデータ一式を再ダウンロードする
3. 公開時と同じフォルダに上書きアップロードする

WordPress の管理画面のような「その場で編集して保存」はない代わりに、修正のたびに完成データが手元に残るので、納品物の状態がいつでも明確という利点があります。クライアントに確認してもらってから反映したい場合は、上書き前に rafuru のプレビューリンクを送れば、公開中のサイトに触らずに確認まで済ませられます。

まとめ

• HTML サイトの公開は「公開フォルダにデータ一式を置くだけ」。WordPress より手順は少ない
• いつものレンタルサーバーのファイルマネージャーだけで完結できる。FTP ソフトは必須ではない
• WordPress サイトとの併用は、サブディレクトリにフォルダを作って置くのが確実
• 修正は「直す→同じ場所に上書き」の 2 ステップ