これからWeb系エンジニアを目指す方向けの記事です。
プログラミング初心者にとって、
「プログラミング始めたいけど、書籍とか学習サイトがありすぎてわからない…」
「未経験だけど、Web系エンジニアに興味があるから学習を始めたい」
「将来フリーランスになりたいけど、何から始めよう…」
という悩みをまず最初に持つでしょう。
わたしもそうでしたし。
ということで、今回は、これからエンジニアを目指す方や、手っ取り早くフリーランスになりたい方向けに
「現役Web系フリーランスが、時給5,000円になるまでに使った学習サイト」
「学習サイトを使った効果的な学習方法」
をご紹介してまいります。
わたし自身、今回紹介する3つの学習サイトを使って、学習を始め、Web系企業に入りました。
学習を続けた結果、20代半ばにはフリーランスとして独立して、最低時給5000円の案件がこなせるようになりました。
実はWeb系スクールの講師としても活動していた経験があるので、過去の経験からお話できればと思います。
Web系フリーエンジニアとして生計を立てるまでに使った3つの学習サイト
さっそくですが、個人的には下記の3つの学習サイトだけで十分だと思ってます。
1つずつ、「概要」と「元Web系スクール講師のわたしがおすすめする学習手順」を解説してまいります。
(※使ったことある人は次の章を読んでいただいて構いません。)
ドットインストール(動画型)
プログラミングで学習サイトと言えば、「ドットインストール」ですね。

どこの会社でエンジニアの仕事しても、「ドットインストール見ておいて」と言われると思います。
わたしもはじめてプログラミングを学習したときに、このサイトをネットで見つけて、学習しましたね。
特徴としては、
- 動画を見ながら、メモするようにプログラミングできる
- 無料で基礎が学習できる
- とにかく初心者に優しい
- 一回のレッスンの時間が短い
- 更新頻度高め
レッスン1回、3分程度の動画でまとめられているので、少しずつ、スキマ時間で進められるのが魅力です。
毎日できるので、挫折することも防げますね。
初めての方は、ひとまず下記(すべて無料)をやっておくことをオススメします。
- HTML/CSSの学習環境を整えよう Windows編
(HTML/CSSの学習環境を整えよう mac編) - はじめてのHTML
- はじめてのCSS
- Chrome Developer Tools入門
- 実践!ウェブサイトを作ろう
- はじめてのJavaScript
- jQuery入門
- jQueryで作る先頭へのジャンプ機能
サーバーをすでに借りている方は、下記もやっておくといいです。
- PHP入門
- WordPress入門
サーバー借りてない方は、後ほど紹介する「Progate」でPHPは学べます。
ちなみに有料版もあります。
月額880円(記事執筆時の料金)で、中上級向けのレッスン動画もすべて閲覧できます。
ランチ代くらいの値段で実践的な内容が学習できるので、超オトクです。
有料版の特徴は下記です。
- プレミアム動画の閲覧可能
- 動画の文字起こし
- ソースコード確認、コピペできる
- 動画の再生速度変更
基礎を学んだ後に、プレミアムに入ってもいいと思います。
Progate(スライド型)
ドットインストールと同じく定番が、「Progate(プロゲート)」です。

未経験でWeb系企業に入ったら、「とりあえずドットインストールとProgateやっておいて」と言われると思います。
わたしもスクール講師やっていた時期に、「この2つは空いてる時間でやってください」と、受講生に言ってました。
特徴は、
- スライドを見ながら、プログラミングを実践しながら学べる
- 無料で基礎は学習できる
- スライドが超わかりやすい
- エラーのヒントもくれる
- ポケモンみたいにレベルアップでモチベーションが保てる(SNS連動もできる)
レッスンごとにスライドを閲覧しながら、プログラミングができます。
見やすくて、内容がわかりやすいので、初心者は取り組みやすいですね。
すでに環境も用意してくれてるので、PHPやRubyなどの言語もブラウザにコードを書きながら、実行して確認できます。
初心者の場合、環境構築で躓きやすいですが、環境が整っているので、かなり学びやすいです。
初めての方は、ひとまず下記(すべて無料)をやっておくことをオススメします。
- HTML&CSS 初級編
- JavaScript (ES5) Ⅰ
- JavaScript (ES5) Ⅱ
- jQuery 初級編
- PHP Ⅰ
ちなみにProgateも有料版はあります。
月額980円(記事執筆時の料金)で、基礎から応用、実践まですべてのレッスンを制限なく受けられます。
Progateに関しては、最初から有料版でもいいかなと思ってます。
2、3ヶ月有料版を登録すれば、HTML、CSS、jQuery、PHPのレッスンは2、3周できますよ。
Udemy(動画型)
個人的には、「Udemy」が一番おすすめですね。

ドットインストールと同じで動画で学習できるのですが、
月額ではなく、1つの講座を買い切るタイプです。
特徴をざっとあげると、
- 月額ではなく、1つずつ購入するタイプ
- 一度購入した教材は、サービスが続いてればずーっと見れる
- 個人のエンジニアが動画を販売できる
- ドットインストールやProgateより実践的な内容の講座も多い
- 動画のクオリティがまちまちなので、評価で確認したほうがいい
期間限定のセールも多めで、クオリティ高めの教材が90%オフで買えたりするので、
ついストックしないように気をつけてくださいね。
買っても、やらなきゃ意味ないので。
動画によっては、教材が随時アップデートされたり、直接講師に質問もできます。
「HTML」、「CSS」、「PHP」など言語ごとに検索すれば、
評価の高い動画が出てくるので、検索してみてください。
基礎を身につけつつ、実践で学べるので、おすすめですね。
学習サイトだけで学習しても稼げないです【アレンジしてみよう】

これからエンジニアを目指す方向けに、3つの学習サイトを紹介しました。
しかし、残念ながら学習サイトをチュートリアルに沿って、こなしていくだけでは、なかなか就職も決まらないと思います。
20代なら、基礎が身につけば、十分採用される可能性はありますが、できるだけ面接に通る確率はアップさせたいですよね。
将来的に独立も目指すなら、学習サイトをこなすだけでは、当然時給5000円以上も稼げませんし。
なので、「学習サイトを使った効果的な学習方法」もご紹介します。
最低でも、下記を実践することをオススメします。
- 学習サイトや書籍で、学んでいる過程で、少し自分なりにアレンジしてみることが大切
- Webサイト、Webサービスを模写してみる
- 一通り基礎を学んだら、なにか自分なりに作ってみる
ただ学習サイトや書籍の手順通りに沿っても、なかなか身につかないので、
自分なりに工夫が必要です。
CSSの基礎を身につけるなら、色を変更してみたり、レイアウトを変えてみたりして、ちょっとした工夫をしたほうが身につきやすいです。
基礎が身についたら、気になるWebサイトのソースコードを確認してみるといいですよ。
ソースコードを見ながら、模写にチャレンジすると、実践的に身につきますからね。
チャレンジしてみてください。
まとめ
最近は、すべて無料で、しかもネットでプログラミングスキルが学べる時代になりました。
わたし自身、フリーランスになるまでは、下記3つの学習サイトで繰り返し学習しましたね。
特にUdemyはプログラミング以外にも、デザインやマーケティング、撮影などの動画講義もあるので、
幅広く学べて便利です。
基礎と応用を学習するには、上記3つを組み合わせるといいですよ。
紹介した学習サイトで学んだあとは、
チュートリアルをアレンジしてみたり、自分でなにか作ったりすると、実績にもなるのでオススメです。
20代は、基礎が身につけばすぐに就職できると思うので、
学習サイトで学んだら面接を受けに行ったほうがいいです。
現場で実践しつつ、経験値をあげたほうが手っ取り早いと思いますので。
実務を積めば、独立までの近道になりますからね。
プログラミングの上達の秘訣は、学習や実践を「毎日やること」です。
サッカーも一流プレイヤーの動画を観てもうまくなりませんし、
料理もレシピサイトだけみても上達しません。
プログラミングも同じことです。
日々学んで、実践していきましょう。