Webサイトの公開手順を解説
最終更新日
ローカル環境で制作したHTMLサイトをサーバー上で公開する手順について、各ステップごとに解説していきます。
サイト公開後にやっておくべきことも記載していますので、こちらも必ず目を通しておいてくださいね。
目次
①：サーバーを準備する
Webサイトを公開するためには、作ったHTMLファイルをアップするためのサーバーが必要です。
サーバーの種類には色々なものがありますが、HTMLサイトやWordPressサイトを公開する場合は、一般的に「レンタルサーバー」を使用します。
レンタルサーバーには下記の2つがあります。
- 無料サーバー
- 有料サーバー
無料サーバー
無料で使えるレンタルサーバーです。
ただし、一般的に下記のような制約があります。
- 容量が少ない
- SSLが使えない
- サポートがない
- メールアカウントが作れない
- サイトに広告が表示される
- 商用利用できない場合がある
自分が作ったものを試しに表示させてみたい場合など、勉強のために使う分にはよいですが、仕事での使用はおすすめしません。
有料サーバー
仕事で使用する場合は、一般的にはこちらの有料レンタルサーバーを使用します。
とはいえ、レンタルサーバーの会社は何十社とありどこを選べばいいか迷うと思いますので、Web制作の仕事で使用する場合は、下記のポイントを基準に選んでください。
＜レンタルサーバー契約時のチェックポイント＞
- 安定性がある
- 表示速度が速い
- 無料独自SSLに対応している
- WordPressが簡単にインストールできる
- データベースが無制限に作れる
- マルチドメインが無制限に使用できる
- ある程度ディスク容量がある
- 自動バックアップがある
- 電話サポートがある
サーバー会社の数は本当に多いので、Web制作を仕事にしていきたいと考えている方は、上記のような項目を参考に色々な会社を比較してみると良いです。
ちなみに、Codejumpで使用しているレンタルサーバーも上記の観点で絞った中から一番コストパフォーマンスがいいと思うものを選んでいますので、迷った場合は参考にしてみてください。
また、レンタルサーバーの具体的な契約の流れを知りたいという方は、当サイトで使用しているサーバーを例に解説していますので、こちらも参考にしてみてください。
②：ドメインを取得する
レンタルサーバーを契約したら、次はドメインを取得します。
ドメインは、公開するWebサイトのURLの一部です。
例）
- ULR：https://code-jump.com
- ドメイン名：code-jump.com
ドメインを取得する際は、下記の2つを決める必要があります。
- 名前
- 当サイトでいう「code-jump」の部分です。
- ドメイン
- 当サイトでいう「com」の部分です。
指定されたドメインの中から選ぶことができます。中には、使用するために条件が設けられているドメインも存在するので注意が必要です。
ドメインの種類
ドメインの種類はかなりたくさんあるので、よく使われているものだけを紹介しておきます。
| ドメイン | 用途 |
|---|---|
| com | 商用サービス向けのドメイン |
| jp | 日本の個人、企業向けの汎用的なドメイン |
| net | ネットワーク関連向けのドメイン |
| co.jp | 株式会社、合同会社等、日本企業向けのドメイン |
| or.jp | 財団法人、社団法人、医療法人等、非営利法人向けのドメイン |
| ne.jp | ネットワークサービス提供者向けのドメイン |
その他にどんなドメインがあるか知りたい方は、こちらのサイトを参考にしてください。
参考：日本ネットワークインフォメーションセンター「ドメイン名の種類」
https://www.nic.ad.jp/ja/dom/types.html
ドメインの選び方
どのドメインを選べばよいかは、Webサイトの用途にあったものから選択することになります。
例えば、自分のポートフォリオサイト用のドメインとして取得する場合は、汎用的に使えるメジャーなドメイン「com」「jp」などが候補にあげられます。
ただし、使用したいドメインが決まっても自分がつけたい名前が既にそのドメインで使用されている場合もあります。
どのドメインがあいているか調べる方法は、下記で詳しく解説していますので参考にしてください。
③：FTPソフトをインストールする
サーバーを契約してドメインを取得したら、ローカル環境で作成したファイルをサーバーにアップします。
ファイルをサーバーにアップする際に必要となるのが「FTPソフト」です。
FTPソフトには色々な種類がありますが、基本は無料でダウンロードすることができます。
参考までにメジャーなFTPソフトを紹介しておきます。
- FileZilla（Windows/Mac）
- Cyberduck（Windows/Mac）
- FFFTP（Windows）
- WinSCP（Windows）
ちなみに、おすすめのFTPソフトは「FileZilla」です。
ダウンロードとインストールの手順については、こちらで詳しく解説していますので参考にしてください。
④：サイトを公開する
ここまで準備ができたら、いよいよHTMLサイトを公開します。
基本的には、先ほどインストールしたFTPソフトでファイルをアップするだけです。
ファイルアップの具体的な手順については、こちらで詳しく解説していますので参考にしてください。
⑤：サイト公開後にやっておくこと
サイト公開後にやることは大きくわけて下記の2点です。
- 各種設定（サイトマップ、Google Analytics等）
- 表示・動作確認（ブラウザやデバイス毎の確認等）
各種設定
下記の設定を行います。
※具体的な設定手順は追って追加していきます。
- URLの正規化
- Googleサーチコンソールの登録
- Googleアナリティクスの設定
- サイトマップの送信
表示・動作確認
サイトの表示と動作確認を行います。
ざっと以下のポイントが確認できればOKです。
＜サイト公開後のチェックリスト＞
- 表示
- ・誤字はないか
- ・レイアウト崩れはないか
- ・画像は正しく表示されているか
- 動作
- ・リンクの遷移は正しいか
- ・ボタンの動作は正しいか
- ・ホバーの動作は正しいか
- ・フォームは正しく動作するか
- レスポンシブ
- ・画面幅を変更した際の、表示・動作は正しいか
- ブラウザ
- ・各ブラウザで正しく表示・動作しているか
- デバイス
- ・各デバイスで正しく表示・動作しているか
- 設定
- ・タイトル、ディスクリプションは設定できているか
- ・favicon、apple-touch-iconは設定できているか
- ・OGPは設定できているか
- ・altは正しく設定できているか
- ・noindex, nofollowが設定されていないか
- 文法チェック
- ・HTMLは適切な文法で記述されているか（ツールでエラーがないか確認）
- 表示速度
- ・表示速度が遅いページはないか
- ・表示の際にレイアウトが大きくずれたりしていないか
- SSL
- ・SSL化の対応はできているか
以上で、Webサイトの公開は全て完了です。
