【Progate・有料版】初心者がHTML&CSSコースをガチってみた正直な感想

こんにちは！

セブ島の海上に住んでいるバジャウ族でゴロゴロしてたらIT × 英語留学の「Kredo」にスカウトされた太一です。

最近はKredoで働きつつ、プログラミングも勉強しています。

そこで今回は、僕がプログラミング学習で大いにお世話になっているProgate（プロゲート）のHTML&CSSコースの無料版、有料版を使った正直な感想を書いていきます！

僕は初心者として使ってみての感想を書きますが、同じ「Kredo」で働く現役エンジニア「エイジ」のアドバイスも途中で入れていきます！

エイジ

こんにちは！

セブ島 IT×英語留学「Kredo」のエンジニア、エイジです！エンジニア目線からプログラミング学習に関する意見を述べていきます！

です。

たくさんプログラミングの学習サイトがあって迷ってしまいますよね。

この記事を読むことで、あなたがProgate（プロゲート）の有料版を使うべきかが分かると思います。

また、Progate（プロゲート）以外のオススメ教材はこちらの記事で紹介していますので参照してみてください。

Progate（プロゲート）とは？

Progateとは、プログラミングをゲーム感覚で学習できるサイトです。

無料から始めることが可能で、初心者向けのサイトです。

難しい説明はなく、とても分かりやすいです。

レベルが上がったり、Twitterと連携していたり、スライドでのわかりやすい説明があったりと挫折しにくい仕組みになっています。

エイジ

Progateはプログラミング初学者が脱初学者になるのに適していると思います。「わかりやすいスライド → 演習」という進め方で、プログラミングを触った事がない人でも理解しやすいからです。

ただしProgateは、

・「超初心者向けのカリキュラム内容である事」

・「カリキュラムを通して得られるものが基礎知識である事」

この2点のみである事から脱初学者になるというイメージです。

そこからさらに成長する為には、Progateで学んだ知識を活かして自分で成果物を作る必要があります。

Progate（プロゲート）で学べるコース

Progate（プロゲート）では以下のコースを学ぶことができます。

全部で16コース（言語）学習可能です。

Progate（プロゲート）：HTML＆CSSコースを１ヶ月ガチった感想

結論：初心者はProgate（プロゲート）【有料版】を使う価値あり

先に結論を述べると、基礎中の基礎が学べるのでゼロから勉強する方にはおすすめです。

無知の人が「とりあえずやってみよう」ということならいいサービスではないでしょうか。

しかし、ある程度知識のある人がレベルアップするための教材としては、イマイチでしょう。

HTML＆CSSについて大まかに理解できた

「あー、HTML・CSSってこんなものなんだ」って大まかに理解できます。

また、HTML&CSSがどのようなものなのか、タグの働き、書き方など基礎中の基礎は理解できるようになるでしょう。

ですが、このコースをやり終えたところで何かサイトが作れるようになるということはないかと思います。

それでも簡単で大まかなWebサイトのデザインならできるようになるでしょう。

「道場コース」が難しい

僕はこの画像部分でつまずきました。

「道場コース」というコースなのですが、上記画像を見てもらえればわかりますが、具体的にどのように間違っているのかの説明がないのです！笑

そのため、どの部分にどのような修正が必要なのかわからず、ひたすら色々な場所を修正するしかありません。

さらに道場コースでは自分なりにコードを書いていくので、見本通りの見た目になることはほとんどありません。見た目がほとんど同じでも、コードの書き方が同じになることは滅多にないのです。

これらがプログラミング学習の独学において、多くの人が離脱してく理由だと思いました。

一度わからない場所が出てくると、そこを修正できるまで次に進めず、特に独学では問題が発生した時にヘルプを求められる人がいないため続けるのが難しく感じました。

ちなみに、Kredoの先生に聞いたらすぐに解決しましたし、プログラミング学習においてはメンターを作ることが最速の習得策かなと思いました。

実戦形式の学習があまりない

ProgateのHTML&CSSコースを学んだだけで仕事を受注できたり、満足のいくWebサイトを作ることは難しいと感じました。

なぜなら、実践形式の学習があまりないからです。

メンターの重要性を感じた

また、Progateで学習することによって独学でのプログラミング学習の難しさも実感しました。つまずいてしまっても頼れる人がおらず、そのままフェードアウトしてしまうなと感じました。

多くの人がプログラミングの独学での学習を諦めてしまう理由が、メンターがいないことによって問題の解決方法がわからないことだと思います。

エイジ

メンターは1人で勉強を進められる人なら必要ないですが、分からない時にネットで何を調べたら良いか分からない人、1人で勉強をするのが困難な人にとっては必要です。

IT×英語留学の「Kredo」では優秀なメンターが、わかりやすく教えてくれます。

Progate（プロゲート）【無料版】とProgate（プロゲート）【有料版】の比較

改めて無料版と有料版の比較をしてみます。

値段

以前は有料版の中にプレミアムコース（２９８０円/月）という質問できるコースがあったのですが、今は無くなっていて、この二つのコースがあります。

有料でも月980円で使い放題です。

しっかりと使うことができれば、十分元を取ることは可能でしょう。

本や他の教材と比較しすると、1000円以下でこれだけ学べるというのはとてもお得ですね。

受講可能なレッスン数

コース（言語）は先ほども紹介した通り16コースですが、それぞれにいくつかのレッスンが用意されています。

受講可能なレッスン数が無料と有料で変わるので比較してみます。

無料でもSass以外のコース（言語）を学習可能ですが、本当に基礎の部分です。

例えばHTML＆CSSコースの場合、初級編〜上級編の全６レッスンのうち、初級編の１レッスンしか学習できません。

プログラミングに触れてみたい、お試し感覚でするのであれば無料版でもいいかもしれませんが、しっかり学びたい人には物足りないでしょう。

有料版になると76レッスン利用可能になります。

これから新しいコースが開講される可能性もあるので、さらに利用できるレッスンも増えるかもしれません。

学習レッスン一覧表に全ての言語が載っていますので、チェックしてみてください。

Progate【有料版】を使った人の感想

ツイッターなどの口コミも参考にしてみてもいいでしょう。

１ヶ月のプロゲート有料会員期間を終えて、やれたこと。

・HTML&CSS
・JS
・jQuery
・PHP

良い感じです！今後はwpサイトをドットインストールを見ながら作ってみます。

それと平行してunityとarduino系の勉強も進めます！

— s h u♪✏️ (@shu_neko1) June 20, 2019

プロゲートやドットインストールは一部有料だけど、参考書買うよりも圧倒的に安いので、初学者には是非オススメ！あ、paizaも。#プロゲート #ドットインストール #paiza #独学

— webクリエイターイカラシ (@hudousan0122) April 17, 2019

リプありがとうございます✨

プロゲート、使いました！
１ヶ月だけ有料使ってみました

スマホでできるのがいいですよね✨

ブログはWordPressで始めてるんですが、文章力がなくて、記事がなかなか書けないのが悩みです😭

— あられ✡ワーママ生活をラクに楽しく✡ (@ararearare4) June 27, 2019

プログラミングに初めて触る本当の初心者の方が、最初のステップとして使っているケースが多いようです。

ゲーム形式なので挫折しにくく、楽しみながら学習可能です。

また、僕も知らなかったのですが、スマホ版もあり隙間時間でも学習しやすいようです。

Progateアプリ（iOS版）

Progateアプリ(Android版）

他の学習サイトとの比較

他の初学者向け、プログラミング学習サイトとも比較していきたいと思います！

Codecademy（コードアカデミー）との比較

Codecademyという学習サイトを知っていますか？

このサイトはProgateの元になっていると言われているサイトで、ゲームのように学習できる英語のサイトです。

プログラミングを学習するなら英語で学ぶ方が効率がいいので、英語とプログラミングを学習できるこのサイトはおすすめです。

【Codecademyの口コミ】

ProgateのHTML&CSS学習コース上級まで終わったから、codecademyのHTML&CSSコースやってる。こっちもわかりやすいしコード実際に打ち込めるしいいネ。

— ｚｚｚ (@awe23rgfqwasdf5) May 8, 2017

codeacademyまじでオススメです。 progateより説明が細かくて、分かりやすい。

Learn to Code – for Free | Codecademy https://t.co/JZjngsHL8J

— ふしれ (@makemebetterj) May 29, 2019

【口コミの感想】

Codeacademyの方がより細かく説明してくれる上に、コンテンツ内容が豊富なようです。

英語も比較的簡単な英語を使っており、理解しやすいという意見がありました。

Codecademyをみる

【英語でプログラミングを学ぶメリット】

英語でプログラミングを学ぶメリットは以下の６つです。

詳しくはこちらの記事を読んでみてください。

ドットインストールとの比較

ドットインストールもProgateと同じく、おすすめのサイトとしてよく紹介される学習サイトです。

大きな違いは、動画で学習するという点でしょう。

一本の動画が３分以内なので、時間がない方でも学習可能です。

【ドットインストールの口コミ】

超初心者の私は #プロゲート と #ドットインストール の有料プランどちらとも試しましたが、9:1ぐらいの比率で”Progate”から始めてよかったと心から感じます。ドットインストールはドットインストールで学べること部分たくさんありますが挫折を防ぐという意味でも最初に #Progate 選んで良かったです🙇‍♀️ pic.twitter.com/rHRlJ8BvIo

— ナナ＠稼ぐ力をつけて月5万稼ぐ💰 (@growup2019) 2019年6月27日

ドットインストールは「〜だから〜します。はい次は〜」という感じで流れでガンガン進んでいく。ガチ初心者にはちとスピーディーすぎると思う。

なのでprogate（有料）で基礎知識つけてドットインストール（有料）をやったほうがタイムコスパ高く学習効率がいい。

— けいちむ@プログラミング白帯 (@hellonewworld69) June 26, 2019

【口コミの感想】

ドットインストールは学びやすいという意見の一方で、Progateをしてからドットインストールを学ぶ方が理解しやすいという意見もありました。

一つの動画が３分以内なので、たしかにスピードは早く感じるかもしれません。Progateで学んでからの方がより理解が深まるでしょう。

Progate：HTML&CSSコースで学べる内容【無料版】

Progate：HTML&CSS初級編

初級編（無料）で学べるのはHTML&CSSの基礎中の基礎です。

7つの章があり、それぞれ合格しなければ次の章に進むことができません。

この順番にHTML・CSSを学んでいきます。

例えばHTMLに触れてみよう！という第１章では、リンクの設定方法や画像の挿入方法、リストの表示のさせ方などを学んでいきます。

第１章ではまずHTMLに触れることから始まり、HTMLの役割、書き方などを学びます。

このようにまず始めにスライドで勉強した後に実践に移り、実際にコードを書きそれぞれのタグがどのような働きをするのかを確認しながら進むことができます。

７章を終了する頃にはWebサイトのだいたいのアウトラインが作成できるくらいのレベルになります。

Progate：HTML&CSSコースで学べる内容【有料版】

ここからは有料会員になることで受講可能になる中級編、上級編で学べることをご紹介！

Progate：HTML&CSS中級編

中級編（有料）ではどのようにランディングページを作成していくのかを学習します。

中級編も７つの章から成り立っており、学習のプロセスも初級編と同じく初めにスライドで学習をしてから、実践に移ります。

Webページの構成はヘッダー、トップ、レッスン、メッセージ、フッターの5つのコンテンツから構成されており、それぞれの作成の方法を学んでいきます。

また、トップ部分のレイアウトを作成し、お問い合わせなどをするために必要なボタンを作成していきます。さらに、ボタンをクリックした時のアニメーションを加える方法や、背景画像の設定の方法も学習します。

その他、文字を中央に寄せる方法や、文字の間隔を変更する方法を学ぶことができ、より細かくこだわったデザインをすることが可能となります。

Progate：HTML&CSS上級編

上級編（有料）ではレスポンシブデザインの作成方法を学びます。レスポンシブデザインはWebサイト作成時にとても重要なスキルです。

また、メディアクエリ（Meadi Queries）というタグの使用方法も学びます。メディアクエリとは、条件を満たせばCSSが適応されるようになるためのタグです。

Progate : HTML&CSS「道場コース」

僕が今現在まさにつまずいたところがこの道場コース。

道場コースでは、見本となる完成デザインのみをヒントに、デザインを模写していきます。また、道場コースも初級編・中級編・上級編の３つに分かれており、それぞれ学習コースで学んだことを実践的にアウトプットしていきます。

このように、画面右下の見本のみをヒントに、自分なりに「このデザインならこのタグを使おう」と考えながらコーディングしなければならないため、学習コースに比べると難しいです。

そしてこの道場コースをやりながら「プログラミングは試行錯誤の上に成り立つ」「エラーを自己解決する力がかなり必要」だということに気づかされました。

ネットではエラーを自己解決する力が大切と書いてありましたが、実際に自分がその立場に立つと、改めてその重要性を実感しました。

今後、プログラマー、エンジニアを目指すのであれば避けては通れない道ですね。

Progate：HTML＆CSSコースを終えて

ProgateのHTML＆CSSコースを終えてできるようになることは、HTML・CSSについて少し理解する程度だと思います。

HTML＆CSSの基礎中の基礎は理解できるようになるでしょう。

ゲームのように進められるので挫折しにくく、僕のような本当の初心者がHTML・CSSに触れるきっかけとしてはいいと思います。

ですが、このコースをやり終えたところで何かサイトを作れるようになることはないと思います。

このコースだけやり終えて仕事にすることは難しいと感じました。

まとめ：Progateの次のステップは「Kredo」がおすすめ

Progateで基礎を学んだ後は、IT×英語留学の「Kredo」がおすすめです。

なぜならProgateは基礎は身につきますが、実践的な力は身につきにくいからです。実践的な力を身につけるにはスクールに通う必要があるでしょう。

さらに、「Kredo」では英語でプログラミングを学習することができますし、分からないことがあった時にすぐに聞くことができます。

Kredoの先生はフィリピン人で、とても親身になり教えてくれます。先生1人に対しての生徒数も少ないので分からなければすぐに質問できる環境が整っています。さらにKredoでは、オンラインで授業が受けられる「IT留学オンライン」がスタートしました。

KredoのIT留学で提供しているカリキュラムを、オンラインに最適化した形でKredoの現役講師からのリアルタイム授業で学ぶことができます。

これからプログラミングを学習したい、プログラミング学習で挫折してしまった、英語も身につけ将来優秀なエンジニアを目指したいという方はぜひ、KredoのIT留学オンラインを検討してみてはいかがでしょうか？