サイト構築力が早く身につく!HTML/CSS学習にProgateをオススメする6つの理由

 

イカ太郎

こんにちは、元iOSプログラマーのイカ太郎です

1ヶ月前から

「サイト制作できるようになりたいなぁ」

と思って勉強をしています。

 

最初はHTML/CSS学習の定番書籍と言われるこの本をやりました。

【送料無料】 作りながら学ぶ HTML / CSSデザインの教科書 / 高橋朋代 【本】
最後までやってみたもののサイトを構築する実践力を身につけるには今ひとつと思いました。

 

そんな折、Progateというweb教材がツイッターで評判となっていたので試してみたのです。

そしたらこれがめちゃくちゃいい!

  • 分かりやすい
  • 実践力が身につく
  • ゲーム感覚で楽しめる

「最初からこれで勉強しておけばよかったなぁ」と思いました。

なので今回は、Progateをオススメする6つの理由についてお話ししてみたいと思います。

Progateをオススメする6つの理由

①必要以上に知識を詰め込まない!

新しいことを学習する時、あれもこれも知識を詰め込むと消化不良を起こします。

すると中途半端な知識が脳内に溢れ、結果的に「何も分からない」という状態になりがちです。

 

そうならないために大切なのが、もっともミニマムなものから作ること。

プログラミングの世界において

もっとも最初のステップは画面に「Hello, World!」を表示させること

といわれるのはそういう理由からなのです。

 

この原則をProgateの学習プログラムはきっちりとカバーしています。

  1. まずは超超シンプルなサイトを作る
  2. それができたら超シンプルなサイトを作る
  3. その次はシンプルなサイトを作る

というステップを踏むことで

「やれる!作れるぞ!」

という確信をつけていくことができるのです。

②自分が「わかったつもり」なのか「わかっている」のか確認できる!

学習でよくある落とし穴は「わかったつもり」になっていて、いざ実践しようと思ったなら「何もできない…」という状態になりがちなことです。

そうならないために大切なのは理解しているのか確認すること。

この仕組がProgateには組み込まれています。

 

レッスンは「説明」と「演習ドリル」の2部構成になっています。

レッスンの説明

演習ドリル

  1. 説明で学んだ内容を
  2. 演習ドリルで実践

このひとつひとつのレッスンがとても小さな単位となっているのがポイント。

小さなユニットになっているのでダラダラ説明を読む必要がなく、すぐに学んだ内容を演習で実践できるのです。

 

さらに!

ここがこのサービスのすごいところなのですが、

ブラウザ上でプログラムが動くのです!!

プログラムを書くためのソフトをインストールして、別の画面とブラウザを行ったり来たりしなくていい!

なので、ブラウザ画面だけに集中できる!!

これがこのサービスの使い心地の良さを生み出しているのだと思います。

③動画ではないので、マイペースに進められる!

プログラミング学習の定番サービスとして、ドットインストールUdemyがあります。

僕もiPhoneアプリ開発時代に非常にお世話になりました。

 

しかしProgateをやってみて、動画教材の弱点が見えてきました。

それは自分のペースで学習できないということ。

理解出来ない部分が出てきたら再生を停止し、巻き戻す。

これが非常に面倒で学習にストレスを与えるのです。

しかしProgateは動画ではないので、一時停止する必要がありません。

④忘れそうなタイミングで復習が入るので記憶に定着しやすい!

Progateは小さなユニットにレッスンが分かれていて、その度に演習があるので書籍などの教材と比べると非常に脳への定着がいいです。

しかしそれでも完全に定着させるためには少し時間を空けて再度復習する必要があります。

https://ameblo.jp/kaatsu-oyama-tochigi/entry-12248057871.html

上の図はエビングハウスの忘却曲線と呼ばれ、人が覚えたことを忘れていくスピードを測定したもの。

Progateではこの人間の脳の忘れていく仕組みを上手にカバーしています。

消えそうになっている知識を「こぼれ落ちるなー!」とばかりに、絶妙なタイミングで拾ってくれるのです。

それが道場コース。

この道場コースが現れる絶妙なタイミングは感動を覚えるほどじゃ

デブッダ

道場コースでは、通常コースのように懇切丁寧には教えてくれません。

最低限のヒントが表示され、分からなかったら過去のスライドを読み直します。

すでに読んでいる説明は読み直すのも楽ですし、まったく同じものなのですぐに忘れているポイントを発見できます。

⑤レベルアップするとゲームのように褒めてくれる!

Progateでは、レッスンが終わるとどんどんレベルが上がっていきます。

これが地味に嬉しい。

この数字を上げることが案外モチベーションに繋がります。

 

頑張ってコースを終えるとこんな演出もあるんです。

嬉しいキラキラアニメーション付き。

これがまた嬉しい。

これは体験した人にしか分からないかもしれません。

 

もともと僕はiPhone向けのカジュアルゲームを作っていたので分かるんですが、Progateを作ってる人たちの中にゲーム開発出身者がいると思います。

こういう心理面でのケアはドットインストールUdemyには無いですからね。

⑥デザインが安らぐ!

最後はデザイン

先ほど見せた説明画面を見せますね。

画面に情報が詰め込まれていません。スッカスカ。

なのですごく見やすいんですよ。

余白は頭の中にスペースを与えてくれます。

その結果脳に余計な負担がかからないため安らぐのです。

 

キャラクターの存在もポイント。

この忍者のクマさんがカワイイ!

レッスンの説明画像にもチョコチョコ顔を出してくるので、その度に気持ちが安らぎます。

Progateでサイト制作を学ぶならこの順番に学ぼう

Progateにはたくさんのコースがありますが、プログラミングの世界に入ったばかりの人はこう思うでしょう。

「何がなんだか分からない!」

なので、

  • まず最初にやるべき3つのコース
  • できればやったほうがいい2つのコース

を紹介します。

まずは

  • HTML/CSS
  • JavaScript
  • JQuery

の順番でやります。

これで画面内のパーツを作成するスキルがしっかりと身につきます。

 

そして以下の「できればやったほうがいい2つのコース」はこのようなものです

【Git】コーディングに失敗しても、うまくいっていた状態に一瞬で戻せる

 

【Sass】CSSをスッキリ書ける。しかも後から読みやすく修正もしやすい

Gitに関しては、以前プログラミング初心者向けにアホほどイラストを使って書いたやつがあるので良かったら見てください。

合わせて読みたい

プログラミング初心者に圧倒的安心感を提供するオススメツールを紹介します!





おわりに

Progateで学んだおかげでサイト制作学習が非常に楽でした。

初心者に本当に優しい学習システムだと思います。

「サイト制作をはじめたいけど何からやったらいいのかわからない!」

もしそう思っているのならProgate、本当にオススメです。