【ホームページ公開】エックスサーバー（XSERVER）にファイルアップロードする方法

2023年10月19日

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

レンタルサーバー契約したけど、どうやってファイルをアップロードするの？
ホームページは作ったけど、公開方法が分からない。

本記事では、作成したホームページ（Webサイト）をレンタルサーバーにアップロード（公開）する方法について詳しく解説します。

今回は、エックスサーバー（XSERVER） でレンタルサーバー契約していることを前提に解説していきます。

まだレンタルサーバーを契約していない方

サーバー契約がまだの方は、以下の記事を参考にレンタルサーバー契約を先に進めてください。

TERUBLOG

ホームページの公開方法を現役エンジニアがやさしく解説【初心者向け】 | TERUBLOG 「ホームページをどうやってインターネット上に公開するの？」本記事では、一般的なホームページとWordPressで作成されたホームページの２パターンについて、インターネッ…

TERU

エックスサーバー（XSERVER）以外のレンタルサーバーでも手順に大きな違いはありません。

レンタルサーバーの選び方については、下記の記事が参考になります。

あわせて読みたい

もう迷わない！ポートフォリオ用レンタルサーバーの選び方【初心者向け】こんにちはTERUです。フリーランスでWEB制作を仕事にしています。読者の悩みポートフォリオ用のレンタルサーバー選びの基準がよくわからないポートフォリオサイトを…

この記事を読んで分かること

サーバーへのファイルアップロード方法がわかる。

本記事の信頼性

フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている。
Web制作会社にてディレクターの経験もあり。
普段からエックスサーバー（XSERVER）を利用している。

まずはホームページ公開の大きな流れを理解

WEBサイト（ホームページ）公開までには、大きく5つの作業をクリアする必要があります。

ホームページ公開までの作業

サーバー契約
ドメイン取得
ドメイン設定
SSL化（http→https）設定
ファイルアップロード

TERU

今回はステップ5にあたる「ファイルアップロード」について、深掘りしていきます。

エックスサーバー（XSERVER）へのファイルアップロード方法

契約したサーバーにファイルをアップロードするためには、下記４ステップの作業が必要になります。

サーバーにファイルをアップロードする流れ

FTPソフトのインストール
エックスサーバー（XSERVER）への接続情報を確認
FTPソフトを使用してエックスサーバー（XSERVER）へ接続
公開用ファイルのアップロード

そもそもFTPとは？

ステップの説明に入る前に、FTPを解説します。

FTPとは、ファイルをやり取り（アップロード・ダウンロード）する際に利用する通信プロトコルの一つです。
通信プロトコルは、ネットワーク通信をする際の決まり事（通信手順）です。

STEP1：FTPソフトのインストール

まずはFTPソフトのインストールを行います。

今回は、最も利用されているFTPソフトの一つである「FileZilla」をインストールします。

本記事の手順は、MacOSのパターンです。

FileZillaの特徴

MacとWindowsのどちらでも利用できる。
無料で利用できる。
日本語対応している。

手順①：FileZillaの公式ページへアクセスします。

手順②：macOS用のFileZillaを選択するとダウンロードが開始されます。

手順③：ダウンロードしたアーカイブファイルをダブルクリックします。

手順④：「FileZilla」ファイルが表示されるので、「アプリケーション」にドラッグ＆ドロップします。

手順⑤：アプリケーションフォルダ内に「FileZilla」が存在することを確認します。

以上でインストールは完了です。

「FileZilla」について、下記の記事で詳しく解説しています。
※Windowsの手順も記載しています。

あわせて読みたい

【保存版】FTPクライアント「FileZilla」の使い方【初心者向け】こんにちはTERUです。フリーランスでWEB制作（コーディングとディレクション業務）をしています。読者の悩み FileZillaの使い方について詳しく知りたい「FileZilla…

STEP2：エックスサーバー（XSERVER）への接続情報を確認

次にサーバーへ接続するための情報を確認します。

そもそも接続情報とは？

FTPソフトからサーバーへ接続するために必要な情報です。

具体的には、下記3つの情報が必要になります。

ホスト	接続するサーバーのホスト名
ユーザー	サーバーにFTP接続するためのユーザー名
パスワード	サーバーにFTP接続するためのパスワード

FTPに必要な接続情報

接続情報があれば、誰でもサーバーへアクセスされてしまうので接続情報の取り扱いには注意が必要です。

接続情報の確認方法

接続情報は、各レンタルサーバーの管理画面にて確認することができます。

本記事では、エックスサーバー（XSERVER）での確認手順を解説します。

手順①：まずはサーバーパネルから「サーバーID」と「サーバーパスワード」を入力してログインします。

補足情報

初期ドメイン「XXXXXX.xsrv.jp」の「XXXXXX」がサーバーIDになります。
また、会員登録完了時に送られる下記メールにも記載されています。

件名：【Xserverアカウント】■重要■サーバーアカウント設定完了のお知らせ〜

手順②：サーバーパネル画面にて、「サブFTPアカウント設定」をクリックします。

手順③：ドメイン選択画面にて、すべてのドメインの「選択する」をクリックします。

手順④：サブFTPアカウント設定画面にて、「FTPソフト設定」タブを選択し、「FTP サーバー（ホスト）名」を確認します。

FTP接続（FileZilla）するために必要な情報

ホスト	サブFTPアカウント設定画面にて確認
ユーザー	サーバーパネルのログインに使用したサーバーIDと同じ
パスワード	サーバーパネルのログインに使用したサーバーパスワードと同じ

FTP接続（FileZilla）するために必要な情報

上記のサーバーパスワードとXserverアカウントパスワードとは別物なので注意してください。
サーバーパスワードを忘れた場合は、下記のページからサーバーパスワードの再設定が可能です。
>>エックスサーバー「サーバーパスワード」再設定フォーム

エックスサーバー（XSERVER）以外のレンタルサーバーに接続する方法については、「FTP サーバー接続情報の確認方法【レンタルサーバ別】」に詳しく解説しています。

TERU

エックスサーバー（XSERVER）以外の場合、こちらを参照ください。

STEP3：FTPソフトを使用してエックスサーバー（XSERVER）へ接続

サーバーへの接続情報が分かったら、FTPソフトを使って契約したエックスサーバー（XSERVER）に接続します。

接続方法について、先ほどインストールを行った「FileZilla」を使って説明します。

エックスサーバー（XSERVER）への接続情報を設定

まずは、先ほど調べた接続情報をFTPソフト（FileZilla）に設定します。

手順①：FileZillaを開き、画面左上の「サイトマネージャー（赤枠部分）」を選択します。

【ショートカットキー】
Macの場合：command + S
Windowsの場合：Ctrl + S

手順②：サイトマネージャー画面で「新しいサイト」を選択します。

手順③：画面右側に調べた接続情報を入力します。

①ホスト	サブFTPアカウント設定画面にて確認
②ユーザー	サーバーパネルのログインに使用したサーバーIDと同じ
③パスワード	サーバーパネルのログインに使用したサーバーパスワードと同じ

FTP接続（FileZilla）するために必要な情報

設定情報の名前ですが、分かりやすい名前に変えておきましょう。
※マウスで選択すると簡単に変更可能です。

サイトマネージャー上に接続設定を保存していくことができます。
２回目以降は、数クリックで簡単にサーバーへ接続が可能です。

エックスサーバー（XSERVER）へFTP接続を行う

手順④：接続情報の入力が完了したら、「接続」を選択します。

手順⑤：接続すると画面右側に、サーバー上のファイルやフォルダが表示されます。
独自ドメインを設定した場合、独自ドメイン名のフォルダが作成されています。

STEP4：公開用ファイルのアップロード

サーバーに接続できたら、最後のステップです。
公開用ファイルを下記の順番でサーバーの公開フォルダへアップロードします。

初期ファイルの削除
公開用ファイルをアップロード
サイト確認

今回は、「teru1213.online」という独自ドメインにホームページを公開する想定で解説します。

サーバーの公開フォルダとは？

公開フォルダとは、レンタルサーバーにドメイン毎に用意されているファイルの置き場所です。

もう少し詳しく見てみると

公開フォルダとは、独自ドメインやサブドメインを利用したホームページで、公開したいデータを管理するためのフォルダのことです。お客様にて任意のフォルダ名を指定できます。当サービスの仕組みでは、独自ドメインやサブドメインにアクセスした際に、公開フォルダに設定しているフォルダ内のデータを表示します。
公開フォルダとはなんですか – ロリポップ！レンタルサーバー

基本的にドメイン毎に用意されており、ドメイン名フォルダ配下の「public_html」フォルダが公開フォルダになります。

例）エックスサーバー（XSERVER）の公開フォルダ構成