WEBデザイナーを目指している方や、フリーランスでWEB制作の案件をこなしたいという方は、WEB制作技術を取得する必要があります。
中には、スクールに通わず、独学で技術を身につけたい方もいらっしゃると思います。
ここで注意したいのが、一言にWEB制作技術と言っても、やる事は意外にも多いという事です。よく挫折率9割とか言われているのも、想像していたよりもやる事が多かったり、意外と難しかったりといった理由があります。
でも、あらかじめ、どんな事を勉強しなければならないのかや、学習期間はどれぐらい必要なのかの目安をつけておくだけでも、違うと思いますので、今回ご紹介したいと思います。
初心者の方に是非手にとっていただきたい、オススメの参考書のご紹介も併せてします。
目次
何を勉強すれば良い？
WEB制作技術を取得する為に「最低限」勉強しなければならないのは、主に下記の5つです。
・HTML
・CSS
・JavaScript
・PHP
・デザインの勉強
WEB制作の事をまだ全く知らない方は「デザインの勉強」以外、何これ？と思ったかと思いますが、詳しくは後述しますので、ここでは、何となくやらないといけないんだなと思ってください。
これら5つの技術を取得出来れば、最低限WEB関係の仕事ができる技術が備わったと思っていただいて大丈夫です。
※「最低限」という表現をしましたが、これ以外にもgit（作業を管理するツール）やIllustrator・Photoshop（画像編集ツール）等の技術もあれば、仕事の幅も広がっていきます。上記の学習が済んだ方は、これらの技術も取得にもチャレンジしてみてください。
勉強する際の注意点
結構あるなー。うーん、どれからやれば良いのかな？
勉強する際、特に注意しなければならないのが、勉強する順番です。順番を誤ると、挫折率が高くなるので、注意が必要です。
- HTML
- CSS
- JavaScript
- PHP
- デザインの勉強
この順番でやる事を筆者はオススメします。
イメージを持っていただくために、簡単な理由を述べると、「HTML」というものが基盤となっていて、それに手を加える為に「CSS」「JavaScript」「PHP」というものがあるイメージです。基盤が完成していないのに、「CSS」「JavaScript」「PHP」に手を出すと、訳がわからなくなって高確率で嫌になるのでご注意ください。デザインの勉強は、重要な要素なのですが奥が深く、やり始めるとキリがなく沼にハマるので後回しで大丈夫です。
勉強時間について
勉強時間ってどれぐらい確保すれば良いのかな？
正直、個人差はあるものの、出来れば「1日1時間、毎日を半年間続ける」のが理想です。
お仕事をしていて、時間の確保が難しいという方は、30分でも大丈夫なので、毎日続ける事が重要です。
筆者の体験談ですが、最初は意味がわからなくても、毎日続けていれば不思議と理解できるようになってきます。
それぞれを簡単に解説
今回ご紹介した最低限勉強しなければならない5つについて、簡単に解説します。オススメの参考書もセットでご紹介します。
HTMLとは？
HTML（エイチティーエムエル）とは、「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略です。
コンピュータに文書構成を伝える為の言語で、WEBサイトの土台になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テストページ</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>今日の出来事</h1>
<p>今日、私はキーボードにジンジャエールをこぼしました。</p>
<script src="js/script.js"></script>
</body>
</html>普段私たちが目にしているWEBサイトも構造上は、上記のようなコードが書かれています。
※GoogleChromeの場合、検証ツール（右クリック→検証）を使えば、WEBサイトの構造を除けます。
「< >」で挟まれた、タグと呼ばれる特殊な文字列は、それぞれ意味があり使い方を覚える必要があります。
HTMLオススメ参考書
下記の参考書は、私が紹介するまでも無いぐらい有名な参考書で、これ以上無いぐらいコンパクトにまとめられた文章、イラスト・画像も多いとても読みやすい1冊です。初心者の方に大人気です。
CSSとは？
CSS（シーエスエス）とは、「Cascading Style Sheets（カスケーディングスタイルシート）」の略です。
HTMLは、コンピュータに文書構成を伝える為の言語ですが、CSSはWEBサイトの装飾を加える為の言語です。
CSSで出来る事は、挙げるとキリがありませんが、下記のような事が可能です。
・余白を調整
・文字に色をつける
・画像の形を変える
などなど、WEBサイトのデザイン面は、CSSで行います。
CSSオススメ参考書
こちらもHTMLでご紹介した参考書と同じですが、HTMLとCSSは、セットで勉強した方がイメージがしやすいので、下記参考書をオススメします。
JavaScriptとは?
JavaScript（ジャバスクリプト）とは、WEBブラウザを動かす為のプログラミング言語です。HTMLやCSSと組み合わせて使います。
JavaScriptでできる事は、こちらも挙げるとキリがありませんが、下記のような事が可能です。
・アニメーションを入れる
・ユーザーのアクションに伴って処理を行う
・フォームで確認画面を表示させる
などなど、WEBサイトの動作面は、JavaScriptを使用します。
JavaScriptオススメ参考書
下記の参考書は、可愛らしいイラストと優しい色使い、分かりやすい解説で初心者にオススメの一冊です。実際に手を動かしてサンプルを作っていくので、知識の定着がしやすいです。
PHPとは？
PHP（ピーエイチピー）とは、「Hypertext Preprocessor（ハイパーテキスト プリプロセッサ）」の略です。
一言で言うと、ユーザーの命令に応じて、WEBページを自動で作ってくれる言語です。
例えば、ECサイトだとイメージがつきやすいですが、大量にある商品を1ページ1ページ作るのは非現実的ですが、ユーザーの命令に応じて表示するページを変えてくれるのがPHPです。
PHPオススメ参考書
下記の参考書は、HTMLの事を全く知らないWEB制作超初心者の方でも理解できるような構成になっています。こちらも、実際に手を動かしてプログラムを作るカリキュラムが用意されているので、知識の定着がしやすいので、オススメの一冊です。
デザインの勉強
冒頭に、デザインの勉強は沼にハマるとご紹介しましたが、本当に奥の深い要素なんです。
デザインで、意識しないといけないポイントとしては、下記が挙げられます。
・色使い
・フォント選び
・余白の使い方
センスが絡んでくるのも事実で、技術の取得には個人差があります。
※こちらの記事で、デザイン力を鍛える方法、オススメの参考書ついてご紹介していますので、ご興味のある方は、ご覧ください。
挫折しそうな時は・・
筆者も、WEB技術を取得する前は、軽い気持ちで始めた為、思ったよりもやる事が多く、挫折しかけた経験もあります。
そんな方の為に、挫折しそうな時の対処法を、当ブログでも書いています。
挫折しそうな時は、是非こちらの記事をご覧ください。
まとめ
今回は、WEB制作の勉強法について執筆してみました。
今回の記事が、WEB制作技術取得の為の背中を推せる情報となれば幸いです。
