こんにちは、みい(@w_michan69)です。
このブログでは、プログラミング未経験で学習を開始し、Web制作の案件でお金を稼ぐまでの学習ロードマップをご紹介したいと思います。
- これからプログラミング・Web制作のスキルを身につけたい
- どうやって学習を進めていけばいいのかわからない
- なるべくお金をかけず、独学ではじめたい
- おうちで稼ぎたい
わたしはプログラミング学習をはじめる前はキャバクラでお仕事していたのですが、25歳までに夜のお仕事を辞めたかったのと、コロナの影響もあり仕事を辞めて、おうちでダラダラとニート生活をしていました。
また、働きたい気分になったら働こう、と思っていた時に妊娠が発覚…！
これをきっかけに、色々考え直さなくちゃと思って考えました。
- おうちにいながらお金を稼ぎたい
- 今まで普通に就職したことがなく、働くイメージがわかない…
- 夜の仕事を辞めても、自分にも家族のためにも自由に使えるお金がたくさん欲しい！
こんな風に考えて、副業について調べていたときに知ったお仕事が、プログラミングでした。
7月1日からWEB制作をはじめて2ヶ月間の学習記録をまとめました🌼
余裕がなくて最低限しかお金かけられないので独学で、twitterで見ていた方々を参考に学習してました💡このやり方がよかったのかはわからないけど来月は、0→1達成できるように進めていきたいです🌿 pic.twitter.com/jlAwi9w5VP
— みい@Webデザイン (@w_michan69) August 31, 2021
はじめに
プログラミング未経験・独学でも稼ぐことができるのか？
未経験・独学はおすすめできない、という意見もありますが、独学で稼ぐこともできました！
- スクールの学費が高い
- 本当に学習を続けることができるか不安
スクールに入っている人たちを見ると、質問する環境が整っていたり、スクール生同士の交流が盛んで楽しく学習を続けられそうに思えて、今でもスクールに入りたい…という気持ちになることはあります。
でも、実際独学でやってみて、やっていることはスクールに入っている人とそこまで違いはありません！
スクールの人も、動画の講座や書籍を購入して同じように勉強しています。
参考になる良い学習ロードマップを無料で公開してくれている方もたくさんいるので、それを進めていくだけで十分でした。
わからないことは自分で調べて、途中で諦めず学習を続けていく気持ちさえあれば大丈夫です。
わたしは7月1日から学習を始め、ちょうど2ヶ月後の9月1日に初案件を獲得、学習開始3ヶ月で５件の案件を受注し、稼いだ額は12万円でした。
必要な学習期間と学習時間
わたしは、妊娠6ヶ月の、ちょうどつわりも治って体調が良くなってきた頃から学習を始めました。
本業がありながらの方や、子育て中のパパ・ママ、学校の課題や活動がある学生さんとは違って、時間だけは無限にありました。
そのため、学習から初めてお仕事をいただくまでにかかった期間は2ヶ月間というかなり短期間になりました。
1日平均7〜8時間×2ヶ月間＝420〜480時間
1日5時間しかできない日もありましたが、10時間くらいパソコンの前で作業していた日もありました。
1日8時間も毎日学習できるほど暇な人って、ほんとに今仕事をしていない人くらいしかいないと思うので、時間でいうと「480時間くらい必要なんだな」って考えていただけると良いかなと思います。
プログラミング学習をはじめる準備
パソコンを購入
わたしは、なんとなくビックカメラに行って「MacBook Air」を購入しました。
パソコンに関する知識は何もありません。
自分でなんとなくMacがいいな、と思って直感で決めました。
自分が使いたいものを買ってモチベーションを上げました♡
もっと稼いで、買い換えたくなった頃に「MacBook Pro」にしようかな…と思っています。
最初のうちは、MacでもWindowsでも、家にあるもので十分と言っている方が多いです。
Twitterをはじめる
プログラミング学習を続けるのに、Twitterのアカウントを作るのは必須かなと思います。
わたしが独学でここまで学習を続けられたのは、Twitterでの他の人の学習内容の報告、プログラミングやWeb制作の業界で成功している方の発信を見てマインドコントロールすることができたからです。
フォローしておくべき方々がたくさんいるので、フォローしてから学習を開始することをオススメします。
また、わたしは自分の学習した記録を毎日発信することで、継続しやすくなりました。
学習ロードマップを決める
学習を開始する前に、自分にあった学習ロードマップを決めます。
あれこれ試す前に、まずは1つ決めて最後まで実行する方がいいです。
- 自分の生活スタイルに近い
- 共通点がある、共感できる
- その人の実績、働き方が自分の目指すものと近い
わたしの場合、妊娠中でもうすぐ子どもが生まれて主婦になるため、同じ女性で主婦の方のロードマップを参考に学習を開始しました。
コーディングを学ぶ
HTML・CSS・JavaScriptの学習
まず最初にHTML・CSSを学習します。
これを学習すれば、簡単なWebサイトを作成することができます。
JavaScriptは最初のうちはなんとなく、こんな言語があって、サイトに動きをつけられるんだな、くらいの感覚でさらっと流すことがオススメです。
自分でサイトを作っていく中でJavaScriptやjQueryを使いたくなってくるタイミングが必ずあるので、その時にもう一度学習し直すと理解が深まります。
Progate
まず最初にするのは、Progate(プロゲート)というサイトでの学習です。
月額1,000円ほど課金が必要ですが、毎日取り組んで1ヶ月で終わらせましょう！
こちらで学習するのは以下の3つです。
- HTML＆CSS
- JavaScript
- jQuery
わたしは新しいことをインプットするペースが他の人より遅いため、しっかり理解したくてこの3つを道場コースも含めて２周しました。
HTML・CSSはとにかく書いて慣れることが重要かと思います。
この後も同じことを繰り返しながら学んでいくだけなので１周で次に進んでも問題ないです。
が、1周だけだと実際忘れていたりよくわからないことも多いです。
わたし自身2周したことでしっかり理解して次に進めたので、コードに慣れるため無駄ではなかったとは思います。
しかし理解できていない部分があったとしても、2周以上やる必要はないです！
次に進みましょう。
Progateでは道場コースという上級者向けのコースがあるのですが、最初めちゃくちゃ難しいです。
わたしのオススメの進め方は
- 1周目→答えを見ながらコードを書く
- 2周目→なるべく自分で書く
完全にできなくても、スルーしてOKです。
ただ、やるだけでコーディングの雰囲気が掴めます。
ドットインストール
次にやるのがドットインストールというサイトで動画を見ながらの学習です。
こちらも月額1,000円ほどです。
こちらで学習するのは以下の2つです。
- ウェブサイトを作れるようになろう(HTML・CSS)
- JavaScriptではじめるお手軽プログラミング
Progateではスライドを見ながら自分のペースでゆっくり学べますが、ドットインストールの動画はかなり早くてついていくのに必死でした。
ドットインストールではエディタをインストールするところから始まるので、実際作業する時と同じ環境で学習できます。
内容はほとんどProgateと同じですが、忘れてしまったところの再確認や、Progateでは出て来なかった内容を学習します。
一冊ですべて身につくHTML＆CSSとWebデザイン入門講座
次にやるのは、こちらの書籍での学習です。
 |
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 |
素材をダウンロードして、1からウェブサイトを作っていくことができます。
ウェブサイトを作る流れが理解できるのでオススメです！
Udemy
Udemy
というサイトでこちらの講座を購入して学習しました。
途中からかなり難しくなってついていくのが大変でしたが、今まで学習してこなかったCSSを使ったアニメーションやSassの使い方など今まで知らなかったことを学習できました。
実際に使うような動きがたくさん出てくるので、一回学習しておいて、後々実際に必要になった時に見返して学習しました。
※ Udemyは頻繁にセールを開催していて、セール期間はかなり安く講座を購入できるので、買う時は必ずセールを狙って買いましょう！
Codestepで模写
次はCodestepというサイトで模写をします。
模写とは、実際あるサイトを真似してコーディングすることです。
こちらのサイトでは模写の練習課題とレイアウト構成、ソースコード、デモサイトも準備してくれています。
わたしはここでサイトを1つ選んで模写し、ソースコードを見て答え合わせをしました。
この辺りから、なんとなくウェブサイトの作り方がわかってきた感じがしました。
自分でウェブサイトを作って、サーバーにアップロード
Codestepにあったサイトを参考に、自分で画像を探してきてオリジナルサイトを1つ制作しました。
自分で作るのがなんだか楽しくて、ここら辺でプログラミング楽しい♡っていう気分になってました。
- わからないことがあったらわかるまで調べる
- 思ったスタイルにならなかったらCodestepのソースコードを見て真似する
- どうしてもわからなかったら諦めて1回寝る！
1回寝て、起きてから調べたらわかった…！なんてことが不思議と何回もありました。
根詰めすぎも良くないです。
オリジナルサイトが完成したら、ドメイン・サーバーの契約をしてインターネット上にアップロードしてみることがオススメです。
実際の案件でもサーバーにアップロードしたりすることがあるので、このタイミングで練習しました。
わたしは以下の2つのドメイン・サーバーを利用しています。
WordPressでオリジナルテーマの作成
WordPressとはコンテンツマネジメントシステム（CMS）というものです。
管理画面からブログ記事やお知らせを簡単に投稿したり、サイトをカスタマイズすることができるようになっています。
今まで学習したHTML・CSSにPHPという言語を使ってWordPressで使えるオリジナルテーマを作成していきます。
PHPの学習
Progate
- PHP Ⅰ
HTML・CSS・JavaScriptでもお世話になったProgateで、PHPもやります。
WordPressではそこまで複雑なPHPを理解していなくても大丈夫なので今回はPHP Ⅰ だけでOKです。無料のコースです。
Udemy
こちらの講座でさらにPHPを学びます。
WordPressに実装
Udemy
WordPressを学ぶのにオススメの講座はこちらです。
ローカル環境を使って構築していく方法、実際のサーバーに引っ越しする作業も学べます。
Udemyの講座と同じ、たにぐちまことさんという方が解説してくれている動画です。
YouTubeでの内容はUdemyよりざっくりとした感じです。
わたしはこちらのYouTubeで学んだ後にUdemyの講座も購入して学習しました。
どちらかだけでも良いかもしれません。Udemyの方が内容量が多く、オススメです！
時間があまり取れない方はUdemyのみで学習、お金をあまりかけたくないという方はYouTubeのみでも大丈夫かなと思います。
WordPress 仕事の現場でサッと使える！デザイン教科書
 |
［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ [ 中島真洋＝著／ロクナナワークショップ＝監修 ] 価格:3,058円 |
こちらの書籍を見ながら、自分で作ったオリジナルサイトをWordPress化します。
架空サイトとポートフォリオ制作
ここからは今まで学習してきた通りの手順で架空サイトを制作→WordPress化
いくつかサイトを制作したら自分のポートフォリオサイトを制作します。
架空サイトを制作
ポートフォリオに載せるために、架空サイトをいくつか制作します。
架空サイトではなく、模写やデザインカンプからのコーディングをしている方も多いみたいですが、わたしの場合は自分で早くサイトが作りたくて、模写やデザインカンプからのコーディングはせずにオリジナルサイトを作っていました。
どちらでも問題ないと思います！
架空サイトを作るときは、実際の案件だと思って取り組みました。
実際にクラウドソーシングのサイトを見て、案件の内容を確認し、作ってみたりしていました。
実際案件でどの程度のスキルが必要なのかがわかります。
この時に最初の頃あまりしっかり学習しなかったJavaScript・ jQueryも架空サイトで使用して、練習していきます。
- ハンバーガーメニュー
- カルーセル
- アコーディオン
- スムーススクロール
- フェードインアニメーション
このあたりの実装は、実際によく使うのでドットインストールで復習したり、架空サイトで使ったりしてできるようにしました。
- 実際の案件を参考にサイトの中身やターゲットを決める
- ワイヤーフレーム、デザインを作成
- コーディング
- レスポンシブ対応
- WordPress化
Photoshopの学習
自分でサイトを作っていくうちに、サイトのヘッダー画像の加工や、ワイヤーフレームやデザインカンプを制作したくなり、Photoshopを購入し、使い方を学習しました。
実際の案件で「デザイン・コーディング」のお仕事だと一度デザインを制作してお客様に提出する必要があるため、自分で架空サイトを作る時もPhotoshopで制作してからコーディングをしていました。
Webデザインのお勉強
架空サイトを作るときは、いいデザインのサイトをたくさん見て、真似しながら制作していきました。
こちらのサイトに載っているWebデザインはどれもすごく素敵で勉強になりました。
ポートフォリオ制作
ポートフォリオは自分の制作物を載せて、お客様に見てもらうためのサイトです。
営業に必要なので必ず作ります。
自分の自己紹介やお問い合わせフォームなども設置します。
営業開始
ポートフォリオサイトが完成したら、営業を開始します。
わたしは、クラウドワークス
を使って営業しました。
プロフィールを完成させる
プロフィールは、ワーカー情報・スキル・ポートフォリオ、できるだけすべての項目を埋めていきます。
本人確認やNDA（機密保持契約）も必ず登録して準備しておきます。
自分に合った条件の案件に応募
学習したてで不安もありますが、あまり高額すぎる案件（20万円、30万円〜など）でなければ、できそうな案件はあります。
わたしは1〜5万円の案件に「1万円でお任せいただけると嬉しいです！」といって応募しました。
クラウドワークスでは1つの案件に５０人以上も応募があることも珍しくないので、実務経験、実績がないとなかなか選んでもらえないこともありますが、最初のうちは正直に活動しはじめたばかりであることを伝え、その上で精一杯対応させていただく気持ちをお伝えすることが大切です。
私がクラウドワークスで初案件を頂いたお客様は「素晴らしい実績をお持ちの方から沢山の応募がありましたが、みいさんが新しい挑戦をしていることを知り、応援したいと思います」と言って、わたしに任せて下さいました。
案件をいただくのって、もちろんしっかりした提案文も大切だと思いますが、運もあります…。
（たぶん、わたしはかなり運が良い方です。キャバ嬢の頃からお客様運持ってました。）
いいお客様、いい案件に出会うまで、諦めず地道に素直に営業し続けるのみです！
ちなみにわたしがはじめてクラウドワークスで営業してみた結果はこんな感じでした。
営業期間：8月中旬〜9月中旬の1ヶ月間
営業件数：29件
受注件数：5件
9月1日に初案件獲得までの営業件数は18件でした。
まとめ
最後まで読んでいただき、ありがとうございました。
まだプログラミング学習を始めて3ヶ月ですが、独学で自分なりに模索してきたことを書きました。
内容は、これからも少しずつアップデートしていきたいと思っています。
少しでも、独学で学習している方、これから学習を始めようと思っている方の参考になれば幸いです。
これから学習を進めていく上で、新しく気づいた点や学習内容なども発信していければいいなと思います。
