Webデザイナーでありコーダー歴も17年になる現役フリーランスのフクが初心者の学びをサポートする記事を書いています。
おそらくこの記事を読んでいる人は、HTMLを学び始めたばかりかこれから学ぼうとする人だと思います。
HTMLを学ぶには動画学習サイトの「progate（プロゲート）」か「ドットインストール」というサイトがいいらしい、というところまで考えている人も多いかと。
この記事では、両者のメリットデメリットを比較しながらどちらかひとつを選ぶならどっちが良いかについて、解説していきますね。
また、ドットインストール・progateを終えた後、次に何に学べばいいかも解説するので、気になる人はぜひ読んでみてくださいね。
ドットインストール/progateってどんなサービス？
この2つのサイトは、オンライン上で学べるHTML/プログラムの学習サイトです。
どちらも、学習効果を実感でき、確かな実力が身に付くことで有名な老舗のサイトです。
日本のコーダー/プログラマのほとんどが通った道と言われる、国内最大級のプログラム学習サイトなんです
progateは2014年に設立、ドットインストールは2011年に設立しています。どちらももう10年以上続いているんですね。
ちなみにどちらのサイトもHTMLというよりはもっと専門的なプログラマ向けのコード学習をメインにしています。
もちろんHTML/CSSもしっかり学べます
私はHTML初心者には「まずドットインストールかprogateで基礎を学ぶといいよ」と言いますが、よく聞かれるのが、「オンラインのWebスクールとは違うの？」という質問です。
オンラインWebスクールとの違いは？
Webスクールは、先生がLIVE授業の形で授業を受けるのでその場で疑問を解決できたり、リアルタイムでの授業のため勉強をしている感が強くなります。授業のコマも決まっているので、強制力も高く、学ぶ内容も最新のものです。
一方、ドットインストールやprogateは動画・教材サービスなので、LIVEではなく、すでにアップされている動画やオンライン教材を使って自分で勉強するスタイルです。リアルで質問はできません（※ドットインストールであれば質問掲示板はあります）
ドットインストールとprogateの1番のネックは、アップしている動画が古いものがあるということ。常に更新してくれていればいいのですが、中にはかなり古いバージョンのものもあります。プログラムというのは2〜3年で古くなってしまうこともザラなので、ここは自分で気をつけなければいけません。
また、Webスクールはカリキュラムが徹底しており、卒業までのサポートがしっかりしているため、ある程度のレベルまでは挙げてくれます。また、就職支援もあるので就職に有利な点があります。その一方で料金は高めの設定です。
ドットインストール・progateの場合、サポートしてくれる外部の人間はいませんので、基本的に自分で時間を使って能動的に学んでいかないと進みません。順番通りにやると徐々にレベルが上がるというのはありますが、詰まったときに誰かに聞けないのが辛いです。その分、Webスクールと比べると破格の値段（無料コースもあり）です。
HTMLは独学でも十分学べます。いきなりWebスクールに申し込むより、まずはドットインストールかprogateで感覚を掴むのをお勧めします。
次に、この2つのサイトの特徴や長所をあげていきますね。
progate(プロゲート）の長所
progateはオンライン型プログラム学習プラットフォームとして2014年に設立。現在の利用者数は320万人ユーザー。年々右肩上がりの会員数を誇っています。
HTML/プログラム未経験者には自信を持ってお薦めできる、素晴らしい高クオリティのサービスです。
私が初心者の時はこんなサービスはなかったので、本当に羨ましいです
特徴1 ブラウザ上でコードが打てる
インターネットにさえ繋がればあとはOK。環境構築がいらない、テキストエディタもFTPも知らなくてもいい。
ブラウザ上でそのままコードを書くだけで、progateがエラーか正解かを教えてくれます。
実はHTMLの勉強を始めるのにあたり、最初の環境構築で挫けてしまう初心者は多いです。
しかしprogateであれば、ブラウザ上でコードを打つことができるのでコードの勉強のみに集中できるのがいいですね。
特徴2 ゲーム感覚で学べる
progateは演習をこなしていくと、一定のタイミングでLVが上がります。テレレレッテレ〜ってやつです。
しかも何回同じ問題をやってもその都度経験値がもらえます。プログラムは必ず反復して同じ演習を解くことが必然になりますので、反復練習も経験値になるのが地味に嬉しいです。
何度も同じ演習を繰り返して経験値を積み、自分のプログラムレベルをあげていきましょう！
特徴3 初心者にわかりやすい
progateは初心者向きというより、超初心者向きです。ここまでかというほど、超初心者にわかりやすい作りをしています。
パワポのようなスライド形式で簡単な解説をし、あとは習うより慣れろの方針で演習問題を出してきます。
解説もわかりやすいし、問題も易しいものから順を追ってレベルがあがっていきます。いきなり難しくなったりしないので安心してください。
特徴4 スマホでも勉強できる
progateってスマホアプリでコードの勉強ができるんです。
アプリでは、タップ一つでコード入力ができるので、PCより簡単に打てるようになっています。UIもわかりやすく、操作性もばっちりです。
本格的なコード練習はPCになりますが、通勤や家事の合間、寝る前といった隙間時間に学べるのが素晴らしいですね。
特徴5 無料範囲が大きい
progateは、基礎レッスンと実践レッスンに分かれています。このうち、基礎レッスンを無料会員のままでうけることができます。
基礎レッスンだけでも受ける価値は大有りです。そして、基礎レッスンを受けたら、必ず実践レッスンも受けたくなるはずです。
特徴5 有料会員でも月額 990円〜
有料会員になると、全ての言語をレベル問わず自由に選べることができます。まずは1ヶ月始めたいなら、月額たったの1,490円。一年分を一括契約すると、1ヶ月あたり990円という安さです。
progateは途中解約が簡単にできるのがとてもありがたいです。解約してもその後きっちり１ヶ月間はプレミアム会員の機能を使わせてくれます。さらに、一度完全に有料会員を解約して数年後に戻ってきた場合でも、前回のレベル上げした分はちゃんと残っているのが嬉しい。
ドットインストールの長所
ドットインストールは、動画を試聴しながらプログラミングを学ぶオンライン学習サイトです。
HTMLに限らず、ほぼ全てのプログラミング言語を学ぶことができます。
ひとつの動画の長さはわずか3分。3分の積み重ねがプロへの道に繋がります。
ドットインストールの動画は、音声とプログラムのコードのみというシンプルさで構成されています。
オープン当初から変わらない、このシンプルさがたまらないんです。
「先生」（男性ボイスor女性ボイスを選べます）が実際にコードを書きながらそのコードがどういう動きを示すのかを解説する動画で、先生の顔は出てきません。（なのでYouTubeのようなある種の鬱陶しさは全くなく、学習に専念することができます）
生徒側は、動画を見ながら自分のPC内のテキストエディタで同じようにコードを打ち込んでいく、写経スタイルが基本的な学習になります。
progateと違ってブラウザに打ち込んだりエラーを勝手に判定してくれたりはしないので、自分でテキストエディタを用意する必要があり、間違っている場合も自分でエラー箇所を探します。
自分でエラーを探すのもいい勉強になります！
特徴1 最強の老舗サイト
ドットインストールが誕生したのは2011年。とある一人の日本人プログラマの手で生まれました。それからユーザーは着実に増やし続け、2023年現在、489レッスンに 7,384本の動画を提供中です。
その歴史に裏付けされた正確な知識と、多くの初心者をプロの道へと導いてきた教え方。わかりやすいコード。このサイトがなかったら日本のプログラマの発展は数年遅れていたのではないでしょうか。
特徴2 先生の教え方が上手い
「教える」サービスを提供しているところで、当たり前のようでこれができないところはたくさんあります。
私はUdemyやSchooも好きですが、他のレクチャー動画をみてからドットインストールに戻ってくると、ドットインストールは教え方がとにかく丁寧で上手なのがよくわかります。声もいいです。
初心者が一番知りたい「最初の基本」をしっかり確実に学べるサイトだと思います。
全て３分以内の短い動画なのも良いです。集中力が途切れそうになったところで次に移るし、疲れたら休憩することもできます。
細かく分けられているので、なんとなくわからない章は飛ばすこともできます。
特徴3 登録は無料。有料会員でも月額1,280円
会員登録は無料です。無料の範囲で見れる動画もたくさんあります。
プロで通用するHTMLコードが目標であれば有料のプレミアム会員の登録が必要ですが、その額は月額1,280円。
オンラインスクールと比べると比較にならない安さです。
いつでも解約可能で、途中解約してもきっかり１ヶ月間はプレミアム会員の機能を使わせてくれます。また、いつでもまたプレミアム会員に戻ることも可能です。
オンライン学習は、実務が忙しくなるとどうしても後回しにしがちです。なので、例えば少しの間解約して、また時間ができたら戻ってくるという使い方もOK。なんのストレスもなく行うことができます。
特徴4 無料の範囲が多い
プレミアム会員にならずとも無料の範囲で公開している動画はたくさんあります。まずはこれらの動画を見てみて、自分に合ったサービスかどうか見極めましょう。
無料の範囲が多く、無料だけでも十分楽しめるのがドットインストールの強みです。
特徴5 質問機能でみつかる同レベルの仲間たち
有料プランにすると、動画の内容に対して「先生への質問」ができます。わからないことを掲示板で先生に質問すると先生が回答をくれるでんすね。「先生」のアイコンがかわいいです。
無料プランだと質問はできませんが、他人の質問は閲覧できるのでそれだけでも勉強になります。
こう言ってはなんですが、質問の内容が自分と同レベルの方（超初心者）ばかりで安心します。
初心者にありがちなのが、自分以外のみんなが優秀に見えて「こんなところでつまづいているのは自分だけじゃないか」という不安を覚えてしまうこと。
ドットインストールの質問は、本当に初心者レベル。エラーの原因がただのスペルミスでも先生は丁寧に回答してくれます。
プログラマにありがちな専門的でわかりにくい言葉は使わず、初心者でもわかる言語化が上手な先生が多いと感じました。
わからないところがあったら自分でもどんどん掲示板に質問してみましょう。きっと優しい先生が答えてくれるはずです。
特徴6 ソースコードの比較ができる
ドットインストールでの学習方法は、基本的に先生が動画で書いているコードを自分のエディタで写経する（そのまま書き写す）のを繰り返すことになります。
しかし、写経は間違っていないはずのにどうしても動かない時があります。
そんな時に、「ソースコードの比較」という機能があります。自分の書いたコードを画面にコピペして先生の正しいコードと比較できるという機能です。
こちらも有料プランの機能ですが、とても便利なので覚えておきましょう。
ちゃんと書いているはずなのになぜか違う。プログラムはこの壁に打ちあたってはコードを修正するの繰り返しです。
コードの比較ができると、自分のミスしやすいポイントがわかるし、無駄な時間の削減にもなるんです。
ドットインストールとプロゲートを徹底比較
さてここからはprogateとドットインストールを比較して、どちらかを選ぶならどっちがおすすめかを紹介しますね。
HTML/CSS講座のみのお話です。他のプログラミング言語は比較していないので無視してね
まず解説に関してですが、ドットインストールは全て動画の音声での解説です。一方のprogateは音声がなく、解説はスライドのみになります。これが2つのサイトの大きな違いになります。
学べる内容のレベルはどっちが初心者向き？
超初心者なら→progateがおすすめです。
両者を比較すると、progateの方がより初心者に寄り添った内容になっています。学ぶ内容も簡単です。
progateはゲーム感覚でプログラミングを学べるので、テキストエディタなんて知らない、HTMLも知らないという人でも、画面の通りに進めればなんとなくHTMLってこんなものなんだということが直感でわかります。空き時間でスマホで勉強もできる。
さらに環境構築がいらないのもprogateの大きな魅力です。progateにアクセスすれば手軽にコードの勉強ができる。
なので、本当に初心者中の初心者であれば、progateが断然おすすめ。コードのエラーチェックもprogateがやってくれるので安心です。
学べる講座のボリュームは
講座数はどちらも同じくらいですし、学べる言語も似通っています。
特にHTML/CSSとwebサイト制作に付随するJavaScriptあたりの講座はどちらのサイトにもあります。
ただし、ドットインストールの方が一つ当たりのボリュームが大きく、より実践的な内容になっています。
特にドットインストールのHTML講座では、模写コーディングをしつこく教えてくれるのが良いですね。
あとHTML/CSSの後に学びたいサイトに動きをつけるJavaScriptに関しても、ドットインストールの方がかなりボリューミーになっています。
料金の比較は？
どちらも無料プラン/有料プランがあり、無料でも幅広く学ぶことができます。
有料プランに関しては、以前はどちらも似たような値段でしたが、2023年現在progateの方が少し値上げしました。
ただし、progateは年間一括払いにすると割引が効くので、12ヶ月プランの場合はドットインストールより安くなります。
| progate | ドットインストール | |
| 有料プラン | 1ヶ月プラン 1,490円（税込）/月 | 1,080円（税込）/月 |
| 6ヶ月プラン 7,740円（税込）/月 約1ヶ月分お得! 1ヶ月あたり 1,290円 | ||
| 12ヶ月プラン 11,880円（税込）/月 約4ヶ月分お得! 1ヶ月あたり 990円 |
どちらも契約途中で解約しても、期間終了日まですべての機能を利用可能です。
トータルで見るとどっちがおすすめ？
経験者の私のおすすめは、ドットインストールの方です。
とっつきやすさはprogateですが、基本的に知識が浅く、より実践的で丁寧な解説があるのはドットインストールの方です。リアルタイムではないにしろ、質問機能もありますし。
ただし、ドットインストールは古めの講座もあるので注意が必要です。（古い口座には「サポート終了」の文字が書いています）
ドットインストール・progateが終わったら次は？
脱初心者したい人は、以下の記事を参考にしてください。HTML/CSSを学び終わった後に何を学ぶべきか、プロになるためにどの知識が必要かについてまとめた記事です。
HTML×動画学習のメリットとは
HTMLを学び始めるのに最適なのはオンライン上の動画学習サイトでの学びです。
専門スクールと契約するのは高額ですし、HTMLのためだけに大金を払うのはもったいない。
HTMLは独学で十分学習できるスキルです。
ドットインストールとprogateなら、自宅で好きな時間に視聴できるので普段忙しい人でも安心して学ぶことができます。
HTMLというのは実戦で手を動かしてナンボですので、動画で実際の打ち方と解説を聞きながら自分の手も動かす実践スタイルの方が確実にスキルアップするわけです。
ぜひドットインストールとprogateを活用してくださいね。