ホームページをアップロードする方法【初心者向き】

みやしも WEB制作
ホームページをアップロードする方法が分かりません。やり方を詳しく教えてください!
お任せください!ホームページをアップロードする方法について、画像付きで分かりやすく解説してゆきます!

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

ホームページをアップロードする方法

ホームページをアップロードする方法

ホームページは作っただけでは、WEBを通して他の方から見ることはできません。サーバーと呼ばれる場所にアップロードすることで、初めてインターネット上に公開され、様々な人からアクセスしてもらえる様になります。



今回は、サーバーにファイルをアップロードしてホームページを公開するまでの手順について、画像つきで詳しく解説してゆきます。



▼ホームページを公開するまでの手順

  1. サーバーの接続情報を調べる
  2. FTPソフトの設定を行う
  3. ファイルをアップロードする



このほか作業に必要な『FTPソフト』の導入や、各レンタルサーバーごとの対応についても触れてゆきます。ホームページ制作の作業過程で、詰まっている部分や、解らない部分は人それぞれだと思いますので、所どころ読み飛ばして頂ければと思います。

アップロードする方法を学習して、自分が作成したホームページをインターネットに公開しましょう!

作業の準備をする

作業に必要なもの

ホームページをアップロードするためにも、まずは条件の確認や作業の準備を済ませてしまいましょう。今回の作業を進めるためには、あらかじめ次のものが必要になります。



▼作業を進めるために必要なもの

  • レンタルサーバー
  • FTPソフト
  • HTML・CSS


準備①:レンタルサーバー

ひとつめは、インターネットに公開するホームページの置き場の役割をはたす『サーバー』です。HTML・CSSで作成されたホームページを公開する場合、一般的にはレンタルサーバーと呼ばれるものが使用されます。



レンタルサーバーには次のサービスが一般的です。



▼レンタルサーバー

  • 『XSERVER(エックスサーバー)』
  • 『ConoHa WING(コノハウィング)』
  • 『ColorfulBox(カラフルボックス)』



レンタルサーバーには様々なプランがありますが、およそ月額1,000円前後から利用ができます。今回は、上記にもある『XSEVER(エックスサーバー)』を例に解説をすすめてゆきます。



▼XSERVERはこちら

XSEVER(エックスサーバー)


ホームページを公開するための『レンタルサーバー』を持っていない場合、まずはレンタルサーバーの準備から行いましょう。

準備②:FTPソフト

ふたつめに必要なものが『FTPソフト』の存在です。FTPソフトは、サーバーに対してホームページなどのファイルをアップロードするために使用するソフトウェアのことです。



また、FTPソフトには『FileZilla(ファイルジラ)』というソフトがおススメです。



FileZillaは無料かつ、Windows・Macの両方で利用ができます。定番ソフトとしてWEB上に多くの情報があるため、初心者向きのFTPソフトとも言えます。

今回は『FileZilla(ファイルジラ)』を例にアップロード方法の解説を進めてゆきます!

準備③:HTML・CSSファイル

ホームページをアップロードするためにも、ホームページの本体であるHTMLやCSSなどのファイルが必要です。



おそらくこの記事を読まれている方であれば、すでに手もとに作成したHTML・CSSなどのファイルがあるとも思いますが、今回は次の『HTMLテンプレート』を例に解説を進めてゆきます。

HTMLテンプレートのイメージ
HTMLテンプレートの内容

以上でホームページをアップロードするための準備は終わりです。

以降はホームページをアップロードするための具体的な手順を解説してゆきます!

STEP1.サーバーの接続情報を調べる

STEP1.サーバーの接続情報を調べる

ホームページのファイルをアップロードするには、『FTPソフト』と呼ばれるソフトウェアを使用して、サーバーに接続してから作業を行います。

このためにも必要なのが、FTPソフトで利用するための『サーバーの接続情報』です。

サーバーの接続情報とは

サーバーの接続情報とは、具体的に以下の3つの情報から成り立っています。



▼サーバーの接続情報

①ホスト

接続するサーバーのホスト
例)〇〇〇〇.xserver.jp

②ユーザー

サーバーに接続するためのユーザー名

③パスワード

サーバーに接続するためのパスワード



『ホスト』とは接続先となるサーバーの場所を示すもので、一般的には『〇〇〇〇.xserver.jp』の様な形でドメイン形式の情報になっています。また、合わせてそのサーバーにログインするための『ユーザー名』と『パスワード』も必要です。

上記のうち1つでも欠けているとサーバーに接続することは出来ませんので、3つとも調べる必要があります。

サーバーの接続情報の調べ方

サーバーの接続情報は、各レンタルサーバーの管理画面から調べる事ができます。レンタルサーバーごとの具体的な情報の調べ方については、つぎの記事が参考になります。

自分が持っているレンタルサーバーの接続情報を調べることが出来たら、次のステップに進みましょう。

後ほどの作業で使いますので、忘れずにメモ帳アプリなどに控えておきましょう!
FTPソフトで使用する『サーバーの接続情報』は、各レンタルサーバーの管理画面で調べる事ができる。

STEP2. FTPソフトの設定を行う

STEP2. FTPソフトの設定を行う

サーバーの接続情報を調べたら、続けて『FTPソフト』の設定を行います。今回は先にも登場した『FileZilla』を使用します。

サーバーの接続情報を設定する

まずは次の様な要領で、レンタルサーバーで調べた『サーバーの接続情報』をFileZillaに設定してゆきます。

FileZillaにサーバー接続情報を設定した状態
FileZillaにサーバー接続情報を設定した状態

FileZillaには『サイトマネージャー』という接続先を管理するための機能があるので、こちらを使ってサーバーの接続設定を登録します。



ここで登録する内容は、レンタルサーバー側で調べた『①ホスト』『②ユーザー』『③パスワード』の3つです。設定の名前は、接続先からとって「xserver」としました。



最後に『OK』をクリックすると設定内容が保存できます。File Zillaやサイトマネージャーなどの詳しい使い方が知りたい方は、次の記事も参考にしてみて下さい。

実際にサーバーに接続してみる

File Zillaの設定が終わったら、実際にレンタルサーバーに接続できるか確認しましょう。先ほどのサイトマネージャーで『接続』をクリックすると、設定内容を使用してサーバーに接続できます。



上手くゆくと、File Zillaの状態はつぎの様になり、右側のパネルには接続先サーバーのフォルダやファイルの一覧が表示されます。

FileZillaでサーバーに接続した状態
FileZillaでサーバーに接続した状態

いくつか見慣れないフォルダやファイルが並んでいるかと思いますが、これらは今回の作業には関係がないので理解しなくてもOKです。

接続が上手くゆかない場合は、画面上部にエラーが表示され、右側のフォルダには何も表示されません。この場合は『File Zilla』に設定した情報に間違いがあるので、内容を見直しましょう。
実際にレンタルサーバーに接続する所まで確認できたら、File Zillaの設定はすべて完了です。

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

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

FTPソフトの設定まで完了したら、いよいよ最後のステップです。ホームページのHTML・CSSファイルをサーバーにアップロードする作業を行います。

サーバーの公開フォルダについて

アップロードの際にまず確認すべきは、ファイルをアップロードする、レンタルサーバー側の『公開フォルダ』についてです。



ホームページを公開するレンタルサーバーには『公開フォルダ(ディレクトリ)』と呼ばれる専用のフォルダがあり、インターネットにファイルを公開する際には、このフォルダにファイルをアップロードする必要があります。

公開フォルダは技術的な用語で『ドキュメントルート』とも表現されます。

また、『公開フォルダ』はホームページで使用する『独自ドメイン』とも紐づいており、レンタルサーバーでは基本的に、1つのドメインに対して1つの公開フォルダが用意されています。

作業を進めるためにも、まずは接続先のサーバーで『公開フォルダ』の存在から確認してゆきましょう!
独自ドメインに紐づいた『公開フォルダ』にファイルをアップロードしないと、インターネット上にホームページを公開することは出来ない。このためにもサーバー『公開フォルダ』の存在を確認する必要がある。

サーバーの公開フォルダを確認する

今回の作業例である『XSERVER(エックスサーバー)』では、次の形で『公開フォルダ』が用意されます。

▼XSERVERの公開フォルダ
/【独自ドメイン①】/public_html/
/【独自ドメイン②】/public_html/
/【独自ドメイン③】/public_html/
  :
  :

まず、サーバーに設定した『独自ドメイン』の名前を持ったフォルダがあり、さらにその中の『public_html』というフォルダが公開フォルダになっているという階層構造になっています。

▼公開フォルダの例
独自ドメイン: example.com
公開フォルダ: /example.com/public_html/

独自ドメインのフォルダが無い場合

独自ドメインのフォルダが見つからない場合は、この時点で『独自ドメインの取得』やサーバーに対する『ドメイン設定』が完了していないケースになります。この場合は、XSERVERの管理画面から次の作業を行う必要があります。



▼公開フォルダが作成される条件

  1. XSERVERで『独自ドメイン』を取得する
  2. サーバーパネルで『ドメイン設定』を行う



上記の作業については次の情報が参考になります。

https://www.xserver.ne.jp/manual/man_domain_setting.php

独自ドメインのフォルダがある場合

独自ドメインのフォルダがある場合は、次の様にフォルダを移動すると、そのドメインの『公開フォルダ』までたどり着くことが出来ます。



▼公開フォルダに移動する方法

  1. 『独自ドメイン』の名前のフォルダに移動する
  2. 『public_html』という名前のフォルダに移動する



FileZillaで独自ドメインの公開フォルダまでたどり着くと、次の様になります。

独自ドメインの公開フォルダまで移動した状態
独自ドメインの公開フォルダまで移動した状態

以上で、公開フォルダの確認は終わりです。公開フォルダを確認できた場合は、あらかじめ移動してから先に進みましょう。

少しややこしい部分ですが、レンタルサーバーを活用する上でもとても重要なポイントです。

初期ファイルを削除する

公開フォルダに移動が出来たら、続けてサーバーの初期ファイルを削除してゆきます。



XSERVERの公開フォルダには、初期状態では何も設置されていない事を示す『初期ファイル』が置かれています。

XSERVERの初期ファイル1
XSERVER(エックスサーバー)の初期ファイル

またこれらのファイルがある状態でホームページのドメインにアクセスすると、次の様な画面が表示されます。

XSERVERの初期ページ
XSERVER(エックスサーバー)のWEBページの初期状態

上記はデフォルトとして用意されているものですが当然、自分が作成したホームページを設置するうえでは必要のないものですので、これら初期ファイルは削除してゆきます。



また、ファイルの削除はサーバーに接続したFTPソフトから行います。

今回の作業に使っている『File Zilla』では、ファイルを選択した状態で『Delキー』を押すか、右クリックメニューを開いて『削除』を選択すればファイルが削除できます。

File Zillaで初期ファイルを削除すると、次のような状態になります。

XSERVERの初期ファイル2
XSERVER(エックスサーバー)の初期ファイルを削除した状態

この状態でドメインにアクセスすると、次の様に表示されます。

XSERVERの初期ページ削除後の状態
初期ファイルが削除された状態

初期ページが削除されて、アクセスした際にブラウザに表示する物が何もなくなったために、この様な画面が表示されています。

例えるなら、『元から建っていた家を取り壊して空き地にした』みたいな状態です。
以上で初期ファイルを削除する作業は終わり、ホームページのファイルをアップロードするための状況が整いました。

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

いよいよ最後にホームページのファイルをアップロードしてゆきます。



作業には引き続きFTPソフト『FileZilla』を使用します。アップロードするためにも、まずはFileZillaで以下の作業を行います。



▼FileZillaで行う作業

  • 左側のパネル:アップロードする『HTML・CSSのフォルダ』を開く
  • 右側のパネル:サーバー側の『公開フォルダ』を開く



上記の作業を行った『FileZilla』の状態は次の様になります。

ホームページのファイルをアップロードする_準備

上記の様な状態が整ったらHTML・CSSファイルのアップロードを実行しましょう。ファイルをアップロードするには、File Zillaで次の様に操作します。

左側のパネルにあるHTML・CSSをドラッグ&ドロップして、右側のパネルに移動する。
※もしくは右クリックメニューから『アップロード』を選択する

アップロードが始まると、File Zillaの下部には次のように進捗が表示されます。

FileZillaのアップロード過程
FileZillaのファイルのアップロード過程

アップロードするファイルの数・サイズにもよりますが、ここは完了まで少しだけ時間がかかります。完了すると、FileZillaの画面は次の様になります。

ホームページのファイルをアップロードする_作業後
ファイルのアップロードが完了した状態
左側のパネルのファイルが右側のパネルにも並んでいる状態が、アップロードの完了を意味しています。
以上でファイルのアップロード作業は終わりです!

ドメインにアクセスしてみる

ホームページのファイル(HTML・CSS)をアップロードしたら、ホームページにアクセスしてみます。具体的にはWEBブラウザを開き、ホームページのドメインに対してアクセスします。



アップロード作業が上手くいっていれば、作成したHTML・CSSの内容にもとづいたWEBページが表示されているはずです。



今回の作業例では、次の様なWEBページが表示されます。

ドメインにアクセスする
アップロードしたファイルをWEBブラウザで見た状態

アップロードしたホームページが上手く表示されない場合は、以下の点も確認してみましょう。



▼上手くゆかない時のチェック事項

  • サーバーの『公開フォルダ』にアップロードされたか確認する
  • サーバーの『初期ファイル』が削除されているか確認する
  • 必要なファイルが全てアップロード出来たか確認する
  • WEBブラウザでキャッシュをクリアする(Win:Ctr+R、Mac:Command + R) 



以上でホームページのアップロード作業はすべて終わりです。

ここまでの作業、本当にお疲れ様でした!

この記事のまとめ

今回はホームページのHTML・CSSをレンタルサーバーにアップロードする方法について、画像付きで詳しく解説してきました。



▼ホームページのアップロードに必要な物

  • レンタルサーバー
  • FTPソフト
  • HTML・CSS



▼ホームページを公開するまでの手順

  1. サーバーの接続情報を調べる
  2. FTPソフトの設定を行う
  3. ファイルをアップロードする



ホームページの公開作業には、レンタルサーバーやFTPソフトなどの技術的な要素もあり、ハマりポイントも多いため、初心者の方にとってハードルの高い作業だとも思います。



この記事では、作業の流れを出来る限り、網羅的に記していますので、作業過程で分からなくなったら何度でも見に来て頂ければと思います。

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事