【初心者必見!】自分でホームページを作りたい人のためのWebサイトの作り方

自分でホームページを 作りたい人のための Webの基本と ホームページの作り方

これからあなたが初めて自分でホームページを作ろうかと考えた時に、何から手をつけたら良いかわからないという方が多いのではないでしょうか。
 

「ドメイン? サーバー?」
「無料と有料何が違うのか?」
「調べたらいろいろ出てきて、結局何が良いのかわからない」
 

そこで、ここではホームページを自分で作りたい初心者の方向けにWebの基本とホームページの作り方について説明していきます。
 

 

自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室
自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

 

ホームページを開設するために必要なこと

ホームページ・Webサイトの仕組み概要

Webの仕組み概要

Webの仕組み概要

まずホームページの仕組みについて簡単に説明します。通常、ユーザーはホームページを下記のような流れで閲覧しています。

ホームページ閲覧の流れ

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

 

ホームページを開設するために必要なもの

ホームページを開設するために必要な要素
 
ホームページを開設するためには以下の3点がまず必要になります。

ホームページ開設に必要なもの

  • サーバー:インターネット上の建物・部屋のようなもの
  • ドメイン:インターネット上の住所のようなもの
  • ホームページ(中身):建物・部屋の中にあるコンテンツ・サービスのようなもの(文章や画像などで構成されるファイル類)

 

指定の住所(ドメイン)に行ったら建物(サーバー)があって、その中に入ったら中身がある(例. 飲食店なら飲食のサービスなど)」というようなイメージをするとわかりやすいと思います。
なるほど!インターネットの世界と用語はよくわからなくても、実際のモノに例えると分かりやすいですね!
 

ホームページを作るためには、まず「サーバー」「ドメイン」「ホームページ(中身)」が必要であることを押さえておきましょう。
 
 

具体的なホームページの作り方

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

ホームページの作成手順

  1. レンタルサーバー会社からサーバーを借りる
  2. ドメインサービス会社からドメインを取得する
  3. サーバーに中身(ホームページ)を構築する

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

レンタルサーバー会社でサーバーを契約する

レンタルサーバーとはインターネット上の建物

Webの仕組み サーバー
 
まずはWebサイトの入れ物となる建物「サーバー」を準備する必要があります。
 

現実世界で、「一戸建て」、「ワンルームマンション」、「寮・シェアハウス」といったタイプがあり、広さや設備によって価格がピンキリであるのと同様に、サーバーもいくつかのタイプがあり価格もピンキリです。
 

いくつかのタイプがありますが、個人が初めてホームページを持つ場合は「レンタルサーバー会社」で「レンタルサーバー」を契約するのが一般的です。
 

レンタルサーバーは、自分用の部屋がある一方トイレ・風呂などの共用部分もあるシェアハウス・寮くらいのイメージが比較的あっているかもしれません。
 

レンタルサーバーも複数のプランがあり価格もピンからきりですが、個人向けだとおおよそ月額500〜1,000円くらいが一般的です。
 
 

レンタルサーバーを提供している会社

レンタルサーバーを提供している会社として、エックスサーバー、さくらインターネット、ロリポップなどが有名でよく利用されています。
 

項目 エックスサーバー ロリポップ さくらレンタルサーバー
特徴 高速かつ高機能、稼働率99.99%以上の高い安定性で、
業界トップクラスの高コストパフォーマンスを
誇るハイスペックサーバー。
大量アクセスに強く、高速な環境を実現。
個人・法人ともに実績のあるレンタルサーバーです。
ご利用実績200万サイト以上!
16年を迎える老舗格安レンタルサーバー。
ホームページ運営なら、
ずっと使えるレンタルサーバー「ロリポップ!」
簡単、無料SSL、充実サポート、高速性能で
初心者から商用サイトまで利用されています。

高速の通信回線と高度なセキュリティを備えた
創業20年の信頼できるレンタルサーバー。
無料SSL、ブログ開設、WordPress、
ドメイン取得できます。
趣味から商用利用まで安心して利用できます。
オススメプラン名 X1(スタンダードプラン) スタンダードプラン スタンダードプラン
費用
(1年間契約の場合の
月額あたり費用)
¥1,000 ¥500 ¥500
安定性
オススメ度
法人サイトや数万PVを目指すブログを
作る場合にオススメです。

コストパフォーマンスが高いサーバー。
あとからプラン変更もでき
バックアップ・ウイルス対策オプションなど充実。
気軽に始める際にオススメで、
個人事業のHPに向いていると思います。

会社の実績・セキュリティ重視ならオススメです。
レンタルサーバー以外にも
VPSや専用サーバーなど上級者向けに
サーバーを提供しているのも特徴です。
運営会社 エックスサーバー株式会社 GMOペパボ株式会社 さくらインターネット株式会社
レンタルサーバーやドメインサービス
「エックスドメイン」などの
ホスティングを軸にしたインターネットサービスを
提供している会社です。
レンタルサーバー「ロリポップ!」のほか、
日本最大級のハンドメイドマーケット「minne」、
ネットショップ「カラーミーショップ」など
様々なインターネットサービスを
提供している会社です。
レンタルサーバーのほか、
VPS・専用サーバーやデータセンターまで、
個人・法人向けにホスティングを軸にした
インターネットサービスを提供している会社です。
公式サイト https://www.xserver.ne.jp/
WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!

さくらのレンタルサーバ スタンダード

(※)ブログ執筆時(2018年1月時点)の情報です。価格をはじめとした正式な情報は各公式サイトよりご確認ください。
 

ちなみに、このサイトはどのサーバーを利用しているんですか??
 

本サイトwebst8.comはエックスサーバーを利用しています。このサイトの他にも、PHPプログラムでオリジナルの会員サイトを導入しています。
 
 

ドメインを取得する

ドメインとはインターネット上の住所

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

サーバーを用意すると同時に、インターネット上の住所に当たるドメインも取得する必要があります。
 

サーバーだけ借りた場合は、初期ドメインというレンタルサーバーのサブドメイン(xxxx.xsrv.jpや、xxxx.sakura.ne.jp、xxxx.lolipop.jpなど)のみ利用できる状態です。
 

このサブドメインは実際のビジネス・ブログには不向きなので、自分専用のドメイン(独自ドメイン)も準備する必要があります。
 

本サイトの場合は「webst8.com」が独自ドメインです。
 

自分の欲しいドメインを取得するんですね。「.com」っていうのはよく見かけるんですけど、なんなんでしょうか??
 

「.com」の部分をトップレベルドメインといいます。「.com」の他にも「.net」や「.info」など数多くの種類があります。
独自ドメインは、
「xxxx(自分の欲しい名前)」×「トップレベルドメイン」
の組み合わせからどれにするかを選ぶ形になります。
 
 

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

ネット関係個人事業でホームページを運営する場合は、「.com」や「.net」あたりが多いです。法人ですと「co.jp」を取得することもできます。
 

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

また、ドメイン名はSEO的にはホームページのコンセプトに近い名前をドメイン名に含めるのが良いとされています。たとえば、健康関係のホームページなら「health」という単語、色関係なら「color」、カフェ関係なら「cafe」などの単語をドメイン名に含めると良いです。
 

他には、ブロガーさんで自分の名前をブランディングしていきたい場合は自分の名前をドメイン名にする場合もありますし、コーポレートサイトであれば会社名をドメイン名にするのが一般的です。
 

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

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

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

Google ウェブマスターアカデミーより引用
 

上記の通り、意味を持たないドメイン名よりも意味を持つドメイン名が良いと言われています。目的に合わせてドメイン名を選んであげましょう。
 
 

独自ドメインの取得方法

トップレベルドメインが「.com」や「.net」の独自ドメインを取得する場合、おおよそ年額1,000〜2,000円程度の取得・更新費用がかかります。
 

レンタルサーバー会社がエックスサーバーであれば、そのままエックスサーバーで独自ドメインを契約することができます。
ロリポップであれば同じ会社のドメイン専用サービス「ムームードメイン」から、さくらインターネットであればそのままさくらインターネットで独自ドメインを契約することができます。
 

以下は、ムームードメインで独自ドメインを取得する場合の画面です。
ムームードメイン 取得したいドメインを入力して検索実施。すでに誰かが取得済みのドメインは取得できません。
 

上記のように、取得したいドメインを入力して検索→カートに追加をして取得手続きを進めていきます。すでに誰かが取得済みのドメインは取得できません。
 

(※)ムームードメインの取得は下記より行えます。
格安ドメイン取得サービス─ムームードメイン─

 

会社によりキャンペーンなどで数百円〜千円程度の取得費用の違いはありますが、初めてホームページを自分で作る場合は、契約した会社でドメインを取得したほうが設定が簡単でおすすめです。
 

独自ドメインを提供している会社・サービス

項目 エックスサーバー ムームードメイン さくらレンタルサーバー
特徴 業界トップクラスの高コストパフォーマンスを
誇るレンタルサーバー。
独自ドメインはインフォパネルの
「追加のお申し込み」より取得できます。
.com .net .jp .co.jpなど多種多様なドメインを
取得・登録できる国内最大級の
ドメイン総合サービスです。
独自ドメインを使ったブログの開設や
WordPressを使ったサイトの運営には
必須のドメインを簡単に取得可能です。
運営会社 エックスサーバー株式会社 GMOペパボ株式会社 さくらインターネット株式会社
公式サイト https://www.xserver.ne.jp/
年間920円(税抜)からの
格安ドメイン取得サービス
─ムームードメイン─

さくらのレンタルサーバ
スタンダードのお申込みはこちら
(公式ページ)

 

また、エックスサーバーなどは契約時に独自ドメイン1個プレゼントキャンペーンを実施している場合もあります(キャンペーン実施時のみ)。詳しくは各公式サイトより情報を確認してみてください。
 

ほかにも、ドメインの取得はGoogleで「ドメイン 取得」などで検索するとたくさんの会社が出てきます。「お名前.com」も有名なドメインサービス会社です。
 

たとえば、他社のお名前.comで取得したドメインやムームードメインで取得したドメインを、エックスサーバーやさくらインターネットで利用することも可能なんでしょうか??
 

はい、もちろん可能ですよ。
ただし、ドメインを取得したところの管理画面からネームサーバー設定というドメイン名をどのレンタルサーバーで利用するかを関連づける設定が必要になります。
詳しい設定はドメイン取得したところの各ヘルプなどに従ってネームサーバーの設定をしてみてくださいね。
 
 

(補足)無料ドメインか独自ドメインの違い

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

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

レンタルサーバーを契約した場合も、初期ドメインというレンタルサーバーのサブドメイン(xxxx.xsrv.jpや、xxxx.sakura.ne.jp、xxxx.lolipop.jpなど)が利用できます。
 

個人事業主用のHPを作成する予定なんですが、サーバーだけ借りてドメインは無料の初期ドメインでも良いんでしょうか??
 

将来的にそのままビジネスで長く使う可能性がある場合は初めから独自ドメインを取っておくことを推奨します。
ドメイン名は後から変更できず、訪問者に直接見える内容でSEOにも影響しますのでとても重要です。
 

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

なるほど!今回は仕事でちゃんと使いたいので、独自ドメインを取得してみたいと思います。
 
 

中身(ホームページ)を作成する

さて、これでレンタルサーバーの契約とドメインの登録が完了してWebサイトを構築する準備が整いました。
 

ここからはサーバー(建物)の中にホームページ(中身)を作成していきます。
 

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

パターン1:HTML・CSSファイル等を自分で作成して構築する。パターン2:Wordpressのようなソフトウェアをつかって制作する
 
 

HTML・CSSを作成してHP制作する

HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語です。
 

CSSとは、Cascading Style Sheetsの略で、Webページのスタイル(見た目)を指定する言語です。先ほどのHTMLと一緒に使います。
 

<html>のような『タグ』と言われるかたまりを使って文章や画像を加えたり、リンクを貼ることができます。
 

Atomエディタで開いたHTMLソースコード
 

ここでは、下記のようなシンプルなHTMLを作成してWebページを作成してみます。

 

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

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

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

 

Webブラウザで指定のURLでアクセスすると作成した内容をホームページとして閲覧することができます。

Webサイト html helloworld

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

 

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

そこで、最近ではワードプレスなどのホームページ作成ソフトもよく使われます。
 
 

ワードプレスなどのホームページ作成ソフト(CMS)を利用する

最近では、HTMLやCSSを知らなくてもある程度自由にホームページを作れるソフトウェアがよく利用されています。

このソフトウェアのことをCMS(コンテンツマネジメントシステム)といい、今現在、WordPressというオープンソース(無料)のCMSが世界第一位で一番有名です。
 

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

■2分でわかるWordPressでホームページ作成動画


 

だいたいのレンタルサーバー会社でもWordPressの自動インストール機能などが用意されていて、設定方法などもたくさんインターネットで説明されています。
 

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

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

 

ホームページを作る人はWordPressも検討してみると良いと思います。
 

これからホームページを開設するなら、HTML・CSSで制作するのと、WordPressなどのCMSを利用するのとどちらが良いんでしょうか??
 

オススメはワードプレスなどのソフトウェアを利用する方法です。豊富なデザインテンプレートや便利なプラグイン(スマートフォンのアプリのようなもの)がたくさんあり、ウェブの知識がなくてもすぐにスタートすることができます。

ただ、ワードプレスなどのソフトを利用していても、細かいレイアウト調整にはHTML・CSSの知識が必要になってくるので、やりながら覚えていくのがよいのではないでしょうか。

 

【WordPress対応】自分でホームページ・ブログを作成したい個人事業主のためのWebスクール
 ウェブストエイト

WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

 

まとめ

まとめです。今回は。ホームページを自分で作りたい初心者の方向けにホームページの作り方について説明しました。
 

ホームページを作成するために必要なもの

  • サーバー:インターネット上の建物・部屋のようなもの
  • ドメイン:インターネット上の住所のようなもの
  • ホームページ(中身):建物・部屋の中にあるコンテンツ・サービスのようなもの(文章や画像などで構成されるファイル類)

 

具体的な手続きとしては、下記に代表されるレンタルサーバーからサーバーやドメインを取得することができます。

項目 エックスサーバー ロリポップ さくらレンタルサーバー
オススメプラン名 X1(スタンダードプラン) スタンダードプラン スタンダードプラン
費用
(1年間契約の場合の
月額あたり費用)
¥1,000 ¥500 ¥500
公式サイト https://www.xserver.ne.jp/
WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!

さくらのレンタルサーバ スタンダード

(※)ブログ執筆時(2018年1月時点)の情報です。
 

サーバーとドメインを取得したのち、中身となるホームページを制作していきます。最近では、個人でもホームページやブログが手軽に作成できるように環境が整ってきていますので、ぜひ自分でホームページ作成にチャレンジして見てください。
 

当Webスクールでは、Web活用したい個人事業主さま向けにホームページ作成、ウェブマーケティングやSEO対策を教えています。詳細はこちらにありますのでよかったら是非お問い合わせくださいね。

詳細はこちら

 

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

自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室
自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

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

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 スタンダート48時間コースとプロフェッショナル80時間コースから選択して受講できます。

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

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

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

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

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