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

Webコーディングの学習サイト3選+α初心者のための勉強方法

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

○ 自分に向いているおすすめの学習サイトはないかな…

○ 動画で学習したりProgateみたいにスライドで学習したり、どんなジャンルの学習サイトがあるのか知りたい…

○ 学習サイトを探しているんだけど、そもそもWeb制作しようと思ったらどこまで勉強したら良いのか把握したい…

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

やみくもに勉強を進めてはいけません。みなさんがよく見て創りたいと思っているあのホームページを制作できるようになるためには、どのレベルまでいけば良いのか?

  勉強をする前に目標を立て、学習のロードマップを引いていきましょう。  

僕は今は現役でWeb制作会社で働いているのですが、初めは一から独学で技術を身につけたので、これから勉強を始めるみなさんと同じ目線で情報を届けられる自身があります。

  この記事では、おすすめのWebコーディングの勉強サイトはもちろん、学習サイトのジャンルからWeb制作学習のロードマップまで解説していきますね。  

学習サイトで勉強を始める前に読んでおくべきポイントなので、ぜひ目を通してみてください。

この記事から新鮮な情報を受け取って、Webコーディングの勉強の力になれれば幸いです!

1. Webコーディングの勉強をする前に理解するべき学習ロードマップ

まず初めにWeb制作に必要なコーディングの技術を身に着けるための、学習の流れを説明していきます。

STEP1

Web上でページを表示させる仕組みを理解する

このステップが大切です。仕組みを理解しないでHTML, CSSの勉強をするのは、どんな道具を使ってどんなフィールドでバスケをするのか知らないまま、基礎練習をするのと同じです。

  HTML, CSS, JSはどんな役割なのか?Webページってどうやって表示させているのか?きちんと理解した上で勉強していきましょう。  
そうしないと今なんの勉強をしているのか分からなくなりモチベーションがだだ下がりします。

STEP2

HTML, CSSの書き方を理解する

次にHTML, CSSだけ書き方を理解してしまいましょう!みなさんの思っているより意外と簡単なんですよ??
  Wordの装飾や文章を英語で指示を出していく…といった感覚でWebコーディングができてしまいます。  

例えば、記事を書きたくて好きな青色で大きな見出しで表示させたいなら、こう書くだけ。

<h2 class="head-color">記事の大見出し</h2> <style> .head-color { color: blue; } </style>

「h2」で見出しだという指示を出して、class=””の中身に適当な英語でマークして、「style」で囲んだ中に「colorは青色」という指示を出せばOKです。
このような命令規則が沢山あると言った感じで、自分で創りたいものをクリエイトしているうちにどんどん覚えていけられます…!

STEP3

Webページを制作する

そして、最後に自分で何でもいいので制作をしましょう。
基礎だけに終わらないしっかりとした教材であれば、最後にサイト制作というフェーズがついているはずです。

ここでやっとバスケのフィールドに立って、チームで試合に出場した経験ができたと言った段階です。
以上の3STEPが必要最低限のインプットでここから、より幅を広げていく流れになります。

1-1. 現代のWebサイトがどのように表現されているか把握する

ここもとても大切なポイントです。現代のWebデザインを理解しないまま学習するのは、今どんな曲が流行っているのか全く聴かないまま作曲の勉強をして、デビューしようとしているようなものです。

僕が日頃からみているWebギャラリーサイトの中から、メジャーなものをピックアップしてみました。

とは言っても、紹介しているこれらは初心者がいきなり創れるレベルのものではありません。
  大切なのは、現状を知ることと、理想を持つこと、そしてどうやったら表現できるか方法を知ることです。  

どうだったでしょうか?今の時代のWebサイトのイメージはつかめましたか?
こんなサイトを創るためにどうしたら良いかはまた別の話ですが…

理想をもつ、目的・目標を定めるのは大切なこと。

ここからは、Webコーディングが勉強できる学習サイトのジャンルを3つに分けて説明していくので、これから勉強のベクトルを明確にしていきましょう!

1-2. Webコーディングが勉強できる学習サイト3つのジャンル

スライド形式で学ぶ

動画形式で学ぶ

オンラインプラットフォーム
形式で学ぶ

今の時代の勉強サイトでは大きくこれらのジャンルに分けられ、この記事ではそのジャンルに当てはまるコーディング勉強サイトを3つに厳選しました。

Progateでは、デザイン性に優れたスライドをベースに、サクサクとゲーム感覚で勉強を進めることができ、

Schooでは、Webコーディングやそのほか様々なジャンルの学習がLive配信によって勉強できて、

さらにUdemyでは、世界中の現役エンジニアが提供する学習動画で勉強できるオンラインプラットフォームとなっています。

それぞれどのような特徴があるか…実際にその詳細をみていきましょう!

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でWebコーディングの勉強をする方法

Progateは多くの言語に対応していて、Web制作に必要な知識は取り揃っています。
上記画像のように、HTML/CSS/JavaScriptはもちろん、PHPやGitといったものまで勉強することができます。

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は初心者でも手軽にサクサクと勉強を進めることができます。

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

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

そんな人には、見出しの4でご紹介する、プロのクリエイターが動画で徹底的に教えてくれるUdemyを試してみましょう。

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

3. schoo【無料 or ¥980円/月】多様な知識が勉強できるオープンな学習サイト

schooはLive講座を参加者と共に受けられたり、過去の学習コースを動画で学べたりできる、オープンな動画型の学習プラットフォームサイトです。

schoo5つの特徴

① schooはプログラミングに限らずビジネススキルや英語学習など、幅広い学びの場を動画で提供する学習プラットフォームサイト

② Live配信学習や参加者とのオープンチャットが可能であることから、ふとした新しい知識や人との出会いがある

③ ほぼ毎日全ジャンルから生Live配信によって学びを提供している【無料で受講可】

④ 講師が収録した3~7個ほどの学習動画をひとまとまりにしたコースを受講することができる【有料のみ】

⑤ 無料ではお試しで5分間の学習動画の閲覧とLive配信の参加ができ、有料では全ての学習動画コースを利用できる

schooでは動画で勉強を進めていく形になります。その特徴はLive配信での講座開設があるように、オープンな学習環境が特徴です。

無料ではお試し範囲のことしか利用できないので、schooを選ぶならProgate同様、月に980円の費用は必要になってきます。

3-1. schooの無料版と有料会員で利用できる範囲の違い

オープン会員(無料会員)では「すべての録画授業の受講」にチェックが入っていませんが、これはお試しの5分学習動画しか見れないという意味です。

実際に学習できる範囲も上記画像の通りで、schooに存在する全ての学習動画をチェックはできますが、実際にみれるのは5分だけとなっています。

また、Live配信は無料会員でも自由にみれるのですが、実際は全てのジャンルの中から1日に1,2個の講座がオープンにされる形で…

下記の画像のように、講座内容は決まっているので、本格的にWeb制作のコーディングの学習を進められる訳ではありません。

とは言っても、schooでの学習動画の雰囲気は十分に味わえるし、参加者同士でのコミュニケーションも取れるので、試しにトライしてみるのも良いでしょう。

3-2. schooでWebコーディングの勉強をする3つの利用方法

① 無料利用でLive配信講座とお試し5分学習動画で様子を見る

② 有料会員になって勉強する学習コースを決めて少しずつ学んでいく

③ 「先生から探す」「カテゴリから探す」といった知識との出会いがあるので、基礎知識を学び終わった後もさらなるステップアップを求めて学習を続ける

学習動画の探し方としては、「カテゴリ」からWeb制作系のものを選択して好みのコースで勉強したり、「検索窓」から学びたい言語を検索にかけることができます。

上記のように、Webコーディングをサイトで勉強したいと考えているみなさんにとって、必要な知識は学ぶことができます。

このようにしっかりと知識のヴァリエーションを揃えながらも、Live配信学習ができる個性もあるステキなプラットフォームサイトとなっています。

3-3. schooのまとめ

schooは、ヴァリエーションある学習動画から月980円のサブスクリプション形式で勉強することのできる学習サイトです。

schoo独特のLive配信からも新しい知識や人との出会いも期待できる魅力あるプラットフォームサイト。

気になった方は、下記リンクから一度schooを覗いてみましょう!

schooの公式サイトに移動する

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

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

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

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

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

このUdemyは基礎の勉強だけに留まない学びができる点が1番の魅力。

その理由はプロのエンジニアが個人的にUdemyのプラットフォームに講座を出しているから、プロのノウハウそのものを吸収できるからです。

何十年のキャリアを積んでいるプロもUdemyに講座を出してくださっているから、僕自身も日頃Udemyを利用し、その都度学びを得ています。

そんなUdemyについて、この記事では学び方から利用方法…さらには僕が実際に購入してスキルアップに役立った動画まで解説していきます。

Udemyを5つに分けて徹底解説!

① Udemyをおすすめする5つの理由

② 3STEPで解説!UdemyでWebコーディングの勉強をする方法

③ 筆者が実際に購入したHTML/CSS/JavaScriptを実務的に勉強できる講座

④ Web制作に必要な技術が勉強できるUdemy講座6選

⑤ Udemyのまとめ

4-1. 数あるコーディング学習サイトからUdemyをおすすめする5つの理由

Udemyをおすすめする5つの理由

① プロのエンジニアが投稿している講座が沢山あって実務レベルの勉強ができる

② 日々新しい講師・新しい知識が更新されるので、自分が就職してからもUdemyと長い付き合いができる

③ ユーザー評価によって講座の良し悪しが目に見えて分かるので安心した選択ができる

④ 30日以内の返金保証が付いているから安心して購入することができる

⑤ 講座の動画は買い切りなので、制作の中で躓いたらいつでも振り返ることができる

まずUdemyでは、下記のように実績のあるプロが講座を投稿してくださっています。

もちろん、個人が学習動画として出している講座なので、その良し悪しは分かれますが…   Udemyではユーザー評価システムによって、その講座の良し悪しが目に見えてわかるので、安心して選択することができ流のが魅力。  

さらに全ての講座の購入に対して、30日間の返金保証がつくので、さらに安心した講座選択ができます。

このように、Udemyは他のコーディング学習サイトと比べても、講座に対しての質の保証がしっかりしています。そして、その講師の実績と確かなもの。

ここからは、そんなUdemyの利用方法を具体的にみていきましょう。

4-2. 3STEPで解説!UdemyでWebコーディングの勉強をする方法

まずは、下記ボタンからUdemyの公式サイトにアクセスします。

Udemyの公式サイトに移動する

STEP1

Udemyでは、カテゴリーや言語で絞って、学びたい講座を絞り込むことができます。
Web制作関連であれば、下記のように「ウェブ開発」カテゴリーで絞ると、HTMLやCSS、JavaScriptその他Web関係の講座がピックアップされます。

さらに、下にスクロールすると、評価やビデオ時間(講座時間)、言語、トピックなどで絞り込むことができます。
おすすめは「トピック」の絞り込みで、ウェブ開発カテゴリーで検索していれば、対応するHTML、CSSなどの言語が出てくるので検索がしやすいですよ。

STEP2

講座ページに移動すると、学習内容や何個かに区分けされているセクション毎のタイトル、評価や講師についてなどが見ることができます。

そして、必ず見ておいた方が良いのが、講座の「プレビュー動画」です。
その講座で勉強できることなどをその講師が説明してくれているので、   どんな講師なのか?どんなことが学習できるのか?   それらを具体的に知ることができます。

プレビュー動画を参考に、購入するかどうか検討しましょう。

STEP3

実際に購入するには、無料会員に登録する必要があります。   たった1分で終わるので初めに登録しておきましょう。   右上の「新規登録」をクリックして、メールアドレスとパスワードを入力するだけで登録ができます。

下記のように、右上に自分の名前などのアカウント情報が表示されていれば登録完了です!

実際にコースを購入する手順も簡単で「カートに入れる」→「カートに移動」→「レジに進む」を順にクリックして、そのあとに表示される画面でカード情報を入力すれば購入ができます。

4-3. 筆者がたった1つに厳選したWebコーディングの質の高い勉強ができるUdemy講座

  これからご紹介するUdemyの学習講座は、僕が実際に購入して、すベて勉強し終えて、仕事にもこのポートフォリオサイトにも役立っているものです。  

難易度としては、Webのコーディングを一切したことがない人にとっては少しだけ高いレベルですが、HTML,CSSの基礎的な書き方を理解できていれば無理なく勉強することができます。

僕がリアルに役立っている講座なので、ここ一番でおすすめできる学習動画です。

講座ページを見てみる

▼価格
9,600円

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

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

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

この講座を学び終えると制作できるWebサイト

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

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

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

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

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

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

気になる人は下記の画像リンクから講座ページに移動して、まずはプレビュー動画を見てみてください!

いくつかプレビュー動画がある内、「コース紹介」はぜひみておくべき動画です。

  冒頭の学習ロードマップで解説した「Web上でページを表示させる仕組みを理解する」というSTEP1がこのプレビュー動画だけで理解できてしまいますよ…!  

最後に、もっとUdemyのおすすめ動画を知りたい人に向けて、このメディアで投稿している別記事もご紹介しておきます。

4-4. HTML/CSS/JavaScript等でフロントに役立つおすすめ講座6選

このメディアサイトでは、Udemyでさらなる技術を学ぶことのできる、Udemyのおすすめ講座を6選、徹底解説しています。

この記事を読んで、Udemyに興味がでてきた人はぜひ合わせてチェックしてみてください。

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

4-5. Udemyまとめ

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

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

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

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

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

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

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

Shooでは、Live配信によるオープンな講座がある中、有料会員になれば数ある学習コースを利用して勉強することができます。

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

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

Pick Up News

CodeCampはどんなプログラミングスクール?評判や口コミなどを解説!

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

【Udemy】これでWordPressの悩み解決!初心者にもおすすめの講座3選