知っておきたいWebの仕組みと ホームページ作り方

知っておきたいWebの仕組みとホームページ作成手順

ここでは初心者でもわかる、Webの仕組みと ホームページ作成手順 を説明します。
 

もくじ

以下は本記事のもくじです。

  1. 1. Webサイトの基本の仕組み
  2. 2. ホームページの作成手順
    1. 2-1. レンタルサーバーを借りる
    2. 2-2. ドメインを取得する
    3. 2-3. ホームページを作成する
  3. 3. まとめ


 
 

1. Webサイトの基本の仕組み

まず簡単にWebサイトの仕組みを説明します。

Webの仕組み概要

Webの仕組み概要

Webサイトの仕組みは以下のような流れになります。
 

  1. パソコンがChromeなどのWebブラウザで指定のURLにアクセスする
  2. 指定のURLをもとにインターネット上のサーバー及びWebサイトが特定される
  3. 該当のWebサイトがパソコンに向かってHTMLや画像などを応答(送信)する
  4. パソコン上のWebブラウザが送られてきたHTML等を解釈して画面を表示する

 

Webサイトを作成するにあたって必ず必要になるのが、サーバーURL(http://xxxxx.ooo)です。
 

「xxxxx.ooo」はドメインと言い、インターネット上の住所にあたります。
 

サーバーはインターネット上のマンションや家に相当します。
 

Webサイトを構築する方法にはいくつか形態がありますが、ここでは一番スタンダードな方法である以下の手順で説明していきます。

  1. レンタルサーバー会社からサーバーを借りる
  2. ドメイン提供会社からドメインを取得する
  3. サーバーにWebサイトを構築する

 

※ちなみにJimdoやWixなどのクラウド型のホームページ作成サービスを利用する場合は、ドメイン取得、サーバー契約などをそれぞれ意識せずに全てWeb上からまとめてホームページを作ることも可能です。
 
 

2. ホームページの作成手順

2-1. レンタルサーバーを借りる

まずはWebサイトの入れ物となるサーバーを準備する必要があります。自前で用意するのは大変なので、だいたいはサーバー会社から借りる形になります。
 

Webの仕組み サーバー

 

いくつかのタイプがありますが、初めてホームページを持つ場合は「レンタルサーバー」と言われる形態でサーバーを借りるのが一般的です。
 

プランにより価格もピンからきりですが、おおよそ月額500〜1,000円くらいが一般的だと思います。有名どころは、例えばエックスサーバー、さくらインターネット、ロリポップなどです。









 
 

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

Webの仕組み ドメインを取得する

インターネット上の住所に当たるドメインを取得する必要があります。
 

本サイトの場合は「webst8.com」です。
 

「.com」の部分をトップレベルドメインといい、「.com」の他にも「.net」や「.info」など数多くの種類があります。
 

今はその意味が薄くなりましたが元々は「.com」は商用、「.net」はネットワーク関係を意味しています。
 

ネット関係個人事業でホームページを運営する場合は、「.com」や「.net」あたりが無難で多いです。
 

語源が気になる方はトップレベルドメイン (TLD) の意味と主な種類を参照してみてください。
 

ドメイン名ですが、SEO的にはホームページのコンセプトに近い名前をドメイン名に含めるのが良いとされています。
 

たとえば、健康関係のホームページなら「health」という単語、色関係なら「color」、カフェ関係なら「cafe」などの単語をドメイン名に含めると良いです。
 

他には、自分の名前を覚えてもらいたい、ブランディングしていきたい場合は自分の名前をドメイン名にする場合もあります。会社であればもちろん会社名にします。
 

Googleは意味を持たない英数字の羅列よりも意味を持つURLが良いと言っていますので、目的に合わせてドメイン名に意味を持たせると良いと思います。
 

■以下はGoogleが出す推奨のドメイン名のケーススタディですので参考にしてみてください。

Google Webマスターアカデミー クイズ抜粋

Google Webマスターアカデミー クイズ抜粋

https://support.google.com/webmasters/answer/6001094?hl=ja&ref_topic=4631146より抜粋

 

新規でドメインを取得する場合、おおよそ年額1,000〜2,000円程度の独自ドメイン取得・更新費用がかかります。
 

なお、ドメインを取得した会社と契約したサーバー会社が会社の場合は、ドメインとレンタルサーバーを紐付けるためにネームサーバーの設定が必要になる場合があります。ドメイン取得時に管理画面でネームサーバー設定ができると思うのでヘルプなどに従って、ネームサーバーの設定をしてください。
 
 
 

補足)無料ドメインについて
独自のドメインを取得する場合のほか、無料で利用できるドメインもあります。
 

一般に無料ドメインは「oooo.hatenablog.com」や「oooo.jimdo.com」のようにWeb・ブログサービス会社の配下となるドメイン名になります。
 

たとえば、以下のような場合は無料ドメインでも良いと思います。
・検証や勉強目的、ビジネス目的ではない(趣味)場合でホームページを立ち上げたい。
・期間限定の告知やサンプルページなどの特定用途で立ち上げたい。
 

しかし、ドメイン名は後から変更できないので、将来的にそのままビジネスで長く使う可能性がある場合は初めから独自ドメインを取っておいたほうがよいと思います。

 

ドメインの取得はGoogleで「ドメイン 取得」などで検索するとたくさんの会社が出てきますのでそこで契約するといいです。
 

有名どころは「ムームードメイン」「お名前.com」などで、「.xyz」など珍しいトップレベルドメインを取得できたりします。









 

上記以外にも私が利用している「エックスドメイン」や、「さくらインターネット」や「エックスサーバー」などレンタルサーバー会社でドメイン取得もできたりするところもあり、よくある「.com」や「.net」「.info」などのトップレベルドメインであれば、だいたいどこでも取得できます。









 

サーバー契約した会社(サービス)で同時にドメイン取得すると、ネームサーバー設定(サーバーとドメイン名をリンクさせる作業)などの手間が省けて楽だと思います。
 
 

2-3. ホームページを作成する

さて、これでWebサイトを構築する準備が整いました。
 

ドメインの登録とサーバーの契約が完了したので、ここからはマンションの部屋の中に、ホームページを作成していきます。
 

ホームページは大きくHTMLファイル等を自分で作成して構築する場合とWordpressのようなソフトウェアをつかって構築する場合があります。
 

HTMLファイルを自分で作成して構築する

試しにHTMLファイルを作成してみます。

 

上記のHTMLファイルを契約したサーバーにファイル転送ソフトなどを使ってアップロードします。

FTPでhelloworld.htmlをアップロード

FTPでhelloworld.htmlをアップロード

 

Webブラウザで実際にアクセスしてみます。

Webサイト html helloworld

僕の(私の)ホームページ!!

 

指定のURLでアクセスするとアップロードしたページが表示されて、自分のホームページを持てたことを確認できました。
 
 

ホームページ作成ソフト(CMS)を利用する

HTMLファイルなどを自分で作成してサーバーにアップロードすることでホームページを作れるのですが、これだとHTMLやCSSなどの専門知識がないとホームページを持つことができません。
 

ちょっとした申し込みフォームを作るにもプログラムを作る必要があり大変です。
 

世の中には、HTMLやCSS、プログラムを知らなくてもある程度自由にホームページを作れるソフトウェアがあります。これをCMS(コンテンツマネジメントシステム)といい、今現在、WordPressというオープンソース(無料)のCMSが世界第一位で一番有名です。
 

世界と日本で 有名な CMS シェア と特徴を比較
 

だいたいのレンタルサーバー会社でもWordPressの自動インストール機能などが用意されていて、設定方法などもたくさんインターネットで説明されているので、ホームページを作る人はWordPressも検討してみると良いと思います。
 

エックスサーバー 管理画面 CMS自動インストール

エックスサーバー管理画面 CMS自動インストール

 

以上でWebサイトの大まかな構築手順は完了です。
 

3. まとめ

今回は、下記の手順でホームページを作成する手順を説明しました。

  1. 1. Webサイトの基本の仕組み
  2. 2. ホームページの作成手順
    1. 2-1. レンタルサーバーを借りる
    2. 2-2. ドメインを取得する
    3. 2-3. ホームページを作成する

 

HTMLファイルなどを作成するには専門知識が必要ですが、WordPressをはじめとする便利な仕組みを利用することでプログラマのような専門知識がなくてもある程度は自由に自分のホームページを作成できます。
 

今回は、あくまで概念的なところを説明にとどまっていますが、実際にサーバーを借りたりドメインを取得する手順についてはまた別のページでご説明したいと思います。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。

継続6ヶ月コース

通常 15万円【2017年中】12万円(税抜)
ホームページ作成からWeb集客まで一通り習得したい方向けのコースです。

お試し1ヶ月コース

通常3万円【2017年中】2万円(税抜)
特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコースです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ