【超初心者向け】WEBサイト制作の流れを3ステップでざっくり解説

2019/3/14 2019/5/15

こんにちは。ゆうみ(＠yum1u3u)です。

今回は先日、図解を載せてツイートした「WEBサイト完成までの流れをざっくり解説」を記事化したいとおもいます！

「これからサイト制作の勉強を始めようとしている人」や「サイト制作の全体像を知りたい人」にオススメです！

【図解】WEBサイト完成までの流れをざっくり解説

✅サイト制作に興味がある
✅自分で調べてみたけどよく分からなかった
✅html/cssはなんとなくわかったけど、この後はどうすればいいの？

新しいことを学びを始めるときは、まず全体の流れを把握するのが大事です！#つるフリ #いなフリ pic.twitter.com/LMs7BLYxr1

— ゆうみ＊図解屋さん (@yum1u3u) 2019年3月11日

WEBサイト制作は、「一軒家を建てること」に良く似ています。

一軒家を建てるためには

家
土地
住所

が必要です。

なので今回は、WEBサイト制作における一連の流れを一軒家を建てる手順にたとえて解説します。

この記事はこんな人向け

・これからサイト制作の勉強を始めたい人
・サーバーとかドメインとか、正直よくわからないことがある人

具体的な手順というよりもWEBサイトがどういうステップを踏み、他人も閲覧可能になるのかをざっくり説明していきます！

ゆうみ

知らない言葉が出てきたときは「そういうモノがあるんだ！」程度に思ってください！

1 WEBサイトはネット上の一軒家
2 手順1：パソコンの中で建築作業！
3 手順2：土地と住所を決める！
4 手順3：空き地に家を置く！

WEBサイトはネット上の一軒家

これから作るWEBサイトは、ネット上に存在するあなたの一軒家です！

一軒家を建てるために必要な「家」「土地」「住所」の準備をどんな手順で進めていくのか。

さっそく解説します。

手順1：パソコンの中で建築作業！

手順 1-1

設計図を書こう！～デザインカンプを作る～

WEBサイト制作にあたって一番重要な作業。

それは「設計図（デザインカンプ）」を作ることです。

コーディングじゃないの・・？

と思った方もいるとおもいます。

はい。正直。。
設計図が無くてもWEBサイトは完成します。
まっしろなHTMLファイルを開き、1からコーディングしていく。。という手順も、もちろん有りです。

が！
段取り良くスムーズにサイト制作をするためには、デザインカンプ（設計図）は必須です！！

設計図が無いまま、いきなり工事をはじめる大工さんはいないですよね？

なので私はいきなりhtml・cssを書き始めるということは、オススメしません。
カンプ（設計図）を書いて、そのあとにコーディング（建設作業）することをオススメします。

補足：
デザインカンプを作るうえで主流なソフトは「AdobeXD」「Sketch」などがあげられます。
「設計図」であることが重要なので、極論を言うと、手書きのメモ帳でもOKです。

手順 1-2

建築作業開始！～コーディングする～

設計図（デザインカンプ）ができたら、いよいよ建設作業にとりかかります。

エディタをつかってHTML/CSSを書いていきましょう。

【エディタ例】
「Brackets」
「Visual Studio Code」
「Atom」

設計図をもとにコーディングしたサイトが完成したとします。

でもこの時点では、自分のパソコンの中でしかサイトをみることはできません。
なぜかというと、まだ作ったサイトのデータは、自分のパソコンの中にしか入っていないからです。

このサイトを他のみんなに見てもらうために、必要なもの。
それが、土地と住所（＝サーバーとドメイン）　です。

手順2：土地と住所を決める！

手順 2-1

土地を決める！～サーバーを契約する～

WEBサイトが「家」なのだとすれば、サーバーは「土地」のようなものです。

Xサーバー、ロリポップなどが有名なサーバーです。
長期的なサイト運営であれば、有料サーバーの契約をオススメします。
月1000程度（年12000円前後）で契約できるので、気に入ったサーバーを契約しましょう。
ちなみに、このブログはXサーバーを使ってます。

手順 2-2

住所を決める！～独自ドメインの作成～

土地が手に入ったら、次に必要なのは「住所」です。

独自ドメインとは？
～.com～.jpの部分。
みんなそれぞれ「独自」に設定できるので独自ドメイン

独自ドメインは「お名前.com」「ムームードメイン」などで、800円程度から購入可能です。
※ドメインの取得は早い者勝ちなので、「絶対このドメインが良い！」ということなのであれば、カンプ制作やコーディングの合間にドメインをとってしまうのも良いでしょう。

手順3：空き地に家を置く！

手順 3-1

空き地に家を置こう！

ここまでの手順で、土地（サーバー）と住所（ドメイン）が手にはいりました。
ですが、まだ何も無い「空き地」の状態です。

この「空き地」に「家」を置くことで、WEBサイトが他の人も見れる状態になります！

手順 3-2

空き地に家を転送する！～ファイルをアップロードする～

サーバーのファイルマネージャーや、FTPソフト（FFFTPやFileZilla）をつかいファイルをアップロードします。

手順 3-3

WEBサイト完成！～他の人も閲覧できるようになる～

サーバーへサイトのデータの転送が完了すると、WEBサイトが完成です！

サーバーから提供されるURL（http://～.com）にアクセスすると、サイトが表示されるようになります！

以上が「WEB制作の大まかな流れ」です。

読んでいただきありがとうございます。
この記事が、これからサイト制作をはじめようとしている方の助けになれば嬉しいです！

ゆうみでした。