YUTAROU LIFE BLOGトップ

【初心者向け】プログラミング独学ロードマップ【月5万円を目指す】


どうも、こんにちは。
友太郎(@yutarou_life)です。

初心者向けのプログラミング独学ロードマップを作成しました。

僕はHTML・CSS・jQuery・WordPressを独学で学習しました。色んなブログを読み漁りプログラミングを独学するためのロードマップを作成し3ヶ月で自作テーマを使ってブログ運営できるようになりました。今度ロードマップを整理しブログで公開したいと思います。

僕が実際に使っていたロードマップを改良し、初心者の方ができるだけ無駄なくWeb制作で月5万円を目指せるようにしました。

ぜひこのロードマップを使って、在宅で月5万円を稼げるスキルを身に付けましょう!

プログラミング独学ロードマップ

まずはロードマップを確認してみましょう。

  1. 目標を確認
  2. プログラミングのマインド設定
  3. エディタのダウンロード
  4. HTML/CSSの基礎を学ぶ
  5. ディベロッパーツールに触れる
  6. Flexboxで表現の幅を広げる
  7. Bootstrapでサクッと時短
  8. 模写コーディングでレベルアップ
  9. JavaScriptとjQueryでサイトに動きを
  10. 自作デザインのポートフォリオを作る

10ステップのロードマップで、初心者から月5万円を稼ぐスキルを身に付けましょう。

このロードマップでは「既存の有益な教材を使って学習し、独学で学習し続けられるエンジニアを目指す」をサブテーマとしています。

それでは、さっそくロードマップの詳細を説明しますm(__)m

目標を確認

ゴールを確認しよう

このロードマップの目標は「Web制作で月5万円を稼ぐスキルを身に付ける」です。

今回のWeb制作とはLP(ランディングページ)の作成を指します。
ランディングページとは、企業が商品を販売する時に作る商品販売ページみたいな感じですね。

>>ランディングページの一例

そして、このランディングページの単価が約2~3万円ほどになっています。

ランディングページ単価

クラウドソーシングサイトのランサーズで「ランディングページ」の仕事を検索してみると、上の画像のような感じでした。

2件ほど受注できれば、月5万円を超えてきますね。

というわけで、このロードマップでは「ランディングページを作成できるスキル」を目標にしています!!

プログラミングのマインド設定

意外とここが大事

このロードマップでは自走できるエンジニアになることがサブテーマですので、しっかりとマインドセットもしていきます。

これから学習していく人が捨てるべき考え方がこちら。

  • 時間をかけるほど良い
  • 楽するのは悪
  • 暗記をするべき
  • カンニングは悪
  • コピペは悪

僕たちが義務教育で学んできたことと真逆ですよね(笑)

しかし、この考え方を捨てないとプログラミングで稼いでいくのは難しいです。

エンジニアは成果主義ですので、ぶっちゃけ過程は重視されません。
どれだけダラダラ作業しても、カンニングしまくっても、コピペしまくっても、期日までにちゃんとした品質の物を納品できればOKです。

今までの常識を少しずつ変えていきましょう。

見ておくべき動画

今からプログラミング学習をするあなたにオススメの動画です。

エディタのダウンロード

一気にプログラマーっぽく

プログラムを書くためのエディタを導入しましょう。

エディタは色々ありますがVScodeがオススメです。
VScodeの導入方法は下記の記事を参考にしてくださいm(__)m

>>【初心者必見!】Visual Studio Codeの使い方を分かりやすく解説!

VScodeはコードを快適に書けるように、様々な拡張機能を入れることができます。

はじめは何がいいのか分からないと思いますので、こちらの記事と同じプラグインを導入してみてください。
気に入らなかったらすぐに削除できます(笑)

>>2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します

HTML/CSSの基礎を学ぶ

サイトを作ろう

さて、ここからエンジニアっぽいことを学習していきます。

>>HTML/CSSの基礎を独学で学習する方法【無料でOK】

上記の記事にHTML/CSSの学習方法をまとめました。

このステップはかなり時間がかかると思いますので、がんばっていきましょう。

【悲報】プログラミングではない

ここで悲報なのですが、HTML/CSSは厳密に言うとプログラミング言語ではありません。
HTML/CSSはマークアップ言語と言いまして、ブラウザにサイト表示するための言語になっています。

この記事では簡単のために「プログラミング」と言っていますが、気にする人は気にしますので一応覚えておいてくださいm(__)m

見ておくべき動画

直接必要はありませんが、Web制作を行うのですからWebとは何かを知っておきましょう。

優先順位は低めでOKです。

ディベロッパーツールに触れる

めちゃめちゃ便利

サイト作成には欠かせないディベロッパーツールに触れておきましょう。

>>大正義ディベロッパーツールを使う場面はここ!

今回も上記の記事にまとめておきました。

上手く使えば効率よくサイト作成が可能ですし、エラーも簡単に確認できます。

どんどん使って慣れていきましょう!

Flexboxで表現の幅を広げる

これは革命

CSSで簡単に配置をあれこれできるFlexboxを取得しましょう。

>>Flexboxが便利すぎるので学習方法を紹介する【無料でOK】

今回も例によって上記の記事にまとめています。

Flexboxを使うことで、よくある配置に簡単に対応できるようになるので必須のスキルになっています。

Bootstrapでサクッと時短

爆速でサイト作成

実は爆速でサイトを作れる方法がありまして、それがBootstrapといいます。

>>超絶便利なBootstrap4を3ステップで学習する

今回もBootstrapの説明と学習方法を記事にまとめました。

「え?こんなに簡単に作れていいの?」ってなりますが、無駄に工数を増やす意味もないので問題なしです。

模写コーディングでレベルアップ

ここを乗り越えるとゴールは目の前

ここまでの学習の集大成を発揮する時がきました。

模写コーディングで一気にレベルアップしましょう!

>>初心者の方に向けて模写コーディングのやり方を紹介する

ここはかなり難易度が高く挫折しそうになるかもですが、焦ることなく一つずつ問題を解決していきましょう。

見ておくべき動画

挫折しそうになった時にみてくださいm(__)m

JavascriptとjQueryでサイトに動きを

これがプログラミング

ここではじめてのプログラミング言語を学習します。

>>Web制作におけるJavaScriptとjQueryの学習方法

ランディングページではほとんど必要ないのですが、少しJavaScriptを使えているとLPより単価の高い仕事が受注できますので学習します。

HTML/CSSとは違う頭の使い方をするので大変ですが、基礎の基礎だけ分かっていればOKなので焦らず学習しましょう。

見ておくべき動画

プログラムの考え方を少し頭に入れておきましょう。

自作デザインのポートフォリオを作る

オリジナルサイトを作ろう

ついに最後のステップです。

>>Web制作初心者に向けてポートフォリオ作成手順を解説する

自作のサイトを作ってみましょう。

模写コーディングをしていた時は上手くできていたのに、、、なんてこともあるかと思いますが諦めずに進みましょう。

ゴールは目の前です。

手に入れたスキルで月5万円を目指す

お疲れ様でした。

このロードマップを見事完走した方は、月5万円を稼げるスキルを身につけています。

そして、最後に必要なのが”仕事”です。

フリーランスで一番難しいのはスキルアップではなく、仕事を獲得することです。
どれだけ高いスキルがあったとしても、仕事がなければ1円も稼ぐことはできません。

あなたはすでに月5万円を稼ぐスキルがありますので、あとは営業を繰り返し仕事の獲得をしましょう。

クラウドソーシング

一番ハードルが低い営業先です。

仕事を発注したいクライアントに、「できます!」と提案する形式で営業します。

クラウドソーシングは上記2つに登録しておけば問題ありません。

受注率は10%ぐらいのイメージですので、とにかく数をこなしていきましょう。

直営業

クラウドソーシングなどを経由せずに直接営業をします。

  • 知り合い
  • 企業
  • Web制作会社

直営業でのクライアント先は上記3つになりますね。

知り合いから仕事をもらうのが一番ハードルが低く、企業から仕事を受注できると報酬が大きいです。

Web制作会社とはパートナー契約といった形で、業務の一部を仕事として発注してもらうことになります。
継続で仕事がもらえるので、わりと安定しています。

見ておくべき動画

クラウドソーシングでも直営業でも、下記の動画が参考になります。

エージェントを使って転職する

フリーランスとして活動だけがプログラミングのゴールではありません。
勉強して得たスキルを使って転職することも可能です。

そのときに便利なサービスが転職エージェントサイトです。

【Tech Stars Agent】 のような転職エージェントサイトを使って、エンジニア転職をしましょう!

独学がキツそうならスクールを検討しよう

最後までお読みいただきありがとうございました。

もし、自分で続けられるか不安な場合はプログラミングスクールもオススメです。
まずは無料体験レッスンなどで、雰囲気を掴んでみてはいかがでしょうか?

毎日コツコツ頑張ろう

学習頻度は、可能なら毎日するべきです。

少しでもいいので、毎日プログラミングに触れていきましょう。

>>プログラミング初心者は毎日コードを書いていち早く慣れよう

未経験から独学で始めるのはかなりしんどいですが、エンジニアに独学スキルは欠かせないものです。

自走し続けられるエンジニアになるために頑張りましょう!!

質問などありましたら、ぜひ僕のTwitter(@yutarou_life)までどうぞ!
可能な限り答えさせていただきますm(__)m