【スクールなし】Webデザインを独学で学んだ私が使った教材・サービス全まとめ

はじめに｜私はスクールなし・完全独学でWebデザイナーになりました

【ここに画像を挿入：ノートPCで作業するまどかさんのイメージ】

「Webデザインを勉強したいけど、何から始めればいいの？」
「スクールに通うお金も時間もない……」

そう思って検索してるあなたに、まず伝えたいことがあります。

私はスクールに一度も通わず、完全独学でWebデザイナーになりました。

もともとはアパレルの販売員。
デザインもコーディングもまったくの未経験だった。

2020年に独学でWeb業界に飛び込んで、フリーランスとして5年間活動して、月収100万円を超える月もあった。
そして2025年に正社員として企業に入り、今はフルリモート・フルフレックスで働いています。

特別な才能があったわけじゃないよ。ただ「今の生活を変えたい」っていう気持ちだけで始めたの。

この記事では、そんな私が実際に使った教材・サービスをぜんぶまとめました。

「これ本当に使えたよ」っていうものだけを正直に紹介するので、教材選びで迷っている人はぜひ参考にしてみてね。

ちなみに、私がフリーランスから正社員になった理由については[こちらの記事](/freelance-to-employee-reason)で詳しく書いています。

—

Webデザイン独学で使った教材・サービスの全体像

【ここに画像を挿入：教材の全体像まとめ図解】

まずは「何をどの順番で使ったのか」を全体像で見てみよう。

私の学習ロードマップ

HTML/CSSの基本をゲーム感覚で学ぶ。パソコン1台あればOK。まずはここで「自分にもできそう」って感覚をつかむのが大事。

Progateで基礎がわかったら、動画でもう一段深く学ぶ。3分の短い動画だから、スキマ時間にも進めやすかった。

セール時に1,500円前後で買える講座でガッツリ実践。ここで一気にレベルが上がった実感があったよ。

デザインの理論や配色のセンスは、本とYouTubeで補強。移動中や寝る前のスキマ時間をフル活用。

架空のサイトでもいいからとにかく作る。ここがいちばん成長するフェーズ。

独学ロードマップの全体像はこちらの記事でも詳しく解説しているので、あわせて読んでみてね。
→ [Webデザイン独学ロードマップ](/web-designer-roadmap-self-taught)

教材の種類と使い分け

種類	費用	おすすめ度	こんな人向け
Progate	無料（有料プランあり）	★★★★★	超初心者・まず触ってみたい人
ドットインストール	無料（プレミアムあり）	★★★★☆	動画で学びたい人
chot.design	無料	★★★★☆	デザイン理論を学びたい人
Udemy	セール時1,200〜1,800円	★★★★★	実践的なスキルを身につけたい人
本（書籍）	1,500〜3,000円/冊	★★★★☆	じっくり体系的に学びたい人
YouTube	無料	★★★★☆	スキマ時間に手軽に学びたい人

教材選びのコツ： 全部を一気にやろうとしないこと。まずは無料のProgateから始めて、「もっと学びたい」と思えたらUdemyや本を追加していくのがおすすめだよ。

—

【無料】まず最初に使うべきオンライン学習サービス

【ここに画像を挿入：無料学習サービスのイメージ】

「お金をかけずに始めたい」っていう気持ち、すごくわかる。

安心してほしいんだけど、Webデザインの基礎は無料で十分学べるんだよね。

まずは無料サービスから始めて、「自分に合ってるかな？」を確かめるのが正解。

Progate（プロゲート）｜手を動かして覚える最初の一歩

私がいちばん最初に使ったのがProgate。

スライドで概念を学んで、すぐにコードを書いて実践する。
この「手を動かしながら学ぶ」スタイルが、初心者にはぴったりなんだよね。

私が学んだコース：

• HTML & CSS（初級〜中級）
• JavaScript（初級）
• jQuery（初級）

良かった点：

• ブラウザだけで学べるから環境構築不要
• ゲーム感覚で進められるからモチベーションが続く
• 無料プランでも基礎はしっかり学べる

注意点：
無料プランで学べる範囲でまずは十分。有料プラン（月額1,490円）にするのは「もっとやりたい！」と思えてからでいいよ。

Progateは「私にもコードが書ける！」って自信をくれた、原点みたいなサービス。1週間くらいで基礎コースを終わらせたよ。

ドットインストール｜3分動画でサクサク進む

Progateで基礎を掴んだ後は、ドットインストールで動画学習に移行したよ。

1本3分の動画だから、ちょっとしたスキマ時間にも学べるのが最高だった。

Progateとの使い分け：

• Progate → 「基礎の基礎」を体験するため
• ドットインストール → 実際の開発環境でコードを書く練習

Progateはブラウザ上で完結するんだけど、ドットインストールでは自分のPCにエディタを入れてコードを書くから、より実践に近い学習ができるんだよね。

おすすめのレッスン：

• はじめてのHTML
• はじめてのCSS
• はじめてのJavaScript
• ウェブサイトを作れるようになろう

ドットインストールのプレミアム会員（月額1,080円）は、文字起こしが見られたり、質問ができたりして便利。でも最初は無料レッスンだけで大丈夫。有料にするのは「無料分をやり切ったあと」で。

chot.design｜デザインの基礎を無料で学べる穴場サイト

Progateやドットインストールはコーディングがメインなんだけど、Webデザイナーには「デザインの基礎知識」も必要だよね。

そこでおすすめなのがchot.design。

デザインの4原則（近接・整列・反復・対比）や、配色の基礎、タイポグラフィなど、デザインの理論を無料で体系的に学べる穴場サイトなんだよね。

正直、最初はコーディングばっかり勉強してて、デザインの勉強を後回しにしてたの。
でも実際に案件をもらうようになってから「デザインの基礎知識がないとダメだ」って痛感して、慌てて学び直した。

だから、コーディングと並行してデザインの基礎も学んでおくのがおすすめだよ。

—

【有料】投資して本当によかった学習サービス

【ここに画像を挿入：有料サービスのイメージ】

無料サービスである程度学んだら、次は有料のサービスに投資するフェーズ。

「お金をかけるのが怖い」って思うかもしれないけど、正しいところに投資すれば、何倍にもなって返ってくるから大丈夫。

Udemy（ユーデミー）｜セール時に買えばコスパ最強

私がいちばんお世話になったと言っても過言じゃないのがUdemy。

世界最大のオンライン学習プラットフォームで、Webデザイン関連の講座がめちゃくちゃ豊富。

そして最大のポイントはセール。

通常1万〜2万円する講座が、セール時には1,200〜1,800円で買えるんだよね。
これ、本1冊分の値段で何十時間分の動画講座が手に入るってこと。コスパが良すぎる。

おすすめのWebデザイン系講座ジャンル：

• HTML/CSS実践講座（ゼロからサイトを作るタイプ）
• Figma入門〜実践（UIデザイン）
• WordPress制作講座
• レスポンシブデザイン講座

【体験を加筆してください：まどかさんが実際に受講した具体的な講座名・講師名があれば記載】

Udemyのセール攻略法：
Udemyはほぼ毎月セールをやっています。定価で買う必要はほぼないので、焦らずセールを待とう。アカウントを作っておくと、セール通知がメールで届くよ。

Udemyのおかげで「見て学ぶ」から「作りながら学ぶ」に変われた。正直、ここが独学のターニングポイントだったと思う。

Udemyで講座を探してみる

Adobe Creative Cloud｜ツールの学習は公式チュートリアルが優秀

Webデザイナーとして避けて通れないのがAdobeのツール。

Photoshop、Illustrator、そして最近はFigmaも使うけど、やっぱりAdobe CCは必須だよね。

学び方のおすすめ：
1. Adobe公式チュートリアル → 無料で基本操作が学べる。意外とクオリティが高い
2. Udemyの講座 → 実践的な使い方を学ぶならこっち
3. YouTube → ピンポイントで「この操作どうやるの？」を検索

費用について：
Adobe CCは2025年に料金プランが改定されて、「Creative Cloud Standard（月額6,480円）」と「Creative Cloud Pro（月額9,080円）」の2つになったよ。Webデザインの学習段階ならStandardで十分。正直、学び始めの段階では痛い出費だよね。

節約のコツ： Adobe CCはデジハリ・たのまな等のAdobe認定スクール経由で購入すると年間で数万円安くなることも。学生・教職員プランもあるので、使える割引がないかチェックしてみてね。

最初はPhotoshopだけの単体プランから始めて、必要に応じてアップグレードするのもありだよ。

Adobe Creative Cloudの詳細を見る

—

独学で役立ったおすすめ本5選

【ここに画像を挿入：おすすめ本を並べたイメージ】

オンライン学習だけじゃなく、本で体系的に学ぶ時間も大事だったなと思う。

動画は「流れで理解する」のに向いてるけど、本は「立ち止まって考える」のに向いてるんだよね。
ここでは、私が実際に何度も読み返した5冊を紹介するね。

デザインの基礎を学ぶ本

1. ノンデザイナーズ・デザインブック

デザインの4原則（近接・整列・反復・コントラスト）がわかりやすく解説された名著。

「デザインってセンスじゃないんだ、ルールがあるんだ」って気づかせてくれた1冊。
デザインを学ぶなら、まずこの本から読んでほしい。

Amazonで見る：ノンデザイナーズ・デザインブック

2. なるほどデザイン

「デザイン＝楽しい」って思わせてくれる本。

ビジュアルがたっぷりで、パラパラ眺めるだけでもデザインの感覚が身につく。
疲れてるときでもサクッと読めるから、寝る前によく開いてた。

Amazonで見る：なるほどデザイン

HTML/CSSを学ぶ本

3. 1冊ですべて身につくHTML & CSSとWebデザイン入門講座（通称：Mana本）

HTML/CSSの入門書としてはこれが鉄板。

Progateやドットインストールで学んだことを、本で復習する使い方がおすすめ。
手元に置いておくと、「あれ、この書き方どうだっけ？」ってときにすぐ確認できて便利なんだよね。

この本は何回読み返したかわからない。ボロボロになるまで使い込んだよ。

Amazonで見る：HTML & CSSとWebデザイン入門講座

配色・レイアウトを学ぶ本

4. 配色アイデア手帖

「この色の組み合わせ、おしゃれだな」を言語化してくれる本。

配色に迷ったときにパラパラとめくるだけで、イメージに合う色の組み合わせが見つかる。
実際の制作で何度も助けられた、お守りみたいな1冊。

Amazonで見る：配色アイデア手帖

5. Webデザイン良質見本帳

「いいデザインってどんなもの？」がわからないときに、たくさんの実例を見られる本。

デザインの引き出しを増やすのに最適。
ジャンル別に整理されてるから、「今回はカフェのサイトを作りたい」みたいなときにサッと参考にできるよ。

Amazonで見る：Webデザイン良質見本帳

本の買い方のコツ： 全部いっぺんに買わなくてOK。まずは「ノンデザイナーズ・デザインブック」と「Mana本」の2冊から始めて、必要に応じて追加していくのがおすすめ。

—

YouTubeで学ぶ｜無料なのにクオリティが高いチャンネル

【ここに画像を挿入：YouTube学習のイメージ】

最近はYouTubeでもかなり質の高いWebデザインの学習コンテンツが増えてるよね。

無料で学べるのにクオリティが高くて、正直びっくりするレベル。

おすすめのWebデザイン系YouTubeチャンネル

チャンネル名	学べる内容	おすすめ度
JEEK（じーく）	Figmaの使い方、UIデザイン	★★★★★
しまぶーのIT大学	HTML/CSS/JavaScript基礎	★★★★★
Web制作チャンネル	WordPress、実践的なサイト構築	★★★★☆
mikimiki web スクール	Webデザイン全般、Canva活用	★★★★☆
セカヤサ	フリーランスの働き方・営業方法	★★★★☆

【体験を加筆してください：まどかさんが実際に見ていたチャンネル・お気に入りの動画があれば差し替え・追記】

YouTube学習のコツと注意点

YouTubeで学ぶときに気をつけてほしいのが、「見てるだけ」で満足しないこと。

これ、私自身がハマった罠なんだけど、動画を見てると「わかった気」になっちゃうんだよね。

効果的な使い方：

• 動画を見ながら必ず手を動かす
• 1.5倍速で効率よく視聴する
• 「学習用プレイリスト」を作って管理する
• ダラダラ見続けない（1日30分〜1時間と決める）

YouTubeはおすすめ動画が次々出てくるので、気づいたら関係ない動画を見てた……なんてことも。学習用のアカウントを別で作るのもひとつの手だよ。

—

【体験談】子育てしながらの独学スケジュール

【ここに画像を挿入：子育てしながら勉強するイメージ】

「子育てしながら勉強する時間なんてあるの？」

これ、いちばんよく聞かれる質問かもしれない。

私が独学を始めた2020年の時点では、まだ子どもはいなかったの。でも2023年に息子が生まれてからは、スキルアップの勉強や副業の仕事を子育てと両立しなきゃいけなくなった。

だから「子育て中に新しいことを学ぶ」っていう意味では、今まさに実践中なんだよね。

正直に言うと、時間は「ある」んじゃなくて「作る」ものだと思ってる。

1日のタイムスケジュール

今の私のスケジュールはこんな感じだよ。子育てしながら学び続けたい人の参考になればうれしいな。

時間	やっていたこと
5:00〜6:30	早起きして勉強（集中できるゴールデンタイム）
6:30〜8:00	子どもの朝の支度・朝ごはん
8:00〜12:00	仕事 or 家事
12:00〜14:00	子どもの昼寝中に勉強（30分〜1時間）
14:00〜20:00	子どもと過ごす・家事・夕飯
21:00〜22:30	子どもを寝かしつけた後に勉強

1日のトータルで2〜3時間くらい。
多い日で4時間、少ない日は30分のときもあった。

毎日完璧にこのスケジュールで動けてたわけじゃないよ。子どもが体調崩したら勉強どころじゃないし。でも「できる日にやる」を続けたら、ちゃんと力がついてた。

【体験を加筆してください：当時の具体的なエピソード（早朝の勉強の様子、子どもが起きてきて中断された話など）があれば追記】

子育てとリモートワークを両立するコツは[こちらの記事](/childcare-remote-work-tips)でも詳しく書いているので、よかったら読んでみてね。

モチベーションが下がったときの対処法

独学って、モチベーション維持がいちばんの課題だよね。

私がやっていたのはこの3つ。

1. SNSで学習記録を発信する
Twitterで「#今日の積み上げ」タグをつけて、毎日やったことを投稿してた。
見てくれる人がいると思うだけで、サボりにくくなるんだよね。

2. 小さな成功体験を積み重ねる
「今日はこのボタンをCSSで作れた」「初めてレスポンシブ対応ができた」
そういう小さなことでも、ちゃんと喜ぶ。自分で自分を褒める。これ、めちゃくちゃ大事。

3. 完成品をイメージする
「半年後にはフリーランスとして仕事を受けたい」
ゴールを具体的にイメージすると、今やってることに意味を感じられるよ。

独学で挫折しそうになった瞬間と乗り越え方

【体験を加筆してください：まどかさんが独学中にいちばんしんどかった瞬間、挫折しかけたエピソード、どうやって乗り越えたかを具体的に書いてください。例えば「JavaScriptが全然わからなくて泣きそうになった」「周りがスクールに通ってるのを見て焦った」など】

ひとつだけ確かなのは、「やめなければ、挫折にはならない」ということ。

ペースが遅くても、数日休んでも、また再開すればそれは挫折じゃない。
自分のペースでいいんだよ。

—

スクールなし独学で「これは失敗だった」と思うこと

【ここに画像を挿入：失敗から学ぶイメージ】

独学で成功したとはいえ、もちろん失敗もたくさんあった。

同じ失敗を繰り返してほしくないから、正直に書くね。

最初から完璧を目指して教材を買いすぎた

これが最大の反省点。

「あれも必要かも」「この教材もやったほうがいいかも」って、最初に本を5冊もUdemyの講座を10本も買い込んでしまったの。

結果どうなったかというと……半分以上やりきれなかった。

教材を買っただけで勉強した気になっちゃうやつ、あれ本当に危険です（笑）

教材は「今必要なもの1〜2個」だけにして、終わったら次を買う。
これが鉄則だよ。

インプットばかりでアウトプットが遅れた

Progateを3周、ドットインストールも全部見て、Udemyの講座もたくさん受けて……。

でもなかなか「自分で何かを作る」に踏み出せなかった。

「まだ実力が足りないから」って思ってたんだけど、実力は作りながらじゃないとつかないんだよね。

今思えば、Progateを1周したあたりで簡単なページを作り始めればよかった。

今ならこう学ぶ！効率的な学習順序

もし今の自分が、ゼロからやり直すなら：

まずは基礎を1周だけ。完璧に理解しなくてOK。

HTML/CSSだけで、シンプルな自己紹介ページを作る。ここが超重要。

サイトを作りながら学べる講座を1つだけ選んで集中する。

好きなサイトを見ながら同じものを作る。ここでグッと力がつく。

3つくらい作品ができたら、もう応募していい。完璧じゃなくて大丈夫。

大事なのは「70%の理解で次に進む勇気」。 100%理解してから次に行こうとすると、いつまでも進めないよ。わからないところは、あとから実践の中で理解できるようになるから。

—

独学 vs スクール｜私がスクールに行かなかった理由

【ここに画像を挿入：独学とスクールの比較イメージ】

「やっぱりスクールに通ったほうがいいのかな……」

これ、独学してると何度も頭をよぎるよね。わかる。

独学を選んだ理由

私がスクールに行かなかった理由は3つ。

1. 費用の問題
Webデザインスクールの相場は30万〜70万円。
当時の私には、その金額を出す余裕がなかった。

2. 時間の問題
決まった時間に授業を受けるのが難しかった。
子どもの生活リズムに合わせないといけなかったから。

3. 性格の問題
自分のペースで進めたいタイプだったの。
わかるところはサクサク飛ばして、わからないところに時間をかけたかった。

独学が向いている人・向いていない人

独学が向いている人	スクールが向いている人
自分でスケジュール管理できる	締め切りがないと動けない
ググって調べるのが苦じゃない	わからないとすぐ聞きたい
費用を抑えたい	投資してでも効率よく学びたい
マイペースに進めたい	仲間と一緒に頑張りたい
時間の融通がきかない（子育て中など）	まとまった学習時間が取れる

正直に言うと、独学もスクールも「正解」だと思う。

大事なのは、自分に合った方法を選ぶこと。
そしてどちらを選んでも、最終的には「自分で手を動かす」ことでしかスキルは身につかないよ。

それでもスクールが気になる人へ

独学でやってみて「やっぱり一人じゃ限界かも」と思ったなら、スクールを検討するのも全然アリ。

その場合のスクール選びのポイントだけ書いておくね。

• 無料体験や無料カウンセリングがあるか
• 卒業生の実績（ポートフォリオ）が公開されているか
• 質問サポートの対応時間が自分の生活に合っているか
• 受講期間中だけでなく卒業後のサポートがあるか
• 高額な場合は分割払いが可能か

「未経験でも月収50万！」「3ヶ月でフリーランスに！」のような過激な広告のスクールには要注意。現実はそこまで甘くないよ。口コミやSNSでの評判を必ずチェックしてね。

—

まとめ｜独学でも大丈夫、まずは一歩踏み出そう

【ここに画像を挿入：前向きなイメージ】

ここまで読んでくれてありがとう。

最後に、この記事で紹介した教材・サービスの選び方をまとめるね。

あなたの状況別おすすめ：

あなたの状況	まずやること
まったくの初心者	Progateに無料登録してHTML/CSSコースを始める
Progateは終わった	ドットインストールで動画学習 or Udemyの実践講座
コーディングはわかるけどデザインが苦手	「ノンデザイナーズ・デザインブック」を読む
とにかくお金をかけたくない	Progate → ドットインストール → YouTube → chot.design
少しだけ投資できる	Udemyのセールで1講座買う（1,500円前後）

今日できる「たった1つのこと」は、Progateに無料登録すること。

それだけでいい。
登録して、HTML/CSSの最初のレッスンを1つだけやってみて。

「あ、なんか楽しいかも」って思えたら、それが第一歩。

私もそこから始まった。
アパレル販売員で、パソコンもろくに触れなかった私が、独学でWebデザイナーになれた。

だから、あなたにもきっとできるよ。

焦らなくていい。
完璧じゃなくていい。
自分のペースで、一歩ずつ進んでいこう。

この記事があなたの「最初の一歩」を踏み出すきっかけになったら、すごく嬉しいです。応援してるよ！

あわせて読みたい：

• [独学ロードマップの全体像を詳しく見る](/web-designer-roadmap-self-taught)
• [子育てとリモートワークを両立するコツ](/childcare-remote-work-tips)
• [フリーランスから正社員になった理由](/freelance-to-employee-reason)

—

よくある質問

Q：独学でWebデザイナーになるまでにどれくらいの期間がかかりましたか？

私の場合は約6ヶ月で最初の案件を受注できたよ。ただし毎日2〜3時間は勉強してた。ペースは人それぞれだから、焦らないでね。

Q：スクールに通わなくても本当に大丈夫？

大丈夫だよ。私はスクールに一切通わずにフリーランスとして5年間活動できたし、今は正社員としてWeb制作の仕事をしてる。ただ、独学には「自分で調べる力」が必要。ググるのが苦にならない人なら向いてると思う。

Q：Progate・ドットインストール・Udemyの中でどれが一番おすすめ？

いちばん最初に始めるならProgate、実践力をつけたいならUdemy。ドットインストールはその間の橋渡し的な存在かな。全部やる必要はなくて、自分に合うものを選べばOKだよ。

Q：独学にかかった費用はトータルでいくらぐらい？

ざっくりだけど、Udemyの講座が5〜6本で約1万円、本が5冊で約1万円、Adobe CCが年間約8万円（Standardプランの場合）。スクールに通うよりはかなり安く済んだよ。Adobe CC以外はトータル2万円くらいだったかな。

Q：パソコンはMacとWindowsどちらがいいですか？

正直どちらでも大丈夫。私はMacを使ってるけど、Windowsで困ることもほとんどないよ。予算に合わせて選んでね。