初心者でも簡単!ホームページ公開の全手順をイラスト入りで徹底解説

ホームページを公開するまでには、大きく分けて5つのステップがあります。

どの工程も、初心者にとっては難しい内容が含まれており、なかなか理解するのは難しいかもしれません。しかし全ての工程が重要であるため、しっかり理解する必要があります。

 

この記事では、用語が分からない超初心者でもスムーズにホームページを公開できるよう、最低限必要な手順に絞って分かりやすく解説しました。

  • ホームページを作る3つの方法ごとに流れを解説
  • ホームページを公開する全5ステップを解説


初心者でも分かるよう、難しい言葉を使わないで説明しました。「他のページを読んでみたけど、良く分からなかった」という方でも、誰でも理解できるページになっているはずです。

 
ホームページのコンテンツ(中身)さえ準備できれば、あとはこの記事に従って行えば、誰でも簡単にホームページを公開できます。

 

また、「HTMLファイルを用意して公開する方法は難しい」という方のために、記事の後半では5分で公開できるサービスについても紹介しています。ぜひ参考にしてみてください。

1. ホームページを公開する流れ

ホームページをHTMLで作るのか、WordPressなどのCMSで構築するのかによって、ホームページ公開手順は少し違ってきます。大きな流れを以下の画像で確認してみましょう。

ホームページを公開する流れ HTML / CMS / 作成サービス

ホームページを作る主流の方法は、HTMLという言語を使って作成する方法です。この場合は、先にコンテンツを作りこんで完成させた後、それらのファイルをサーバーに転送します。一方、WordPressで作成する場合は、WordPressをインストールした時点でホームページの雛型が出来上がっていて、公開後に内容を修正していくイメージです。

 

また、ホームページ作成サービスを使う場合は、サービス登録後にウェブ上でコンテンツを修正するだけで簡単にホームページを公開することができます。

2. ホームページ公開までの全5ステップを解説

HTMLファイルを用意してホームページを公開する一般的な方法について、5つのステップに分けて解説していきます。

5つのステップ:サーバーを契約する・ドメインを取得する・コンテンツを作成する・サーバーに転送する・Googleに情報を送信する

WordPressを使ったホームページ公開手順は「3. WordPressでホームページを公開する手順を解説」で解説します。また、簡単ステップでホームページが作成できる方法を「4. ホームページ作成サービスなら5分で公開できる」で解説しています。

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

ホームページを公開するためには、インターネット上のスペースを有償で借りる必要があります。そのために用意するのが「レンタルサーバー」です。

 

レンタルサーバーにはたくさん種類がありますが、初心者が選ぶ場合は、

  1. WordPress簡単インストールの機能がある
  2. 独自ドメインを同時に取得できる
  3. 電話サポートがある

この3つを満たしているレンタルサーバーを選べば安心です。

 

【レンタルサーバーを契約する手順】

1ホスティングサービスにアクセス 2必要なプランを選ぶ 3申し込む

最初の2週間程度はお試し期間として無料で使えるレンタルサーバーがほとんどです。無料期間中にホームページの表示スピードなどをチェックし、問題ないか確認した上で本採用を決めると良いでしょう。

【初心者におすすめのレンタルサーバー3選】

2-2. ドメインを取得する

メインとはインターネット上の住所のようなものです。「https://www.●●●.com」の「●●●.com」の部分がドメインにあたり、「.com」「.net」「.info」などさまざまなドメインがあります。例えば、今あなたが見ているこのページのドメインは「jimdo.com」です。

 

ドメインには、無料で使える「初期ドメイン」と、有料で購入する「独自ドメイン」があります。

ドメインには二種類ある 1初期ドメイン 2独自ドメイン

ビジネスで利用する場合は、オリジナルで名前を決められる独自ドメインを購入した方が良いでしょう。企業ホームページのアドレスが無料ドメインだと、顧客が「この会社は大丈夫かな?」と不安に感じてしまう恐れがあるからです。

 

ドメイン取得とレンタルサーバーを別のサービスで用意することもできますし、ドメイン取得と同時にレンタルサーバーを契約することもできます。

2-2-1. 無料の初期ドメインを使う場合

初期ドメインとは、多くのレンタルサーバーで契約した時に全員に割り当てられるドメインのことで、無料で使うことができます。

 

例として「さくらのレンタルサーバ」を契約した場合について考えてみましょう。初期ドメインとして「●●.sakura.ne.jp」が与えられ、このドメインは無料で使うことができます。

【初期ドメインを使う手順】

【初期ドメインを使う手順】1レンタルサーバー会社を選び契約する / 2使いたいサブドメインを選ぶ / 契約完了で付与される
【無料ドメインを取得できるレンタルサーバー3選】

2-2-2. 独自ドメインを使う場合

独自ドメインを購入すれば、好きなオリジナルドメインを選ぶことができます。例えば企業名が「ジンドゥー商事」なら、「jimdo-shoji.inc」「jimdo.co.jp」など好きなドメインをホームページのアドレスに付けられるのです。

 

ただしドメインは早いもの順で、希望のドメインを先に使っている人がいると取得できません。使いたいドメインが決まったら、早めに取得することをおすすめします。

 

【有料ドメインを取得する手順】

【有料ドメインを取得する手順】1ドメイン取得サービスにアクセスする 2取得したいドメインを検索する 3価格を確認して購入する

独自ドメインの価格は種類によって幅がありますが、取得費(初年度の1年間)30円~3,000円程度、更新費(2年目以降の1年間)1,000円~5,000円程度が一般的です。

【独自ドメインを取得できるサービス2選】

  • お名前.com
    レンタルサーバーと同時申込で、独自ドメインが実質無料
  • ムームードメイン
    ロリポップレンタルサーバーと同時申込で、独自ドメインがもらえるキャンペーンあり

2-3. ホームページのコンテンツを作成する

ドメインとレンタルサーバーを用意するのと平行して、ホームページのコンテンツを作成し、アップロードする準備を整えます。具体的には、HTMLファイル・CSSファイル・画像ファイルなどを用意します。

 

【ホームページのコンテンツを作成する手順】

【ホームページのコンテンツを作成する手順】1ホームページ全体と各ページの構造を決める 2画像やテキストを用意する 3デザインを作成する 4ソースコードを書く・コーディング作業を行う

自分でホームページを作るのはかなり難易度が高いため、初心者の方はホームページ制作会社に作成を依頼すると良いでしょう。

 

また、初心者でもブラウザ上で簡単にホームページを作ることができる「ホームページ作成サービス」を活用する方法もあります。この方法については、「4. ホームページ作成サービスなら5分で公開できる」をご覧ください。

2-4. ファイルをサーバーに転送する

ドメインとレンタルサーバーを準備し、ホームページのコンテンツも完成したら、いよいよファイルをサーバーにアップロードします。データを転送するために必要な「FTPソフト」をインストールし、レンタルサーバーにアクセスするための権限などを設定し、アップロードを行います。

【ファイルをサーバーに転送する手順】

【ファイルをサーバーに転送する手順】1FTPソフトをインストール 2FTPソフトにレンタルサーバーの権限情報などを設定する 3ファイルを選択し、レンタルサーバーにまとめて情報を転送する

手順だけ見ても難しいと思いますので、ここでは「FFFTP」というソフトを使って、手順を詳しく紹介します。

2-4-1. パソコンにFTPソフトをインストールする

まず「窓の杜」から「FFFTP(無料)のソフトをダウンロードします。ダウンロードした実行ファイルをクリックし、自分のパソコンにソフトをインストールしてください。

今回紹介しているFFFTPはWindows用のソフトですが、FileZillaなどWindows、Macそれぞれ提供しているソフトなどもありますので、使いやすいものをお使いください。

インストールが完了したら「FFFTP」を起動します。

2-4-2. レンタルサーバーの権限情報などを設定する

「新規ホスト(N)」をクリックし、レンタルサーバーの情報を入力します。

  • 【ホストの設定名(T)】
    お好みの文字列で構いません。
  • 【ホスト名(アドレス)】
    レンタルサーバーのマニュアルに従って設定してください。

    例:ロリポップサーバーの場合は、「ftp.lolipop.jp」を入力
  • 【ユーザー名】
    レンタルサーバーのマニュアルに従って設定してください。
    例:ロリポップサーバーの場合は、「FTP・WebDAVアカウント」を入力
  • 【パスワード】
    レンタルサーバーに設定したパスワードを入力してください。
  • 【ローカルの初期フォルダ(L)】
    作成したホームページのデータが保存してあるディレクトリを指定します。
  • 【ホストの初期フォルダ(R)】
    サーバー側にあるディレクトリを指定します。ここで指定したディレクトリがサーバー側のファイル一覧で最初に表示されます。特に指定しなくてもOKです。

2-4-3. ファイルを選択し、まとめて情報を転送する

接続できたら、アップロードするファイルをマウスで全て選択し、「↑」マークのアップロードボタンをクリックします。

転送には時間がかかりますが、「ファイルの一覧の取得は正常終了しました」と表示され、右側にもファイルが表示されれば転送完了です。

 

無事に転送が完了した後、取得したドメインのURLにアクセスすると、ホームページが見られる状態になっているはずです。もし表示されない場合は、ブラウザのキャッシュを削除し、再度確認してみましょう。

 

これで、ホームページの公開は完了です

2-5. Googleにホームページの情報を送信する

上記までで公開は完了していますが、少しでも早くGoogleの検索結果に表示してもらえるよう、サイトマップの送信を行いましょう。

 

実は公開直後すぐには、Googleなどの検索エンジンで検索される状態にはありません。Googleなどの検索エンジンは、クローラーというロボットがインターネット上を巡回して、新しいホームページの情報を取得しています。ロボットが新しいホームページの情報を取得し、検索結果に表示されるまでは、数日から数ヵ月程度かかるといわれています。

 

「新しくホームページを作ったよ」ということをクローラーに伝えるために、sitemap.xmlというホームページの構造を記したファイルを作って自分のサーバーにアップロードし、そのアドレスをGoogleに送信します。

 

【Googleにホームページの情報を送信する手順】

【Googleにホームページの情報を送信する手順】1サイトマップファイルを作成する 2作成したXMLファイルをサーバーにアップロード 3Google Search Console に登録しログインする 4サイトマップメニューからXMLファイルのURLを登録する

手順だけ見ても難しいと思いますので、実際にキャプチャ画像を見ながら手順を詳しく確認していきましょう。

2-5-1. ホームページのXMLファイルを作成する

まず、ホームページの構造がどうなっているかを記したXMLファイルというものを作成します。これには「sitemap.xml Editor」を使います。

出典:サイトマップ自動生成ツール「sitemap.xml Editor」

サイトにアクセスしたら、「https://」の部分に自分のホームページのアドレスを入力します。必要ならオプション設定を変更し、「サイトマップ作成」ボタンを押します。

 

作成が完了したら、以下のような表示が出ます。

「sitemap.xml」の部分をクリックするとXMLファイルをダウンロードできます。

 

ダウンロードしたXMLファイルは、他のHTMLファイルなどと同じフォルダに入れておくと良いでしょう。

2-5-2. XMLファイルを、サーバーにアップロードする

作成XMLファイルを、FTPソフトを使ってサーバーのルートディレクトリ(最上階層のフォルダのこと)にアップロードします。

2-5-3. 「Google Search Console」に登録・ログインする

次に、このXMLファイルの場所をGoogleに連絡します。そのためにはまず「Google Search Console」というサービスに登録する必要があります。

 

「Google Search Console」は、ホームページが正しくクローラーに認識できる状態にあるか把握したり、どのようなキーワードでホームページが検索されているかを調べたりできる便利なツールです。ホームページを公開した後も定期的にチェックし、エラーを潰していくことで、ホームページをより良い状態に保つことができます。

出典:Google Search Console

Google Search Consoleの登録手順は以下の通りです。

  1. Google Search Console」にアクセスし、「今すぐ開始」をクリックする
  2. Googleアカウントでログインする(アカウントが無い場合は、登録してください)
  3. 画面左上の「プロパティを検索」内の「プロパティを追加」をクリック
  4. ホームページのURLを「URLプレフィックス」へ入力し「追加」
  5. 指定されたHTMLタグをコピーして、ホームページの<head>の部分に貼り付ける
  6. 貼り付けたファイルをアップロードしたら、Google Search Consoleで「完了」をクリック

これで、XMLファイルを登録する準備が整いました。

2-5-4. XMLファイルのURLを登録する

「Google Search Console」の左のメニューから「サイトマップ」を選択します。

「Google Search Console」の左のメニューから「サイトマップ」を選択します。

「新しいサイトマップの追加」と表示された枠に、先ほどアップロードした「sitemap.xml」を入力し、送信ボタンを押します。

 

送信が完了すると「完了しました」というメッセージが出て、追加したサイトマップの状況が表示されるようになります。

送信されたサイトマップ

最初はステータス欄が「保留」となりますが、時間が経つと「成功しました」に変わります。少し時間を置いてから、ステータスが変わっているか確認してみてください。時間が経っても「保留」のままの場合は、XMLファイルのURLが正しく入力されているか確認しましょう。

 

これで、ホームページ公開までの全てのステップが終了です。

3. WordPressでホームページを公開する手順を解説

次に、ホームページをWordPressで作成する場合の公開手順について解説します。WordPress(ワードプレス)とは、ホームページやブログを作るための仕組みのひとつで、現在では世界のホームページの30%がWordPressで作られているといわれています。

HTMLで作る場合と、ワードプレスで作る場合の手順の比較

WordPressでホームページを作るための手順は

①サーバー契約→②ドメイン取得→③WordPressインストール→④コンテンツ修正→⑤Google送信

 

となり、2章で解説したHTMLファイルの公開手順と③④が異なります。

 

HTMLファイルで作る場合は先にコンテンツを作りこんで完成させた後、それらのファイルをサーバーに転送します。一方、WordPressで作成する場合は、WordPressをインストールした時点でホームページの雛型が出来上がっており、公開後に内容を修正していくイメージです。

 

既に手順を紹介している部分を省き、③WordPressインストールと④コンテンツ修正の手順について解説します。

3-1. WordPressをインストールする

WordPressを使ってホームページを作る場合、サーバーにWordPressをインストールする作業が必要です。このインストールの作業は普通に行うと初心者にとってかなりハードルが高い難しい作業となります。

【参考】通常のWordPressインストールの手順(実際に行う必要はありません)

  1. WordPressの公式サイトから最新版をダウンロードする
  2. レンタルサーバーに、ダウンロードしたWordPressをアップロードする
  3. MySQLサービスに登録し、新規データベースを作成する
  4. WordPressフォルダの中のwp-config-sample.phpファイルを開く
  5. 3で作成したデータベースの情報を入力する
  6. ファイル名をwp-configに変更して、サーバーにアップロードする
  7. WordPressのURLにアクセスして、タイトルやメールアドレスを登録する
  8. 7. インストール完了

初心者だと設定に1~2時間ほどかかる、難しく入り組んだ作業です。そこで、初心者の方には「WordPress簡単インストール」に対応したサーバーの利用をおすすめします。簡単インストール機能を使えば、最短60秒でインストールを完了させることが可能です。

 

「2-1. レンタルサーバーを契約する」で解説した3つのおすすめサーバーは全て、簡単にWordPressをインストールできる機能を備えています。

【初心者におすすめのレンタルサーバー3選】


例として、ロリポップレンタルサーバーを使ってWordPressをインストールする方法を解説します。

【WordPress簡単インストールの手順(ロリポップレンタルサーバーの場合)】

【WordPress簡単インストールの手順(ロリポップレンタルサーバーの場合)

1 ロリポップにログイン 2 インストール先を選択し、ワードプレスのタイトルなどを設定 3 入力した情報を確認し、インストールボタンを押す 4 60秒で完了

通常のインストール方法だと1~2時間かかる作業が、簡単インストールなら60秒で済みます。初心者の方はもちろん、時間を有効に使いたい方にも、簡単インストール機能があるレンタルサーバーの利用を強くおすすめします。

3-2. コンテンツを編集する

WordPressのインストールが完了すると、ホームページの雛型とサンプルページができあがっている状態になっています。そこにさまざまな編集を加えて、オリジナルのホームページへと仕上げていきましょう。

【WordPressコンテンツを編集する手順】

【WordPressコンテンツを編集する手順】1ホームページのタイトル・アドレスなどを設定する 2 投稿予定など設定を行う 3 必要なプラグインをインストールする 4 テーマを選び、必要ならデザインの調整をする  5 カテゴリーの「未分類」に名前をつける 6 記事を書く

さまざまな設定を行って、ようやくホームページの公開が完了します。

 

WordPressはかなり自由にカスタマイズできる仕組みなので、細かく解説するとキリがないほどに手順が膨大にあります。自分好みに手を入れたい方にはピッタリですが、初心者には機能が多すぎて難しいかもしれません。

4. ホームページ作成サービスなら5分で公開できる

ここまで説明したホームページ公開方法を見て「結構大変だなあ」と感じた方も多いのではないでしょうか。自力でホームページを公開するには、かなりの労力と時間が必要です。

 

そこで、もっと簡単にホームページを作りたいという方には、ホームページ作成サービスを使う方法があります。

HTMLで作る場合と、ホームページ作成サービスで作る場合

ホームページ作成サービスとは、ブラウザ上で文字や画像を入れ替えるだけで簡単にホームページを作成できるサービスのことです。「ジンドゥー(Jimdo)や「Wix」、「グーペ」などのサービスが有名です。

 

HTMLで作る場合は、手順が複雑で、ホームページ完成までに大体1カ月~数カ月程度かかります。しかし、ホームページ作成サービスを使えば、簡単3ステップで作成でき、最短5分でホームページが完成します。

難易度の違い

比較表を見れば、ホームページ作成サービスの簡単さが一目瞭然です。サーバーやドメインはサービス内で用意できますし、難しいコンテンツ作成もブラウザ上で超簡単に行えます。難しいサーバー転送も全く必要ありません。

 

HTMLが難しいと感じた方や簡単なホームページで構わないという方は、迷わずホームページ作成サービスを使いましょう。

5. 3ステップで作れる!ホームページ作成サービスの手順

実際にホームページを公開するまでの手順を見てもらうと、どれほど簡単かイメージしやすいでしょう。ここでは170万人ユーザーする最大級のホームページ作成サービス「ジンドゥー(Jimdo)」を例に、公開までの手順を紹介します。

 

【ホームページ作成サービスを使ってホームページを公開する手順】

1アカウントを作成し、ホームページの目的や必要なコンテンツなどを選ぶ 2出来上がったベースをもとに、文字や画像をブラウザ上で入れ替えていく 3更新して公開完了

5-1. アカウントを作成して目的などを選ぶ

まずは「ジンドゥー(Jimdo)」のホームページにアクセスします。

出典:ジンドゥー(Jimdo)

「無料ホームページを作成」をクリックし、メールアドレスとパスワードを入力してアカウントを作成します(FacebookやGoogleのログイン情報を連携することも可能)。

 

初心者でも簡単にホームページを作るには、
「ホームページを作成」→ジンドゥー AI ビルダーを選択しましょう。

 

その後、ホームページのターゲットや目的、企業名、内容、好みの色、必要なコンテンツなどを選択していくと、仮のホームページが出来上がります。

 

ジンドゥー AI ビルダー

登録からわずか3分ほどで、このような本格的なホームページの雛型が出来上がります。

5-2. 文字や画像を入れ替えていく

あとは、ブラウザ上で変更したい文字や画像をクリックし、必要な文言や画像に差し替えていきましょう。

ジンドゥー AI ビルダー 編集画面 見たままの編集で直感的

ブラウザで直感的に操作できるので、HTMLコードなどが分からない全くの初心者でも、簡単にホームページを編集できます。

5-3. 更新ボタンを押してホームページを公開する

必要な修正が終わったら、画面の右上にある「更新」ボタンを押すと、ホームページを全世界に公開することができます。

 

これで、ホームページの公開が終了です。

 

無料プランでも500MBのサーバー容量が自動で与えられ、無料で「〇〇.jimdosite.com」というドメインを取得することができます。有料プランに移行すれば独自ドメインを設定することもできますし、ジンドゥー(Jimdo)のサービス内から簡単にドメイン取得が可能です。

 

初心者でもホームページを自分で作りたいという方は、ホームページ作成サービスを活用してみてはいかがでしょうか。

 

ジンドゥー(Jimdo)でホームページを作る

6. まとめ

この記事では、ホームページを公開するまでの手順を解説しました。

 

HTMLを使ってコーディングを行う一般的なホームページでは、公開までに以下のような5ステップを踏みます。

公開までの5ステップ

ホームページを公開するのは初心者には難しい手順が多いため、不安な方はホームページ制作会社に公開を依頼するのも手です。また、誰でも簡単にホームページが作れる「ホームページ作成サービス」を使うという選択肢もあります。

 

ホームページ作成サービスを使えば、一般的なHTMLファイルを作成する方法と比べて格段に簡単にホームページを作ることができます。

170万ユーザーが利用するホームページ作成サービス「ジンドゥー(Jimdo)」について、より詳しく知りたい方は、サービス案内もぜひご覧になってみてください。