Webサイトを公開するために必要な3つの手順!初心者でも簡単!【徹底解説】

一生懸命Webサイトを作ったんだけど、インターネットに公開する手順がわからないよ…
初心者の方でも簡単にできます!わかりやすいように、画像を使って順番に説明していきますので安心してください。

何かあればTwitterにご相談いただければサポートいたします!
≫Twitterアカウント

この記事を読めば、インターネットにWebサイトを公開する方法がわかります。
50枚の画像を使って、初心者の方にもわかりやすく解説していきますのでご安心ください。

まず、インターネットにWebサイトを公開するまでの手順を理解しましょう。
Webサイトを公開するまでには、以下の作業が必要になります。

STEP.1
サーバーを借りる
エックスサーバーを利用
STEP.2
ドメインを取得する
エックスドメインで簡単取得
STEP.3
ファイルをアップロードする
FTPを使ってファイルアップロード
完了

1つずつ、順を追って丁寧に解説していきますので、ご安心ください!

Webサイトを公開するまでの基本知識

まず「Webサイトをインターネットに公開する」ということですが、わかりやすいように「家を建てること」に置き換えてみました。

Webサイト公開のイメージ

  1. サーバー:Webサイトを置くための土地
  2. ドメイン:土地に建てた家の住所(Webサイトのアドレス)
  3. ファイルのアップロード:家に家具を設置する(Webサイトの構成)

サーバーとは

サーバーはWebサイトを置くための場所です。

Webサイトをネット上に公開するためには、サーバーが必要になります。しかし、サーバーを用意しただけでは、Webサイトの公開はできません。

注意
「サーバー」「ドメイン」「ファイル」のうち、どれか1つが欠けてしまうと、Webサイトを公開することができません。

サーバーを用意した後は、ドメインを取得し、サーバーにHTMLファイルや画像ファイルなどをアップロードする必要があります。

ドメインとは

ドメインとは、アドレスのこの部分

ドメインとはこの部分

当ブログでいうところの、「koreblog.net」がドメインになります。

サーバーは1つレンタルすれば、何個でもWebサイトを公開することができます。
※正確には容量によりますが、初めのうちは気にしなくても問題ありません。

ドメインは、1つのWebサイト(家)につき、1つ用意する必要があります。ですので、公開したいWebサイトの数だけドメインを用意しなくてはなりません。

Webサイトの数だけドメインが必要

ちょっと難しく感じるかもしれませんが、Webサイトを公開する手順は、実はシンプルで簡単です。画像付きで詳しく説明していくのでご安心ください!

それでは、1つずつ手順を詳しく解説していきます。

エックスサーバーでWebサイトを公開する

Webサイト公開のイメージ

まずは、「①サーバー:Webサイトを置くための土地」を用意します。

サーバーは「レンタルサーバー」を使おう

レンタルサーバーは、手順にそって申し込みをするだけで、簡単に利用可能になります。目安として、作業時間は10〜20分くらいで完了します。

MEMO
レンタルサーバーの料金は、「1ヶ月 1,000円」ほどで利用可能です。

Webサイトを公開するためのエックスサーバー申し込み方法

レンタルサーバーは何社かありますが、
一番のオススメは「エックスサーバー」です。

エックスサーバーをおすすめする理由

おすすめする理由
  • ブロガーなど利用者が圧倒的に多い
  • サーバー環境が安定している
  • WordPress簡単インストール、SSL化など、簡単設定できる仕組みがある
  • 初心者でも非常に操作しやすい
  • 料金が安くてハイスペック

高スペック、高品質、サポート完備のエックスサーバーを選んでおけば、間違いはありません。ちなみに、私もエックスサーバーを愛用しています。

エックスサーバーの申し込み手順

それでは、Xserverに登録して「Webサイトの公開に必要なサーバー」の用意をしましょう。画像付きで詳しく解説していきます。

まず、エックスサーバーのページへアクセスしましょう。

Xserver01

アクセスしたら、お申し込みボタンにカーソルを合わせ、「サーバーお申し込みフォーム」をクリックします。

Xserver02

「10日間無料お試し 新規お申込み」をクリック。

Xserver03

  • サーバーIDはWebサイト上には表示されないので、好きなものを入力してOKです。
  • プランは「X10プラン」を選んでおきましょう。

Xserver04

続いて、お客様情報を入力します。

Xserver05

入力内容を確認したら、画面下にある「SNS・電話確認へ進む」をクリックします。

Xserver06

  • 携帯の電話番号を入力。
  • 「テキストメッセージで取得(SMS)」を選択。

Xserver07

SMS認証が完了すると、登録したメールアドレスに「【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]」という内容のメールがエックスサーバーから届きます。

Xserver08

その中に記載されている、ユーザーアカウント情報が必要になりますので、こちらをメモしておきましょう。

ここまでで、エックスサーバーの仮契約が完了です!

注意
料金のお支払い設定」をしていないと、使用期間が終了した際に、サーバーが利用できなくなってしまいます。このタイミングで料金の支払い設定も完了させておきましょう。

エックスサーバーにログインする

エックスサーバーの仮契約が完了したので、次はエックスサーバーのインフォパネルにログインしてみましょう。

Xserver09

先ほどのメール「【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]」に記載されているユーザーアカウント情報の「会員ID」と「インフォパネルパスワード」を入力して、ログインボタンをクリックします。

Xserver10

ログインができれば、エックスサーバーの新規登録は完了していますが、ここで忘れないように「料金の支払い設定」をしておきましょう。

左側のメニューにある、「料金のお支払い/請求書発行」をクリックしましょう。

Xserver11

レ点にチェックを入れます。希望する更新期間を選択して、「お支払い方法を選択する」をクリックしましょう。

Xserver12

支払い方法は、銀行振込やコンビニ支払いがありますが、クレジットカードが非常に便利ですので、クレジットカード決済にしておきましょう。
(支払い忘れでサーバーが繋がらなくなる最悪の事態を防げます)

クレジットカードの情報を登録して支払い設定が完了です。

エックスサーバーの自動更新設定

エックスサーバーには、自動更新の設定もあります。「12ヶ月後の更新処理を忘れてしまいそう…」という方は、こちらの登録もおすすめです。

Xserver13

インフォパネルの左側にある、「カード自動更新設定」をクリックします。

Xserver14

  • 自動更新設定したい場合は「設定」ボタンをクリック。
  • 解除するときは「解除」ボタンをクリック。

サーバーアカウントは1ヶ月ごとの自動更新が可能です。
料金はX10サーバーで、月々1,100円(税込)です。

Xserver15

なお、クレジットカード情報の登録がまだの場合は、こちらのボタンから登録しておきましょう。

ここまでで、サーバーの申し込みが完了です!
次はドメインの取得について解説していきます。

Webサイトを公開するために、ドメインを取得する

Webサイト公開のイメージ

次に、ドメインを取得してみましょう。
先ほど契約した土地(サーバー)に、家(Webサイト)を建てる手順です。

ドメインを使えるようにするまでの手順です

STEP.1
ドメインを選ぶ〜購入する
STEP.2
Xserverとドメインを紐付ける
STEP.3
独自SSL化でセキュリティ強化
STEP.3
HTMLファイルなどをアップロード
完了

大変だなと感じるかもしれませんが、手続き自体は非常にシンプルで簡単です。
画像を使って詳しく説明していくのでご安心ください。

エックスドメインを使う

それでは、まずドメインを取得していきましょう。

ドメインの取得は、ドメイン購入ができるサービスを利用して購入します。購入できるサービスはたくさんありますが、エックスサーバーを使うのならエックスドメインが便利です。

まずは、エックスサーバーのインフォパネルにアクセスしましょう。
ログインできたら、サービスのお申し込みをクリックします。

Xdomein01

ログインできたら、サービスのお申し込みをクリックします。

Xdomein02

新規申し込みをクリックします。

Xdomein03

同意するをクリック。

Xdomein04

取得したいサイトのドメイン名を入力します。

MEMO
ここに入力したドメイン名が、WebサイトのURLに表示されます。

Xdomein05

koreblogだと、現在利用できるのが.net、.info、.orgなどなど。
逆に利用できないのが.comと、.xyzと、.site、.onlineが×になっていますね。

取得したいドメイン名で、利用されていないものを選んで購入します。

ネームサーバ初期設定は、『エックスサーバー 』を設定する(標準)

エックスサーバーを利用する場合は、必ず「『エックスサーバー 』を設定する(標準)」にチェックを入れておきましょう。後ほどの設定が必要なく、簡単にドメインを利用できるようになります。

Xdomein06

内容を確認できたら、クレジットカード決済画面へ進むをクリックします。

ドメインの種類について
  • ドメインは、基本的に何を選んでもさほど差はない
  • ドメインの種類によって値段が大きく変わる
  • 企業向け「.inc」「.co.jp」
.comや.netあたりを選んでおけば、とりあえず間違いない。

ドメインに悩んだ場合は、.comや.netなど、有名なものを取得するようにしておきましょう。

Xdomein07

クレジットカードの情報を入力して、カードでのお支払い(確定)をクリックします。

Xdomein08

最後に入力内容を確認して、お支払いを確定します。

Xdomein08

支払いが完了すればドメインの購入が完了です。
トップページへもどり、ドメインの欄に購入したドメインが表示されているか確認しましょう。

ドメインは取得しただけでは使えない

ドメインは、取得したドメインとサーバーを紐付け設定しないと使えません。そちらも詳しく解説していきます。

エックスサーバーにドメインを設定してWebサイトを公開

エックスサーバーと、購入したドメインの紐付け設定をします。
この設定をしないと、インターネットでWebサイトを表示することができません。

購入した土地に、家を建てるところです。
Webサイト公開のイメージ

ドメイン設定でやることはたったの2つだけ
  1. エックスサーバーのサーバーパネルにログイン
  2. ドメイン設定

難しいことはなく、ボタンを押すだけの簡単作業です。
それでは順番に解説していきますね。

まずは、エックスサーバー のインフォパネルにログインします。

ドメイン設定と確認

インフォパネルに接続したら、先ほど購入したドメインが追加されているかを確認しましょう。

こちらに表示されていれば、ドメインの購入が完了していることになります。

ドメイン設定

では、ドメイン設定を進めましょう。サーバーにある「サーバー管理」をクリックします。

ドメイン設定

サーバーパネルにログインしたら、右上にある「ドメイン設定」をクリック。

ドメイン設定

次に「ドメイン設定追加」をクリック。

ドメイン設定

  • ドメイン名に、先ほど取得したドメイン名を入力。
  • 無料独自SSLを利用する(推奨)にチェック
  • 高速化・アクセス数拡張機能「Xアクセラレータ」を有効にする(推奨)にチェック

上記の項目を全て確認し、確認画面へ進むをクリック。

ドメイン設定

追加するをクリック。

ドメイン設定

これでドメインの追加は完了です。
ドメイン設定一覧を確認して、追加されていればOKです。

ドメイン設定

ドメイン設定完了まで時間がかかる

ドメインの設定にはある程度時間がかかりますので、しばらく時間を置いてから確認しましょう。

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

設定が完了したら、Webブラウザに設定したドメイン(URLアドレス)を入力して、Webページにアクセスしてみましょう。

ドメイン設定が反映中の場合

ドメイン設定

上記のページが表示された場合は、反映中のためもう少し時間を置いて確認しましょう。

ドメイン設定が正常に完了した場合

ドメイン設定

上記のページが表示されたら、ドメインの設定が完了したことになります。
これで習得したドメインが、正しくWebページ上に表示されました。

無料独自SSLの設定に失敗しました。と表示された場合

別の設定画面から改めて無料独自SSL化する必要があります。

SSL化について、詳しくは下記の記事にて解説しています。

公開したWebサイトを独自SSL化でセキュリティ強化

SEO的にもセキュリティ的にも、独自SSL化は必ずしておきましょう。

SSL化

上記の部分ですね。

MEMO
  • アドレスのところに鍵マークがついている
  • 「https」となっている

上記の表示がされていれば、そのサイトは独自SSL化されていることになります。

やることは非常に簡単です。

STEP.1
エックスサーバーでボタンを押して設定
STEP.2
ドメインの転送設定
完了

独自SSL化の手順と、ドメインの転送設定(http://~~ → https://~~)について、下記の記事に詳しくまとめています。

HTMLファイルなどをアップロードしてWebサイトを公開

Webサイト公開のイメージ

さて、いよいよ最後になりました!
Webサイトを公開するまでもう少しです。

Webサイトを公開するためには、ファイルのアップロードが必要

Webサイトを公開するためには、エックスサーバーにHTMLファイルや画像データなどをアップロードしなくてはなりません。

FileZillaをダウンロード

ファイルをアップロードするためには、専用のソフトが必要になります。
今回は、私も利用している「FileZilla」を使ってアップロードする手順を説明します。無料で使えますのでご安心ください。

まず、下記のリンクより「FileZilla」をダウンロード&インストールしましょう。

ダウンロードが終わったら、インストーラーの手順に従ってインストールをしましょう。

FileZillaで必要なファイルをアップロード

インストールが完了したら、さっそくファイルをアップロードしてみましょう。
まずは、FileZillaを起動します。

FTPファイルアップロード

起動したら左上のアイコンをクリック。

FTPファイルアップロード

サイトマネージャーが開くので、「新しいサイト」をクリック。
サーバーの名前を決めて(なんでもOKです)、右側のホストなどの情報をいれていきます。

FTPファイルアップロード

接続に必要な情報は、エックスサーバー契約時のメールにて確認できます。

エックスサーバー契約時のメールをチェック
FTPファイルアップロード
このメールに記載されている、サーバーアカウント情報が必要になります。

FTPファイルアップロード

  • サーバー番号
  • サーバーID
  • サーバーパスワード
こちらの画面の下記の情報をFileZillaに入力します。

なお、こちらはXserverのサーバーパネルからも確認ができます
確認方法は下記の通りです。

エックスサーバーの管理画面でサーバーIDを確認する方法
  1. インフォパネルにログイン
  2. サーバー管理を選択
  3. FTPの「サブFTPアカウント設定」をクリック
  4. すべてのドメインの選択するをクリック
  5. FTPソフト設定をクリック

FTPファイルアップロード

必要な情報が確認できたら、情報をFileZillaに入力して接続をクリック。
無事に接続が完了すると、下記の画面になります

FTPファイルアップロード

設定したドメインと、同名のフォルダが存在する

いろんなフォルダが表示されていますが、先ほどのドメイン設定が完了していれば、この中に、先ほど設定したドメイン名と同じフォルダが存在するはずです。

そのフォルダをダブルクリックして階層を進んでみましょう。
するとこのような画面になります。

FTPファイルアップロード

この中に「public_html」があります。「public_html」フォルダの中に、ファイルをアップロードすれば、インターネットでそのファイルの中身が公開されます。

HTMLファイルや画像データをアップロードすれば、Webサイトの公開が完了です!

FTPファイルアップロード

ファイルのアップロード方法
ファイルは、ドラッグ&ドロップでアップロードできます。
既に入っている「index.html」は、エックスサーバーが用意したファイルなので、上書きしましょう。

ファイルのアップロードが完了したら、Webブラウザでコーディングした内容と同じものが表示されているか確認しましょう。

表示されていたら、正しくWebサイトが公開されたことになります。
これであなたのWebサイトがインターネットに公開されましたね!おめでとうございます!

Webサイトを公開するまでの手順まとめ

無事にあなたのWebサイトをインターネットで公開することができました。

もう一度、Webサイトを公開するまでの流れをおさらいしておきましょう。

STEP.1
サーバーを借りる
エックスサーバーを利用
STEP.2
ドメインを取得する
エックスドメインで簡単取得
STEP.3
ファイルをアップロードする
FTPを使ってファイルアップロード
完了

上記の手順を、一通りご紹介しました。
Webサイト公開の基本手順は、これにて完了です。

サイト制作では、Webサイトを公開するまでの作業は必ず必要な知識になります。
「Webサイトをインターネットに公開する」という手順を必ず実践しておきましょう。