【初心者向け】WEBサイトを制作するときの流れ、必要な知識はたったの3つ

WEBサイトをつくるのに必要な知識はたったの3つだけ

3つの知識があれば、誰でもWEBサイトが作れちゃうよ!

現役のWEBエンジニアやっています!きなこです。

WEB制作ができるようになりたい」と、これから勉強してみようと思っている方。

そもそも、WEBサイトを作る上で必要な知識が何かご存知でしょうか。

この記事では、WEB制作をこれから学ぼうと思っている人に向けて

  • 全くWEB制作に関する知識がありません
  • WEB制作についての知識が全くないという人でもわかりやすく
  • これから、勉強していこうと思っている方の第一歩として

WEBサイトがどうやってできているのかという原点から、作る上で重要になってくる知識を紹介していきます。

WEBサイトとは

さっそく、下の図を見ていきましょう。

WEBサイトの構成図

上記の図のように複数の「WEBページの集まり」のことを「WEBサイト」と呼びます。

当サイトのチリガツモでは、トップページの下に各記事ページがあり「WEBサイト」が構成されています。

「WEBサイト」が「WEBページの集まり」ということは分かったんだけど、「ホームページ」ともいわない?

「WEBサイト」と「ホームページ」呼び方の違い

「WEBサイト」と「ホームページ」の違い

よく「WEBサイト」と「ホームページ」って何が違うのかと質問がありますが、本来「ホームページ」はウェブサイトの始まりとなるページを意味しています。

始まりとなるページ、つまりは「トップページ」を指しています。

しかし、「ホームページ」という言葉の方がなじみやすかったのか、「ホームページ」という言葉が「WEBサイト」を意味する言葉に定着してしまったのです。

ポイント
  • 「WEBサイト」と「ホームページ」の呼び方の違いを覚えておく

クライアントとのやり取りの中で「ホームページ」の認識違いから、事故につながる可能性があります。

WEBサイトの仕組み

WEBサイトは、WEBページの集まりのことだということは分かったと思います。

では、WEBサイトの仕組みを理解するにはWEBページが何でできているかということを、ひもといていけばWEBサイトの仕組みを理解することができるでしょう。

WEBページは「HTML(Hyper Text Markup Language)」で作られている

WEB制作をこれから学ぼうと思っている人は、「HTML」という言葉をすでに目にしたことがあるのではないでしょうか。

簡単にHTMLを説明すると

コンピュータが理解できる、マークアップをするための言葉です。

マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。

引用:今さら聞けない!HTMLとは【初心者向け】

HTMLという言語で書かれたものが「WEBページ」となるわけです。

WEBサイトができるまで

正確にはHTMLという言語では文章の構成を書き、CSSという言語で文字の色などのデザインを指定してWEBページができあがっています。

それぞれの言語については、後ほど詳しくご紹介します。

WEBサイトを作る手順

必要な知識をわかりやすくするためにも、簡単にWEBサイトを作る流れを理解しておきましょう。

WEBサイトを作る手順

それぞれ、簡単にみていきましょう!

実際にWEBサイトを作るのは「3.構築する」の段階になります。

初めはこんなのがあるんだなくらいに思ってもらえば大丈夫です。

1.設計する

WEBサイトを作るときに最初に必要になってくるのが「WEBサイトを設計する」ということです。

ページをどういった構成にするのか、ページに何を配置するのかなどを決めていく工程です。

しっかりと設計されていないと、その後の工程でいろいろと問題が発生してしまう場合があります。

2.デザインする

設計が完了したら、次はデザインの作成です。

デザインの作成では、「1.設計する」でページに何を配置するのかといった設計した指示通り、コンテンツのデザインを行なっていきます。

基本的にデザインで使用されるアプリケーションソフトは、Adobe製品がよく使われています。

3.構築する

いよいよ、WEBサイトを実際に作っていく工程です。

「2.デザインする」で作成されたページデザインを元に実際にWEBページを作っていきます。

HTMLやCSSといったマークアップ言語を使用してWEBページが作成されています。

WEBページの集まりがWEBサイトになっているので、WEBページを作っていけば、WEBサイトが完成するということです。

 

WEBサイトを作るまでの流れを簡単に理解したところで、WEBサイトに必要な知識を詳しく見ていきましょう!

WEBサイト作成に必要な知識

WEBサイトの作成に必要な知識を3つにしぼって、ご紹介します。

WEBサイトを作るのに必要なのは

  • HTML/CSS コーディングスキル
  • グラフィックソフトの操作
  • CMSの基礎知識

 

もちろん、3つの知識さえあれば実際にWEBサイトを作ってお仕事を受けることも可能です。

しかし、これだけを身につけておけば良いというわけではなく、初めはこれだけの知識があれば問題ないですということです。

HTML/CSS コーディングスキル

HTML/CSS コーディングスキル

WEBサイトを作る上で、一番必要な知識がHTML・CSSをつかった「コーディングスキル」です。

HTML(Hyper Text Markup Language)

HTML(Hyper Text Markup Language)は、WEBページの骨となる部分を書く言語です。

WEBページの骨?ってなによ??

例えば、WEBページにはたくさんリンクと呼ばれる、クリックすると別のページへ移動するテキストやボタンがあります。

そういったリンクをここに配置しますよといった、指定をすることができるのが「HTML」の役割です。

CSS(Cascading Style Sheets)

CSS(Cascading Style Sheets)は、WEBページの肉となる部分を書く言語です。

ま、また!?WEBページの肉って何よ…?

WEBページの肉とは、簡単にいうと「デザイン」です。

「文字の色は赤色にする」「背景の色を緑色にする」などデザインの指定をすることができるのが「CSS」の役割です。

HTML/CSSを使ってコードを書くことを「コーディング」

HTML言語とCSS言語をつかってWEBページを作っていくことを「コーディングする」といいます。

気をつけていただきたいのが、「コーディング」と「プログラミング」の違いです。

もしかしたら、この記事を読んでくれている人はHTMLとCSSを使ってWEBページを作るのって「プログラミング」じゃないの?と疑問に思われたかもしれません。

しかし、「コーディング」と「プログラミング」は似て非なるものです。

コーディングとプログラミングの違い

コーディングとプログラミングの違い

詳しく説明してしまうと、かなり混乱してしまうと思うので簡単に説明します。

例えば、「今日は○月○日です」とWEBページに表示させたい場合、

コーディングの場合
「今日は○月○日です」と表示させてねと書きます。
プログラミングの場合
「今日は○月○日です」カレンダーから今日の日付を見て「今日は○月○日です」と表示させてねと書きます。

コーディングでは、自動的に表示させることはできないですが、プログラミングの場合は自動化させることが可能です。

グラフィックソフトの操作

グラフィックソフトの操作

続いての必要な知識は「グラフィックソフトの操作」です。

グラフィックソフトとは

コンピュータにおいて図形あるいは画像データを扱うソフトウェアの総称。

引用:グラフィックソフトウェア

デザインを作るためのアプリケーションです。

WEBサイト作成によく使われるAdobe(アドビ)製品

WEB制作の現場では、「Adobe製品」が使用されることが多く、特に「Photoshop」や「illustrator」が使われています。

最近では、「AdobeXD」で作成されることが多いです。

上記のソフトを使用したデザインデータは、クライアント側で用意してくれます。

こんなにたくさんのアプリケーションを使えるようにならないといけないの!?

もちろん、バリバリに使いこなせた方がいいとは思いますが、デザインデータを見て「ここは何色なのか」「ここは何ピクセル(コンピュータで使用される距離単位)開いているのか」「画像の書き出し方」などが分かるレベルで大丈夫です。

基礎的な操作方法さえ身につけることができれば、デザインデータを見てWEBページの作成を行うことができます。

また、Adobe製品全般的にひとつのソフトを使えるようになれば、だいたい使い方がわかるようになると思います。

CMS(コンテンツマネージメントシステム)の基礎知識

CMSの基礎知識

CMS(コンテンツマネージメントシステム)を簡単にいってしまえば、ブログシステムです。

CMSの知識があると、案件獲得率がイッキにあがります。

代表的なCMSは、WordPress(ワードプレス)

よく使われているCMSは「WordPress(ワードプレス)」です。

WordPressの案件は非常に多く、最初にCMSを学ぶなら「WordPress」から始めてください。

案件が多いからということもあるのですが、いちばん情報が世の中に出回っているからです。

多くの人がWordPressを使用しているので、それだけ多くの疑問が生まれます。

そういった疑問に対する解決策も出回っているので、調べたらすぐに解決することができます。

3つの知識があればWEBサイトが作れる

WEBサイト作成に必要な3つの知識

もう一度、WEBサイトを作るのに必要な知識を振り返っておきましょう!

WEBサイトを作るのに必要な知識は

  • HTML/CSS コーディングスキル
  • グラフィックソフトの操作
  • CMS(コンテンツマネージメントシステム)の基礎知識

まずは、3つの知識を身につけることから始めてください。

この3つの知識さえあれば、案件を受けて実際に作業していくことができるようになります。

ただ、この3つの知識はあくまでもスタートラインであり、それ以上の知識を求められる場合もあります。

他との差別化を図るためにも、特化したスキルを身につけていく必要があるのです。

もっと自由にWEBサイトを作る場合はプログラミング知識が必要

もっと自由にWEBサイトを作りたい場合は、プログラミングの知識が必要となってきます。

例えば、WordPressでは「PHP言語」というプログラミング言語を使うことで、もっと自由にWEBサイトを作ることができます。

プログラミング言語を身につけるには、かなりの根気と時間がかかるため、まずは3つの知識を優先的に学んでいくことがおすすめです。

3つの知識を学んでから、余裕ができた人はプログラミング言語へとステップアップしていきましょう。

案件単価もあがり、言語を扱える人が限られてくるので、特化したスキルになってきます。

さいごに

WEBサイトを作れるようになりたいと思っていても、どういった知識が必要でどうやって出来上がっていくのかということがわからない人の方が多いと思います。

今回、簡単ではありますが、どういった知識が必要でどういった流れで作られているのかということをまとめてみました。

個人レベルでWEBサイトを作成するのであれば、いろいろな工程を飛ばしていきなり構築することもできます。

必ずしも、この流れの通り作っていかなくてはいけないというわけではありません。

自由に楽しく学び、WEBサイトを作れるようになっていただければと思います。