【Webデザインファーストステップ 】ページ作成から公開までの全体の流れ

ウェブデザイン

Webデザイナーやwordpressを使うのであれば、欠かすことのできないHTMLとCSS。
おしゃれなWebサイトを作りたい、Wordpressをカスタマイズしてみたい。Webデザインをはじめてみたい。
でも、まったくどこから手をつけていいのかわからない方も多いのではないでしょうか。
HTMLって何?CSSって何?という状態でも、Webデザインはできるようになります。
まずは、なんとなくでOKなので、インターネット全体を知っておきましょう。

インターネットやWebって何だろう?

普段何気なく使うインターネット。何気なく見ているWebサイト。
なんとなくわかっているようだけど、ぼんやりしている方が多いと思います。
では、それっていったい何なのでしょうか。ひとつずつ見ていきましょう。

インターネットとは

何気なく使っているインターネット。
インターネットとはコンピューター同士を繋げて情報やデータのやりとりをするしくみをいいます。

Webとは

Web(ウェブ)とは、インターネットの中の機能のひとつです。
ほかには、Eメールや、ゲーム機、家電もインターネット機能を持っています。

みなさんがいま見ているもの、それがWebです。
たくさんあるインターネットの機能のひとつとして、Webがあります。

Webの世界って?URLってどんなふうにできているの?

広いインターネットのなかに、Webがあるということは先ほどわかりました。
Webでは、URLがないとページを見ることができません。
URLってよく目にすると思いますが、いったいどんなものでしょうか。

Webの世界とは

Webの世界は土地のようなもの。Webサイトには、すべて住所のようなURLがあります。
そのURLのうえに、Webサイトが建っているイメージです。
住所がないと家が建てられないように、URLがないとWebサイトが作れないということですね。

その家に、たくさんの情報が入っていて、それを検索エンジンで見つけたりリンクで繋いだりしています。
それがWebの世界です。

URLのしくみ


URLとは、ドメイン(住所)+フォルダ+ファイルという組み合わせでできています。
ドメイン(住所)のなかに、フォルダがあり、そのなかのファイルを見ていることになります。
ちなみに、ちがうページ(ファイル)を見るときはファイル名を変えます。

Webページってどんなしくみ?

いま見ているWebページ。これってどんなしくみで表示されているんでしょうか。
このサイトだけでなく、大きなサイト、小さなサイトともに同じしくみで表示されています。

サーバーとのやりとりがあってはじめて、Webページが表示される

Webサーバー、聞いたことがあるかと思います。
Web上で情報を公開しているコンピュータのことをWebサーバーといいます。
ネットみる側はWebクライアントといいます。
Webページを見たり、メールを受信したり。これがWebクライアントに当たります。

何もしていないとWebページを見ることはできません。
そこでさきほどのURLをWebサーバーにリクエストすることで、Webページを見ることができます。

みなさんがWebサイトを見ているとき、Webサーバーにリクエストが送られています。
Webサーバーはそのリクエストに応答して、Webサイトの情報を返してくれているんですね。

Webページはブラウザで見る

さて、わたしたちはWebクライアントとして情報を受け取っても見ることができません。
ブラウザを通して、情報をページにして見ているわけですね。

なぜ、ブラウザがないと見られないの?って思うかもしれませんが、
Web上の情報はコンピュータ向けの言語(HTMLやCSS)をつかって書かれているため、わたしたちが見るためにはブラウザが必要なんですね。
デザインするのももちろんですが、その言語を書いていくのが、Webデザイナーの仕事のひとつです。

ページ作成から公開までの全体の流れ

さて、やっと本題です。ページ作成から公開までの全体の流れは、大まかにつぎのようになっています。

  1. デザインを決める
  2. HTMLを書く
  3. CSSを書く
  4. サーバーを用意する
  5. ドメインを取得する
  6. サーバーにHTMLファイルとCSSファイルをアップロード

1デザインを決める

どんな感じのレイアウトにするのか決めていきます。先にデザインを決めておくと、後の流れがスムーズになっていいですね。
かんたんこんな感じにしてみました。(てきとうすぎ)最初は手書きでもいいですし、デザインツールを使ってもOKです。

つかうもの
手書きの場合はなし。デザインツールはイラストレーター、フォトショップなど有料のものから、無料のものまであります。

2HTMLを書く

Webページの文章や、レイアウトをHTMLという言語で書いていきます。
たとえば、リンクの場合は<a href="リンク先のURL">ここが表示される部分</a>というように、決まったタグで文を囲むイメージです。

つかうもの
テキストエディタ ※有料、無料ともにあります。

3CSSを書く

HTMLでできたものに、色や線をつけたり、画像を配置したり。余白をつけたりします。
ページのデザインをしていくための言語です。
たとえば、さきほどのリンクの文字色を赤にする場合は、a {color:red;}となります。

つかうもの
テキストエディタ ※有料、無料ともにあります。

4サーバーを用意する

できあがったHTMLとCSSファイルを公開するためのサーバーを用意します。
レンタルサーバーといって、貸してくれる会社があるのでそこで借りることにしましょう。

レンタルサーバーは月額500円程度で借りられます。

5ドメインを取得する

Webページを公開するためには、サーバーとドメインはセットです。
さきほどのサーバーは、HTMLやCSSを置いておく(アップロードする)場所。
ドメインは、ブラウザから見るときに「このページ見せて!」とお願いするURLのことでしたね。
ドメインは自分で好きなものを選べますが、使われているものは取得できません。

たいていは、サーバーを借りるときにまとめて手続きができます。

6サーバーにHTMLファイルとCSSファイルをアップロード

ファイル転送ソフトを使って、1と2で作ったHTMLやCSS、画像などの情報をアップロードします。
FTPソフトと呼ばれ、自分のパソコンからサーバー上へファイルの送信ができます。

つかうもの
FTPソフト ※有料、無料ともにあります。

7ブラウザにURLを入力して、Webページを見てみよう

ここまできたら、もうWeb上にあなたの作ったWebページが公開されています。
URLを入力したり、リンクをクリックしたりすれば誰でもWebページを見ることができるというわけです。
あとは、自分の思うようにデザインをしたり、たくさんの人に見てもらえるように拡散したりしていきましょう。

まとめ

どうでしたでしょうか。インターネット、Web、そのなかのwebページ制作から公開までの流れを大まかにお伝えしました。
複雑かもしれませんが、だんだん慣れていって、できるようになります。
少しできるようになれば、やりたいことがどんどんでてきて、今度はWebページに動きをつけたくなったりもします。
自分で作ったページを見てもらえるのは楽しいですよ。
では、次回もまたおつきあいくださいませ。

コメント