といった疑問に答えていきます。
この記事を書いている私は、2019年12月から独学でプログラミングの勉強をしてきました。
始める前は本当に何も分からず手探りだったのですが、本格的に学んでいった結果、学習開始から5ヶ月で5万円の収益を得ることができました。
そして現在はこのブログを含めて計3つのwebサイトを作成、運営しております。
オリジナルのサイト
プログラミングの学習を始める人は毎年たくさんいますが、同時に挫折してしまう人もたくさんいます。
割合にしたら9割は挫折をしていると言われています。
その理由に、
- 参考書が難しい
- エラーばかり起こる
- 何をしたらいいのか分からない
などなど、これらの理由により諦めてしまう人が多いからです。
という事は、学習のロードマップさえはっきりさせてから学習を開始すれば初心者からでも本業をしながらでも3ヶ月〜半年もあれば、プログラミングでお金を稼げる様になる事も可能になります。
今回はプログラミング初心者の方向けに、私が月5万を稼ぐまでに実践した学習内容を具体的に解説していきます。
最速で収入に結びつけたいならWebサイト制作の言語がおすすめ
一言にプログラミングといっても、多数の言語というものが存在しています。
まずはあなたがプログラミングを通して 「 何を作りたいのか 」 「 どうしたいのか 」 という目的を明確にする必要があります。
例えば
- フロントエンドエンジニア
- バックエンドエンジニア
- Webデザイナー
- システムエンジニア
- 組み込みエンジニア
それぞれ必要になってくる言語、知識、難易度、楽しさが変わってきます。
細かくはここでは省きますが、今回は 「 稼ぎたい 」 をテーマとしているので、 【 Webサイト制作 】 に特化した言語を解説します。
どの言語と比べても一番早く収入につながりやすく、分かりやすい、そして何より 「 楽しい 」 です!
プログラミングで稼ぐようになる為に必要なスキル感
実際にどのくらいの技術量と学習量で、どの案件ができるのか、
ここが分からないとどれだけ勉強すればいいのか、どこまで勉強をすれば収益に結びつけれるのかが分からず、いつまでも前に進むことができません。
まずは案件に対して必要なスキル感を知ることが必要です。
ますはこちらをご覧下さい。
こちらはクラウドソーシングサイトで企業がコーディングの依頼を出しているページです。
| 単価 | 1万〜5万円程 |
|---|---|
| 作業時間 | 20時間 |
| 必要スキル | HTML&CSS |
必要なスキルはHTML&CSSなので、案件獲得までの学習時間の目安としては200時間ほど。
これは平日2時間、土日5時間で学習すれば3ヶ月と少しで手が届くくらいの時間です。
これは最初の段階での案件なので安く感じるかもですが、知識が増えて作業効率を上げ単価の高い案件を受注すれば、月30〜50万円を稼ぐ事も十分可能です。
自分の力でお金を稼ぐようになるとこれまでの生活や価値観が少し変わってくるかなと思います。
プログラミングでお金を稼げるようになるまでにおこなった私の10のこと
ここからは私がプログラミングで実際に稼げるようになるまでにおこなった事を、10のステップに分けて一つずつ解説と、学習法を紹介していきます。
人によって色々な辿り方があり、正解はありませんので、参考の一つになればいいなと思います。
※ここからの学習に関してですが、全てを完璧に覚える必要はなく、「これはこんなことができるのか、ふむふむ。。」位で良いです。
完璧に覚えるまで何回も同じ所をしても効率が悪いので、50%くらい理解ができたら次のステップへ進みましょう。
それでは解説していきます。
1, HTML&CSS
HTMLとCSSはプログラミングの基礎で、Wenサイトを作成する上で欠かせないマークアップ言語となっています。
HTMLの基本
HTMLは、Webサイトの骨組みを作る役割を持っていて、サイトに表示させる文章を構造化する為の言語です。
つまり、
といった感じで、サイト内の一番芯となる構造の部分を作成していきます。
CSSの基本
CSSはHTMLで作った骨組みに対して、見た目を整えていく役割を持っています。
先ほどのHTMLにCSSを加えると。。。
まとめると
- HTMLで文字や画像、リンク、サイトの構造作成などを構築して
- CSSで文字の大きさや色、画像の大きさ、配置などを設定します。
ざっくりと説明するとこのように役割が分けられます。
HTML&CSSの学習におすすめな学習法
Progate
Progateというオンライン学習サービスの
を一通りやりましょう。
HTML&CSS初級編は無料で見ることができるので、まずはそちらで試してみましょう。HTML&CSS中級編以降からは月額1,000円かかってきますが、この金額なら案件一つ取ることができれば何倍にもなって返ってくるので、迷わず登録した方が良いです。
ドットインストール
Progateの後にドットインストールもやっておくと更に飲み込みが早くなると思います。
Progateは、専用の画面で簡単に学習ができるのですが、実際に 『 自分のサイトを作ってみよう！ 』 となった時には自分でコードを書く為の環境が必要になるので、その学習をドットインストールの
にて環境を整えておきましょう。
環境が出来た後は、ドットインストールの
で学習していきます。ドットインストールはここまで無料で学習ができるので、しっかり利用しましょう！
これ以降の学習は基本的にこの二つの学習サイトを利用すれば、しっかりと基礎を身に付ける事が十分可能です。
アウトプット
※ここまで学習したらアウトプットをしましょう。分からなくなったら戻って見直しても問題ないので、しっかりと！
2,レスポンシブデザイン
レスポンシブデザインというのは、パソコンやスマホ、タブレットなど、機種によってそれぞれ違う画面サイズを持っており、それらの端末のサイズに合う様に調整するデザインの事です。
最近ではスマホやタブレットからでもWebサイトにアクセスできるので、
- PCサイズ
- タブレットサイズ
- スマホサイズ
と、3つのサイズのレスポンシブデザインを作成することが普通になってきています。
こちらもProgateとドットインストールを使って学習していきましょう。
3,サイト模写
ここまで学んだことのアウトプットをしていきます。
つまり、ここまで学んだHTMLとCSS、レスポンシブを使って、簡単なWebサイトを真似して作ってみましょう。
そのために必要なものとして、以下のものを準備します。
模写サイト作成のために必要なもの
- 1,テキストエディタの準備
- 2,ファイルの用意
- 模写開始
1,テキストエディタの準備
コードを書いていくために必要なアプリケーションのことです。
色々なアプリがありますが基本的にはどれもそこまで変わらないので、無料のものの中から選んでいただければ良いかと思います。
下記のテキストエディタはどれも無料なので扱いやすいと感じたものをどうぞ。
などなど。
ちなみに私はVisual Studio Codeを使用しています。
2,ファイルの用意
新しくフォルダを作り、その中に
- 『 index.html 』
- 『 style.css 』
という名のファイルを作成しましょう。
作成したら先ほどインストールしたテキストエディタで開けば準備完了です。
先ほどの『 index.html 』ファイルをブラウザでも開いてみましょう。
そうすると、書いたコードがブラウザでも確認する事が可能になります。
3,模写開始
ここから先はProgateの学習画面でできる事と同じです。
この環境を使って模写をしていきます。
模写とは、『既存で存在しているWebサイトを真似して作ってみる 』事です。
サイトによっては難易度や必要な言語が変わってきますので、レベル別で参考になるサイトを載せておきます。
※この段階ではまだHTML、CSS、レスポンシブを使って、見た目を同じ様に作る事ができれば合格かなと思います！
ここまでのサイトが完璧な見た目で模写する事ができれば、単価5万円のお仕事を受注する事が可能なレベルになっています。
試してみたい方はぜひ難易度３のisaraの模写にもチャレンジしてみましょう！
isaraの模写に関しては、条件さえ守れば自分のポートフォリオに載せても良いので、その模写サイトを実績としてWeb制作の案件を受注しにいくことも可能です。
副業であれば月5万稼ぐ事ができれば十分かとは思います。
が、この段階ではまだまだ競争率が高いので、余裕があればこの先の学習をして、できる事を増やしていきましょう。
4, jQuery
ここまででWebサイト作成の基礎的な部分は問題なく作れる様になっているでしょう。
それではここからはJavascriptやjQueryを学んでいきましょう。
jQueryやJavascriptでは、静的なサイトにアニメーションなどを使って、こちらのサイトの様に動的な動きを加える事ができます。
jQueryとは、Javascriptを使いやすくするために開発されたライブラリの一つです。
まずは根本となるJavascriptの学習から始めていきましょう。
こちらもProgateの
で学習しましょう。
Javascriptで何ができるのかがざっくり分かったら、続いてjQueryの学習に移ります。
こちらもProgateの
を進めていきましょう。
これまでの静的な部分を構築する言語は直感的な部分が多かったのですが、ここからは少しシステム側の言語になってきますので難易度が上がってきていますが、こちらも変わらず理解度は50%くらいで問題なしなので身構えずにどんどん進めましょう。
そして、この前の段階で作成した模写サイトに対して、動的な動きを加えてみましょう。
元のサイトの動きをそっくりそのまま再現するにはどうしたら良いのかを考える事が大切です。
どうしたら良いのか分からなかったら、どんどんネットで調べます。
例えば下からフワッと文字を出す方法を調べるときは、『 jQuery 下からフワッと 』の様に調べれば沢山出てきますので、検索してみましょう。
5, Sass
Sassとは、cssをより効率よくさせる為の言語です。
案件をみていると、たまに 『 Sassを使用して作成してください 』 と書いてあるものもありますので、覚えておくと良いかと思います。
CSSの仕組みが頭に入っているならば簡単に覚える事ができると思いますので、こちらもProgateで学習していきましょう。
学習後は忘れずにアウトプットを。
6, Bootstrap
Bootstrapとは、フレームワークの一種であり、学習することによるメリットが沢山あります。
簡単にレスポンシブデザインが作成できたり、 CSSをより効率化、コーディングをより高速化させてくれます。
HTMLとCSSの基礎がある程度把握できていれば、このフレームワークの凄さとお手軽さが体感できるかと思います。
私は、Bootstrapはこちらのサイトをみて、実際にアウトプットしながら学習していました。仕組みがとても分かりやすくまとめられており、とても分かりやすかったです。
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
Bootstrapはやれる事がとても沢山あるけど、結構重たいシステムとなっているので、 『 使用しないでください 』 という案件もたまにあることも覚えておくと良いでしょう。
7, PHP
次はデータベースを扱う時に使用するスクリプト言語を学びます。
PHPは何ができるかというと、掲示板やお問い合わせフォーム、ショッピングカートみたいに、アクセスしたタイミングや状況によって、動的にHTMLを生成、表示してくれる言語です。
文字にするとややこしそうですが、扱っていくと意外に仕組みは分かりやすいので、まずは触ってみましょう。
PHPはこちらで学習です。
Progateは２までで良いかと思います。
それが終わったら今度はドットインストールをやりましょう。
8, ローカル開発環境作成 レンタルサーバーの準備
先ほどのPHPと合わせて学習しておいて欲しいものとして、レンタルサーバーの準備やローカル開発環境の用意が必要になります。
というのも、PHPに関してはこれまでのHTMLの様に直接ブラウザで表示をさせるという事ができないからです。
ではどうすれば良いのでしょうか。
PHPは『ローカル開発環境』か『レンタルサーバー』を用意する必要があります。
ローカル開発環境を用意したいという方は、XAMPPやMAMPというアプリケーションがとても簡単にその環境を作ってくれます。
詳しくはこちらにて紹介されています。
“MAMPを用いてテスト環境を構築する方法（macユーザ向け）”
レンタルサーバーやドメインをとって自分のサイトでやりたいという方は、こちらが参考になるでしょう。
超初心者向け】やさしいWordPressの始め方！導入から初期設定まで徹底解説
サーバーに関しても色々とありますのが、個人的におすすめなのはエックスサーバーかロリポップサーバーかなと思います。
後々、自身のポートフォリオサイトの作成をして公開もしていくと思うので、ここで作ってみるのもありかなと思います。
9, WordPress
PHPの学習が終わったらついにWordpressです。
WordPressが使える様になると一気に競争率が下がり、単価も10万〜30万と一気に跳ね上がりますので、ぜひ覚えていきましょう。
WordPressとは、サイト構築やブログの運営などにとても役に立つ無料のソフトウェアです。
なお、Wordpressの扱いにはPHPが基本的に必要となってくるので、自然とローカル開発環境かレンタルサーバーが必要になります。
学習方法としては、ドットインストールにある、Wordpress入門をやってみると良いでしょう。
10, ポートフォリオ作成
WordPressまで学習が終わったら、もう少しです！
いよいよご自身のポートフォリオサイトの作成となります。
ポートフォリオサイトは、プログラミングの案件を受注する上で絶対に必要となる事故紹介サイトです。
ポートフォリオサイトに載せる情報
- 自分は何ができるのか
- これまでに何を作ってきたか
- 自分はどの様な人間なのか
ここまでに得たプログラミングの知識や、アウトプットの時に作成してきた模写ページなどを盛り込んで、自分のできる事や自分に依頼したらこんなメリットがあるということを企業にアピールしていきましょう。
ポートフォリオサイト作成の際に気をつけることは、
- レスポンシブデザインやjQueryでのサイトの動きなど、細かい所もしっかり作り込む。
- 自分ができる事をしっかりアピールする。
- 分からない事は調べたり、ピンポイントでその部分の学習にも戻ったりして、解決させる。
ここまでに早い方なら2ヶ月程でたどり着けるかと思います。
ここまで読んでくださり、本当にありがとうございました。
このサイトに記載した順番、記載したサイト以外にも、学習方法は本当に沢山ありますので、一つの指標にしていただければ幸いです。
全くパソコンでのお仕事とは無縁だった私でも、自分のペースを守りつつ、5ヶ月の学習をした後に、案件の受注をする事が可能になりました。
ここまでできたら単価も本当に変わってきますので、ぜひ頑張っていきましょう！
コメント