私は40歳を目前にプログラミングの学習を始めて、2年学んだあと、今はフルリモートのコーダーとして働いています。前職はトラックとバスの運転手でした。
独学の途中で、ドットインストールとUdemyの「Web Developer Bootcamp（日本語版）」を両方使いました。よく比較される2つですが、実際に使ってみると、同じHTML/CSSを教えていても中身の作りがまったく違います。
この記事は、システム開発ではなくWeb制作を目指している人に向けて書いています。
先に結論
どちらか一方でいいです。 そして私の答えはこうです。
| ドットインストール | Web Developer Bootcamp | |
|---|---|---|
| HTML/CSSの入り口 | ◯ | ◎ |
| CSSの新しい仕様 | ◎ | △（CSS Gridが無い） |
| JavaScriptの深さ | ◯ | ◎ |
| Web制作向けの周辺技術 | ◎ | △ |
| Web制作に要らない範囲 | 選ばなければ避けられる | 約32時間ぶん含まれる |
| 料金 | 月額1,480円（税込） | 定価27,800円／セール時1,500〜3,000円 |
そのうえで、私の進め方の結論は3つです。
- HTML/CSSはどちらか片方で、必ず1通り通す。飛ばさない。
- 1通り終えたら、そこで割り切ってJavaScriptへ行く。 CSSを完璧にしようとすると終わりがない。
- JavaScriptは逆に、両方やる価値がある。
なぜそう考えたのか、中身を見ながら書きます。
同じHTML/CSSでも、教え方の入り口が違う
Web Developer Bootcampは「なぜ」から入る
正直に言うと、HTML/CSSに関してはWeb Developer Bootcampのほうが詳しくて分かりやすいと感じました。 ドットインストールより良いかもしれません。
理由は、教える順番です。この講座はHTMLに入る前に「Web入門」という章があって、こういう話をします。
- インターネットとは
- Webとは
- リクエスト／レスポンスについて
- フロントエンドとバックエンド
- HTML/CSS/JSの役割
タグの書き方より先に、そもそも何が起きているのかをやります。そのあとのHTML章でも、MDNの使い方、Chromeの開発者ツール、セマンティックなHTML、スクリーンリーダーのデモまで入ります。エンティティコード（ のような書き方）も出てきます。
CSSも同じ調子で、「CSSカスケードについて」「詳細度とは」「CSSにおける継承」「CSSにおける単位：em」「：rem」と、原理の側から積んでいきます。詳細度にはクイズまで付いています。
HTML/CSSブロックだけで13章133本、約16.4時間。ここは丁寧です。
（スクリーンリーダーの話が出てくるのは地味に大きくて、これはWebアクセシビリティの話にそのままつながります。画像のaltやフォームのlabelとfor/idを後から学び直したとき、あの章を見ておいてよかったと思いました）
ドットインストールは「手順」から入る
一方のドットインストールは、1本3分で、とにかく手が止まらないように作られています。
「Webサイト制作入門」というロードマップが公式に用意されていて、動画287本・ミニクイズ348問。順番は向こうが決めてくれます。
私が良いと思ったのは、各レッスンのページに「このレッスンをはじめる前に」という前提レッスンの一覧が出ることです。たとえばメディアクエリー編を開くと、「HTML入門 基本タグ編・CSS入門 基本スタイリング編・応用スタイリング編・セレクター編・フレックスボックス編を先に終えておきましょう」と表示されます。
独学でいちばん困るのは「今の自分はどこから始めればいいのか」です。そこに教材側が答えを出してくれている。地味ですが、これは効きました。
「なぜ」を知りたいならUdemy、「迷わず手を動かしたい」ならドットインストール。 そういう違いです。
ただしCSSだけは事情が違う
ここは重要なので分けて書きます。
CSSは今、かなり奥深くなっています。 侮れません。真剣に突き詰めていくと終わりがなくて、CSSだけで何か月もかかってしまいます。
そして仕様の新しさで言うと、この点はドットインストールのほうが上でした。
Web Developer Bootcampのレスポンシブ章は、Flexboxが中心です。flex-direction、justify-content、flex-wrap、align-items、flex-basis、grow、shrink、そしてメディアクエリー。ここは十分に詳しいのですが、CSS Gridの章がありません。 講座内で「グリッド」と出てくるのはBootstrapのグリッドシステムのほうです。CSSの入れ子（ネスト）も入っていません。
対してドットインストールのCSS入門は、こう並んでいます。
| レッスン | 本数 | 公開 |
|---|---|---|
| 基本スタイリング編 | 27本 | 2022/10 |
| 応用スタイリング編 | 27本 | 2022/10 |
| セレクター編 | 21本 | 2022/10 |
| フレックスボックス編 | 22本 | 2022/11 |
| メディアクエリー編 | 14本 | 2022/12 |
| アニメーション編 | 19本 | 2022/12 |
| 入れ子編 | 8本 | 2024/12 |
| グリッドレイアウト編 | 19本 | 2025/04 |
入れ子編が2024年12月、グリッドレイアウト編が2025年4月。比較的最近のCSSの仕様がちゃんと入っています。 グリッドレイアウト編にはrepeat()とauto-fill、minmax()とauto-fit、Bento UIの実装、そしてsubgridまであります。
昔の講座を使い回しているのではなく、その仕様が実務で使える段階になったタイミングで作り直されている。ここは評価しています。
Web Developer Bootcampを選ぶなら、CSS Gridだけは別で埋める必要があります。
CSS Gridで作れるレイアウトの一例です。「パソコンの幅」「スマホの幅」を切り替えると、同じ3枚のカードが横に並んだり、縦に並んだりします。この見本では、表示幅に合わせてGridの列数を変えるよう指定しています。こうしたレイアウトはFlexboxなどでも作れます。
同じ3枚のカードを、横に3列
HTML/CSSは、必ず1通りやる
比較の話から少しそれますが、ここは書いておきたいところです。
Web系にいる人で、HTML/CSSを触らずに済む職種はほとんどないと思っています。
- コーダーやマークアップエンジニアは、当然それが仕事です（違いはこちらに書きました）
- フロントエンドエンジニアがReactやVueを書いても、最終的にブラウザに届くのはHTMLとCSSです
- バックエンド寄りの人でも、テンプレートを触れば結局HTMLを書きます
- デザイナーも、実装しづらいデザインを渡さないために構造を知っている必要があります。Figmaのオートレイアウトは、方向・間隔・折り返しという考え方がCSSのFlexboxと重なります（Figmaとコーディングのつながり）
だから1通りは必ずやります。飛ばせません。
ただし、HTML/CSSを2つの教材でやる必要はありません。 ドットインストールでもWeb Developer Bootcampでも、どちらか1つを最後まで通せば十分です。
そして1通り終えたら、そこで一度切ります。その先を完璧にしようとすると沼にはまるので、割り切ってJavaScriptに行ったほうがいい。 CSSの深いところは、必要になったときに戻ってくればいいと思っています。
「CSSは飛ばしていい」という意味ではありません。逆です。1通りはちゃんとやる。完璧を目指すのをやめる、という話です。
JavaScriptは、逆に両方やる価値がある
ここが私がいちばん言いたいところです。
HTML/CSSは重複させない。でもJavaScriptは重複させたほうがいい。
理由は単純で、講師によって説明の角度が違うからです。 片方で腑に落ちなかったところが、もう片方の説明であっさり分かることが何度もありました。同じ範囲を別の人からもう一度聞くと、理解がかなり深まります。
そして中身を見ると、この2つは狙いがはっきり違います。
Web Developer Bootcampは「JavaScriptそのもの」を深くやる
- 非同期なJavaScript（11本／113分）……コールスタック、シングルスレッド、コールバック地獄、Promise、自作Promise、async/await
- AJAXとAPI（15本／131分）……JSON、HTTPメソッド、ステータスコード、クエリストリング、HTTPヘッダー、XHR、fetch
- プロトタイプ・クラス・オブジェクト指向プログラミング（8本／96分）
- モダンなJavaScriptの機能（9本／49分）……スプレッド構文、レスト構文、分割代入
JavaScriptブロック全体で16章164本・約20時間、演習問題が53個。「コールバック地獄」から入ってPromiseを自作させる流れなどは、理屈から分からせにいく構成です。
ドットインストールは「Webページを動かす」ほうに寄っている
ドットインストールの「JavaScript入門」ロードマップは動画225本・ミニクイズ122問。基礎文法編27本、関数編12本、データ構造編27本、DOM編22本と積んだあと、最後のステップがこうなります。
- モーダルを作ってみよう（8本）
- ハンバーガーメニューを作ってみよう（13本）
- アコーディオンを作ってみよう（9本）
- タブメニューを作ってみよう（10本）
- カルーセルを作ってみよう（21本）
これが良かったんです。 ハンバーガーメニューやアコーディオンは、作り終わったあとに感動があります。自分が毎日見ているサイトのあの動きを、自分の手で作れた、という手応え。独学のモチベーションとして、これはかなり大きいものでした。
たとえば、こんなメニューです。①は見た目を作った段階。②ではJavaScriptで開閉する処理を加えています。②の「メニュー」を押してみてください。
途中には「動かして学ぶJavaScript Level 1-1〜1-3」という制限時間つきの参加型課題もあります。
理屈から攻めるUdemy、動くものから攻めるドットインストール。 どちらが正しいという話ではなく、両方通ると挟み撃ちになります。
Web制作なら、要らない範囲もはっきりある
Web Developer Bootcampの約32時間は、今は要らない
これは知っておいたほうがいいと思います。
この講座は「フロントエンド向け」と思われがちですが、実際に章構成を数えるといちばん大きいブロックはバックエンドです。
| ブロック | 章 | レクチャー | 動画時間 |
|---|---|---|---|
| HTML/CSS | 13章 | 133本 | 約16.4時間 |
| JavaScript | 16章 | 164本 | 約20.2時間 |
| バックエンド | 30章 | 286本 | 約32.2時間 |
| React | 15章 | 93本 | 約10.9時間 |
ターミナル、Node.js、npm、Express、MongoDB、Mongoose、セッション、認証、そして「YelpCamp」というキャンプ場レビューサイトを作ってデプロイまでやります。フルスタック講座です。
作るものとしては面白いのですが、Web制作だけを目指すなら、この約32時間は今は要らない範囲です。 全部見る必要はありません。必要なところだけ取ればいい講座です。
Dockerは、Web制作なら学ばなくていい
ドットインストールにはDocker入門（全11回）があります。
私も軽く学んで使えるようにしておきましたが、Web制作の仕事では使いませんでした。 開発の人には絶対に必要ですが、Dockerはそれなりに学習コストがかかります。Web制作を目指すなら、そこで時間を無駄にしないほうがいいと思います。
WordPressはどちらでも埋まらない
ここは両方の弱点です。
ドットインストールのWordPress入門は【サポート終了】で、全23回・2013年公開のまま止まっています。Web Developer Bootcampにも当然ありません。
PHPについては、ドットインストールはPHP入門5シリーズからLaravelの4シリーズまで揃っていて、そこはよくできています。ただWP_QueryのようなWordPress専用のPHPは学べません。 Web制作でWordPressは避けて通りにくいので、ここは別の教材が必要になります（WordPressを学ぶべきかについてはこちら）。
いろいろな言語に触れると、相乗効果がある
ドットインストールを使っていて良かったと思うのは、広く浅く触れることです。
私はJava入門も触りました。Java入門 基礎文法編には、データ型、基本データ型と参照型、変数に格納されるデータの違い、参照型変数の代入といった回があります。JavaScriptだけを書いていたときは意識していなかった「その変数は値そのものを持っているのか、置き場所を指しているのか」が、型を明示する言語をやったことで見えるようになりました。
型の考え方はTypeScriptにもExcel VBAにも共通します。Google Apps ScriptはJavaScriptそのものです。同じ概念に別の言語で何度も出会うと、そのたびに理解が一段深くなる。相乗効果です。
しかもドットインストールは、種類によっては広いだけでなくけっこう深い。PHPがLaravelまであるように、入り口で止まらない講座もあります。
ちなみにWeb Developer Bootcampのほうは、TypeScriptがカリキュラムに1件も出てきません。 Reactは最後尾に93本ありますが、Next.jsもReduxもありません。このあたりはドットインストールで補えます（TypeScript入門16本、React入門23本、Next.js入門18本があります）。
料金と、選び方
ドットインストール……プレミアムが月々払いで月額1,480円（税込）。まとめ払いにすると1か月あたり1,080円（税込）〜。プレミアム動画7,684本とミニクイズ940問、現役エンジニアへの質問、文字起こし、再生速度の変更が使えます。
Web Developer Bootcamp（日本語版）……定価27,800円。ただしUdemyは頻繁にセールをやるので、実際には1,500〜3,000円くらいで買えることが多いです。買い切りなので、期限を気にせず見返せます。全676レクチャー・合計78.5時間。受講生29,302人、評価4.6（レビュー4,356件）。最終更新は2025年11月。
サブスクか買い切りかという違いは、思ったより効きます。ドットインストールは月額なので「早く進めるほど安い」。Web Developer Bootcampは買い切りなので「あとで見返せる」。
自分がどちらのタイプかで選んでいいと思います。
まとめ：Web制作を目指すならこの順番
- HTML/CSSは、どちらか1つで最後まで通す。 「なぜ」から知りたいならWeb Developer Bootcamp、迷わず手を動かしたいならドットインストール
- Web Developer Bootcampを選んだ場合は、CSS Gridだけ別で埋める
- 1通り終えたら、CSSの深追いはやめてJavaScriptへ
- JavaScriptは両方やる価値がある。 講師が違うと説明の角度が違って、理解が深まる
- Web制作に要らない範囲は切る。 バックエンド30章もDockerも、今は要らない
- WordPressだけはどちらでも埋まらないので、別の教材を用意する
正直に言えば、どちらも良い教材です。私もデイトラを含めて複数を併用しました（使った教材のまとめはこちら）。
大事なのは、どれを選ぶかより、HTML/CSSを1通り終えたところで一度立ち止まって、次へ行く判断ができるかどうかだと思っています。
CSSは深追いすると本当に何か月も溶けます。私も一度そうなりかけました。
※本文中のレッスン数・動画本数・料金は2026年9月時点で各公式サイトを確認した数字です。
