【Webデザイン入門】ということで、私が学んできた知識をアウトプットしていくコーナーです。
私も「すぐにWebサイトを作ってみたい！」って思っていましたが、やはり基礎知識がないと不安で気持ちが空回りし、なかなか先に進めませんでした。
「基礎」の上に「応用」ということで、今回は、みなさんがいつも見ているWebサイトがどのように公開されているのかという仕組みをご紹介したいと思います。
みんなが安心して学べるように、わかりやすく、ていねいに解説していきますね！
僕もWebデザインを学ぶのは初めてです。よろしくお願いしまーす！
「インターネット」と「Web」ってなぁに？
インターネットとは？
パソコンやスマホなどの通信機器を通して、このネットワークへ繋がることができます。
Web（ウェブ）ってなぁに？
いったい何が違うの？
インターネットと同じようにWeb（ウェブ）という言葉も、よく耳にしますよね。
Webは、World Wide Web（ワールド・ワイド・ウェブ）の略で、WWWとも言われます。日本語では、「クモの巣」を意味しています。世界中の情報と情報がリンクにより繋がり、それがクモの巣の網目のように張り巡らされているイメージだからです。
インターネットを大きなひとつの箱だとイメージしてください。
その箱の中には、たくさんの機能（サービス）が入っています。例えば、Eメール、IP電話、ファイル転送、スカイプ、クレジット決済など。そのような機能のひとつがWebなのです。
このページもWeb上にある情報のひとつです。
Webのイメージ
Web上には、世界中のたくさんの情報がネットワークで繋がっています。
その情報を保管している場所をマンションだとイメージしてみましょう。建物の中には、たくさんの部屋がありますよね。その一つ一つの部屋がWebサイトです。
「801号室は山田さん」というように、Webサイトにも住所が存在します。この住所のことをURLといいます。
部屋の中に情報を置いておけば、GoogleやYahooなどの検索エンジンが住所録を作ってくれるのです。
何か情報を知りたいとき、検索サイトにキーワードを打ち込めば、最適なWebサイト（ページ）が表示されるのは、こういう仕組みがあるからなのです。
URLはWebサイトのアドレスのこと。https://www.sample.comのように表示されます。「sample.com」の部分はドメインと呼ばれています。
WebサイトとWebページの違いは？
URLが住所なら、ドメインはその部屋に住んでいる人の名前。
同じドメインの１つのページをWebページと呼び、その１つ１つのまとまりをWebサイトと呼びます。
Webページが表示される仕組み
私たちが、スマホやパソコンから、何気なく見ているWebページですが、いったいどのような仕組みで表示されているのでしょうか？
サーバーに保管されている情報をWebブラウザーを使って読み込む
Webページの情報は、「サーバー」と呼ばれるコンピューターに保管されています。サーバーは世界中にあり、インターネットで繋がっています。
この情報は、コンピューター同士の共通言語で書かれているため、専門知識を持たない人が見ると、とてもわかりづらい。そこで登場するのが「Webブラウザー」です。みなさんが使っているGoogle ChromeやMicrosoft Egeなどのことです。
Webサイトを作って公開するまでの流れ
ここからは、Webサイトを作って公開するまでの流れを、ざっくりとご紹介いたします。
１．HTMLファイルを作成する
Webページは、見出しや段落、画像などといった「パーツ」と「文章」から成り立っています。
各パーツは「HTML」という言語で書きます。「HTML」は＜ ＞の記号を使ったタグで文を囲む形で書いていきます。
例えば、見出しの場合、「ｈ」と「数字」を組み合わせて、以下のように記述します。
<h2>Webサイトを作って公開するまでの流れ</h2>
これでコンピューターは
と、理解するのです。
ここで必要なもの：テキストエディター（＊無料でダウンロードできます）
２．CSSファイルを作成する
CSSはそのページの文字のサイズや色を変えたり、余白の調整など、様々なデザインや飾りつけを行う言語です。
HTMLファイルを作りながら、同時にCSSファイルも作っていきます。
ここで必要なもの：テキストエディター
３．サーバーを用意する
HTMLとCSSでWebページを作成したら、そのファイルをサーバーに保管する必要があります。
サーバーは自分で用意することもできますが、メンテナンスや設定などを考えると、レンタルサーバーを利用する方が簡単なのでオススメです。
レンタル料金はいろいろですが、月額500円くらいであれば十分な性能のサーバーを借りることができます。自分の予算や口コミなどを参考に選びましょう。
ここ行うこと：サーバーをレンタルする。または、自分で用意する。
※当サイトはエックスサーバーを利用しています。
お得に申し込む方法はコチラ。
4.ドメインを取得する
ドメインはWebサイトの住所でしたよね。ドメイン管理会社から自分の好きなドメインを取得することができます。
ただし、ドメイン名は世界中で１つだけです。すでに誰かが使っているドメイン名を使うことはできません。また、一度取得すると変更することができないので、よく考えてから申し込みをしましょう。
ここで行うこと：ドメインを取得する
５．サーバーにWebページの情報をアップロードする
Webページの情報が書かれたHTML＆CSSファイルは、FTPソフト（ファイル転送ソフト）を使って、サーバーへアップロード（保存）します。
FTPとは、File Transfer Protocolの略で、ファイル転送を行うときに利用される通信方式のことです。
ここで必要なもの：FTPソフト（＊無料でダウンロードできます）
※私はFileZilla を使っています。
６．ブラウザでWebページを見る
サーバーにファイルが保管されれば、あとはブラウザにURLを入れるとWebページへアクセスすることができます。また、自分だけでなく、誰もが見れるようになります。
７．多くの人に見てもらうために
ひとつは、Googleなどの検索エンジンにページが登録されること。
登録されると検索結果に表示されるので、多くの人に自分のWebサイトを知ってもらうことができます。
しかし、ただ待っているだけではなかなか登録されないので「Webページを作って公開しました！」とお知らせする設定などを行います。
もうひとつは、SNSで拡散する。
TwitterやFacebookなどを使って、ページを公開したことを紹介したり、シェアしてもらうと多くの人に知ってもらうきっかけとなります。
Webサイトを作るために必要な知識は？
インターネットとWebサイトを公開するまでの流れをご紹介しましたが、実際にWebサイトを作るにはどのような知識が必要なのでしょうか？
サクッとブログを始めたいなら「無料ブログ」
簡単に情報発信をしたいのなら、「Amebaブログ」や「はてなブログ」などの無料ブログサービスがおすすめ。
・サーバーやドメインを用意する必要がないので、簡単に始めやすい。
・デザインのテンプレートが豊富。
・記事作成ページで入力し「公開」ボタンを押すだけで自分のサイトに反映される。
ワンランク上のデザインを目指すなら「WordPress」
WordPress（ワードプレス）はブログやサイトを作成する支援システムです。もちろん無料で使えます。
無料ブログとの違いは、ドメインやサーバーを用意する必要があるということ。つまり、ドメイン取得費用やサーバーの維持費がかかるので、スタート時のハードルが上がります。
ただし、コストをかけている分、自由度が高い。
HTMLやCSSの知識を持っているのであれば、自分の好きなようにデザインを変更したり、使いやすいようにカスタマイズすることができます。
「Webデザインの専門的な知識なんて持っていないよ」という方には、おしゃれなデザインのテンプレート（テーマ）が無料や有料でたくさん配布されているので、自分好みのデザインがきっと見つかるはず。
また広告などを貼り付けて収益化を図ることも可能です。
・ドメインやサーバーの費用がかかる
・デザインテンプレート（テーマ）が無料から有料までたくさんある。
・HTML＆CSSの知識があれば、好みのカスタマイズができる。
・広告を貼って収益化も可能。
・使っている人も多いので、検索すれば答えが見つかる。
Webサイトのデザインスキルを身に着けたい
Webサイトのデザインスキルを身につけたいなら、基本となるHTMLとCSSの知識をまず学びましょう！
HTMLは、Webページの骨格となる構造を作るための知識。CSSは、HTMLで作った骨格に飾りをつけていくための知識。二つが合わせることで、素敵なWebサイトができるのです。
WordPressのテーマを自分で作りたいならphpが必要です。
まとめ
いかがでしたでしょうか？
簡単にまとめると次の通りです。
Webサイトを公開するまでの流れ
- HTMLファイルを作成する
- CSSファイルを作成する
- サーバーを用意する
- ドメインを用意する
- Webページの情報をサーバーにアップし公開する
Webサイトを作るために必要なこと
- 「無料ブログ」でサクッと始める
- 「WordPress」でワンランク上のデザインを目指す
- HTMLやCSSを学び、オリジナルデザインを目指す
新しいことを学ぶのは楽しい。だけど、難しくて挫折しそうなときもある。
だから、できるだけわかりやすい表現で、情報発信していけたらなぁと思っています。
最後までお読みいただき、ありがとうございます！