こんにちは！
nyaです。
今回はゼロの状態からWebサイトの作り方についてご紹介していきます。
詳しく解説していくのでこれからWebデザイナーになりたい人や、Webサイトを自分で作ってみたい人におすすめです。
本記事の内容
- Webとは？
- Webページを見るまでの流れ
- Webサイト作成の流れ
- Webデザイナーになるためには？[/su_service]
まず、Webについての基礎知識から学んでいきましょう。
Webとは？インターネットとは？
現代社会でWebやインターネットは当たり前の世界なので「説明されなくてもわかる」という人も、まずはWebやインターネットについてイチから理解しておきましょう。
インターネットとは？
では、普段あなたが何気なく使っている「インターネット」とは一体何なのでしょうか？
インターネットとは、コンピュータどうしを繋げて、様々な情報のやり取りをする仕組みのことです。
この「コンピュータどうしの繋がり」がインターネットなんです。
Webとは？
「Web（ウェブ）」という言葉もよく聞くと思います。
インターネットと同じ意味だと思っている人も多いはず。実は・・少しだけ違うんです。
Webはインターネットの中の一部というイメージです。インターネットは、Web以外にもメールやLINE、ファイル転送など様々な機能があります。
あなたが普段ネットサーフィンで見ているサイトが「Web」です。
今見ているこのブログもWeb上にあります。
Webはインターネットの中で最も大きな機能なので、インターネット＝Webと思っている人も多いんだと思います。
Webの世界の仕組み
Webサイトを作っていくにはもう少しWebについて理解する必要があります。詳しく見ていきましょう。
Webの世界を人が住んでいる家やマンションだとイメージしてください。
例えばマンションの場合、マンションの中にたくさんの部屋（Webサイト）がありますよね。
部屋には住所（URL）が必要です。
この部屋の中には自分が発信したい情報を飾っておきます。そうすることで検索やリンクで訪れてくれた人が見に来てくれるのです。
マンションの部屋のようにたくさんの人が自分のサイトに情報を集め、部屋どうしをリンクで繋げたりしてWebの世界は成り立っています。
Webページの仕組み
Webというものを少しだけ理解できたかなと思います。
次はそんなWebページがどんな流れであなたのパソコンやスマホに表示されているのかを説明していきます。
なんとなーくの理解でOKです！
サーバーからWebページが表示される
Web上で情報が公開されているソフトウェアやコンピュータのことを「Webサーバー」と言います。
逆にWebサーバーから情報を受け取る方を「Webクライアント」と言います。
ネットサーフィンをしている時のあなたはWebクライアント側に当たります。
例えば、あなたがAmazonのURLを入力してアクセスした時に、Webサーバーに「Amazonのページを見せて」とリクエストしています。
それに対してサーバーが「これがAmazonのページですよ」と応答しているんです。
サーバーについては下記記事でご紹介しているので参考にしてみてください。
https://nyaaalog.com/blog-server
Webページはブラウザで表示します
Webページは基本的に「Webブラウザ」を使って閲覧します。
有名どころだとインターネット・エクスプローラーや、Googleクローム、Safariなどですね。
このWebブラウザたちは、私たちがWebページを見るのを手伝ってくれています。
私たちがサーバーから受け取る情報はコードで書かれており、これはコンピュータが理解できる「言語」なんです。
コンピュータ用の言語は一般の人間には理解できません。プログラミングをできる人は理解できるかもしれませんが、文字が並んでいるだけなので視認性がありません。
そこで、Webブラウザがコンピュータ用の言語を「人間向けの言語」に変換して表示させてくれています。
Webサイトを作成して公開するまでの流れ
ではいよいよWebサイトを作って公開するまでの大まかな流れをご紹介していきます。
❶ ページの内容をHTMLで書く
ページの文章と骨組みを「HTML」というプログラミング言語で書いていきます。
HTMLはタグで囲んでいくような形で書いていきます。
必要なもの：テキストエディタ（無料）
❷ CSSでデザインをしていく
❶で作成したHTMLに対して「CSS」というプログラミング言語を使って色をつけたり、サイズを変えたり、線を引いたりして飾りをつけていきます。
余白もCSSで調整します。
必要なもの：テキストエディタ（無料）
❸ サーバーを用意する
ここまでWebページの情報を作ってきました。
これからみんなが見るとができるように公開します。
Webページを公開するには「サーバー」が必要です。サーバーが自作でもできますが、レンタルしている業者を利用するのが一番簡単で安心です。
サーバーは、イメージ的にマンションの一室を借りる感じです。
一番おすすめのレンタルサーバーは「エックスサーバー」です。
レンタルサーバーは月額500円〜と様々あります。
エックスサーバーについては下記記事でご紹介しているので参考にしてみてください。
https://nyaaalog.com/xserver
❹ ドメインを用意する
「ドメイン」とは、Webサイトの住所みたいなもので、「〜.jp」や「〜.com」などのURLです。ドメインはドメイン業者で好きなドメインを取得することができます。
ドメインはレンタルサーバーを借りる時にまとめて借りれることが多いです。
ドメインについては下記記事でご紹介しているので参考にしてみてください。
https://nyaaalog.com/blog-domain
❺ Webページの情報をサーバーにアップロードする
ファイル転送ソフト（FTPソフト）を使って、データをパソコンからサーバーに簡単にアップロードすることができます。
❶❷で作ったWebページの情報をファイル転送ソフトを使ってサーバーにアップロードします。
必要なもの：ファイル転送ソフト
❻ URLを入力してページにアクセスする
ここまできたらブラウザにURLを入力すると誰でもあなたのページにアクセスすることができるようになります。
Webページが公開されたらそのままにしておくだけでは誰も見てくれない可能性が高いです。検索エンジンで上位表示されていないとアクセス数は、ほぼゼロに近いです。
みんなに見てもらえるようにするにはまずはSNSで拡散してみましょう。
Webサイトを作るために必要なスキル
ここまでWebサイトを作って公開するまでの流れをご紹介してきました。
しかし、結局何から学んで身に付けていけば良いのかがわからないですよね。
それはあなたの目的によって変わるんです。
Webデザイナーになるためのスキルを身に付けたいなら
もし、あなたがWebデザイナーになるためにWebサイト制作のスキルを身に付けたいなら最低限下記の項目はマスターしておきましょう。
- HTMLのスキル
- CSSのスキル
まずはこの2つのスキルの知識さえあれば簡単なWebページを作ることができます。
全て覚える必要はありません。
わからなくなったらググれば大抵のことは解決します。
ただしこの2つの言語でWebページを作っても静的なページしか作ることはできません。
ボタンを押すアクションや、何かがひょこっと出てくるアクションを加えるためには「JavaScript」などのプログラミング言語を学ぶ必要があります。
ブログを運営したいのであれば・・
はてなブログや、アメブロなどのブログサービスを使えば何もスキルは必要ありません。
サーバーやドメインは既に用意されているので簡単に始めることができます。
デザインのテンプレートも揃っているのでおしゃれなブログを作ることも可能です。
WordPressで自由度の高いブログを作りたいのであれば・・
WordPress（ワードプレス）はいわゆる有料ブログと言われています。このnyaaalogもWordPressを使って運営しています。
WordPressは無料ブログと違ってサーバーやドメインを別に用意する必要があります。
WordPressの始め方については、下記記事で詳しく解説しているので参考にしてみてください。
https://nyaaalog.com/blog-start
WordPressはHTMLやCSSなどのプログラミング知識がなくてもデザインテンプレートのようなテーマを使うことでおしゃれにカスタマイズすることができます。
しかし、さらに高度なカスタマイズをしたいのであればHTMLとCSSの知識が必要になるかもしれません。
まとめ：Webサイトの仕組みについて
いかがだったでしょうか。
今回は、Webサイトを作成するところから公開するところまでをご紹介してきました。
- HTMLとCSSを使ってWebページを作っていく
- サーバーとドメインを用意する
- ファイル転送ソフトでサーバーにアップロードする
Webサイトを作るのは難しく思えますが、スキルを身に付けてしまえばとても楽しいのでぜひ身に付けてみてください。
コメント