WEBの基本とホームページの作り方を解説

ホームページ作る場合、自分で作ったり、制作会社にお任せしたり、作り方はいろいろですが、どのように作るにしても、作り方を知っておいた方がいいです。

自分で出来るような感じであればサクッと作ってしまった方がいいですし、制作をお願いする場合でも、どんな作業があってそれにどのぐらいの時間がかかるのかがわかっていればおおよその値段も知ることができます。

とはいっても、これから初めて自分でホームページを作成しようと考えた時に、まず何から手をつけたら良いかわからないという方も多いのではないかと思います。

今回は、自分でホームページを作りたい初心者の方向けに「独自ドメイン＋レンタルサーバー上にホームページを作る方法」を紹介していきたいと思います。

ホームページを閲覧するための基礎知識

ホームページを作るためには、ホームページを閲覧するための仕組みをまず知っておく必要があります。

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

ホームページ閲覧の流れ

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

上記のような流れになっています。もう少し詳しくみてみましょう。

Webブラウザで指定のURLにアクセス

Webページを閲覧するためには「Webブラウザ」を起動する必要があります。

Webブラウザとは、グーグルの「Chrom」、「Safari」などWebページを表示するためのアプリケーションソフトのことです。Webブラウザを使ってインターネットに繋ぐと、Web上にあるWebページなどのコンテンツを閲覧することができるようになります。

このWebブラウザを使ってWebページを閲覧するためには、「URL」というものを指定する必要があります。

URLとは、このサイトだと「http://try-sol.com/」のことで、簡単に言うとインターネット上にある各コンテンツの『住所』を示しています。

サーバー及びWebサイトの特定

DNSサーバーに対して目的のドメインのIPアドレス（住所）をたずねます。するとDNSサーバーから目的のwebサイトのドメインに紐づいているIPアドレスがが返ってきます。

ここで、よくわからない「DNSサーバー」や「IPアドレス」など言葉が出てきましたね。

DNSとはDmain name system（ドメイン・ネーム・システム）の略で、webサイトのドメインとIPアドレスを紐づけるシステムです。

DNSがない場合、グーグル にアクセスしようとすると「216.58.197.163」のような数字を打ち込む必要があります。これがIPアドレスです。これだと使い勝手が悪いですよね。

URLとIPを紐付けして使い勝手をよくしてくれているということだけ覚えておきましょう。

Webサイトがパソコンに向かってHTMLや画像などを応答

DNSサーバーから返ってきたIPアドレスをもとに、webサイトが保管されているWebサーバーをたずねます。

Webサーバーはマンションの一室のようになっていて、それぞれのデータが格納されています。

そこでWebサーバーに対して目的のURLに関連するファイルをもらいます。

Webブラウザが送られてきたHTML等を解釈して画面を表示する

Webサーバーから受け取ったファイルはコンピューター言語で書かれており、Webブラウザがないと理解できません。

Webブラウザがhtmlやcssといったコンピューター言語を読み取り適切に変換してくれることにより私たちが気持ちよく閲覧できているわけですね。

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

Webサイトの世界は現実の世界でお店を出すことに似ています。お店を出すにはお店の名前、マンションのテナントスペースや、店舗などお店の場所、そして、そのお店の正式な住所が必要ですよね。

Webサイトにも現実のお店と同じようにそのような仕組みが必要です。

• 正式な名前（ = ドメイン）
• 出店するための場所（ = Webサーバー）
• 住所（ = IPアドレス）

このようなものがあることでwebサイトがきちんと表示される仕組みが成り立っています。

このように「Webサイトを公開する＝お店を出店する」ようなイメージと思っていただけるとぐっとわかりやすくなると思います。

あと必要になってくるのが、サーバーの中に入れるコンテンツつまり、中身です。

実際のお店でもお店の中の空間をパン屋さんにするのか、ラーメン屋さんにするのか、八百屋さんにするのか決めなくてはいけません。

ホームページを作るためには、「ドメイン」、「Webサーバー」、「IPアドレス」、「コンテンツ」が必要だということを覚えておきましょう。

Webサイトを構築する方法

ホームページを作る、つまり、Webサイトを構築する方法にはいくつか形態がありますが、ここでは一番スタンダードな方法である「独自ドメイン＋レンタルサーバー」というやり方でホームページを作成していく手順で説明していきます。

構築手順

1. レンタルサーバー会社からサーバーを借りる
2. ドメインサービス会社からドメインを取得する
3. サーバーにコンテンツ(中身)を作成する

基本的な流れはこのようになります。では、もう少し細かく説明していきます。

レンタルサーバー会社からサーバーを借りる

自分でサーバーを持っていればそこにコンテンツを作って公開すればいいのですが、サーバー室を作り24時間管理し、常に稼働させておいたりメンテナンスするのは大変です。

そこで、現実世界でお店を出す時に自前で店舗を新築するのではなく、テナントを借りてお店をは字メルのと同様サーバーの世界でもデーターの部屋となる場所を借りることができます。

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

いくつかのタイプがありますが、個人が初めてホームページを持つ場合は「レンタルサーバー会社」で「レンタルサーバー」を契約するのが一般的です。レンタルサーバーも複数のプランがあり価格もピンからキリですが、個人向けだとおおよそ月額500〜1,000円くらいが一般的です。

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

3社であれば基本的にどれも有名で十分なサービスだと思いますが、コスパ・初心者重視なら「ロリポップ！」、スペック重視なら「エックスサーバー」で、コントロールパネルなどの使い勝手がいいので、個人的に一番オススメなのはエックスサーバー です。

ドメインの取得

サーバーを用意すると同時に、インターネット上の住所に当たるドメインも取得する必要があります。レンタルサーバーを契約した直後は、初期ドメインというレンタルサーバーのサブドメイン(xxxx.xsrv.jpや、xxxx.sakura.ne.jp、xxxx.lolipop.jpなど)が利用できます。

もちろんこのサブドメインを使うだけでもいいのですが、実際のお店のホームページやビジネスサイトには不向きです。お店様のものとして長く使う可能性がある場合は、自分専用のドメイン(独自ドメイン)も準備する必要があります。ドメイン名は後から簡単に変更できませんし、名刺や封筒に印刷したりもするのでとても重要です。

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

名前の最後についている、「.com」や「.net」の独自ドメインを取得する場合、おおよそ年額1,000〜2,000円程度の取得・更新費用がかかります。この他にも「co.jp」や「.org」、「.biz」などがあります。どのドメインにするかによっても値段が違います。

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

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

コンテンツ（中身）の作成

ここまでで、レンタルサーバーの契約とドメインの登録が完了してWebサイトを構築する準備が整いました。飲食店で例えると今はテナントを契約した直後の状態でテーブルも椅子もメニューも調理器具も何もない状態です。

ここからはサーバー(建物)の中にコンテンツ(中身)を作成していきます。

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

HTMLとCSS

HTMLとはHyper Text Markup Languageの略で、Webページの構造を定義する言語です。CSSとは、Cascading Style Sheetsの略で、Webページのスタイル（見た目）を指定する言語です。HTMLとCSSを組合わせてホームページが出来上がります。

<html>のような『タグ』と言われるかたまりを使って文章や画像を加えたり、リンクを貼ることができます。作成したファイルを契約したサーバーにファイル転送ソフトなどを使ってアップロードします。

様々な変更は上記プログラムを変更することによって行い、データをアップロードしてサイト内の内容を更新します。慣れていないと消してはいけないものを消してしまう恐れもあります。

WordPressなどのCMS

ホームページは作ったらそれで完成ではなく、日々更新してサイトを育てていかなければなりません。最近よく利用されているのが、HTMLやCSSを知らなくてもある程度自由にホームページを作れるCMSソフトのWordPressがよく利用されています。CMSとは、コンテンツマネジメントシステムのことで、現在、WordPressというオープンソース(無料)のCMSが世界中で一番有名です。

管理画面から簡単に更新が行えたり、テンプレートが豊富にあるので、そのテンプレートに沿って写真や内容を変更すればプログラミングのことがよくわからなくても素敵なサイトが作れてしまいます。

ただし、WordPressを利用していても、細かいレイアウト調整にはHTML・CSSの知識が必要になってくるので、こだわる場合はHTMLやCSSを覚えていく必要があります。

サイトの構成を考える

どのようなコンテンツを作ったらよいかは、これから業種・サービス内容によってちがってくるので一概には言えませんが、多くの場合、下記のような項目のコンテンツが用意されています。

• トップページ(HOME)
• サービス(事業内容)
• お知らせ（ニュース）
• 料金表
• 製品情報
• 会社情報（プロフィール）
• あいさつページ（コンセプトページ）
• リクルート(採用ページ)
• 良くある質問（FAQ）
• 実績(作品)・メディア掲載歴
• お客様の声
• お問い合わせ
• ブログ(コラム)

これらの情報をグループにわけ、製品情報の中に料金表を入れたり、会社情報の中に挨拶ページを入れたりしながら組み合わせを考えます。

構成図を作っておくと整理しやすいでしょう。

文章ばかりでは、読みにくいサイトとなってしまいます。写真や図を入れながら体裁を整えましょう。

WEBの基本とホームページの作り方のまとめ

今回はWEBの基本とホームページの作り方について説明しました。

最初はレンタルサーバーやドメインなどわからない部分があったりするかもしれませんが、順番にやっていけばさほど難しいものではありません。

ただ、日々の業務を行いながら構築していくのはなかなか大変な作業になります。TRYはそのような場合のお手伝いを行っています。

お問合せフォームからお気軽にご相談ください。

CONTACT

返信にお時間をいただく場合がございます。あらかじめご了承ください。

try-sol.com

2020.04.07