【簡単】Webサイトを公開する5ステップ【手順通りにやるだけ】
悩んでいる人

Webサイトに公開する方法がしりたい。

サーバーなどの専門用語がわからなくても公開できますか? 

初心者でもわかるように教えてほしいな。

 

こういったお悩みに答えます。

 

本記事の信頼性

しむけん(@shimuken0104)

この記事を書いている僕は、通算ブログ歴1年5ヶ月。

現在は、フリーランスエンジニアをしつつ、ブログを書いています。

 

今回は、Webサイトの公開手順を5ステップでご紹介していきます。

 

専門用語がわからない超初心者でも、安心してWebサイト公開ができるように全手順画像付きです。

 

画像を見ながら、1つずつ進めるだけで、必ずWebサイト公開ができるようになりますよ。

 

手順を進める前に

今回は、HTML/CSSで自作した模写サイトなどの、Webサイト公開を目的としています。

当記事では、WordPressのインストールはしない手順で解説しています。

PHPの知識がある方や、ブログを始めたい方は、下記を参考にしてみてください。

>>【2020年最新】WordPressの始め方!初心者でも10分で完成!

よくわからない方は、このまま進めてOK(いつでもWordPressに変更可能

 

しむけんしむけん

もし、わからない部分などあればツイッターでの質問も受け付けています!(@shimuken0104

 

それではどうぞ!

Webサイトの公開に必要な要素3つ    

まず、ウェブサイトの公開に必要な要素を確認しておきましょう。

 

必要な要素は3つあります。

 

Webサイト公開に必要な3要素

Webサイト公開に必要な3要素

 

専門用語がでてきたので、下記のようにイメージしておきましょう。

 

Webサイト公開に必要な要素3つ
  1. サーバー:土地
  2. ドメイン:住所
  3. ファイル:家具

 

つまり、Webサイト(家)を所有するために、サーバー(土地)、ドメイン(住所)、ファイル(家具)を準備する感じです。

 

サーバー=土地、ドメイン=住所、ファイル=家具

 

ざっくりイメージができればOK!

 

では、続いてWebサイト公開までの流れをご説明します。

Webサイト公開までの流れ

ウェブサイト公開までの流れは下記になります。

 

Webサイト公開までの流れ

 

しむけんしむけん

難しそうと思うかもしれませんが、これから全手順画像付でわかりやすく説明していくので安心してくださいね!

 

では、具体的なWebサイトの公開手順について説明していきます。

Webサイト公開手順①レンタルサーバーを申し込む

まずは、レンタルサーバーに申し込みます。

 

今回は、ConoHa WING(コノハウイング)ConoHa WINGを使ってホームページ公開をしていきます。

ConoHa WING(コノハウイング)がおすすめな理由

レンタルサーバー会社はたくさんありますが、ConoHa WINGをおすすめする理由は下記になります。

 

ConoHa WINGがおすすめな理由
  1. 国内最速の表示速度
  2. 料金が安い(月800円~)
  3. 独自ドメインが無料
  4. 初期費用0円
  5. SSLが無料

 

しむけんしむけん

エンジニアの僕は、色々なサーバーを使った経験がありますが、現時点ではコスパ最強のサーバーだと確信しています!

 

デメリットを挙げると、比較的新しいサーバーという部分です。

とはいえ、大手企業GMOが運営しているので安心して使うことができますよ。

 

通常のレンタルサーバーは、初期費用3,000円ほどかかることも多いですが、ConoHa WINGは初期費用が無料なのも嬉しいポイント。

 

今回は、ConoHa WINGをつかってWebサイトを公開していきます。

 

ConoHa WINGConoHa WINGページを開きながら、読んでください。

 

【2020年11月6日まで】月額費用20%OFFのキャンペーン

コノハウイングキャンペーン

 

2020年11月13日18時までに、ConoHa WINGで申し込むと、月額20%OFFになるお得なキャンペーンが開催中です。

 

12ヶ月以上のプランが割引対象です。

 

通常 キャンペーン価格
12ヶ月 900円 720円
24ヶ月 850円 680円
36ヶ月 800円 640円

 

しむけんしむけん

さらに、独自ドメインも1個無料なので、費用を抑えてスタートできるチャンスですね!

STEP1 コノハウイング申込み画面にアクセス

ConoHa WINGお申し込みページ

 

まずは、下記リンクからConoha WING(コノハウイング)公式ページにアクセスし、『今すぐお申し込み』をクリックします。

 

 

次に、『初めてご利用の方』の枠内にメールアドレス(2回)とパスワードを入力し、『次へ』をクリック。

 

メールアドレスとパスワードを入力する

STEP2 サーバープランを選ぶ    

下記のプラン選択画面になったかと思います。

 

プラン選択画面

プラン選択画面

 

まず、料金プラン設定の5つを決めていきます。

 

  1. 料金タイプ:WINGパック(※WINGパックは3ヶ月以上の期間契約)
  2. 契約期間:3ヶ月(期間が長くなると割引率UP)
  3. プラン:ベーシック(サイトのアクセスが多くなれば変更でOK)
  4. 初期ドメイン:適当でOK。(ブログURLに関係ありません)
  5. サーバー名:そのままでOK

おすすめの料金プラン

 

なお、今回はHTML/CSSで自作したサイトを公開することが目的のため、『WordPressかんたんセットアップ』は『利用しない』にチェックを入れます。

 

料金確認をして、『次へ』をクリックします。

 

料金確認し、「次へ」をクリック

 

しむけんしむけん

必要になれば、いつでもWordPressをインストールできるので心配ありませんよ!

STEP3 お客様情報を入力

お客様情報の入力画面に変わったと思います。

 

情報を入力し、『次へ』をクリックします。

 

お客様情報入力

赤枠の情報を入力し「次へ」をクリック

STEP4 SMS・電話認証をする

次に、本人確認のため、SMS認証をしていきます。

 

携帯電話の番号を入力し、『SMS認証』をクリック。※電話認証でも問題ありません。

 

SMS認証

電話番号を入力し、「SMS認証」をクリック

 

すると、携帯に『認証コード』が届きます。

 

認証コードが届く

携帯に認証コードが届く

 

認証コードを下記の画面で入力し、『送信』をクリックします。

 

認証コードを入力し「送信」する

STEP5 お支払い情報を入力

次に、お支払い情報を入力していきます。

 

クレジットカードの情報を入力し、『お申込み』をクリックしましょう。

 

クレジットカード情報を入力

クレジットカード情報を入力し「お申込み」をクリック

 

以上で、サーバーのお申し込みは完了です。

 

しむけんしむけん

ここまでくれば、Webサイト公開まで、あと一息です!

Webサイト公開手順②無料独自ドメインを取得する

 

サーバーお申し込み後、下記の表示がされたら『ドメイン新規取得』を選択し『追加する』をクリックします。

 

ドメイン新規取得にチェックし「追加する」をクリック

 

次に『ドメイン名』にお好きなドメイン名を入力します。

 

ドメイン名を入力

好きなドメイン名を入力

 

 

ドメイン名の決め方

ドメイン名とは、○○.comなどの「○○」の部分です。

当ブログだとhttps://shimukenblog.comの赤字部分になりますが、基本は自由に決めてOK。

なお、ドメイン名の後ろは、迷ったら「.com」「.info」「.org」あたりで良いかと思いますよ。

 

カートに追加』を選択し、『次へ』をクリック。

 

独自ドメイン取得

好きなドメインを選択し「次へ」

 

登録情報を入力し、『次へ』をクリックします。

 

登録情報を入力し「次へ」をクリック

 

内容を確認し、『決定』をクリックすると、独自ドメインの取得は完了です。

 

ドメイン取得完了

内容確認し「決定」をクリック

 

しむけんしむけん

お疲れ様です。Webサイトの開設が無事できました!

次からは、ファイルのアップロードの手順を紹介しますね!

Webサイト公開手順③サーバーにファイルをアップロードする

 

Webサイトを公開するためには、サーバーにファイル(html/css、画像データなど)をアップロードする必要があります。

 

サーバーにファイルをアップロードする手順は3つ。

 

  1. FileZillaをダウンロード
  2. FTP設定をする
  3. サーバーに接続する

 

1つずつ説明していきます。

 

その①:FTPツールをダウンロード

まずは、FTPツールをダウンロードします。

 

FTPツールとは

サーバーにファイルをアップロードするツールのこと。

 

今回は、FTPツールの定番『FileZilla(無料)』を使って説明していきます。

 

下記より、FileZillaをダウンロード&インストールして下さい。

 

その②:FTP設定をする

次に、FTP設定をしていきます。

 

しむけんしむけん

難しく思うかもしれませんが、手順通りにやるだけなので簡単ですよ!

 

まずは、ConoHa WINGコントロールパネルにアクセスします。

 

>>コントロールパネルにアクセス(ログインが必要)

 

ログインすると下記画面になるので『 WING 』を選択し、『サイト管理』をクリックします。

 

コノハウイングコントロールパネル

「WING」を選択し「サイト管理」をクリック

 

次に『FTP』をクリックし、『FTPアカウント』を選択します。

 

FTPアカウントを選択

「FTP」→「FTPアカウント」をクリック

 

ユーザー名』と『パスワード』を設定し、『保存』をクリックします。(メモ必須)

 

FTPユーザー名とパスワードを決めるユーザー名とパスワードはメモ必須

 

作成したアカウント名をクリックし、『FTPサーバー』をメモしておきます。

 

FTPサーバーをメモしておく

FTPサーバーをメモする

 

メモしておく情報3つ
  • ユーザー名
  • パスワード
  • FTPサーバー

 

上記をメモしておけばOKです。

その②:サーバーに接続する

では、サーバーに接続するための初期設定をしていきます。

 

まず、FileZillaを起動し、『左上のアイコン』をクリック。

 

FileZillaの左上アイコンをクリック

FileZilla左上アイコンをクリック

 

新しいサイト』をクリックし、覚えやすいサイト名(なんでもOK)を入力します。

 

サイト名を決定

「新しいサイト」をクリックし「サイト名」を入力

 

次に、右側の項目を入力するために、先ほどメモした情報を使います。

 

  1. ホスト:メモしたFTPサーバーを入力
  2. ユーザー:メモしたユーザー名を入力
  3. パスワード:メモパスワードを入力
  4. ポート:21と入力

 

「ホスト」「ポート」「ユーザー」「パスワード」を入力し接続する

 

上記を入力し『接続』をクリックすると、サーバーに接続ができます。

 

しむけんしむけん

次は、Webサイト公開に必要なファイルをアップロードしていきますよ!

その③:ファイルをアップロード

まず、FileZillaから『 public_html 』を探し、ダブルクリック。

 

FileZillaからpublic htmlを探しクリック

public_htmlをクリック

 

設定した『独自ドメイン』のフォルダをクリックします。

 

独自ドメインフォルダをクリック

 

アップロードしたいファイル』を選択し、FileZillaの『独自ドメインフォルダ』にドラッグ&ドロップします。

 

アップロードファイルをFileZillaにドロップ

ファイルをFileZillaにドラッグ&ドロップ

 

これで、ファイルのアップロードは完了です。

 

次に、実際にWebサイトを見て確認してみましょう。

Webサイト公開手順④公開されているか確認する

アップロードされているか確認するには、検索欄にURLを入力します。

 

例:http://独自ドメイン.com

当ブログだと、https://shimukenblog.comと入力します。

 

検索欄にドメインを入力し、ページ公開確認

独自ドメインを入力し、サイト確認

 

しむけんしむけん

お疲れ様でした!確認できれば、Webサイト公開は完了です!

 

表示されない場合

検索で表示されるには少し時間がかかります。

表示されなくても焦らなくてOKです。

Webサイト公開手順⑤SSL設定をする

 

セキュリティ強化のために、SSL設定をしておきましょう。

 

SSLとは

Webサイトと閲覧ユーザーのやりとりを暗号化する仕組みのこと。

Googleも常時SSLを推奨している。

 

SSL化されているサイトの特徴
  1. URL横に鍵マークがついている
  2. httpsから始まる

 

SSL化されているイメージSSL化されている例

 

では、SSLの設定をしていきます。

 

まずは、ConoHa WINGコントロールパネルにアクセスします。

 

>>コントロールパネルにアクセス(ログインが必要)

 

メニュー上部の『WING』を選択し『サイト管理』をクリック。

 

「WING」→「サイト管理」をクリック

 

次に、『サイトセキュリティ』を選択し、『独自SSL』をクリックします。

 

「サイトセキュリティ」→「独自SSL」をクリック

 

無料独自SSL』の利用設定を『ON』にします。

 

「無料独自SSL」を「ON」に設定

 

以上で、SSL設定は完了です。

 

しむけんしむけん

お疲れ様でした!これでWebサイト公開作業は以上です。

もし、上手くいかない場合は、ツイッターで相談も受け付けていますので、遠慮なく聞いてくださいね。

Webサイト公開によくある質問

Webサイト公開によくある質問

ウェブページ公開でよくある質問をまとめました。

パスワードをつけて公開する方法はありますか?

あります。

 

例えば、模写サイトの公開などはパスワードをつけるようにしておきましょう。

 

まず、ConoHa WINGコントロールパネルにアクセスします。

 

>>コントロールパネルにアクセス(ログインが必要)

 

WING』→『サイト管理』→『サイトセキュリティ』→『ディレクトリアクセス制限』の順にクリックします。

 

アクセス制限の手順

アクセス制限の手順

 

サイト全体にパスワードをつける場合は、空欄のまま『保存』をクリック。

 

特定のページ(ディレクトリ)のみアクセス制限する場合は、ディレクトリを入力します。

 

アクセス制限

全体にパスワードをかける場合は、空欄で「保存」

 

/ 』を選択し、右側の『エンピツマーク』をクリック。

 

アクセス制限の方法

「 / 」を選択し「エンピツマーク」をクリック

 

次に『』を選択し『ユーザー名』と『パスワード』を入力し『保存』をクリックします。

 

ユーザー名とパスワードを設定

「+」をクリックし、「ユーザー名」「パスワード」を入力

 

以上で、該当のページにパスワードが設定されました。

検索しても自分のサイトが出てきません。

結論からいうと、待ちましょう。

 

検索にサイトが表示されるには、多少時間がかかります。

 

なぜなら、クローラーにウェブページをインデックスされる必要があるためです。

 

用語解説

クローラー:ページ情報を取得するロボット

インデックス:検索エンジンのデータベースにWebページが登録されること

 

Googleサーチコンソールを使って、インデックス促進をする方法もあります。

 

気になる方は、Googleサーチコンソールの設定方法をチェックしてみてください。

Webサイトのアクセス数を調べるには?

Googleアナリティクスの設定が必要です。

 

設定方法は、下記のサイトが参考になります。

 

まとめ:Webサイト公開はかんたんです!    

今回は、Webサイト公開5つの手順をご説明しました。

 

手順通りにすすめるだけで、ホームページ公開ができたかと思います。

 

しむけんしむけん

もし、うまくいかなかった場合は、ツイッターで質問も受け付けていますので、ご連絡くださいね!

 

もし、ポートフォリオとしてWebサイトを作ったという方は、下記も参考にしてみてくださいね。

 

 

今回は以上です。