おっすおっす。
しばらく更新が途切れてました、misopotaです。
今回は、Web制作を独学で学びたい人向けに効率よく独学で学ぶ方法とかをご紹介していきたいなと思います。
Web制作っていろいろな言語を覚えないといけなくて難しい…というイメージもあるかもしれませんが、やってみた感じとりあえず手を動かしておけばなんとでもなります。
参考書やスクール、サイトなどで学ぶのもいいですが効率よく身につけるにはやはり実践あるのみです。
これから独学で学ぼうと思っている人は、ぜひ参考にしてもらえればと思います。
HTMLとCSSはとりあえず基礎的な部分を押さえよう
Webサイト制作を行う上で必要になってくる、HTMLとCSS。
これは過去の記事でも説明している通り、必ず学ばなくてはいけない言語です。
この2つの言語の意味が分かっていないと、他の言語を学ぶ時に支障が出てくるので基本的なことはマスターしておきましょう。
「基礎的な部分ってどういうこっちゃ」と疑問に思うかもしれませんが、自分的にはこのくらいマスターしていればOKなんじゃないかなと思います。
最初はちょっと難しいかもしれませんが、何度も手を動かすことで感覚的に覚えていけます。
ある程度慣れてきたらJavaScriptにもチャレンジ
HTMLとCSSを使って、自分で簡単なサイトやお問い合わせフォームくらい作れるようになったら次はJavaScriptにチャレンジしてみるといいでしょう。
HTMLとCSSと違い、また文章がややこしくなったりしますが、これも慣れていけば感覚的に分かってきます。
JavaScriptを使うことで、サイトに動作を加えることもできますし、ブラウザで簡単なゲームを作ることができるので、結構面白いです。
Web制作を独学で効率よく学ぶためのポイント
とはいっても、全くの初心者から独学でWeb制作を始めるとなると結構難しいもの。
ある程度は理解できたものの、うまく処理ができなかったりちょっといじくったらサイトのレイアウトが崩れてしまってやる気が失せてしまったという人もいるでしょう。
私も何回か挫折経験があるので、わかります。
そうならないためには、いくつかポイントを押さえておくと独学もやりやすいです。
失敗から学んだ経験を書いていきますので、独学で学びたいという人はぜひ参考にしてみてください。
とりあえずテキストエディタを使ってコードを書く
一番無難なのが、テキストエディタ（コードを書くために必要なメモ帳のようなもの）を使ってひたすらコードを書くこと。
これに尽きます。
テキストで学んだり、動画講座を見てそのまま学ぶのもいいですが、やはり感覚を掴むためには自分でエディタを使ってコードを書いたほうが覚えやすいです。
単なる知識として頭にとどめておいても、実際にやってみたらうまく表示されなかった…なんてことも珍しくありません。
何度も書いて、何度もエラーが出てその都度修正するというのは実際にテキストエディタで書いてみないと分かりません。
テキストエディタに関しては、無料で利用できるのも結構あります。
あとで私が使っているテキストエディタをご紹介しておきますね。
分からない部分はその都度復習する
テキストエディタでコードを書く練習をしたはいいものの、結構分からない部分が多い…。
そんなときは、サイトや書籍に戻ってその都度復習するようにしましょう。
私も、自分オリジナルのサイトを作る時に「あれ、中央にコンテンツを寄せる時ってどうすればいいんだっけ？」と悩む時もあります。
そういった時にちょくちょく戻って復習しています。
分からない部分をそのまま放置しておくと、なかなか身につかないので、疑問に思ったらサイトでググったり書籍などに戻って復習するのがおすすめです。
1日30分～、勉強できる時間を必ず確保する
Web制作を効率よく学ぶなら、あらかじめ勉強時間を確保しておくのも大事です。
勉強する時間が決まっていなかったりすると、結構だれてくるためです。
自分で決めた時間や日数で勉強をすることで、だれずに集中できるのでおすすめですよ。
1日30分からはあくまで目安なので、残業で遅くなりそうだったり疲れてできない場合は10分でも5分でも構いません。
大事なのは、「何ページ勉強した」ではなく「短い時間でどれくらいのスキルが身についたか」なんですから。
通勤や帰宅途中、昼休み中など空き時間を使ってこまめに勉強するのもあり
「仕事（学校）が忙しくてなかなか勉強できない」
そんな場合は、空き時間を使ってこまめに勉強するのもありでしょう。
後述のプロゲートのようにアプリで学べるものや、ドットインストール等スマホで学べる動画講座サイトをうまく活用すれば空き時間でも勉強は可能です。
帰ったらPCを開いて、その日の復習をすればOKなのでスキマ時間をうまく活用して効率よく勉強していきましょう。
ミスやエラーの探し方を学んでおく
Web制作をしていると、ミスやエラーが起きることは結構あります。
私もまだまだミスやエラーが出ることが多いですが、始めの頃はどう対処すればいいか分からず挫折してしまうという人もいるでしょう。
そういった時を想定して、ミスやエラーの探し方を学んでおくといいでしょう。
私の経験談ですが、Webサイトがうまく動かない・表示されない原因はだいたいこんな感じです。
- 単純にタグやプロパティのスペルが間違っている
- ファイルのパス名がミスっている
だいたいこんな感じです。
特に多いのが、スペルミスです。
一字間違えるだけで、画像がうまく表示されなかったりするのでなんかおかしいなと思ったら一度スペルをミスっていないかチェックしておきましょう。
また、自分で見つけるのが難しい場合はGoogle Chromeの「デベロッパーツール」を活用するといいでしょう。
デベロッパーツールを使うと、ミスをしている部分を指摘してくれるので結構便利です。
この辺の詳しいことは、テックアカデミーさんの記事を参考にしてみてください。
私がWeb制作を勉強した時に用意したもの
さて、ここからは私がWeb制作を勉強した時に実際に用意したものです。
最低限用意しておけば、学習をスムーズに進められますので、よければ参考にしてみてくださいね。
テキストエディタ（Notepad++/無料）
まず用意したのが、テキストエディタ。
私の場合は、無料で利用できるNotepad++というエディタを利用しました。
Windowsに対応しているテキストエディタで、比較的使いやすそうだなという独断と偏見から選びました。
実際に使ってみたら、シンプルなデザインになっているので初心者でも書きやすいのが特徴です。
インストールの方法や、実際に使ってみた感想は他の方が分かりやすく書いてくれているのでぜひ参考にしてみてください。
勉強用の書籍
独学をするなら、勉強用の書籍も用意しておくといいでしょう。
サイトと違い、余計な情報が入っておらず集中して学べるのでおすすめです。
HTMLとCSSを学ぶのにおすすめな本はこちらです。
JavaScriptで個人的におすすめな本はこちらです。
どちらも、初心者向けに易しく書かれているので入門編にぴったりな書籍です。
プロゲート・ドットインストール（ともに無料版のみ）
ネットを活用して安く学ぶなら、プロゲートとドットインストールもおすすめ。
プロゲートは、ゲーム感覚でWeb制作の知識を学べるサイトです。
ドットインストールは、2分～3分程度の動画講座を受けられるのでこの2つのサイトをうまく活用しながら学んでいくといいでしょう。
どちらも無料で利用できますが、あくまで基本的なことしか学べないのがデメリット。
より突っ込んだ内容は、有料（どちらも月額980円／税抜）になってくるので資金的に余裕ができたなら有料で受けてみるのもいいかもしれません。
↓公式サイトはこちら
https://dotinstall.com/（ドットインストール）
まとめ
結構文章が長くなってしまいましたね。
Web制作は正直最初が一番大変ですが、手を動かすうちに慣れてくるのは間違いないです。
ずっとやっているうちにだんだん楽しくなってくるので（個人差あり）、自分でオリジナルサイトを設計したい人や今後のスキルアップにつなげたいと考えている人は、ぜひチャレンジしてみてはいかがでしょうか？
