兼業＋育児をしながら副業でweb制作学習8ヶ月で10万円稼ぐまでのロードマップ
はじめまして！
副業でwebエンジニアとして活動をしている「しょうへい」と申します。
という悩みを持っている方向けに、完全web制作未経験の私が、兼業＋育児をしながら学習を始めて約8ヶ月で10万円稼げるようになった学習方法を伝授したいと思います。
特に、兼業として収入の柱を作りたい！方や、育児を頑張っているパパさん、ママさん向けに発信していきます。
学習前からすると、こんな記事を書けるようになったのはかなり嬉しいです！
また、学習前の過去の自分に向けて、「これを読んどけ！」という気持ちで書き綴ります。
目次
結論、未経験＋兼業＋育児をしつつ10万円稼ぐことは可能！
当時の私のスキルは「エクセルやワード、パワポの基本的な知識はある」ものの、
「プログラミング？ おいしいの？」
「絶対難しそう。。」
と思うほど、プログラミング未経験でした。
実は学生時代、プログラミングの授業があったため基本的な部分は学習しました。（ほぼ開発側の領域）
ただ、英語をカタカタ打つことが苦痛で、何を書いているのか全然理解できず、一度挫折した経験があります。
みなさんも苦手なことはやりたくないのが普通だと思います。
ただ、社会人となり改めてプログラミングに触れる機会がありました。
私も知らない領域があって、「これは自分にもできるかも！」と思い始めました。
学習を進めていくにつれ、勉強をすることが楽しくなります。
楽しくなれば学習を継続できて、いつの間にかスキルが身についている状態になります。
スキルを活かし、今ではお仕事をいただけるまでに成長できたと思います。
↓参考までに初めて報酬が自分の口座に入った時のメール画像です。
こうやってみると感慨深いです。。
初案件でこの金額は運が良かった部分があると思います。
何を伝えたいかというと、web制作の学習を始めてから行動するようになり、自信がついたと思います。
まだまだスキル不足がありますが、私の学習方法のロードマップをご覧いただき、一人でも多くの方の悩みを解決できるように綴ります。
ぜひ、最後までご覧いただけると幸いです。
事前準備（プログラミング学習に用意するもの）
プログラミング学習を始めるにあたって必要なものは、結論下記の4つです。
・ノートパソコン
・「時間がない」ではなく「時間はある」
・覚えるよりもググって自分で解決するマインドを持つ
・お金をかけずに稼ぐことはほぼ不可能です。
学習環境を整える
まず、なにがともあれノートパソコンは必須です。
私は「MacBook Air 13インチ」を購入しました。（厳密には運が良く、結婚のお祝いで妻のお母さんにいただきました。。）
ちょっとお高めですが、機能が豊富なのと薄いので持ち運びにも便利です。
Macでないとダメなの？
と思うかもしれませんが、普段使用しているパソコンで十分だと思います。
周りの人は、最初は古いパソコンを使用していたけど、稼げるようになってからMacに変えたという人が多いです。
初めのうちは「しっかりと動くパソコン」があればOKです。
学習当初は、こたつテーブルに座って作業をしていました。
長時間作業をすると、腰が痛くなり姿勢も悪くなります。
そこでおすすめなのが、「折りたたみテーブル」です。
高さ調整ができますし角度も変えることができ、自分の姿勢に合った作業が可能です。
テレワークが当たり前の世の中で、これ一つあれば作業効率アップが見込めます。
下記記事で紹介していますので、参考までに。
【テレワークに最適】おすすめの折りたたみテーブルはこれ！
また、長時間パソコンを打つ作業になるためかなり目が疲れます。
そのため、「ブルーライトカットメガネ」をおすすめします。
デザインにこだわりがなければ、安いものでもOKです。
私の場合、サイトでの評価が高かったものを購入しました。
現在も愛用中で、これをつけることで、長時間パソコンをいじっても目の疲れが軽減できている気がします。
こちらも【テレワークに最適】おすすめの折りたたみテーブルはこれ！でおすすめしているのでご参考までに。
学習マインドを準備しよう！
時間がない人は嘘つきです
偏見ではなく、あくまで私の経験上の題目です。
「仕事が忙しいから時間がない」
「子供がいて学習する時間がない」
「Youtubeを見たいから時間がない」
と言う人をよく耳にします。
結論、時間はあります！
「何言ってるの？」と言われるかもしれません。
実際、私も学習する前はそう思っていました。
当時、朝早く満員電車に揺られて、毎日1時間半かけて出社し、夜は遅く帰ってくる日々を過ごしていました。
そうなると、時間がないことになり、何もできない状態になっていました。
ただ、web制作学習を始めてから、意外と時間はあることに気づきました。
↓参考までに平日の私の1日のスケジュールです。
1つ目が勉強前、2つ目が現状です。
見ていただきたいのは、赤色の勉強時間の変化です。
勉強前は休憩（＝自由時間）がほとんどですが、その時間を勉強に置き換えました。
また、細かくは書いていないですが、昼休憩などの隙間時間も活用して学習するようにしていました。
本業や睡眠時間、育児の時間など、どうしても変えられない時間があると思います。
それ以外の変えられる時間を見つけて、それを学習に費やせられれば結果、時間があることになります。
みなさんも日のスケジュールを「見える化」し、変えられる時間を見つけてみてください。
これをするだけで、考え方が180度変わります。
ググる癖をつけよう
「覚えるよりもググって自分で解決するマインドを持つ」ことは非常に大切です。
なぜなら、過去の私にも言いたいですが、覚えることに執着すると自分の目指すゴールが遠回りになります。
最初のうちは、プログラミングって何？という状態だと思うので、もちろん覚えることも多いと思います。
ただ、覚えることには限界がありますし、何より時間が無駄です。
ググって自分で解決する力を身につけたほうが、あなたの目指すゴールに最短で辿り着きます。
インターネット上には、調べれば答えがあることが多いです。
その答えに自らの力で辿り着くことができれば、自己解決力が身につき、自信になり達成感が身に付きます。
私も実際にお仕事をする上で、わからないことはたくさん出てきます。
というか、わからないことだらけです。
わからないことはその都度調べ、なんとか自己解決するようにしています。
その癖づけが、今後のあなたのためにもなりますし、実際にお仕事をやっていく上でも重要になります。
お金をかけずに稼ぐのはほぼ不可能です。
結論、「ゼロ」円で稼ぐことはほぼ不可能だと思います。
無料で稼げると謳っているのは、100%詐欺です。
実際に私が稼げるようになるまでかかった費用を計算すると・・
・折りたたみテーブル：7,000円
・ブルーライトカットメガネ：1,000円
・Progate、ドットインストール：月1000円×各1ヶ月＝2,000円
・Udemy講座：3,000円
・スクール代：200,000円
・書籍：トータル10,000円
・その他諸々の費用:50,000円
→結論、25万円ほどかかりました。。
高いスクールだと100万円とかするようなので、かなり抑えられたのでは？と思っています。
学習を始めた当初、実は借金があり、親から借りて勉強していました。
（今も多少残っていますが。。）
お金がない中でもなんとか捻出して自己投資に当てられるかが重要です。
特に、学生の方や未経験となるとさらに厳しくなると思います。
私は、稼げるようになるまではしっかり自己投資をし、稼いで元を取る！という考え方を持っていました。
実際に仕事をしていると分かりますが、１つの案件30万〜50万、100万のものもあります。
1サイト30万円のものを納品できれば、今まで学習に使ったお金以上の収入が得られます。
後はいかに継続的に仕事をいただけるかになります。
継続的に収入を得るためにも、初案件獲得という大きな壁があります。
その大きな壁を破るためにも、「自己投資」は必須です。
長文で厳しい言葉になりましたが、お伝えした考え方を念頭に置いて、これからのロードマップを進んでみてください。
兼業＋育児をしながら10万円稼ぐためのステップ
【STEP1】プログラミングを「知ろう！」
いよいよ各ステップごとに説明していきます。
今のみなさんは「プログラミングって何？」状態だと思います。
そこで、まずはプログラミングを知ることから始めましょう。
おすすめの学習方法はこちらです。
①Progate（プロゲート）
②ドットインストール
「Progate」はかなりおすすめです
個人的に「Prpgate」＝「ゲーム感覚」で学習を進めていました。
個性的なキャラクターがいて、レッスンを進めていくとレベルアップできます。
レベルアップが楽しくなり、ついつい夢中で進められます。
また、スマホアプリがあるため、通勤時間や休憩時間などでも学習ができます。
「ドットインストール」は動画で説明があり、実際に手を動かしながら理解を深めることができます。
個人的には「Progate」でゲーム感覚でプログラミングの概要をつかみ、「ドットインストール」で手を動かしながらより理解を深める流れがおすすめです。
ここでは、「HTML」 「CSS」 「JavaScript」 「JQuery」 「PHP」を学習できればOKです！
変な英語が出てきて、「？」が頭に浮かんでいる人が多いと思いますので簡単に説明します。
人の顔スタンプを例にすると、
①HTML・・・顔のパーツを作る（目、鼻、口など）
②CSS・・・顔に色をつける
③Javascript,JQuery・・・顔に表情をつける（笑う、泣く、怒るなど）
④PHP・・・顔の表情をその時々で変化させる
個人的には分かりやすく説明できたと思います。（PHPが説明しにくいですが・・）
それぞれの言語でできることが違い、それを組み合わせることによってサイトが完成します。
完全未経験の場合、かなりとっつきにくいので、私自身もかなり苦労しました。。
⚠︎ここでやってはいけないこと
・コードを書き写す ・何周も同じ演習をする
→結論、時間の無駄です。
私もノートにコードを書き写して覚えることをしていましたが、そのノートを開いたことはほぼ無いです。
「100%覚える」ではなく「80%理解する」ことを意識しましょう！
→定着はしますが、これも時間の無駄です。
１周してみてわからなかった部分だけやってみる程度がおすすめです！
コードを管理するならNotion
コードをいちいち書くのって大変ですよね？
そんな時に使うのが「Notion」です。
タスク管理、メモ管理機能など様々ありますが、実案件でもかなり重宝しています。
例えば、コードをnotionにメモをして、使う時にコピペするだけで済むのでかなり効率化が図れます。
また、スマホアプリがあり、同期ができるためパソコンで追加したものをスマホアプリでも使用することができます。
個人的には使用必須級だと思います。
コーディングオススメ書籍
これまでご紹介した「Progate」と「ドットインストール」の他におすすめの書籍があります！
結論、書籍で学ぶのであればこれ１冊で十分です。
書籍通り進めれば、かなり本格的なデモサイトが作成できますよ。
動画講座を活用しよう！
Progateも１周するのに結構時間がかかります。
書籍も隅から隅まで学ぼうとすると飽きてしまい、本を閉じてしまうことがないでしょうか。
（私がそうだったからです）
そこで、より最短で必要なスキルを集中的に何度も学べるものがあります。
それが、動画講座です。
その中でも「Udemy」がおすすめです。
講座費用は相場2万円程と高いですが、ちょいちょいセールをやっていて運がよければ約80%OFFで購入可能です。
↓私が実際に受講した講座がこれです。
初心者には「たにぐちまこと」さんの講座が無難だと思います。
HTML/CSS/Javascriptの基礎を、まんべんなく学習できるのでプログラミングを「知る」には最適です。
【STEP2】真似をしてサイトを作成してみよう！
ここまで、プログラミングを「知る」ことをメインにしてきましたが、ここからは実践になります。
今まで学んだことを活かして、実際に自分でサイトを作ってみましょう。
実案件ではデザインデータをもらい、それをもとにコーディング作業が発生するため、使い慣れておく必要があります。
とは言ってもどうすればいいの？となると思いますので、「Codestep」というサイトを使用し、「模写」をしてみましょう。
「模写」とは、サンプルとしてあるサイトを真似して作成することです。
ここで言う模写は、汚いコードでもいいので「最後までやり切る」ことを頭に入れてください。
わからなくなったら答えを見てもOKです。
最後まで自分の力で作り切ることで、サイトを作る大変さが実感できるはずです。
個人的には、３サイトほど作成できたら次に進むが良いと思います。
３サイトほど作れれば、サイトの構成を理解でき、どのコードを使えばいいのかというコーディング力も身に付きます。
この検証ツール（デベロッパーツール）は実務でも必須です。
詳細な使用方法はサルワカさんの記事を参考にしてみてください。
【STEP3】Wordpressを学ぼう！
結論、STEP2まで学習できれば、案件獲得は可能だと思います。
単価的に5千円〜3万円ほどの仕事の受注になると思います。
ただ、コーディングスキルだけでは単価が低いです。
案件数が増えると、収拾がつかなくなることもあります。
ここから学ぶ「Wordpress」を利用すれば、単価10万〜30万円ほどの案件獲得も可能です。
より多くの仕事の幅ができますし、一気に高額案件の獲得も可能になります。
個人的には学習必須です。
個人的な解釈としては、「コーディングスキルがない人でもでサイトが作れるシステム」と考えています。
例えば、
と悩んでいるお客様がいたとします。
そんなプログラミングの知識がない人でも、簡単にブログ記事を作成したり、画像を差し替えたりできるようにしたものがWordpressと思ってください。
自分のパソコンでサイト構築できるようにする
後ほどご紹介しますが、Wordpressでサイト構築をするためには、「サーバー」と「ドメイン」が必要になります。
このサーバーとドメインを取得することでサイトが公開でき、誰でもサイトを見れる状態になります。
サーバー契約には費用がかかるため、最初はローカル（自分のパソコンでのみサイトが見れる状態）でサイト制作をしておく必要があります。
その時に使用するのが「Local by Flywheel」です。
インストール方法は、バズ部さんの記事を参考にしてみてください。
ローカルでサイト制作した後、本番環境でサイトを公開する手順になります。
サーバー？ ドメイン？
先ほど出てきましたが、サーバーとドメインについて軽く説明します。
ここの知識も持っておく必要があります。
なぜなら、初案件が既存のサイトを作り替える（リニューアル案件）でした。
このサーバー周りで苦労し、お客様に迷惑をかけてしまった経験があります。
かなり難しく、理解しづらい部分がありますが、実案件でも使用するため今のうちに学習しましょう。
簡単に説明すると、「サーバー」=「家を建てるための土地」、「ドメイン」=「家の住所」のようなものです。
詳細はクニトミさんのブログを参考にしてください。
ブログ運用をしている私も「エックスサーバー」を使用しています。
なぜなら、Wordpressの立ち上げも簡単にでき、実務でも使用頻度として高いためです。
実際にサーバーを契約し、ブログ運用などで触ってみて知識を増やすのもありだと思います。
学習教材の紹介
ここから、実際の学習方法について紹介します。
まずは書籍の紹介です。
後に紹介するYoutubeと書籍はどちらが先でもOKです。
私は下記2冊を紹介します。
多くの方が紹介していたので私も使用しました。
上記２冊は、初心者にも分かりやすいので、とっつきやすい教本になっていると思います。
教本を進めると、自身のポートフォリオとしても掲載可能ですのでおすすめです！
次は「Youtube」での学習です。
検索すると多くの動画が出てきますが、私は「アキユキ」さんの動画が一番分かりやすかったです。
7回ほど動画があり、wordpress基礎〜応用まで一貫して学ぶことができます。
次の教材は「Udemy」です。
先ほども登場した「たにぐちまこと」さんの教材です。
こちらは、かなり実践的な内容になっており、「オリジナルテーマ」と呼ばれる1からコーディングをしてサイトを制作するものになっています。
1から制作するため、工数と時間がかかりますが、オリジナル性かつ自由度の高いサイトが作成できます。
内容的には、WordPressの構造から使用方法まで細かく学ぶことができます。
WordPressをより深くまで理解し、実案件でも活用できるようにしましょう。
【STEP4】SnowMonkeyを学ぼう！
ここまでHTML、CSS、JavaScript、PHP、Wordpressについて学習してきました。
この後、実際にご自身でサイトを作ってみよう！と勧める方が多いです。
ただ、私はさらに１ステップ進んだ学習をオススメします。
※あくまでオススメですので、オリジナルテーマを作成できる方は飛ばしていただいてもOKです。
それが、私が初案件獲得時も使用した「SnowMonkey」です。
これは、Wordpressの有料テーマとして使用されていて、初心者におすすめのテーマです。
個人的には学習必須級のものになります。
テーマを組み込むことでデザイン性が豊富となり、自分でカスタマイズができるのでオリジナル性のあるサイト制作が可能になります。
今注目されている「ローコード」と言われ、コーディングよりデザイン重視のテーマになっています。
デザイン：コーディング＝6：4くらいの比率になると思います。
ローコードですがHTML、CSSの知識は必須です。
コーディングが少し苦手な方でも、SnowMonkeyが使えれば実案件獲得も可能です。
有料ですが試用版があるため、一度触ってみて使いやすい！となったら購入することをオススメします。
一度購入すれば追加費用もないため、実案件で使用する際もお客様の方でテーマを購入する必要がなくなります。
SnowMonkeyを学ぶには
SnowMonkeyを学ぶには、下記お二方の記事さえ学習すればOKです！
まずは、「じゃんきー」さんです。
スノモン（=SnowMonkeyの略）界では有名な方だと思います。
初心者向けに説明もわかりやすく、動画をもとに進めれば本格的なデモサイトを作成することができます。
２人目が「かん」さんです。
初心者の方に加えて、スノモンの実案件を獲得したい方や、スノモンの知識をより深めたい方にオススメです。
ローカルで作成したサイトを、本番環境にアップする手順もわかりやすく説明してくれています。
お二方ともに、デモサイトをご自身のポートフォリオ（実績）として掲載OKです。
【STEP5】サイトを作成しよう！
ここまで来れば、コーディング、WordPress、SnowMonkeyのスキルが身に付いている状態です。
ここからは「営業活動」を視野に入れる必要があります。
営業をする際は「ポートフォリオ」というものが必須です。
会社に入る際やアルバイトをする際の履歴書のようなものです。
「私はこんな人です！」
「私はこんなスキルがあります！」
とアピールをする材料になります。
そのポートフォリオで一番大事なのが「制作実績」です。
クライアント側は、目に見える制作実績を持っていて、その制作実績をもとに会社とあなたがマッチングするかを見ています。
ですので、今まで学んだスキルを活かしたサイトを３つほど作成しましょう。
とはいえ、既に学習してきた中で、デザインカンプをもとに模写をしたものや、スノモンで作成したデモサイトがあるのでそれを実績としてもOKです。
【STEP6】ポートフォリオを作成しよう！
制作実績を作れたら、ポートフォリオ作成をしていきます。
作成する上で「これだけ見とけ！」と言う動画を紹介します。
それが「はら」さんです。
この動画を参考に自身のポートフォリオを作成してみましょう。
無料でポートフォリオが作成できるものがありますが、個人的にはサイト構成、コーディング、サイト公開までゼロからあなた自身で作成したポートフォリオにすることをオススメします。
制作会社はテンプレを使ったのか、ゼロから作成したものなのかをポートフォリオを見ればすぐ判断できてしまいます。
その会社に多数の応募があった場合、その時点で選考外になってしまいます。
オリジナル性を出し、差別化を図るためにも白紙からポートフォリオを作成しましょう。
【STEP7】営業開始！
お疲れ様でした！
ここまできたら、いよいよ営業活動開始となります。
ここでは、簡単に営業先を紹介しますが、詳細はまた別のブログで記事にしようと思います。
営業先として紹介するのが
この３つくらいかなと思います。
初心者はほぼほぼ「クラウドソーシング」になると思います。
クラウドソーシングとは、「仕事をして欲しい！」企業や個人と、「仕事をしたい！」あなたをインターネットを介して仕事の発注・受注取引ができるサービスです。
私も主にランサーズ、クラウドワークスを利用しており、「ランサーズ」で初案件獲得しています。
案件によっては継続案件につながれる場合があるので、初心者の方はこの3つを登録しておきましょう。
web制作会社への営業もオススメです。
ただ、制作会社となるとweb制作を本業としている人が多いため、応用的なスキルが問われると思います。
ここは、私自身もまだできていないので、私が実践した時に記事にしようと思います。
ここでweb制作会社営業を考えている方に、ぜひ紹介したい方がいます！
それが「ちい」さんです。
１児のママさんで、未経験から学習を始め、コーダーに転職＆副業で案件獲得している方です。
特に制作会社と繋がりつつ、案件を獲得している方なので、web制作会社営業を考えている人にオススメです。
ブログにあるロードマップは、同じ境遇のママさんに加えて１児のパパである私も共感・参考になると思います。
ちいさんのブログは私もいつも参考にさせていただいています！
３つ目のTwitterに関して、私も実際Twitter経由で仕事をいただけた経験があります。
#コーダー募集や#デザイナー募集などで検索をかけると、不定期ですが依頼がある場合があります。
案外、穴場なのでTwitter経由での案件受注もありかなと思います。
また、SNS運用などを考えている人に、Twitterはオススメです。
情報のインプットとアウトプットとして使用可能です。
私は、営業開始前からインプット、アウトプットの場として利用しています。
プラスαで学びたい方にオススメ！
ここからは、よりweb制作を深く学びたい！方向けに、プラスαでご紹介します。
ノーコード、ローコードを学ぶ！
という方におすすめなのが「ローコード」「ノーコード」です。
ローコードは「SnowMonekyを学ぼう！」でも説明しましたが、デザイン:コーディング＝6:4の比率のものです。
先ほど登場した「SnowMonkey」はローコードに分類されます。
ノーコードは、デザイン:コーディング＝10:0の比率になります。
コードを書かずにサイト制作が可能です。
私も実際に使用しているのが、「Wix」「STUDIO」「Elementor」です。
直感的にページの作成が可能で、オリジナル性のあるサイト制作が可能です。
実案件では、特に時間効率化やコストを抑えたいお客様向けにオススメです。
気になる方は公式サイトをチェックしてみてください。
スクール、コミュニティに入る！
私も実際に入会しているスクール、コミュニティがあります。
それが、「CODOLIFE」です。
キャッチコピーは「アホほど行動する場所」です。
はっきり言ってこのコミュニティはチョーオススメです！
実際に私も入会し、入会2週間で初案件獲得しています。
このコミュニティを運営しているのが、先ほども登場した「はら」さんで、行動支援のコミュニティになります。
何がいいのか？と言われた時に、即答できるのが「行動するための道具が豊富で、チームで行動できる」ことだと思います。
ほとんどの人が1人孤独に学習すると思います。
どうしても寂しさがあったり、サイトをググっても答えがない時があると思います。
CODOLIFEはweb制作界隈の様々なスキルを持った方と交流ができます。
コーディングならこの人！
デザインならこの人！
営業ならこの人！
など、各分野のスペシャリストの方がいるため、web制作全般の悩み事はほぼ解決可能です。
再度言いますが、チョーオススメです！
年明け1/20頃に新たに「6期」の募集があるようです。
1年のスタートをCODOLIFEで激変させてみてはいかがでしょうか？
codolifeに入会した私の感想を別記事にしていますので、併せてご覧になってみてください。
【実体験】codolifeに参加すべきメリットとは？（兼業+1児のパパが語る）
まとめ
ここまで私の経験をもとに文章に綴ってきました。
ご覧いただきありがとうございました。
記事の内容は、その都度グレードアップを考えています。
感想や不明点があったら是非TwitterでDMください！
相談にも乗ります！
最後になりますが、こんな私でもweb制作を学習して、収入を得ることができました。
私にできたのだから、あなたも100%実現可能です。
覚悟を決めて、継続して行動し続ければ必ず報われます。
このロードマップを参考に、あなたの悩みが解決でき、少しでも前に進むことができれば幸いです。