2020年8月のブログ収益が過去最高(6桁)を記録しました。ありがとうございます。

【WEBサイトの仕組みとは】作成から公開までの流れを解説【初心者向け】

【WEBサイトの仕組みとは】作成から公開までの流れを解説【初心者向け】

質問してる人

アラサー男子さん、私、最近ウェブサイトをつくってみたいなと思ってるんですけど、大丈夫ですかね?
サイト作成は全体の流れを理解していればむずかしくありませんよ。

アラサー男子 in L.A.

質問してる人

へぇー。そうなんですか。

でも、どこから勉強したらいいんですか?

そうですね。

まずは、いつも何気なく見ているWEBサイトがどのように作られて公開されているのか、その流れを理解するところからはじめましょう。

アラサー男子 in L.A.

 

本記事では、ひとりでWEBサイトを作れるようになるために「作成」から「公開」までの流れを初心者にもわかりやすく解説します。

「将来ウェブサイトを作ってみたい」という方向けに、WEBサイトの作り方から公開までの流れをていねいに解説していますので、ウェブ知識ゼロの方でもわかるように基礎の基礎から解説するので、まずはここから理解しましょう。

スポンサードサーチ

【WEBの仕組み基礎知識】インターネットとは?ウェブとは?

【WEBの仕組み基礎知識】インターネットとは?ウェブとは?

今後ウェブサイト制作のスキルを身につけていくために、まずは全体像の話からはじめてみます。

よく耳にする「インターネット」「ウェブ」という言葉ですが、厳密に言えば、それぞれが意味するものは違います。

すこし広すぎる話題かもしれませんが、基礎中の基礎知識なので、まずはここからしっかり理解しましょう。

 

インターネットとWEB(ウェブ)の違いとは

【ひとことで解説】インターネットが意味するもの

インターネットとはコンピューター同士をつなげてやり取りする情報伝達の仕組みのことでして、WEB、Eメール、ファイル転送システム、クラウドストレージ、ネット電話などが含まれます。

パソコンやスマホ、最近だと車や家電も繋いでいるシステムがインターネットということになります。

 

【ひとことで解説】WEB(ウェブ)とは

インターネットと混同されやすいWEBですが、それ自体はインターネットの仕組みの中の一つでして、主にみなさんがネットサーフィンなどで見ているものを指します。

WEBとはWorld Wide Web(ワールドワイドウェブ)の略称で、通常のウェブサイトは www.〜〜〜〜というアドレス(URL)ではじまるものがほとんどです。(wwwを表示していないサイトもありますが、設定で非表示にしているだけです)

 

【図解】WEBの世界ってどうなっているの?

WEBの世界を理解するには、実際の世界に置き換えてみるとわかりやすいはず。ということで、下記のイメージを作りました。

 

WEBの世界を図解

【図解】WEBの世界ってどうなっているの?

こんな感じでして、WEB上にはたくさんの建物(サーバー)があり、その建物内の部屋一つ一つにWEBサイトが存在しています。

これらの部屋には個別に住所が割り当てられていて、WEBサイトを作るということは、この部屋を契約してデコレーションする作業ということになります。

さらに、一つ一つの部屋にも、キッチン、リビング、寝室などがあり、WEBの世界では、それらがWEBページと呼ばれます。

 

WEBサイトの仕組み

ここからは少し専門的な話になりますが、最初は全て理解しなくてもOKです。

WEBサイトの作り方を勉強していく中で少しずつ知識は深まっていくので、今は “なんとなく” 全体イメージをつかんでみてください。

 

【図解】WEBサイトが表示される仕組み

WEBサイトが表示される仕組みは、マンション1階のインターフォンで部屋の住人を呼び出すイメージに似ています。こちらも下記の通り図解しました。

 

WEBサイトが表示される仕組み図解

WEBサイトが表示される仕組み

このような流れでして、スマホでネットサーフィンをするとき、サイト名を入力するとサーバーがそのページを表示してくれる仕組みです。

サイト名を入力する行為を「リクエスト」と呼び、サイトを表示する行為を「レスポンス」と呼びます。

また、リクエストを送る側が「クライアント」で、レスポンスを返す側が「サーバー」ということになります。

 

WEBサイトはブラウザを介して見る

WEBサイトは基本的に「WEBブラウザ」を介して閲覧します。

代表的なものには「マイクロソフトエッジ(旧インターネットエクスプローラー)」「グーグルクロム」「ファイアーフォックス」などがあります。

 

WEBブラウザはどんな役割なの?

ブラウザの役割を簡単に説明すると、「プログラミング言語の通訳者」てきな位置付けです。

WEBの世界はプログラミング言語で成り立っていまして、これは信号や指示を表記した英語や記号の文字列の文字列なので、プログラマーやエンジニアなどのプログラミングを勉強した人じゃないと解読することができません。

そのため、一般の人にもわかりやすく伝えるために「ブラウザ」が「プログラミング言語を翻訳」して、見やすい形で表示してくれているというわけです。

 

【WEBサイト制作の流れ】作成から公開まで

【WEBサイト制作の流れ】作成から公開まで

WEBの基礎知識を学んだところで、ここから本題に入ります。

自分でWEBサイトを作って公開できるようにするには、どのようなステップで進めばいいのか。まずは大まかな流れを理解する必要がありますので、下記をご覧ください。

 

5つのステップでWEBサイトを作る

① サーバーを用意する

① サーバーを用意する

WEBサイトをつくるには、サーバーを契約しなければなりません。

自作もできますが、その場合、一人で家を建てるのと同じで、設計技術や時間が必要なるので、レンタル業者から借りる方が簡単かつ一般的です。

容量(部屋の広さ)によって値段はバラバラですが、安いものだと月300円程度で借りられます。

安いレンタルサーバー会社の代表格が ロリポップ! でして、なんと月額100円〜の利用が可能です。

そのほか、エックスサーバーはWordPressユーザーに人気があり、wpX というワードプレス専用サーバーなんかも用意されています。

② ドメインを取得する

② ドメインを取得する

部屋を決めたら、次は住所の設定です。

WEBの世界では、自分で住所を決めることができまして、ドメインと呼ばれます。

サーバーを借りる時にドメインも一緒に借りられることがほとんどなので、サーバーと一緒にわかりやすいドメインを用意するといいと思います。

ムームードメイン は国内最大手なので、取得手続きもわかりやすく、初心者にもおすすめです。

③ HTMLでサイトの骨組みを作る

③ HTMLでサイトの骨組みを作る

サーバーとドメインを決めたら、HTMLでサイトの骨組みを作ります。

画像を置く場所、新着記事を表示するエリア、人気記事のエリアなど、WEBサイトのフレームになる部分です。

④ CSSでサイトのデザインをする

④ CSSでサイトのデザインをする

HTMLでフレームを作ったら、文字の色や大きさ、背景色や枠の形などをCSSで装飾します。

⑤ サーバーにアップロードする

⑤ サーバーにアップロードする

最後に、HTMLの情報とCSSの情報をサーバーにアップロードしたら終了、

FTPクライアントと呼ばれるサーバーとパソコンを繋ぐソフトを使って、ファイルをアップロードしたらサイトが完成です。

この5ステップでインターネットを通じてWEBサイトが見れるようになります。

 

サーバーとドメインは必須

サーバーとドメインはどんなウェブサイトを作るにも必須なので、将来ウェブサイトを作ってみたいという場合は、自分でサーバー・ドメイン契約手続きまでをできるようになる必要があります。

サーバー契約、ドメイン設定とか、少しむずかしく聞こえますが、各サービスのサイトには手順が書いてあるので、それ沿っていけば問題なく進められるはずです。

おすすめのサーバーとドメイン会社をまとめましたので、それぞれ見比べて自分に合ったサービスを探してみるのをおすすめします。

 

 

【参考】ホームページ、WEBページ、WEBサイトの違い

余談ですが、WEBサイトには様々な呼び方がありますね。

ひとによってサイトのことをなんと呼ぶかが分かれていたりしますが、具体的にはそれぞれ別のものを定義しているので、コミュニケーションのミスを防ぎたいのであれば、しっかりと意味を理解しておくことは結構重要だったりします。

 

ホームページ・WEBサイト・WEBページの違い

ホームページ

→ ブラウザを立ち上げた時に最初に現れるページのこと。Yahoo!やGoogleのトップページだったりすることが多いです。

WEBサイト

→ 複数のページの集合体。4LDKのマンションに例えると、その全ての部屋をまとめてWEBサイトと呼びます。

WEBページ

→ ひとつのページ。4LDKのマンションに例えると、キッチン、リビング、寝室はそれぞれ別のWEBページです。

 

WEBサイト制作の必須スキル【目的別に勉強すべき話】

WEBサイト制作の必須スキル【目的別に勉強すべき話】

ここまでで、「WEBサイトをつくってみたい」と思った方向けに、身につけるべきスキルと勉強方法を解説。

どのくらいのサイトを作りたいかによって、どんなスキルが必要かは違いますが、最低限学ばなくてはいけないものは下記の2つです。

 

【HTMLとCSS】何ができるの?

HTML:WEBサイトの骨組みをつくるためのプログラミング言語
CSS:WEBサイトのデザインをするために使う言語

この2つをある程度学ぶと、WEBサイトは作れるようになります。

初めから完璧にマスターする必要はないので、基本を押さえたら、実際にサイトを作りながらスキルを溜めていきましょう。

「最初に本やプログラミングスクールで100%理解するまで勉強してからはじめよう」というよりも、やりながらググって知識を深めていく方が成長速度も格段に早いです。そもそも必要なコードを全部暗記しているデザイナーやプログラマーはいませんので安心してもらって大丈夫です。

HTMLとCSSは、それぞれ下記の記事でガッツリ解説しています。「初心者からでも独学で学ぶための知識は全て紹介する」をコンセプトに、かなりのボリュームでゼロから解説していますので、ウェブ制作に興味がある方はぜひご一読ください。

HTML入門への手引き:基本の書き方とタグの使い方【初心者向け】 HTML入門の手引き:基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】 CSS入門の手引き:スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】 CSS入門の手引き:スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】

 

【上級】ゼロから自分でサイトを作りたい

自分のパソコンでコードを書いて、サーバーにアップロードしながらサイトを作っていきたいという方は、HTML、CSSに加えてFTPクライアントの使い方であったり、JavaScriptなどの別の言語も学ぶ必要があります。

難易度は最も高いのですが、基礎を押さえて実際にサイトを作りながら勉強していけば、キャリアもステップアップできるので本気で取り組みたいならここを目指すといいと思います。

 

【中〜上級】WordPressでサイトを作りたい

WordPress(ワードプレス)とはサイト作成や編集をラクにしてくれるツールでして、世界中にあるWEBサイトのほとんどがこのWordPressを使って作られています。

このブログもWordPressで作っているので、僕が自分でサーバーをいじったり、FTPクライアント経由でファイルアップロードをしたりすることはほとんどありません。

WordPressなら、はじめからテンプレート(デザインの骨組み)が用意されているので、好きなデザインを選んでクリックするだけで基本的な構成は終了し、あとは記事を書くだけというお手軽さが魅力です。

とはいっても、テンプレートをカスタマイズして好みのデザインにするにはHTMLやCSSを触らないといけないので、知識ゼロで挑むのは少し難易度高めです。

個人的には最もおすすめしたいのがこのWordPressでして、本ブログでも使い方や困ったときの解決方法を解説していますので、WordPressに興味が出てきたという方は、下記の記事をご覧いただければ幸いです。

 

WordPressの基礎を徹底解説した記事

ブログを始めるならWordPressが圧倒的におすすめ【基礎知識と理由解説】 ブログを始めるならWordPressが圧倒的におすすめ【基礎知識と理由解説】

 

【初級】プログラミングはちょっと…でも、ブログをやりたい

ブログをやってみたいけど、プログラミングは少し難易度が高いと思っている方には、はてなブログやアメーバブログなどのブログサービスをおすすめします。

これらを使えば、HTMLやCSSを触ることなく、ブログを書くことができます。

その反面、ブログで稼ぎたいという目標がある場合、将来性はあまりないので、あくまでも日常生活を発信するタイプのブログ向けになります。

 

初心者に無料ブログをおすすめする理由

【超ブログ初心者向け】WordPressの前に無料ブログで始めるとイイですよ 【超ブログ初心者向け】WordPressの前に無料ブログで始めるとイイですよ

スポンサードサーチ

【まとめ】まずはWEB制作の仕組みと手順を理解しよう

まとめ

今回は以上となります。

WEB制作は仕組みと手順さえ理解していれば、あとはググりながら新しいCSSを覚えたり、自分好みにアレンジしたりしながら進めていけるので、まずは全体像をイメージできるようにしておきましょう。

おわり。