おすすめのWeb制作学習コンテンツ

こんにちは！今回は、前回に引き続き、最近のはやりである「ウェブ制作」を題材に、ブログを書いていきたいと思います！その中でも、今回は、ウェブ学習コンテンツについて紹介します！今、世の中ではエンジニア不足が懸念されており、Webエンジニアの需要は大きいです！つまり、Webサイトを見渡せば、「Progate」「Dotinstall」を含め多くの学習コンテンツが転がっているのを見て取れると思います。では、どのようなコンテンツがあるのでしょうか？以下で見ていきましょう！

信頼性の保証

Techacademyで学んだ知識を生かして「Portfoilio」や「留学サイト」「工務店サイト」を作成してきました。

また、卒業生としてTechacademyさんにフォローしていただきました～！

※Techacademyに関して気になる方は、こちらも併せて読んでみてください！

対象となる読者

✔駆け出しエンジニアで、どんな勉強をすればよいかわからない
✔おすすめの学習サイトや書籍を知りたい
✔HTML,CSS,jQueryの役割が分からない
✔学習の進め方が分からない

読み終えるとどのような知識が手に入るか？

✔ 学習コンテンツに関する知識
✔ 学習の進め方
✔ プログラミング学習サイト
✔ おすすめの書籍

本日の目次

✔ HTML,CSS,jQueryの役割って何？
✔ 学習の進め方
✔ おすすめのWeb学習コンテンツ
✔ 無料で学習する方法
✔ おすすめの書籍

HTML,CSS,jQueryの役割って何？

私も学習を始めた当初は、HTML,CSS,jQueryがそれぞれどのような役割を果たしているのかを実は、知りませんでした..
「HTML,CSS,jQuery？？」なんかかっこいいなぁ～！って感じです笑
そもそもWebサイトの「フロントエンドはどうなってるの？」「それぞれは画面を構成する上でどんな役割を担っているの？」ということを理解していなければ、当たり前ですが、効率的な学習を始めることはできません！
そこでまずは、それぞれの役割を見ていきましょう！

HTMLとは？

HyperText Markup Language

HTMLはWebページを構成する上でとても重要なアイテムのうちの一つであり、Webページを考えるうえで切っては切り離せません！

基本的なマークアップ言語

HTMLはHyper Text Markup Languageの略であり、Webページを作るのに最も基本的な言語です。また、普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られており、ウェブ制作で最も大切な言語といってよいでしょう。

おおよその見た目を作る

上記と被っていますが、HTMLはサイトの見た目を作ってくれます。例えば、HTMLのみで書いたサイトは次のような見た目になります。

これをみるとわかるように、「コンテンツそれぞれがどのような意味を持っているのか？」「それぞれの塊はどれか？」というようなことを表しているのを見て取れると思います。
例えばですが、「News」「Menu」「Contact」はリストであることが分かります！

※ちなみに上記の説明で使用させていただいた本は「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」という本です！

HTMLはマークアップのために必要
テキストに意味を持たせる
ブラウザが理解しやすくする
SEO対策に関与してくる

最後の「SEO対策に関与してくる」という部分は「マナブログ」で詳しく紹介されているのでそちらをご覧ください～

CSSとは？

Cascading Style Sheets

見た目を整える

HTMLで作った大枠に、CSSを加えることで、整った見た目を作ることができます！先ほど、HTMLでコーディングしたものにCSSを追加すると、次のようになります。

つまり、CSSは、HTMLと組み合わせて使用する言語であり、CSSではHTMLで書かれたスタイルをどのように装飾するかを指定します。例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、プリンタなどの機器で印刷・出力される際の出力スタイル、音声で読み上げられる際の再生スタイルなど、ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

より詳しい情報は、こちら！

※ちなみに上記の説明で使用させていただいた本は「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」という本です！

jQueryとは？

From JavaScript

JavaScriptのライブラリ

JavaScriptという言語をより使いやすくしたJavaScriptのライブラリであり、JavaScriptと比べ、コードがシンプルで初心者でもコーディングしやすくなっています。

JavaSciptをより詳しく知りたい方は「こちら」

ちなみにjQueryをもっと学習したい！という方は「jQuery最高の教科書」という本がお勧めです！

学習の進め方

Web制作に初めて取り組むとき、おそらく大半の方は、下記で紹介する「Progate」から入られる方が多いかと思います！
しかし、私もそうだったのですが、そのあとに何をやったらよいかわからない！
ということで、私がやっていた手順を紹介いたします～！

Progate3周

ProgateにはHTML＆CSSコースというものがあり、実際に「道場コース」ではサイトを作成しながら学習できるので、とても有益です！
とりあえず、これを3周くらいすれば十分です！

実際にサイトを作る

上記みたいな簡易的なサイトを作るとためになると思います！

とりあえず、大まかな流れは上記みたいな感じです！
ですが、「案件を獲得したい！」という方は、そのほかにもProgateで学んでから、「スクール」「忍者コード」「Dotinstall」「デイトラ」をやるとか様々な選択肢があるので、自分の実力に合わせてやっていくのが良いかと思います！
私の場合は、Webアプリを作ることが目標だったので、フロント部分はささっとやりました！

ちなみに、スクールに関してですが、以前書いたものがあるのでご紹介いたします～

おすすめの学習コンテンツ

巷で有名なWeb学習コンテンツを集めてみました～
フロントエンドを学習したい方は参考にしてみてください！

Progate

月額1000円&豊富なコンテンツ

学生にとって、手の出しやすい価格設定となっています！
無料で学べるコンテンツもありますが、月額1000円で15ものコンテンツを学ぶことができます。15のコンテンツというのは、HTML,CSS,JavaScript,jQuery,Python,Java,PHP,SQL,Git,Ruby,Ruby on rails5,Sass,Go,React,Node.jsです！
この他にも、コマンドプロンプトの使い方や、それぞれの言語をローカル環境で開発するための開発環境構築手順が紹介されています。

全国ランキング&学習履歴が掲載される

プログラミング学習で最も難しいのが、「継続的な学習」だと思います。これを解決するために、Progateでは、学習履歴を学習量に応じて色分けして各ユーザーのトップページに表示しています。また、学習量に応じてポイントが付与され、全国ランキングが表示されます。

Dotinstall

月額1000円&豊富なコンテンツ

価格としては、Progateと同様ですが、学べる内容が少し異なります。
まず初めに、無料で学べるコンテンツが多く、有料版でも他のどのコンテンツよりも学習コンテンツが多いです。
レッスン数としては、2020/5/1時点で423もの数を誇ります。学べる言語も数が半端なく、Progateの比ではないです！
ちなみに、学習のコンテンツは高頻度で追加、更新されるので、素晴らしいです！

全国ランキング＆学習履歴が掲載される

内容としては、Progateと被っていますが、Dotinstallでは、サイトに掲載するのに加え、メールで学習履歴とランキングを送信してくれるため、ログインしていなくても確認することができます。

動画を用いたレッスン

3分の動画で行うレッスンが特徴的で時間が短く区切られているので学習を進めやすいです。
また、最近では、動画の隣にエディタがついており、自身で開発環境を用意しなくても学習することができます。
それに加え、耳の不自由な方向けに文字おこし機能も付いておりとてもユーザービリティに富んでいます。

Js-Pro

月額500円&豊富なコンテンツ

(2020/5/1現在)期間限定ではありますが、本来1000円のところを月額500円で学ぶことができます。
また、有料会員になれば200を超えるレッスンを学習することができます。

JavaScriptに特化した学習

ProgateやDotinstallとは違い、JavaScriptに特化した学習システムとなっているので、JavaScriptだけを濃く学習したいという方にはおススメのコンテンツだと思います。

Udemy

現役のエンジニアがコンテンツを出している

実際にWebデザイナー、エンジニアとして働いている方が動画を使って講義をしてくれるので、実際にどのようなスキルが現場で使われているのかを知ることができます。
また、サンプル資料のダウンロード等もできるので学習しやすいです。

30日間は返品可能

各講座を取る際に、必ずサンプル動画が用意されているのですが、実際に購入してみて、「やっぱりこれなんか違うなぁ」とか「思ったのとレベルが合わないなぁ」とゆうような時は必ずだれにでもあると思います。
ですので、30日間返品保証付きであることは学習をスタートするのに一つの安心材料になると思います。

価格はピンキリ

1講座2,4000円のものもあれば、9,600円のものあり、価格設定はさまざまです。まぁ、多くは2,4000円のものが多いかなぁという印象です。
「ん？高くないか？」って思った人もいるはずなので、一つだけ安く購入する方法があるので、紹介します！それは、当たり前ですが、セールを狙うこと！セールでは、多くのコンテンツが2,400円という破格の値段で販売されています。
時には、通常の10分の1の価格で販売されていることもあるので要注目です。
※インスタグラムやツイッターでの広告に注意しながら見てみましょう！

ここで、面白サイトを見つけたので紹介します！
「Udemyのセールはいつ？？」

Techacademy

21のコースがある

「Webデザインコース」「フロントエンドコース」といったWeb制作を学ぶことのできるコースからiphoneアプリの制作方法、Webマーケティング、動画編集を学ぶことができるコースがあります。

実際に現場で働いてる方から指導してもらえる

Techacademyではメンター制度を導入しており、8週間コースでは、全16回の面談をメンターから受けることができます。この面談で、わからないところを聞いたり、「実際の現場はどうなのか」とか「受講した後の就職の話」をすることができます。

※詳しく知りたい方は以下の記事をお読みください！

デイトラ

業界最安値のオンラインスクール

オンライン完結型では業界最安値である約6万円という破格の値段で事業を展開しています。「Twitterからスタートした」スクールであり、値段に反してとても有益なコンテンツが揃っております。
※実際に私が受講したわけではないので、実際にサイトを訪ねて内容を確認してみてください。

忍者コード

忍者CODEでは、主に、「サイト模写」と「ECサイト制作」をすることができます！
メインのコンテンツは上記のものですが、無料で、HTML,CSS,jQueryの学習ができます！実際の仕事を意識して作成されたコンテンツなので、とても有益です！
しかも、何より、やっていて楽しい！という感覚がすごく、是非皆さんにもやってほしいです！

コンテンツ	価格
銅の鎧	3,980円
銀の鎧	4,980円
金の鎧	7,000円

※金の鎧は、銅の鎧と、銀の鎧の両方を含みます。

銅の鎧で作るもの

銀の鎧で作るもの

無料で学習する方法

無料で学習するコンテンツとして、一部「Progate」や「Dotinstall」が思い浮かぶと思いますが、30日間だけですが、「Kindle」をインストールすれば、無料でWeb学習を進めることができます！
皆さんご存じの通り、「Kindle」は電子書籍であり、Amazanが運営しているコンテンツです！
Kindleを登録することで無料で学べるコンテンツとしていくつかあげますと、

1.できるホームページ HTML&CSS入門　Windows 7/Vista/XP対応できるシリーズ