本記事で解決できるお悩み
- 「Web制作の学習って何から始めていけばいいんだろう…」
- 「無料でも分かりやすい教材とかあるのかなぁ…？」
- 「未経験からフロントエンドエンジニアへ転職するにはどういう手順で学習したらいいのかな」
このようなお悩みを解決します！
---------
こんにちは、上田です！
最近、複数の友人からWeb制作の学習を始めたという連絡をいただき、とても嬉しく感じております。
また4月になったことから、これからWeb制作の学習を始める方も一定数いるのではないでしょうか。
そこで今回は、これからWeb制作の学習を始める方に向けて、個人的にオススメの教材や学習の手順などを解説していきます。
なお、入社してすぐの時にも未経験から転職するまでの学習過程を書いていますが、1年近く前に書いたものなので、新たにアップデートしてお送りしようと思った次第です。
内容が大きく変わったわけではありませんが、以前より無料で高品質な教材がかなり増えた印象を受けるので、これからWeb制作を始めようと思ってる方々に参考になればと思います。
ちなみに・・・
元々私は、コードを一切読むことができない＆タイピングすらまともに打てないパソコン音痴で、完全な未経験者でした。
それでも、約1年前にウエブルのフロントエンドエンジニアになることができ、実務をこなすことができるレベルにはなれましたので、「勉強してもできるようになるか不安・・・」という方に少しでも届けばと思います。（まだまだ力不足を感じることは頻繁にありますが…）
それでは本題に入ります。
Web制作の学習の進め方
まずWeb制作の学習を進めていく順序は、下記の３ステップがオススメです。
- HTML、CSSの学習
- JavaScript(jQuery)の学習
- WordPress(PHP)の学習
私も上記の手順で学習を進めていきました。
一つずつ順にオススメの参考書や、教材など紹介していきます！
HTML、CSSの学習
まずは、HTML、CSSの学習から始めることをオススメします。
この2つを覚えるだけでも、簡単なWebサイトを作ることができるようになります。
それぞれの役割を簡単に解説すると・・・
- HTML：Webサイトの文章構造を指定するもの
- CSS：Webサイトの見た目を指定するもの
となります。
この2つを一通り学習したら、Webサイトの模写やデザインカンプからコーディングをしてみましょう！
HTML、CSSのオススメの教材
オススメの教材は以下のとおり。無料で学習できます。
個人的には、動画を見ながら手を動かしていくことで、効率よく学んでいけるかと思いますが、気になった書籍で学習を進めていくのでもOKかと思います。
- Progate(HTML&CSS)
- はじめてのHTML入門講座
- はじめてのCSS入門講座
- CSS講座
- 【初心者向け】CSSの書き方の鉄板講座！美しいWebデザインを自分で設計しよう！～Flexboxの使い方も網羅～【たった1動画で全てが分かるCSSの教科書】
もし何から手をつけようか迷われたら、Progate(HTML&CSS)をオススメします！
ゲーム感覚でできて、学習のハードルを下げることができるかと思います。
また、下記の教材は有料ですが、非常に評判がいいと耳にするので、余裕があったらこちらをやってみるのもアリかと思います！
フロントエンドエンジニアになりたい人のWebプログラミング入門
基礎学習を一通りやったら、早速デザインカンプからのコーディングに取り掛かってみましょう！
※ここですべての内容を覚える必要はないので、しっかり理解できてなくても先に進んだほうが、結果的に身に付く速度は早いかなと思います。
下記のサイトがデザインカンプを無料配布・解説を行ってます。
おそらくはじめは全然手が動かないと思いますが、解説を見ながら写経するくらいでもよいので、必ず手を動かしてみましょう。
何度かやってみることで、少しずつ書けるようになっていくかと思います！
jQuery(JavaScript)の学習の進め方
HTML、CSSを一通り学習したら、jQuery(JavaScript)に進んでみましょう！
jQueryを覚えるとサイトに動きをつけることができるようになります。
私は以下のサイトで学習しました！
また、下記のサイトは色々なアニメーションの実装方法が掲載されており、とても役立つかと思います。（私もよく参考にさせていただいております。）
動くWebデザインアイディア帳
一通り学習してみたら、HTML・CSSでコーディングしたサイトに動きをつけてみるのがオススメです！
基礎を理解することができれば、ググって実装したり、コードを改変してできるようになるかと思います。
こちらも完璧に覚えるに越したことはありませんが、一通り学習して実際に動きをつけられたら、次の「WordPress」に取り掛かってみましょう！
WordPress(PHP)の学習の進め方
ここまで学習したら、WordPressに取り掛かりましょう。
進め方としては、PHPとWordPressの基礎学習をした後に、これまでコーディングしたサイトをWordPress化してみるのが良いかと思います。
オススメの教材は下記のとおり。
また、有料になってしまいますが下記も非常にオススメです！
ちゃんと学ぶ、WordPress テーマ開発講座
どれも非常にわかりやすいのですが、それでも私は理解するのに大変苦労しました。
ただ、何度も繰り返して学習していくうちに段々身についていきますので、めげずにがんばりましょう！
HTML/CSS,jQuery /WordPressを一通り網羅している教材
有料になってしまいますが、これまでご紹介した内容を一貫して学習できるものもいくつかあるようです。
中でもデイトラは非常に評判もよく、わからない部分などが出てきたら質問することもできるようです。
（私は利用していなかったのですが、友人や知り合いの話を聞く限り、すごく良質な教材のようです）
先日、友人にちらっとデイトラの制作物を見せてもらったのですが、感想として「これができれば実務でも問題なく通用するだろうな」と思いました。
もし私がこれからWeb制作の学習を始めるのであれば、少々費用はかかってしまいますが、デイトラをやってみるかなと思います。
「Web制作の学習を始めてみたいけど、どんな教材をやればいいのかわからない・・・」という方に参考になったらと思います。
