こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。
読者の悩み
- ホームページ作成したけど、どうやってインターネット上に公開するの？
- 公開するにはドメインやサーバーが必要だと分かったけど、具体的にどうすればいいの？
インターネットに公開するためには、いくつかの大きな作業（ステップ）があります。
「サーバー」や「ドメイン」など聞きなれない単語も多く、初心者の方には挫折することも多いと思います。
本記事では、インターネットにWEBサイトを公開するまでの流れを整理し、各作業毎に詳しく手順を解説いたします。
頑張ってインターネットに公開するまで辿り着きましょう！
この記事を読んで分かること
- ホームページをインターネット上に公開する具体的な手順が分かる。
本記事の信頼性
- フリーランスとしてWeb制作をメインに仕事をしている。
- Web制作会社にてディレクターの経験もあり。
- 普段からエックスサーバー（XSERVER）を利用している。
Webサイトを公開するための予備知識
Webサイトを公開するには、いくつかの専門用語を理解する必要があります。
例えば。
| 公開用ファイル | Webサイトとしてインターネットに公開するファイル一式 |
| ドメイン | Webサイトがどこにあるかを判別する情報 |
| サーバー | ユーザーのリクエストに応じてデータやサービスを提供するコンピューター |
TERU少し分かりづらいですね。。
自分の身近なことに置き換えて考えてみましょう。
各要素の役割
- サーバー：土地
- ドメイン：住所
- SSL：鍵
- Webサイト：家
土地(サーバー)を契約して、住所（ドメイン）登録を行い、家（Webサイト）を立てる
TERUこんな感じに置き換えてみると、少しはイメージしやすくなると思います。
一般的なWebサイトの公開方法について
ここからは、一般的なWEBサイト公開までの手順を説明していきます。
Webサイト公開までには、大きく5つのステップをクリアする必要があります。
- レンタルサーバー契約
- ドメイン取得
- ドメイン設定
- SSL化（http→https）設定
- ファイルアップロード
各ステップの作業について、一つずつ説明します。
STEP1:レンタルサーバー契約
まずは土地であるサーバーの契約から進めていきます。
本記事では、当ブログでも使用しているXSERVER（エックスサーバー） 
を想定して手順を記載します。
サーバー（レンタルサーバー）は、自分が何を重要視するか（費用？or 安心？ or 性能？）によって、選択が変わります。
重要視するポイント（基準）の詳細については、下記の記事で解説しています。
国内シェアNo.1レンタルサーバー「エックスサーバー
」のお得なキャンペーン情報です。
2022年11月25日から2022年12月9日まで、利用料金最大30％オフキャンペーンを開催中です！
キャンペーン期間中にサーバーをお申し込みの方は、
「12ヶ月」のご契約で初回のご利用料金が《20％オフ》、
「24ヶ月」のご契約で《25％オフ》、
「36ヶ月」のご契約で、なんと《30％オフ》になります！
※8月4日からすべてのプランにおいて初期費用が廃止されています。
レンタルサーバー契約は下記の流れで行います。
- レンタルサーバーの申し込み
- お支払い方法の設定
レンタルサーバーサーバーの申し込み
手順①：XSERVER（エックスサーバー）
にアクセスして、画面右上の「お申し込み」を選択します。
手順②：「10日間無料お試し〜」を選択します。
手順③：お申し込みフォーム画面にて、プランの「スタンダード」が選択されていることを確認します。
※通常のWebサイトやWordPressブログは、スタンダードプランのスペックで十分です。
手順④：画面下の「Xserverアカウントの登録へ進む」を選択します。
手順⑤：アカウント情報の入力画面になるので、氏名、住所、電話番号など、必要情報を入力します。
キャンペーン情報などお知らせメールが不要な場合は、チェックを外しておきましょう
手順⑥：入力が完了したら、画面下の「次へ進む」を選択します。
手順⑦：入力したメールアドレス宛に6桁の数字のみ記載されたメールが届くので、数字を「確認コード」欄に入力して、「次へ進む」を選択します。
手順⑧：確認画面が表示されるので、入力内容に問題なければ、「この内容で申込みする」を選択します。
手順⑨：入力したメールアドレス宛にアカウント登録完了のメールが届きます。
件名：「【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間] 〜」
以上でサーバーのお申し込みは完了です。
手順①：「SMS・電話認証へ進む」を選択します。
手順②：「認証コードを取得するお電話番号」を入力し、「取得方法」を決めて、「認証コードを取得する」を選択します。
※ここでは、SMSでの取得方法にしています。
手順③：指定した取得方法で、認証コードが届きます。認証コードを入力してから「認証して申し込みを完了する」を選択します。
お支払い方法の設定
次にお支払い方法の設定を行います。
手順①：エックスサーバーの管理画面にアクセスします。
手順②：①「XserverアカウントID」と②登録したパスワードを入力し、「ログインする」を選択します。
| ①XserverアカウントID | アカウント登録完了メールに記載されています。 |
| ②パスワード | アカウント情報の画面で入力した値 |
手順③：管理画面の右上にある「料金支払い」を選択します。
手順④：料金支払い画面にて、対象サーバーをチェック（①）、更新期間を選択（②）し、「お支払い方法を選択する」を選択します。
Xserverの料金は、契約期間によって月額料金が変わってきます。
更新期間は長いほど、金額的にはお得になります。
※契約更新時に、期間を変更することは可能です。
※2022年9月時点の情報です。
出典：エックスサーバー｜高速・安定の高性能レンタルサーバー
手順⑤：あとは好きな決済方法を選択して、お支払いを完了させます。
お支払いが完了すれば、「STEP1:サーバー契約」の作業は全て完了です。
STEP2:ドメイン取得
次にWebサイトの住所にあたるドメインを取得します。
レンタルサーバーを契約すると「XXXX.xsrv.jp」のような初期ドメインが自動で割り当てられますが、自分の好きなドメイン名（独自ドメイン）を取得しましょう。
TERU独自ドメインから簡単にメールアドレスを作成することもできます
ドメイン取得に関するよくある疑問
- 初期ドメインとは？
-
初期ドメインとは、レンタルサーバーを契約すると一番初めにもらえるドメインのことです。
例えば、XSERVER（エックスサーバー）の場合、「XXXX.xsrv.jp」な感じの初期ドメインが割り当てられます。※XXXXは任意の文字列
基本的に初期ドメインは、レンタルサーバーが保有する本体ドメイン（ここでは、xsrv.jp）に紐づく形（サブドメイン）で割り当てられます。
- 独自ドメインとは？
-
独自ドメインとは、自分で希望する文字列を使用して作るオリジナルのドメインのことです。
※誰も使用していなければ、好きな文字列を指定することが可能です。企業や個人に関係なく、新たにサイトを作成する場合は、独自ドメインを使用することが一般的です
- 独自ドメインを取得するメリットは？
-
多くの人が独自ドメイン取得するのは、下記のメリットがあるからです。
独自ドメイン取得のメリット- 自分の好きな文字列を使用できる。
- ユーザーに対して信頼性や独自性が出る。（覚えてもらいやすい）
- レンタルサーバーを移行する際もドメインを引き継げる。
- 取得したドメインでメールアドレスが作成できる。
独自ドメイン取得の手順については、下記の２パターンあり、各記事で詳しく手順を解説しています。
- XSERVER（エックスサーバー）で独自ドメインを取得する
- 他サービス事業者で独自ドメインを取得する
XSERVER（エックスサーバー）で独自ドメインを取得する
XSERVER（エックスサーバー）が提供するドメイン取得サービスを利用する方法です。
既にレンタルサーバーの契約が済んでいる場合、３ステップで簡単に独自ドメインが取得できます。
- エックスサーバー（XSERVER）の管理画面にログイン
- 希望するドメインの空きを確認
- ドメインの購入手続き
詳しい手順は下記の記事で解説しています。
他サービス事業者で独自ドメインを取得する
XSERVER（エックスサーバー）以外のドメイン取得サービスを利用する方法です。
ここでは、ドメイン取得サービスでも一番有名な「お名前ドットコム」を利用する方法を解説します。
お名前ドットコムは、業界大手のGMOグループが運営する国内シェアNo.1のドメイン取得サービスです。
- 希望するドメインの空きを確認
- ドメインの購入手続き
詳しい手順は下記の記事で解説しています。
STEP3:ドメイン設定
ドメインの取得ができたら、ドメイン設定を行なっていきます。
ドメイン設定は、サーバー（土地）とドメイン（住所）を紐づける作業になります。
紐付けを行うことで、契約したレンタルサーバー上で独自ドメインが利用できるようになります。
ドメイン設定の手順は、どこでドメインを取得したかで設定方法が異なります。
- エックスサーバー（XSERVER）でドメイン取得した場合
- 他サービス事業者からドメイン取得した場合
ドメイン設定の手順については、下記の記事で解説しています。
STEP4:SSL化設定
ドメイン設定ができたら、SSL化設定を行います。
すごく簡単に言うとWebサイト（家）のセキュリティを向上させる作業になります。
SSL化設定を行うことで、利用者にWebサイトを安全に利用してもらうことができます。
SSL化設定は、２ステップで行います。
- エックスサーバー（XSERVER）でSSL化の設定
- 常時SSL化の対応（http→httpsへリダイレクト）
SSL化設定の手順については、下記の記事で詳しく解説しています。
STEP5:ファイルアップロード（公開）
最後にファイルアップロードを行います。
Webサイトとして用意した公開用ファイル一式（HTMLファイルや画像等）をサーバーにアップロードします。
これは、Webサイト（家）をサーバー（土地）上に立てる作業になります。
ファイルをアップロードする為に、レンタルサーバーへFTPを使って接続する必要があります。
- そもそもFTPとは？
-
FTPとは、ファイルをやり取り（アップロード・ダウンロード）する際に利用する通信プロトコルの一つです。
通信プロトコルは、ネットワーク通信をする際の決まり事（通信手順）です。
FTP通信のイメージ図
ファイルアップロードの具体的なステップは下記になります。
- FTPソフトのインストール
- エックスサーバー（XSERVER）への接続情報を確認
- FTPソフトを使用してエックスサーバー（XSERVER）へ接続
- 公開用ファイルのアップロード
各ステップの詳細な手順については、下記の記事で解説しています。
ファイルアップロードが完了すると、インターネット上にWebサイトが公開されます！
WordPressで作成したWebサイトの公開方法について
ここでは、WordPressで作成したWEBサイトの公開方法について解説します。
- レンタルサーバー契約
- ドメイン取得
- ドメイン設定
- SSL化（http→https）設定
- WordPressのインストール
- WordPressの初期設定
- WordPressのページ作成
- WordPressデータの移行（データ移行が必要な場合のみ）
STEP1~STEP4については、上記の「一般的なWEBサイト公開の方法」と同じ手順なので割愛します。
STEP5~STEP7について一つずつ解説します。
WordPressのインストール
他のレンタルサーバでWordPressをインストールする場合は、下記の記事を参考にしてください。
手順①：エックスサーバーの管理画面にアクセスします。
手順②：①「XserverアカウントID」と②登録したパスワードを入力し、「ログインする」を選択します。
手順③：管理画面から「サーバー管理」を選択します。
手順④：サーバーパネルから「WordPress簡単インストール」を選択します。
管理画面上から値を入力するだけでWordPressが自動でインストールできる機能です。
エックスサーバー（XSERVER）から標準機能として提供されています。
手順⑤：ドメイン選択画面にて、WordPressをインストールするドメインを選択します。
手順⑥：WordPress簡単インストール画面にて、「WordPressインストール」タブを選択し、下記の必要情報を入力します。
| 項番 | 項目名 | 説明 |
|---|---|---|
| 1 | ブログ名 | サイトタイトルを入力します。 |
| 2 | ユーザー名 | WordPressで使用する管理ユーザーのユーザー名を入力します。 |
| 3 | パスワード | WordPressで使用する管理ユーザーのパスワードを入力します。 |
| 4 | メールアドレス | WordPressで使用する管理ユーザーのメールアドレスを入力します。 |
手順⑦：必要情報を入力したら、画面下の「確認画面へ進む」を選択します。
※必要情報以外はデフォルトで大丈夫です。
手順⑧：確認画面が表示されるので「インストールする」を選択します。
手順⑨：「WordPressのインストールが完了しました。」の文言が表示されれば、インストール完了です。
サブディレクトリにWordPressをインストールしたい場合は、「サイトURL」にディレクトリ名を入力します。 例）「teru1213.online/test」にWordPressをインストール
WordPressの初期設定
WordPressのインストールが完了した後は、初期設定として下記の作業を行います。
- WordPress側でのSSL化対応
- 不要プラグインの削除
- WordPressテーマの設定
- 移行用プラグインのインストール＆有効化（データ移行が必要な場合）
WordPress側でのSSL化対応
「STEP4:SSL化設定」にて、対象ドメイン（今回だとteru1213.online）のSSL化対応は完了しています。
ただWordPressサイトの場合は、WordPress側での対応も必要になります。
手順①：インストール時にメモした管理画面URLにアクセスし、WordPressにログインします。
手順②：管理画面のメニューから「設定」-「一般」を選択します。
手順③：一般設定画面にて「WordPressアドレス（URL）」と「サイトアドレス (URL)」の値を「http〜」→「https」に変更します。
手順④：最後に画面下の「変更を保存」を選択し、設定完了です。
不要プラグインの削除
手順①：管理画面のメニューから「プラグイン」-「インストール済みプラグイン」を選択します。
手順②：プラグイン一覧画面にて初期インストールされているプラグインを削除します。
- Akismet Anti-Spam (アンチスパム)
- Hello Dolly
- TypeSquare Webfonts for エックスサーバー
手順③：削除対象プラグインの下に表示されている「削除」を選択します。
ポップアップが表示されるので、「OK」を選択します。
他の削除対象プラグインに対しても同じ作業を実施します。
手順④：プラグイン一覧画面にて、プラグインが全て削除されれば、作業完了です。
WordPressテーマの設定
WordPressには、テーマと呼ばれるテンプレートを利用します。
テンプレートには、Webサイトのデザインや構成、機能が備わっており、技術者でなくても簡単におしゃれなサイトが作れるようになっています。
WordPressテーマは種類として3パターンあり、どれか一つのテーマを設定します。
| テーマの種類 | 概要 |
|---|---|
| 無料テーマ | 無料提供されているテーマ デフォルトテーマも無料 代表的なテーマ：「Cocoon」、「Lightning」 |
| 有料テーマ | 有料販売されているテーマ 相場は10,000円〜20,000円 代表的なテーマ：「SWELL」、「Snow Monkey」 |
| 自作テーマ | 自作で作るテーマ オリジナルデザインのサイト制作で利用 |
有料テーマは、初期費用はかかりますが、無料テーマと比較すると機能性や更新性の高さ、サポートが充実しています。
例えば、当ブログでは有料テーマの「SWELL」を利用しています。
- とにかくブログが書きやすい。
- 簡単な設定や操作で、SEO対策ができる。
- デザインスキルが無くてもシンプルでおしゃれなブログが作れる。
導入することで記事作成に集中できるので、本気でブログに取り組むのであればオススメです！
自作テーマは、オリジナルデザインでサイト制作する場合に自ら作成するテーマです。 自作テーマを作るには、WordPressの仕様を理解するのとプログラミング技術がある程度必要になってきます。
僕自身は、自作テーマを作成する上で下記の講座がすごく参考になりました。
移行用プラグインのインストール＆有効化（データ移行が必要な場合）
ローカル環境でWordPressを構築する方法については、下記の記事で解説しています。
WordPressデータの移行に使用するプラグインをインストールしておきます。
手順①：プラグイン一覧画面から「新規追加」を選択します。
手順②：プラグインを追加画面にて、検索ボックスに「All-in-One WP Migration」と入力します。
手順③：検索結果画面から「All-in-One WP Migration」の「今すぐインストール」を選択します。
手順④：インストール完了後に「有効化」を選択します。
以上でWordPressの初期設定が全て完了です。
WordPressのページ作成
初期設定が完了すると、最後にページ作成を行います。
WordPressでは、ページの種類として２パターンあります。
| ページ種類 | 概要 |
|---|---|
| 固定ページ | 「TOPページ」や「会社概要」などカテゴリに属さない独立したコンテンツを作成する時に使用します。 |
| 投稿記事 | ブログやお知らせなど、後から追加して行くタイプのコンテンツを作成する時に使用します。 カテゴリやタグを使ってコンテンツをグループ分けすることができます。 |
ブログサイトを作る場合は投稿記事をメインに利用します。
コーポレートサイトやサービスサイトを作る場合は、固定ページをメインで利用し、お知らせや実績など後から増えていくコンテンツ箇所のみ投稿記事を利用する形が多いです。
WordPressの使い方やページの作り方については、「【初心者でも安心】たった10分で出来るWordPressブログの始め方
」のサイト内で網羅的にカバーされているので参考にしてみてください。
WordPressデータの移行（データ移行が必要な場合のみ）
別環境で作成したWordPressサイトのデータを移行します。
【移行元】ローカル環境のWordPressでデータのエクスポート
手順①：管理画面から「All-in-One WP Migration」-「エクスポート」を選択します。
手順②：エクスポート画面にて、「エクスポート」-「ファイル」を選択します。
手順③：ポップアップ画面を選択するとファイルのダウンロードが開始されます。
【移行先】レンタルサーバー上のWordPressにデータをインポート
手順①：管理画面から「All-in-One WP Migration」-「インポート」を選択します。
手順②：インポート画面にて、ローカル環境でエクスポートした「XXXXX.wpress」ファイルを選択または、ドラッグ＆ドロップします。
手順③：ポップ画面が表示されるので「開始」を選択します。
手順④：移行完了のポップ画面が表示されるので「完了」を選択します。
以上でWordPressで作成したサイトの公開作業が完了です。
WEBサイト公開に関するよくある疑問
WEBサイト公開に関して、よく聞かれる疑問について下記に記載します。
- WEBサイトを公開するために費用はどれくらいかかりますか？
- 費用をかけずに無料でWEBサイトを公開する方法はありますか？
- Google検索に出てきません、どうすればいいですか？
- WEBサイトを公開するために費用はどれくらいかかりますか？
-
大体、月1,500円程度の費用になります。
WEBサイトを公開するためにかかる費用の内訳は、レンタルサーバー代と独自ドメイン代の２つです。
レンタルサーバー代は、どのレンタルサーバーでも月1,000円前後で利用可能です。
※通常のコーポレートサイトを運用する場合のプランを想定月1,000円前後で利用可能なレンタルサーバーは、下記の記事でも解説しています。
あわせて読みたいもう迷わない！ポートフォリオ用レンタルサーバーの選び方【WEB初学者向け】 こんにちはTERUです。フリーランスでWEB制作（コーディングとディレクション業務）をしています。 読者の悩み ポートフォリオ用のレンタルサーバー選びの基準がよくわか…独自ドメインは、ドメインの種類(.com,.jpなど)によって変わりますが月100円〜300円程度で利用可能なものが大半です。
なのでトータルで月1,500円ぐらいは、Webサイトを公開するための費用として考えておく必要があります。
- 費用をかけずに無料でWEBサイトを公開する方法はありますか？
-
あります。
個人サイトでとりあえず費用をかけずにお試しでWEBサイトを公開したい場合、下記のレンタルサーバーであれば無料で利用可能です。
レンタルサーバー Xfree
（エックスフリー）StarServerFree
（スターサーバーフリー）XREA Free
（エクスリアフリー）運営会社 エックスサーバー株式会社 ネットオウル株式会社 GMOデジロック社 公式サイト https://www.xfree.ne.jp/ https://www.star.ne.jp/free/ https://www.xrea.com/ 無料のレンタルサーバー 無料で利用できるレンタルサーバーには共通の特徴があります。
- ディスク容量等のサーバーリソースは、必要最低限しかない。
- WordPressや独自ドメインも利用できが、公開したサイト内に広告が表示される。
- サポート対応は提供されていない。
基本的に有料のレンタルサーバーを使用するのが、機能面やサポート面を考慮してもオススメです。
TERU企業のコーポレートサイトやサービスサイトは必ず有料のレンタルサーバーを契約しましょう
- Google検索に出てきません、どうすればいいですか？
-
Google検索に表示されるには、検索エンジンにURLを登録してもらう必要があります。
１〜２ヶ月たっても検索結果に表示されない場合、原因と対策を考える必要があります。
まずGoogleの検索エンジンは下記の仕事をインターネット上で行なっています。
検索エンジンのプロセス- URLの発見（ディスカバー）
- URLの解析（クロール）
- URLの登録（インデックス）
- 順位付け（ランキング）
Google検索に出てこない原因は大きく２つ考えられます。
- Googleの検索エンジンがサイトを発見できていない。
- Googleの検索エンジンがサイトを発見したけど低品質なコンテンツと判断しURL登録していない。
対策としては、下記の3点が挙げられます。
- Googleサーチコンソールから登録申請を行う。
- 他のWebサイトからリンクを貼ってもらう。
- 定期的にコンテンツを追加する。
Googleサーチコンソールから登録申請を行う。
Googleサーチコンソールは、Googleが無料で提供しているアクセス解析ツールです。
Googleサーチコンソールに公開したWebサイトを登録して利用することで、検索エンジンに対して、「サイトを登録してください！」とリクエストを出すことができます。
Googleサーチコンソールの登録や設定方法は下記のサイトが参考になります。
2022年版｜Googleサーチコンソールの使い方（登録・設定方法も解説）他のWebサイトからリンクを貼ってもらう。
他のWebサイトにリンクを貼ってもらうことで検索エンジンからサイトを見つけてもらいやすくなります。
また、他のWebサイトからリンクをもらうことで、検索エンジンに「外部サイトからおすすめされた質の高いサイト」と評価してもらうことにつながります。
定期的にコンテンツを追加する。
定期的にコンテンツを追加するのが、一番確実な方法です。
ブログの場合、定期的に新規記事を投稿していけば検索エンジンに見つけてもらえる可能性は高くなります。
コーポレートサイトの場合は、月初めに営業日のお知らせを出したり、実績紹介など、お知らせ記事をなるべく増やしましょう。
まとめ
今回は、Webサイトを公開する方法について下記２パータンを具体的に解説しました。
- 一般的なWebサイトの公開方法
- WordPressで作成したWebサイトの公開方法
- サーバー契約
- ドメイン取得
- ドメイン設定
- SSL化（http→https）設定
- ファイルアップロード
- サーバー契約
- ドメイン取得
- ドメイン設定
- SSL化（http→https）設定
- WordPressのインストール
- WordPressの初期設定
- WordPressのページ作成
- WordPressデータの移行（データ移行が必要な場合のみ）
初めての方は、一度で理解するのは難しいと思います。
本記事では、公開までの流れを網羅的に記載して、なるべく各ステップの手順を別記事で詳しく解説しています。
TERU分からなくなったら、何度でも見返してもらえればと思います。
お疲れ様でした。以上です。