現役の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という言語で書かれたものが「WEBページ」となるわけです。
正確にはHTMLという言語では文章の構成を書き、CSSという言語で文字の色などのデザインを指定して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サイトを作るのに必要なのは
- HTML/CSS コーディングスキル
- グラフィックソフトの操作
- CMSの基礎知識
もちろん、３つの知識さえあれば実際にWEBサイトを作ってお仕事を受けることも可能です。
しかし、これだけを身につけておけば良いというわけではなく、初めはこれだけの知識があれば問題ないですということです。
HTML/CSS コーディングスキル
WEBサイトを作る上で、一番必要な知識がHTML・CSSをつかった「コーディングスキル」です。
HTML（Hyper Text Markup Language）
HTML（Hyper Text Markup Language）は、WEBページの骨となる部分を書く言語です。
例えば、WEBページにはたくさんリンクと呼ばれる、クリックすると別のページへ移動するテキストやボタンがあります。
そういったリンクをここに配置しますよといった、指定をすることができるのが「HTML」の役割です。
CSS（Cascading Style Sheets）
CSS（Cascading Style Sheets）は、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は、WordPress（ワードプレス）
よく使われているCMSは「WordPress（ワードプレス）」です。
WordPressの案件は非常に多く、最初にCMSを学ぶなら「WordPress」から始めてください。
案件が多いからということもあるのですが、いちばん情報が世の中に出回っているからです。
多くの人がWordPressを使用しているので、それだけ多くの疑問が生まれます。
そういった疑問に対する解決策も出回っているので、調べたらすぐに解決することができます。
３つの知識があればWEBサイトが作れる
WEBサイトを作るのに必要な知識は
- HTML/CSS コーディングスキル
- グラフィックソフトの操作
- CMS（コンテンツマネージメントシステム）の基礎知識
まずは、３つの知識を身につけることから始めてください。
この３つの知識さえあれば、案件を受けて実際に作業していくことができるようになります。
ただ、この３つの知識はあくまでもスタートラインであり、それ以上の知識を求められる場合もあります。
他との差別化を図るためにも、特化したスキルを身につけていく必要があるのです。
もっと自由にWEBサイトを作る場合はプログラミング知識が必要
もっと自由にWEBサイトを作りたい場合は、プログラミングの知識が必要となってきます。
例えば、WordPressでは「PHP言語」というプログラミング言語を使うことで、もっと自由にWEBサイトを作ることができます。
プログラミング言語を身につけるには、かなりの根気と時間がかかるため、まずは３つの知識を優先的に学んでいくことがおすすめです。
３つの知識を学んでから、余裕ができた人はプログラミング言語へとステップアップしていきましょう。
案件単価もあがり、言語を扱える人が限られてくるので、特化したスキルになってきます。
さいごに
WEBサイトを作れるようになりたいと思っていても、どういった知識が必要でどうやって出来上がっていくのかということがわからない人の方が多いと思います。
今回、簡単ではありますが、どういった知識が必要でどういった流れで作られているのかということをまとめてみました。
個人レベルでWEBサイトを作成するのであれば、いろいろな工程を飛ばしていきなり構築することもできます。
必ずしも、この流れの通り作っていかなくてはいけないというわけではありません。
自由に楽しく学び、WEBサイトを作れるようになっていただければと思います。
