記事のアイキャッチ画像
2020-09-23
Category : Web制作の学習

現役が教える!初心者がWebコーディングを勉強できる学習サイト3選

この記事をご覧になっている皆さんは、Webコーディングを勉強したくて、学習サイトの利用を視野に入れているのではないでしょうか?

○ 自分に向いている学習サイトのおすすめを紹介してほしい…

○ 無料のものもあれば有料のサイトもあって、どれを選ぶべきか判断材料が欲しい…

○ 本で勉強するのは向いていないから実際に手を動かしながらプログラミングの学習を進めたい…

このように考えたり悩んだりしますよね…。

 学習サイトで勉強することの最大の魅力は、PC一台あれば、いつでもどこでも自分の好きなタイミングで学べること。 

これからプログラミングを勉強しようとしている皆さんは、仕事や学校が忙しく、生活に余裕があまりないでしょう。

そんな中でも環境に左右されずに学習を進めたい…

そんな人のために、現役でWeb制作会社で働く僕が、無料・有料を含めた学習サイトを3つきちんと厳選しました。

Webコーディング学習サイト:シラバス|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

この3つの中でも僕は特にUdemyをおすすめします。

理由は、 知識のインプットだけに止まらず、プロの目線で勉強ができる から。

学習本の勉強が 知識を取り込む  のなら、プロのエンジニアによる学習動画は、 プロの脳そのものを取り込む  といった感覚です。

僕はまだまだプロの道を駆け上がって精進している最中ですが、皆さんより一歩先を進む先輩だからこそ響く言葉があると、考えています。

この記事を判断材料に、自分に向いている学習サイトが決まり、プログラマーへの一歩を踏み出せたら僕も嬉しい限りです!

それでは、実際に見ていきましょう。

 1. シラバス【完全無料】Webコーディングに必要なスキルをロードマップ形式で学ぶ

3つのメリット
① 完全無料で学習ができること
② Web制作に必要なスキルを体系的にロードマップで示してくれて、学習のベクトルが見えてくる
③ どんな人に必要な知識か?学べば何を作れるようになるか?学習の目的が明確になる
2つのデメリット
① 学習環境は自分で用意しなければならない
② 書かれている学習記事の日付が「2014/11/27」といった様に古い場合がある

シラバスの一番の特徴は「Web制作には何が必要?」この問いをロードマップで示してくれていること。

Webコーディング学習サイト:シラバス|サイト利用の様子①|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

さらにそれぞれのレッスンにきちんと誰が対象か書かれているので、無駄なく学習の旅をすることができます。

そしてそのレベルも実践的で、WordPressのレンタルサーバー関連の話からnpmで開発を効率化させる話まで揃っています。

Webコーディングとはなんたるか、Web制作ってどんな知識を駆使してるのか、ひとまず概要を知りたい人にはうってつけの学習サイトです!

Webコーディング学習サイト:シラバス|サイト利用の様子②|冨岡司 Tsukasa Tomiokaのポートフォリオサイト
Webコーディング学習サイト:シラバス|サイト利用の様子③|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

まずは実際にアクセスして触れてみましょう。

シラバスの学習サイト

2. Progate【無料 or ¥980円/月】ゲーム感覚でサクサク勉強できるサイト

3つのメリット
① デザイン性に優れていて理解がしやすい
② ひとつひとつの学習項目が短く設定されているので、いつでも好きなタイミングで学習ができる
③ 言語や学びの種類が多いので知識を広げやすい
3つのデメリット
① 無料で学習できる量が少ない
② レイアウト崩れを修正する力など、実務的な能力はあまり伸びない
③ 単発の知識しか身につかず、0から制作する力は身につきづらい

Progateの一番の特徴は、デザイン性に優れたスライドを見ながらゲーム感覚で勉強ができること。

「プログラミングってハードルたかそう…」そんな敷居高さを感じさせず、サクサクと理解を進めることができます。

Webコーディング学習サイト:Progate|サイト利用の様子⑧|冨岡司 Tsukasa Tomiokaのポートフォリオサイト
引用元:PRTIMES様

そして、そのユーザー数は2020年7月時点で「150万人」を突破し、人気を誇っています。

しかし、手に入る知識はやはり単発のスキル。
Progateを経て実践に繋がるとは限らないですが、手早く確かなベースの知識を手に入れたい人におすすめと言えます。

Progateを3つに分けて解説!
① Progate利用の様子
② Progateの価格・プラン
③ 実際にProgateを試してみましょう!

2-1. Progate利用の様子

Progateは多くの言語に対応していて、Web制作に必要な知識は取り揃っています。

Webコーディング学習サイト:Progate|サイト利用の様子②|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

ひとつの言語の中には、いくつかのコースが用意されていて、初級レベル〜上級レベルまで用意されています。

Webコーディング学習サイト:Progate|サイト利用の様子③|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

そして、そのコースの勉強に掛かる時間の目安を出してくれて、大体は4時間前後のものが多いです。

コースは7章ほどに分けられているので、30〜40分でサクッと勉強ができてしまいます!

実際の学習の様子このような感じで…

Webコーディング学習サイト:Progate|サイト利用の様子⑤|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

講義のスライドのような形で知識をインプットして、そのままコードを書いてプレビューを確認することができます。

2-2. Progateの価格・プラン

Progateは無料と有料の2つのプランに分けられています。

無料プランは初級コースのみ、有料では全てのコースを学習できます。

Webコーディング学習サイト:Progate|サイト利用の様子⑥|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

僕も実際にコース内容を見てみたのですが、初級編はフッターやヘッダーを作ってみたり、CSSでデザインしてみたり、基礎のキを理解できる内容でした。

「HTML, CSSってどんな言語なの?ちょっと触れてみたい…」そう考えている人にはちょうど良いボリュームと言えるでしょう!

2-3. 実際にProgateを試してみましょう!

登録から利用までもすぐにできてしまいます。たった5Step!


① ホームページにアクセス

Progateにアクセス

② ホームページ右上の無料会員登録をクリック

③ アカウントを作成するかSNS, Googleアカウントを利用する

Webコーディング学習サイト:Progate|サイト利用の様子⑦|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

④ 新規アカウントを作成を選んだなら、メールを確認しアカウント認証を済ませる

⑤ ダッシュボードやコース一覧からお好きな言語、コースの学習をスタートできます!

2-4. Progateまとめ

Progateは初心者でも手軽にサクサクと勉強を進めることができます。

しかし、上級編の内容を確認してみましたが、やはり「単発の知識」が身につくのに終わります。

そこから理解を広げ、自分の作りたいものに積極的にチャレンジできるなら良いのですが…
そのまま学習が終わってしまう人も中にはいます。

そんな人には、プロのクリエイターが動画で徹底的に教えてくれるUdemyを試してみるのも良いかもしれません。

3. Udemy【¥動画の単価による】世界中で人気を誇るプロ講師による動画学習サイト

Udemyは、アメリカで2009年にスタートしたオンラインの動画学習プラットフォームで世界中で人気を占めています。

そのユーザー数はなんと世界中で1,500万人以上で、13万ものビデオ学習コースが配信されています。

Webコーディング学習サイト:Udemy
|サイト利用の様子⑧|冨岡司 Tsukasa Tomiokaのポートフォリオサイト
Web開発だけではなく様々なジャンルの学習ができる

Udemyはこれまでに紹介してきたものとは学習方法が違っていて、配信されている学習動画をダウンロードして勉強する形となっています。

 プロのエンジニアが動画を通して、制作画面やパワポなどの資料を共有しながら、丁寧に解説 をしてくれます。

もし金銭的にも時間的にも余裕があるなら、是非チャレンジしたい学習サイトです。

Udemyを4つに分けて解説!
① Udemy5つの魅力
② 実際にUdemyを試してみましょう!
③ アカウント登録〜購入方法
④ オススメの学習動画コンテンツとその価格

3-1. Udemyの5つの魅力

Udemyの魅力を箇条書きにまとめると以下の通りです。

Udemy5つの魅力
① ユーザー評価システムにより、自分の目で学習コンテンツを選択できる
② 買い切り購入なので、ダウンロードすればいつでもどこでも好きな時に学習ができる
③ 無料コンテンツから3,000円〜20,000円強まで選べる価格プラン
④ 30日いないなら返金保証が付いている
⑤ 就職してプロになってからも無限大に学ぶことができる

Udemyではまず、自分が学びたい動画コンテンツを探すところから始まります。

Webコーディング学習サイト:Udemy
|サイト利用の様子①|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

Udemyでは、動画を配信している講師をユーザーが評価するシステムになっているので、評価で絞って検索をかけることもできます。

さらに公式サイトにある通り、30日間の返金保証も付いてくるので、安心して購入できます。

自分が勉強したいコンテンツを自分で選択することができるのは魅力のひとつ。

購入前は、全コンテンツのタイトルとレクチャー時間、講座概要を確認でき、プレビューをみられるのも魅力的。


Webコーディング学習サイト:Udemy
|サイト利用の様子②|冨岡司 Tsukasa Tomiokaのポートフォリオサイト
Webコーディング学習サイト:Udemy
|サイト利用の様子③|冨岡司 Tsukasa Tomiokaのポートフォリオサイト
Webコーディング学習サイト:Udemy
|サイト利用の様子④|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

僕が気になったコンテンツでは、6つもプレビューを閲覧することができました。

Webコーディング学習サイト:Udemy
|サイト利用の様子⑤|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

そして最後に、コンテンツが無限大に増えていく点。

無事にWebエンジニアとして就職した後、さらなるスキルアップのためにも利用でき、長期的な付き合いができます。

エンジニアとしての先輩が世の中にいる限り学び放題という感じでしょうか…!

3-2. 実際にUdemyを試してみましょう!

まずはUdemyの公式サイトにアクセスします。
※下記画像から HTML, CSS, JavaScriptなどWebコーディングが勉強できるコンテンツ一覧ページに移動 できます。

※別タブで開きます

下記画像が表示されたら、試しに「HTML」をクリックしてジャンルを絞りましょう。

Webコーディング学習サイト:Udemy
|サイト利用の様子⑥|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

下にスクロールすると様々な動画学習コースが表示されます。価格も講師によって異なり、無料のお試し版もあれば、3,000円ほどの値段、20,000円ほどの価格のコースもあります。

Webコーディング学習サイト:Udemy
|サイト利用の様子①|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

学習動画コースを選択すると下記画面に移動し、コースの詳細を確認できます。

こちらでプレビューを確認することもでき、初めは10分ほどの動画なので、一度チェックしてみるのもいいでしょう。

Webコーディング学習サイト:Udemy
|サイト利用の様子⑦|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

購入には登録が必要ですが、無料で5分もあれば登録ができます。

3-3. アカウント登録〜購入方法

①まずは公式サイトにアクセス

②右上の「新規登録」ボタンをクリック

③アカウント情報を入力する

Webコーディング学習サイト:Udemy
|サイト利用の様子⑨|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

④必要事項を入力すればアカウント作成は完了です!

⑤試しに動画コンテンツをカートに入れてみましょう。「カートに移動する」ボタンをクリックすると「ショッピングカート」画面に移動できます。

Webコーディング学習サイト:Udemy
|サイト利用の様子⑩|冨岡司 Tsukasa Tomiokaのポートフォリオサイト
Webコーディング学習サイト:Udemy
|サイト利用の様子11|冨岡司 Tsukasa Tomiokaのポートフォリオサイト

⑥アカウント作成が完了していれば、実際に購入する時に「レジに進む」ボタンから手続きが可能となります。

3-4. Webコーディングの勉強に役に立つUdemy動画を3つに厳選!

ここまでUdemyで学習しようと考え始めた人へ向けて、現役目線でおすすめの動画を5つ、厳選したのでご参考に下さい。

自分の経験や学習を少し遡って、勉強したての頃に戻って真剣に選んでみました。3日はかけて検索し調べたのできっと参考になるはず…!

① 低価格でHTML, CSSの基本をサクッとカバーしたい人におすすめ
② Webコーディングに必要最低限な知識を基礎から丁寧に身につけたい人におすすめ
③ Webコーディングの現場に必要なスキルを磨きたい人におすすめ!

低価格でHTML, CSSの基本をサクッとカバーしたい人におすすめ

Webコーディング学習サイト:Udemy
|サイト利用の様子12|冨岡司 Tsukasa TomiokaのポートフォリオサイトmarginBottom40
▼価格
2,400円

▼動画の合計時間
約3時間

▼難易度
★☆☆
※初心者目線の難易度。★★★でも十分理解できるレベルです。

▼コース概要
HTML, CSSの基礎土台をペアで固めることで、Webページを作成できる力を身につけられる。

▼作成者
Yu Hiraga様

Yu Hiraga様のこちらの動画コンテンツでは、Webページを作る際に必要なHTML, CSSの知識を体系的に身につけられます。

僕自身でコンテンツの中身を確認したところ、基本は十分に身につけられるものでした…!

学び終わった後は、ご自身のPC内だけ(ローカル環境)であれば、簡単なWebページを作れてしまうレベルになれます。

プレビュー動画を見た僕の個人的な感想としては、とても聴き心地の良い言い回しや話し方で解説してくれます。(声が渋く、落ち着いていて、頼れる先生感がある)

HTMLとCSSの役割を家に見立てて、分かりやすく表現するならば、HTMLは土台柱屋根などを扱います。骨組みの部分です。これに対しCSSは、外装と内装を司ります。つまり見かけの部分です。

上記は、プレビュー最初の動画の一部を抜き取ったもので、大変分理解しやすいですよね…!

この学習がコースが気になった人は、下記の画像リンクから一度チェックしてみましょう!

Webコーディングに必要最低限な知識を基礎から丁寧に身につけたい人におすすめ

Webコーディング学習サイト:Udemy
|サイト利用の様子13|冨岡司 Tsukasa Tomiokaのポートフォリオサイト
▼価格
24,000円

▼動画の合計時間
約5時間

▼難易度
★★☆
※初心者目線の難易度。★★★でも十分理解できるレベルです。

▼コース概要
HTML, CSSを実務的に学習し、Webデザインに必要な範囲のJavaScriptの基礎も固められる。

▼作成者
storeG -web.com様

このコースでは、 HTML, CSS, JavaScriptのベース知識を安定して手に入れたい人におすすめ です。

そしてコースの魅力は、スマホやタブレットにも適用させるレスポンシブデザインや、サーバーへWebページをアップする話まで…実務面を視野に入れた内容を学習できること。

さらにスライドがとても本格的で、ナレーションも付いているので、大学の講義さながらのクオリティを担保しているのも魅力的です。

storeG -web.comさんでは他にも動画コースを用意しており、その評価も全て4.0前後と高いものばかり…!

確かに価格が高いのが難点ですが、結局何冊か本を買ったり…スクールに通うのと比べれば適正な価格設定だと言えます。

こちらも下記画像リンクからプレビューは無料で確認できますので、一度コースの概要をチェックしてみましょう!

Webコーディングの現場に必要なスキルを磨きたい人におすすめ!

※セールではない時の通常価格は8,400円です
筆者が実際に購入して動画コースを見た作品です。

▼価格
8,400円

▼動画の合計時間
約20時間

▼難易度
★★★
※初心者目線の難易度。★★★でも十分理解できるレベルです。

▼コース概要
HTML, CSSの基礎を学びつつ、プロの脳みそを吸収して現場で活躍できる人へ。

▼作成者
【Code Mafia】 WEBプログラミング学習様

正直に言って基礎中の基礎は、どんな学習サイトでも入れられます。

この動画は、HTML, CSS, JavaScriptの基礎はもちろん、もう一歩踏み込んだ現場のナレッジも手に入れたい人に、うってつけです。

 この方の動画の素晴らしいところは、実務目線で解説してくれている点。 

この記事の冒頭でお伝えした「プロの脳みそ」を手に入れられるというのはこの動画のことです。

▼ HTML, CSS, JavaScriptの役割は?
▼ フロントエンド&バックエンドって何?
▼ ライブラリってよく聞くけど…
▼ 仕事で活きるコードの書き方は?
▼ 基礎知識では足りない現場知識
→ CSSの詳細度
→ Emmet(素早いコーディングの仕方)
→ VS Code(エディッタ)のショートカット
→ SassでCSSを効率よく
→ レスポンシブデザインとは
→ サーバー側・フロント側
→ リクエストとリプライ
→ メンテナブルなプログラム

現場で成長中の僕目線で見れば、どの知識も光って見えました。

初級者であろうが中級者であろうがこの動画をみると新しい発見があります。「Emmet使えばそんなに楽にコードかけるのか…」「CSSの詳細度が原因で不具合起きていたのか…」最初からこういう知識を持っておけばなぁ…とそこそこ勉強した人が後悔しそうな知識もカバーしているんです!

もちろん、上記の現場レベルの知識だけじゃなくて、HTMLとは?CSSとは?その基礎からもティーチングしてくれます。

とは言っても、言葉の言い回しなどが”現場の人”という印象なので、まだプログラミングに抵抗を感じている人は難しく聞こえるかもしれません。

一度、下記の画像URLからページに移動して、一つ目と二つ目のプレビュー動画をみることをオススメします。この動画のあらましが把握できるはず。

 初心者でもこの動画コースから始めることができます。 
ただ、初めて聞くこと言葉について教科書のように丁寧には説明されません。

例えば、CSSの「プロパティ」という言葉。動画を進めれれば理解できくるし、Googleで検索すればすんなり理解できるのですが…

分からない言葉は丁寧に説明してほしい…
という人については、 「シラバス」や「Progate」でサクッと基礎知識を学んでから、こちらの動画で現場レベルまで底上げするのがいい でしょう。

コーディングの書き方と言った基礎中の基礎をカバーした後、この動画で現場レベルに底上げすると、無駄なく力を手に入れられます。

3-5. Udemyまとめ

これまでに紹介してきたUdemyを振りかえりましょう。

▼ 世界で人気を誇っている安心できる学習サイト
▼ 全国のプロの講師が動画を配信してくれていて、自分の目で選択ができる
▼ 価格は3,000円前後から20,000円強まで様々
▼ 日々更新される動画コースにより長期的な付き合いができる

もちろん、講師によって価格にバラつきがあり、無料で学習できないかと考えていた人からすると高額かもしれません。

しかし、価値のあるものには値段がつきます。実務レベルまできちんとスキルを磨きたいなら、お金をかける事も視野に入れていきましょう。

とは言っても、Udemyではどの動画コースにするか慎重に選びましょう。30日間の返金保証があるとは言え、時間は大切に…!

4. 3つの学習サイトのまとめとリンク集

シラバスでは、ロードマップ形式で学習の流れを俯瞰できて、無料で質とレベルが高い内容が学習できます。

Progateは、ゲーム感覚でデザイン性に優れた学習スライドでサクサクと学習を進められます。

Udemyでは、プロの講による学習動画を自分の好きなタイミングで閲覧しながら、着実にプロレベルの知識を身に着けることができます。

それぞれ異なるメリット・デメリットがあり、個性があります。あなた自身にあった学習サイトでしっかりと基礎を身につけていきましょう!

Pick Up News

【Udemy】Web制作のフロントエンドで実務的に役立つおすすめ動画6選

INDEX