「今からでも間に合うだろうか」。これは、40歳を目前にしてWebデザインを学び始めたとき、私が何度も自分に問いかけた言葉です。
大学を卒業してから、接客業や一般事務の仕事をずっと続けてきました。パソコンの基本操作はなんとなくできるけれど、HTMLやCSSと言われても何のことか分からない。そんな状態から学習を始めて、今はフリーランスのITエンジニアとして、クライアントのWebサイト制作に携わっています。
この記事では、私が実際に使った3つの学習方法、Progate・ハローワークの職業訓練・ドットインストールについて、良かったところと物足りなかったところを正直に書きます。これからHTML・CSSを学ぼうとしている方が、自分に合った入口を選ぶ参考になればうれしいです。
CONTENTS目次
結論：3つの学び方の比較
先に結論をまとめます。詳しい体験談はこのあとに続きます。
| 学び方 | 費用の目安 | 向いている人 | 私が感じた限界 |
|---|---|---|---|
| Progate | 無料で試せる。全コースは有料プラン（月額1,490円〜） | まったくの初心者。まず「書いて動かす感覚」をつかみたい人 | 自己流のクセがつく。正しい書き方かどうかを誰も教えてくれない |
| 職業訓練 | 受講料は無料（テキスト代などは自己負担） | 失業中で、まとまった時間を学習に使える人 | 受講できる条件が限られる。在職中の人は原則対象外 |
| ドットインストール | 無料レッスンあり。プレミアムは月額1,480円（年払いなら月1,080円相当） | 働きながらスキマ時間で学びたい人。環境構築も動画で見たい人 | 質問できる相手がいない。続けるには自分で計画を立てる必要がある |
※料金は2026年10月時点の各公式サイトの表示です。最新の情報はProgate、ドットインストールの公式サイトで確認してください。
3つに共通して言えるのは、「教材」は足りているが、「間違いを直してくれる人」がいるかどうかで伸び方が変わるということでした。私の場合、それが職業訓練の講師でした。
はじまりはProgateから
Webデザインに興味を持ったとき、最初に出会ったのがProgateでした。スライド形式で説明を読み、そのままブラウザ上でコードを書いて答え合わせができます。ゲームのような感覚で進められるので、「プログラミングは難しそう」という最初の壁を越えるにはちょうどよい教材でした。私もHTMLとCSSの基礎は、Progateで覚えました。
独学の落とし穴：動けばOK、になっていた
ただ、独学には落とし穴がありました。あとから振り返ると、次のようなクセが知らないうちについていました。
- どこもかしこも
<div>で組んでしまい、<section>や<article>の意味を理解せず、雰囲気で使っていた - CSSの命名規則を知らず、クラス名がぐちゃぐちゃになっていた
- 「とにかく表示されればOK」で、なぜそう書くのかを考えていなかった
Progateは「正解のコードと一致するか」は教えてくれますが、「実務ではこう書くべき」とは教えてくれません。それでも、「なんとなく作れる感覚」が身についたのは間違いなくProgateのおかげです。
Progateの料金（2026年10月時点）
無料会員でも最初のレッスンは試せます。全コースを学ぶにはプラスプラン（月額1,490円、年払いなら11,880円で月990円相当）が必要です。まずは無料で触ってみて、続きそうだと思ってから有料にする、で十分だと思います。
本気で学び直した職業訓練
そんな中、私に転機が訪れます。ハローワークの職業訓練でした。失業中の期間を使って、Webデザインのコースを受講できる制度です。
私が通った訓練校はオンライン対応で、ZoomやSlackを使って、自宅で毎日授業を受けるスタイルでした。通学の時間がかからないのは、本当にありがたかったです。
職業訓練で学んだこと
- HTMLタグの正しい意味と使い分け
- CSSの構造的な書き方（命名規則やファイルの分け方）
- PhotoshopやAdobe XDを使ったデザイン制作
- jQueryで動きのあるサイトをつくる方法
Progateで「なんとなく」身につけたことを、ここで一度ぜんぶ整理し直しました。間違って覚えていた知識を1つずつ修正し、土台が整ったことで、少しずつ自信がついていきました。
独学との決定的な違いは「講師がいる」こと
職業訓練で何より大きかったのは、現役の講師に毎週質問できたことです。
独学で詰まったとき、いちばん困るのは「何が分からないのかが分からない」状態です。検索しようにも、適切な言葉が出てきません。講師がいると、自分の書いたコードを見てもらい、「ここは <div> ではなく <section> のほうがいい」「このクラス名だと後で困る」と、その場で指摘してもらえます。この「書いたものを直してもらう」経験は、教材を何周しても得られないものでした。
ただし、職業訓練は誰でも受けられるわけではない
職業訓練の中心となる対象は「失業中の求職者」です。フルタイムで働いている人や学生は、基本的に受講できません。
補足すると、雇用保険に入っていないパートタイムなどで働きながら正社員を目指す人は、「求職者支援訓練」の対象になる場合があります。給付金の要件を満たさなくても、訓練そのものは無料で受けられます。条件は細かいので、気になる方は厚生労働省の求職者支援制度のページを見たうえで、ハローワークに相談してみてください。
職業訓練から転職活動までの流れは、「もう遅い」と思っていた40歳が未経験からエンジニアに転職できた理由と、正直に大変だったことに詳しく書いています。
働きながら学ぶならドットインストール
では、職業訓練を受けられない人はどうすればいいのか。働きながら学ぶ人に私がすすめているのが、ドットインストールです。
ドットインストールは、HTML・CSS・JavaScriptなどを短い動画で学べるオンライン教材です。動画は1本あたり2〜3分。テンポよく進められるので、通勤時間や昼休みのようなスキマ時間でも学習できます。
実際に使って感じた良さ
- テンポが良くて飽きない
- 講師がコードを書く手元がそのまま見えるので、「どこに何を打つのか」で迷わない
- エディタの設定や環境構築など、初心者が最初につまずく部分も動画で説明してくれる
Progateがブラウザの中だけで完結するのに対して、ドットインストールは自分のパソコンにエディタを入れて、実際のファイルを作りながら進めます。「本番に近い環境」に早く慣れられるのは大きな違いです。
ドットインストールの料金（2026年10月時点）
無料レッスンだけでもHTML・CSSの入口は学べます。プレミアム会員は月額1,480円（6か月払いで月1,280円相当、12か月払いで月1,080円相当）で、7,000本を超える動画がすべて見られます。月1,000円ちょっとでこの量を学べるなら、コストパフォーマンスはかなり良いと思います。
AIに聞ける時代でも、基礎は自分で身につける
2026年の今は、分からないことをChatGPTやClaudeのようなAIに聞けば、コードを書いてもらうことも、エラーの原因を説明してもらうこともできます。私が学び始めた頃と比べると、独学の環境は格段に良くなりました。
それでも、基礎は自分で身につける必要があると感じています。理由はシンプルで、基礎がないと、AIの答えが正しいかどうか判断できないからです。AIは自信たっぷりに間違えることがあります。HTMLの構造やCSSの仕組みを一度自分の手で書いて理解しておくと、AIを「答えを出す道具」ではなく「作業を速くする道具」として使えるようになります。
このあたりの考え方は、AIでWebアプリが作れる時代に。それでも「基礎」が大切な理由にまとめています。
「講師がいる環境」を今つくるには
ここまで読んで、「結局、講師がいる環境がいちばん伸びるのは分かった。でも職業訓練は受けられない」という方もいると思います。選択肢は2つです。
- 独学＋質問できる場所をつくる：ドットインストールやProgateで学びながら、勉強会やコミュニティ、SNSで質問できる相手を見つける。費用は抑えられますが、自分で場を探す手間がかかります。
- ITスクールに通う：費用はかかりますが、「書いたものを直してもらう」環境を最初から用意できます。
私は現在、ITスクールCodeRingで講師をしています。10週間のカリキュラムで、現役エンジニアに24時間質問でき、受講時間に制限がありません。「独学で詰まったときに、その場で聞ける人がいる」という、私が職業訓練でいちばん助けられた部分を、働きながらでも手に入れられるようにしたスクールです。講師として関わっている立場なので割り引いて読んでいただいて構いませんが、「質問できる環境があるかどうか」は、スクールを選ぶときの基準にしてほしいと思っています。
ITスクールを検討する前に「そもそもどんな職種を目指すのか」を整理したい方は、ITエンジニアの種類9つを比較｜未経験から入りやすい職種と最初に学ぶことも参考にしてください。
自分に合った学び方の選び方
最後に、どれを選ぶかの判断軸を3つ挙げます。
- 時間：平日に数時間まとまって取れるなら職業訓練やスクール。スキマ時間しかないならドットインストール。
- お金：まずは無料で試す。ProgateもドットインストールもHTML・CSSの入口は無料で学べるので、「続けられそうか」を確かめてから課金する。
- 独学の耐性：一人で調べて解決するのが苦にならないなら独学でも進める。詰まると止まってしまうタイプなら、最初から質問できる環境に身を置いたほうが結果的に早い。
私はこの3つのどれも中途半端な状態で始めて、遠回りをしました。それでも、Progateで「触ってみる」ところから始めたからこそ、職業訓練に申し込む決断ができました。最初の一歩は、小さくて構いません。
まとめ
- Progateは「書いて動かす感覚」をつかむのに最適。ただし自己流のクセがつきやすい
- 職業訓練は講師に直してもらえる環境が最大の価値。ただし受講条件がある
- ドットインストールは働きながら学ぶ人向け。環境構築まで動画で学べる
- どの教材を使っても、「書いたものを直してもらう」機会をどう作るかが伸び方を決める
- AIに聞ける時代だからこそ、答えの正しさを判断できる基礎が必要
40歳手前から始めた私でも、学習を続けて、今はWebサイト制作を仕事にしています。年齢よりも、始めるかどうか、そして続けられる環境を選べるかどうかです。迷っている方は、まずProgateかドットインストールの無料レッスンを1本、今日やってみてください。
次回は、HTML・CSSを書くための道具、テキストエディタの選び方です。
