PR

Webサイト・ホームページの作り方-基礎知識と制作の流れ

Webサイトの作り方-基礎知識と制作の流れ 基礎知識
記事内に広告が含まれています。
スポンサーリンク

どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです!

自分のサイトを作ってみたいな〜!

と思ったときに、まず最初に知りたいのが

そもそもどうやって作るの?

ということですよね。

とみーもこのサイトを作るときに色々調べたのをよく覚えています。

そこで今回は、

  • 初心者がWebサイトを作成するまでの流れを
  • 最低限必要な知識とともに

見ていきましょう!

とみー
とみー

この記事を読めば、どういう流れでサイトを作るのかがわかります!

スポンサーリンク

基礎知識:Webサイトが見られる仕組み

Webサイトを作成するにあたって、まずは簡単にその仕組みについて見ていきましょう。

  • HTMLファイル
  • Webサーバー
  • ドメイン

の3つがキーワードです。

とみー
とみー

順番に見ていきましょう!

WebページはHTMLファイルに書かれている

Webページは特別なファイルに書かれている

Webサイトは、Webページが集まってできています

とみー
とみー

そして、普段わたしたちが見ているWebページの情報は HTML という特別なファイルに書かれています。

HTML には、「こういう内容を画面に表示してね!」という指示が書かれています。

つまり、

Webページを作るとは?

HTMLファイルを作ること

ということになります。

そのため、Webページを見るということは、どこかに保存されているHTMLファイルを見るということです。

それでは、このHTMLファイルは一体どこに保存されているのでしょうか?

HTMLファイルはWebサーバーに保存されている

Webサーバ

その答えは、Webサーバーというコンピューターです。

Webサーバー

Webサイトでやり取りをするファイルを保管しているコンピューター

Webサーバーはサイトに必要なファイルを保管するだけでなく、世界中に公開するという役割もあります。

とみー
とみー

サイトのHTMLファイルをWebサーバーに保管しておくことで、世界中の人がそのサイトを見れるようになるのです!

Webページを見るために使うGoogle ChromeやSafariなどのWebブラウザは、実は裏でWebサーバーから必要な情報を受け取っています。このおかげでWebサイトが見れるのですね。

Webサーバーはコンピューターなので、置き場所が必要です。

それでは、Webサーバーは一体どこにあるのでしょうか?

Webサーバーがある住所=ドメイン

その答えとなるのが、ドメインです。

とみー
とみー

ドメインは、インターネット上の住所とよく呼ばれます。

ドメイン

Webサーバーがある住所。Webサイトに必要なファイルが保存してある場所の名前。

現実世界の住所のように世界中に同じドメインは1つしか存在しないため、ドメインがわかればどのWebサイトかということがわかります。

ドメイン

ドメイン名の付け方には一定の規則があり、よく見る形としては「〜.com」や「〜.co.jp」といったものがあります。

例えば、google.comはGoogleのサイトと、microsoft.comはMicrosoftのサイトと紐づいています。

住所がわかればその場所に行って必要な情報にアクセスできるという仕組みですね。

ここまでのまとめ:Webサイト制作に必要なもの

以上をまとめましょう。

Webサイトを作成するためには、

  1. Webページの内容を記述するHTMLファイル(+それを作成する知識・技術)
  2. 各種のファイル・情報を保管するWebサーバー
  3. Webサーバの住所となるドメイン

の3つが必要です。

とみー
とみー

HTMLファイルはWebページの中身にあたる部分なので、サイトを更新するたびに新しいファイルを作成したり、既存のファイルを更新したりしていくことになります。

スポンサーリンク

Webサイトを制作するまでの具体的な流れ

ここまでで基礎知識が押さえられたので、ここからは具体的な流れを見ていきましょう。

とみー
とみー

以下のステップでサイトを作ることができます。

Webサイト制作の流れ
  • STEP1
    Webサーバーを用意する
  • STEP2
    ドメインを取得する
  • STEP3
    Webサイトのコンテンツを作成する

1つずつ解説します。

STEP1:Webサーバーを用意する

まず初めに行うのが、Webサーバーの用意です。

とみー
とみー

Webサイトを見られるようにするためには、元となるHTMLファイルの置き場が必要だからです。

Webサーバーを用意する方法は、

  • 自前
  • レンタル

の2種類があります。

自前サーバ

自分でWebサーバーを用意することもできますが、用意するにあたって必要な知識や準備しなければならないものが多く、初心者にはハードルが高いと思われます。

とみー
とみー

残念ながら、現在の管理人とみーの知識は自前サーバについて解説できるレベルにありません。

Webサーバーはとにかく用意できればいいので、無理に自作する必要はありません。

むしろ不十分な知識で自作してしまうと、セキュリティなどの多くの面で管理が大変になってしまいます。

レンタルサーバー

管理人のとみーと同じレベルの初心者の方は、レンタルサーバー会社と契約してサーバーをレンタルする方が断然簡単でおすすめです。

サーバのレンタル

レンタルサーバー会社は多数のサーバーを保有しており、空きサーバーをレンタルで貸し出しています。

とみー
とみー

会社が保有するマンションの空室がサーバで、その1室をレンタルするような感じです。

レンタルサーバー会社は、エックスサーバーロリポップ!さくらのレンタルサーバという3社が大手となっており、これらに加えて新参で成長中のConoHa WINGなどがあります。

サーバーのレンタルに必要な料金
サーバーのレンタルに必要な料金

レンタル料金は契約する会社によって多少違いはありますが、月額数百円〜数千円程度のプランが多いようです。

とみー
とみー

機能に制限があるものの無料で契約できるレンタルサーバーもあります。

とりあえずお金をかけずにやってみたいという人は、無料レンタルサーバーから初めてみるのもいいでしょう。

サーバーのレンタル方法

サーバーが用意できたら、Webページのもとになるファイルを置く場所が確保できたことになります。

STEP2:ドメインを取得する

Webサーバーが用意できたら、ドメイン管理会社を通じてWebサイトのドメイン(住所)を決めていきます。

とみー
とみー

Webサーバーがあってもその住所がわからなければ、誰も辿り着くことはできないですよね。

ドメイン取得

レンタルサーバー会社はドメイン管理会社と提携していることも多く、その場合はサーバーをレンタルする際にドメイン取得まで手続きできることがあります。

そうでない場合は別途ドメイン管理会社で契約します。

ドメイン取得に必要な料金

ドメイン取得に必要な料金

「〜.com」や「〜.net」などのドメインの種類によって料金は大きく異なってきますが、おおよそ年額数百円〜2,000円程度の幅に収まっています。

ドメインは住所なので、すでに誰かが使っているものは取得することができません。

とみー
とみー

つまり、早い者勝ちということです!

ドメインの取得方法

ドメインが取得できたら、そのドメインを使ってWebサーバーにアクセスできるようになります。

STEP3:Webサイトのコンテンツを作成する

  • 情報を保管する役割をするWebサーバー
  • インターネット上の住所となるドメイン

が準備できたら、あとはWebサイトの中身となるHTMLファイルを作成していきます。

とみー
とみー

Webサーバをマンションの1室と考えると、これは部屋の装飾や家具の搬入といった作業に相当します。

ここではもう少しHTMLファイルについて理解を深めましょう。

文章構成を定めるHTMLファイル

HTMLファイルには、文章の内容とその構造が記述されています。

HTML

どういう文章を表示し、どの文字が見出しでどこからどこまでが段落なのか…といったことがこのHTMLファイルで定められます。

HTMLの基本
  • HTMLファイルは1ページにつき1つ
  • 決まった書き方(文法)がある
とみー
とみー

そのため、HTMLの基本的な書き方を習得しなければWebページを作ることができないということになります。

さすがにこれではハードルが高いので、HTMLについて勉強しなくてもいいように便利なソフトウェアが用意されています。

HTMLを知らなくてもサイトが作れるWordPress

HTMLを知らなくてもサイトが作れるWordPress

それが WordPress です。

WordPress を用いると、

HTMLの知識がなくても簡単に記事を作成・更新できる

ようになります。

とみー
とみー

それ以外にも以下のような利点があります。

WordPressの利点
  • 無料おしゃれなデザイン(テーマ)が使える
  • 拡張機能(プラグイン)が使える
  • 自由度が高い
とみー
とみー

WordPress を利用すると、HTMLを書くことなくボタン操作だけでWebサイトを作れます。

WordPress を使う場合は Web サーバー上にインストールする必要がありますが、現在ではレンタルサーバーを契約するとその管理画面から簡単にインストールできるようになっていることが多いです。

絶対にお金をかけたくない場合は無料ブログ

絶対にお金をかけたくない場合は無料ブログ

ここまで読んできてこう思った方が中に入るかもしれません。

WordPressっていうのを使えば色々できるのはわかったけど、お金はかけたくない…。

お金をかけたくない場合は

  • ライブドアブログ
  • はてなブログ
  • Amebaブログ

などの無料ブログサービスを使うという選択肢があります。

この場合はすでにサイトを持っている会社のスペースを無料で貸してもらうという形になります。

とみー
とみー

自由にカスタマイズできる部分は減ってしまいますが、お金を1円もかけたくないという場合はこちらの方がいいかもしれません。

スポンサーリンク

まとめ:サーバーやドメインについて詳しく知りたい方は

初心者がWebサイト(ブログ・ホームページ)を制作するにあたって必要なのは、以下の3つです。

  • Webサーバー…Webページの情報(ファイル)を保管する場所です。レンタルサーバーを契約するのが簡単です。
  • ドメイン…Webサイトの住所です。レンタルサーバー契約と合わせて取得できる場合はそちらが簡単です。
  • WordPress…HTMLの知識なしにWebサイト運営ができるようになります。Webサーバーにインストールします。
とみー
とみー

大まかな流れは掴めたでしょうか?

流れが掴めたら、次のステップはWebサーバー、ドメインに関してもう少し理解を深めましょう!

スポンサーリンク

コメント

タイトルとURLをコピーしました