Web制作の教材を探すと、「初心者におすすめ」というサービスがいくつも見つかります。月額1,000円前後の学習サイトもあれば、10万円を超えるオンラインスクールもあります。

費用を抑えても、質問先がなければ同じ場所で止まることがあります。高額なサポートも、質問しなければ使わないまま期限を迎えます。

MDN、Progate、デイトラ、CodeCampについて、料金と質問環境を確認しました。どれが合うかは、学習に使える時間と、質問先を自分で用意できるかで変わります。

情報の確認について

料金とサービス内容は、2026年8月23日に各社の公式ページで確認しました。キャンペーン価格は変わりやすいため、通常価格を記載しています。申込前には、リンク先で最新の総額と契約条件を確認してください。

当サイト運営者は、いずれのサービスも受講していません。実際の使い勝手は評価対象に含めず、公式情報から確認できる条件と向き不向きを扱います。

比較結果

学び方 確認できた料金 人からのフィードバック 向いている人
MDN 無料 なし 公式に近い資料を自分で読み進めたい人
Progate プラスプラン 月1,490円、年11,880円 教材を使った自習 手を動かしながら基礎に慣れたい人
デイトラ Web制作コース 129,800円 メンター質問1年間、課題レビューあり コーディングから仕事向け制作まで順番に進めたい人
CodeCamp Webデザインコース 2か月198,000円、4か月308,000円 オンラインレッスン20回または40回 デザインとコーディングを講師と学びたい人

料金はすべて税込です。

CodeCampは、PhotoshopやIllustratorなどを自分で契約する必要があると案内しています。受講中と受講後にかかる費用も合計してください。

無料で始めるならMDN

MDNの「ウェブ開発の学習」は、環境設定、HTML、CSS、JavaScript、アクセシビリティなどの資料を収録しています。前提知識がない人向けの入門モジュールもあります。

MDNでは、Web標準を確認しながら学べます。学習後も、用語や仕様がわからなくなったときに参照できます。

ただし、締め切りも質問先も付きません。各章で小さなページを作り、公開日まで決めておくと、資料を読むだけで学習を終えずに済みます。

MDNが合いやすい人

  • 費用をかけずに試したい
  • 英語の項目が混ざっても調べながら進められる
  • 学習順序と期限を自分で管理できる
  • AIの回答と一次資料を照合したい

初心者は「初めてのウェブサイト」の範囲を読み、1ページを公開します。公開後、必要になった章へ進みます。

基礎の反復ならProgate

Progateの公式FAQは、プラスプランを月額1,490円、12か月11,880円と案内しています。

画面上の説明を読み、その場でコードを書く形式です。用意された課題を終えた後は、白紙から依頼に合うサイトを設計する練習が別に要ります。

Progateを使うなら、学んだHTMLとCSSを別のエディターでも書き、オリジナルの1ページへ作り直します。「レッスンを終える」と「自分で作れる」の間を埋める作業です。

契約は自動更新です。公式FAQによると、期間途中で解約しても返金はありません。利用を始めた日に、次回更新日をカレンダーへ登録します。

仕事向けのコーディングを順番に学ぶならデイトラ

デイトラ Web制作コースは、HTML/CSSからWordPressを使ったサイト制作までを扱う買い切り型の講座です。公式ページで確認できた通常価格は129,800円です。

公式ページは、100日分のカリキュラム、無期限の教材閲覧、1年間のメンターサポートも案内しています。

デイトラは、中級と上級の最終課題に品質チェックのレビューを1回ずつ用意しています。質問の対象は教材範囲内の技術内容で、営業相談は含みません。

利用規約は、受講開始後の料金を原則として返金しないと定めています。申込前に無料レッスンを開き、教材の進み方を確認してください。

詳しい条件は、デイトラとは？料金・特徴・向いている人で分けて整理しています。

講師とのレッスンを重視するならCodeCamp

CodeCamp Webデザインコースは、HTML/CSSに加えて、デザイン基礎、Photoshop、Illustrator、JavaScript基礎、Figma、ポートフォリオ制作まで扱います。

2026年8月23日時点の合計料金は、2か月プランが198,000円、4か月プランが308,000円です。どちらも入学金33,000円を含みます。

レッスンは2か月で20回、4か月で40回です。公式ページは、毎日7時から23時までオンラインレッスンへ対応すると案内しています。

短期間で進めるほど、週あたりの学習時間は増えます。2か月プランの目安は週20〜25時間です。本業がある人は、月額換算より先に、その時間を現実に確保できるかを見ます。

返金の対象は、コースや条件によって異なります。CodeCampの利用規約を読み、申し込むコースの条件を決済前に確認してください。

TechAcademyを比較表から外した理由

TechAcademyの公式ページは、2026年8月23日時点でWebデザインコースについて「お申し込みを停止しております」と表示しています。

現在申し込めないため、比較表から外しました。受付の再開後に料金と内容を確認します。

迷ったら、2週間だけ独学を試す

高額なコースを契約する前に、2週間だけ次の条件で独学します。

  1. 平日に30分、休日に2時間の学習枠を取る
  2. MDNまたはProgateでHTMLとCSSを触る
  3. 小さな1ページを一つ作る
  4. 止まった場所と、止まった時間をメモする

2週間、調べながらでも手を動かせたなら、独学を続ける余地があります。同じ場所で止まる、学習順序を決められない、第三者に制作物を見てもらいたいという人には、有料サポートを使う理由があります。

有料サービスでは、質問先、期限、レビュー、学習順序にも料金を払います。含まれる内容を確かめ、自分で用意できないものに絞ってお金を使います。

目的別の選び方

  • Web制作が自分に合うか確かめたい：MDN
  • 低い費用でコード操作に慣れたい：Progate
  • コーディングを副業や制作会社の仕事へつなげたい：デイトラ
  • デザインとコーディングを講師とのレッスンで学びたい：CodeCamp

仕事を探す際は、受講歴に加えて完成した制作物と、自分が担当した範囲を示します。依頼者は、その三つから任せられる作業を判断します。

Web制作は独学できる？AIを先生に変える学び方では、教材を使う順番とAIへの質問方法を扱っています。

学んだ先で副業まで考えているなら、AIを使ったWeb制作副業ロードマップの「1〜2週目」に沿って、今週作る1ページの題材と公開日を決めてください。