0からウェブサイトを作るには?ウェブの仕組みとページの作成・公開までの流れ

ウェブデザインを作り公開するまでの流れ
サルワカくんの顔(通常)
サルワカくん
さて、ゼロからWebサイトの作り方を勉強していきましょう!ていねいに解説していくのでプログラミング未経験者の方もご安心ください。

はじめに、皆さんが普段見ているWebサイトがどのように公開されているのかを理解しましょう。

1.インターネットとは?ウェブとは?

スムーズに理解するために、少し広い話から始めましょう。

1-1.インターネットとは?

皆さんが普段何気なく口にする「インターネット」とは何なのでしょうか。

インターネットとは

インターネットとはコンピュータどうしを繋げて、ありとあらゆる情報のやり取りをする仕組みのことです。

この「コンピュータどうしの繋がり」こそがインターネットなのです。

1-2.ウェブとは?

ウェブという言葉もよく聞きますが、インターネットとの違いは何なのでしょうか。実はウェブはインターネットのたくさんの機能のうちの1つです。

ウェブとインターネットの関係

「インターネットの中にウェブが含まれる」というイメージですね。インターネットにはウェブ以外にもメールやファイル転送など様々な機能があります。

そして、みなさんがいつもネットサーフィンで見ているものが「ウェブ」です。今見ているこのページもウェブ上のものです。 ウェブはインターネットの最も主要な機能なので、インターネット=ウェブという意味合いで使う方も多いんじゃないかと思います。

2.ウェブの世界の成り立ち

ウェブについてもう少し詳しく見ていきましょう。

ウェブのイメージ≒高層ビル群

ウェブとは

ウェブの世界は高層ビル群のようなものです。ビルの中にはたくさんの部屋(ウェブサイト)があります。

ウェブURLの構造

1つ1つの部屋には住所のようなもの(≒URL)が割り当てられています。この部屋の中に公開したい情報を入れておけば、検索エンジンやリンクを通して人が見に来ることができるわけですね。

このようにたくさんの人々が部屋に情報を集め、その部屋どうしをリンクで繋げたり、部屋を検索エンジンに登録してもらったりすることで、便利なウェブの世界は成り立っているのですね。

3. ウェブページを見るまでの流れ

私たちが普段パソコンやスマホで見ているウェブページは、どのような流れで表示されるのでしょうか。

サルワカくんの顔(通常)
サルワカくん
少し難しい話になりますが、いきなり全てを理解する必要はありません。なんとなく「こういうものなんだな」程度に頭に入れておきましょう。

3-1.サーバーとのやり取りでウェブページは表示される

ウェブ上で情報を公開しているソフトウェアやコンピュータのことをWebサーバーと呼びます。一方で、Webサーバから情報を受けとる方をWebクライアントと呼びます。ネットサーフィンをする私たちは、Webクライアントの方に当たりますね。

ウェブサーバとクライアント・サーバ

情報を公開しているWebサーバーと、皆さんのスマホなどのWebクライアントがやり取りをすることで、ウェブページを見ることができるわけですね。

WebサーバーとWebクライアント

例えばみなさんがスマホからYahooのURLを入力してアクセスするとき、「Webサーバーに見せて!」とリクエストが送られています。 サーバーはそれに対して「Yahooのページですね。どうぞ!」と返すわけです。

3-2.ウェブページはブラウザで見る!

ウェブブラウザ

ウェブページは基本的に「ウェブブラウザ」を使って閲覧します。

ブラウザ

インターネット・エクスプローラーとかGoogleクロームとかSafariとかですね。

このウェブブラウザというのは、私たち(Webクライアント側)がウェブページを快適に見るのを手伝ってくれるものです。

ブラウザにより快適にウェブページが見れる

私たちがサーバから受け取ったWebページの情報は「コンピュータ向けの言語(コード)」で書かれています。

ウェブブラウザの役割

コンピュータ向けの言語(コード)をいちいち解読していられませんよね。そんな「コンピュータ向けの言語」を「人間向けの言語」に変えて表示してくれるのがブラウザなのです。

4.ウェブサイトを作って公開するまでの流れ

ようやく本題です。ゼロからウェブサイトを作って、公開するにはどうしたら良いのでしょうか。ここでは、そのおおまかな流れを紹介します。

HTML文章を書く

1

ページの内容をHTML文書で書く

ページの文章と骨格をHTMLという言語で書きます。HTMLは“指定されたタグで文を囲む”ような形で書いていきます。書き方はサルワカで丁寧に解説していきます。必要な物:テキストエディタ ※ 無料でダウンロードできます。

CSSを書く

2

ページのデザインをCSSで書く

①とほぼ同時に行います。①で作成されたHTML文書のデザイン情報をCSSという言語で書いていきます。CSSにより文字の色を変えたり、線を引いたり、余白の大きさを調整したりすることができます。必要な物:テキストエディタ

レンタルサーバーを借りる

3

サーバーを用意する

①②でウェブページの情報が作られました。これを皆が見れるように公開するには、サーバーを用意する必要があります。サーバーは自作もできますが、業者からレンタルした方が簡単です。イメージ的にはビルの一室を間借りするような感じですね。 レンタル料金はまちまちですが、500円/月あれば十分な性能のサーバーを借りることができます。

ドメインを決める

4

ドメインを取得する

ウェブサイトの住所は自分で決めることができます。この住所はドメインと呼ばれます。よく見る「~~ .com」や「~~.jp」というやつですね。ドメイン管理業者を通して、自分の好きなドメインを取得することができます(既に使われているものはNG)。 ドメイン管理業者はレンタルサーバー会社と提携していることが多く、サーバーを借りるときにまとめて手続きができます。

ファイル転送ソフトでHTMLとCSSをサーバーにアップロードする

5

サーバーにウェブページ情報をアップロード

ファイル転送ソフト(=FTPソフト)というものを使えば、自分のパソコンからサーバーに簡単にデータをアップロードすることができます。ファイル転送ソフトを使い、①②で作ったHTML文書やCSS文書などのウェブページ情報をサーバーにアップロードします。 必要な物:ファイル転送ソフト ※ 無料でダウンロードできます。

URLを入れるとウェブページが見れるように

6

URLを入力すればページにアクセスできる!

ここまでの作業を済ませれば、ブラウザでURLを入力することで皆がページにアクセスできるようになります。

URLはどうやって決まる?

URLの構造

ウェブページのURLは「http://ドメイン名/ほにゃらら〜」というものになります。基本的なURLの決まり方は、URLを読み解こうで解説しています。とはいえ、現段階でしっかり理解する必要はありません。

ウェブページを拡散

7

ウェブページを拡散する

公開したウェブページは多くの人に読んでもらいたいですよね。そこで、TwitterやfacebookなどのSNSでシェアしたり、Googleなどの検索エンジンに表示されるように設定したりします。 これらの手順もサルワカで今後解説していきます。

5.結局ウェブサイトを作るためには何を学べば良いの?

ウェブデザインができるようになるには何を学べば良いの?

ウェブサイトが公開されるまでの流れが分かったとして、結局何を学ばなければならないのでしょうか。

5-1.ウェブデザインのスキルを身に着けたいなら

最低限学ぶ必要があるもの

  • HTMLの書き方:ウェブページの骨格を作るために学ぶ必要があります。
  • CSSの書き方:ウェブページのデザインをおしゃれにするために学ぶ必要があります。

この2つの知識さえあれば、立派なウェブページを作ることができます。あとの手続きは腰を入れて学ぶ必要はありません。ググれば、丁寧にやり方を解説してくれるからです。

サルワカくんの顔(喜)
サルワカくん
この2つを学んだあとに、ウェブページに動きを加えたりしたくなったらJavascriptなどの言語を追加で学びましょう。

5-2.ただブログを作りたいなら…

はてなブログAmebaブログLivedoorブログなどのブログサービスを使えば、さきほどのややこしい手続きを全てすっとばしてブログを作ることができます。無料で始めることができ、記事を書いて公開するのも簡単です。デザインのテンプレートも多く揃っているので、それなりにおしゃれなブログを作ることができます。

5-3.Wordpressでおしゃれなブログを作りたければ…

WordPress(ワードプレス)とはウェブサイトの作成や更新を楽にしてくれるツールです。このサルワカもWordpressを使って運営されています。WordPressを使ってブログを始めるにしても、HTMLとCSSの知識がなければ、自分の好きなようにデザインをカスタマイズすることができません。 WordPressの使い方についてもサルワカで解説します。

結論
まずはHTMLとCSSの書き方を学ぼう!

【参考】ホームページ・ウェブページ・ウェブサイトの違いは?

最後に少しだけ余談を。いまさらですが、この記事では「ウェブページ」と「ウェブサイト」という単語を連発してきました。ウェブサイトとウェブページのイメージはつかめるかと思いますが、「ホームページ」との違いは何なのでしょうか。

違いは何?

  • ウェブページ:1つのページです。たとえば、今見ているこの記事はウェブページです。
  • ウェブサイト:複数のウェブページの集まりです。記事のページやトップページなど全て含めて1つのウェブサイトです。
  • ホームページ:多くの人が誤用しているのがこの言葉です。本来はブラウザを立ち上げたときに「1番はじめに表示されるページ」を指す言葉だったのですが、現在では「ウェブサイト」の意味で使う人が多そうですね。

ウェブページ、ウェブサイト、ホームページ、少し分かりづらいのですが、ウェブデザインを学ぶのであれば頭に入れておきましょう。

まとめ

まとめ
  • ウェブはインターネットの機能の1つ
  • ウェブページを見るときには、サーバーからページの情報を受けとりブラウザで表示
  • ウェブページを作るために、まずHTMLとCSSの文を作る
  • ウェブページを公開するためにサーバーを用意してドメインを取得
  • HTMLとCSSなどのウェブページの情報はファイル転送ソフトでサーバーにアップロード
  • ウェブデザインスキルを身につけるなら、HTMLとCSSの書き方を覚える
サルワカ