こんにちは、Web制作ディレクションの副業で稼いでいる「W2M.designのおおつぼ わたる」です。

今回の記事では、３ヶ月間のプログラミング学習フルコミットで30万円を稼いだ、ぼくの勉強方法について、細かく解説をしていきたいと思います。

プログラミングを学習する上での、マインドセットと準備については、以下の記事をお読みください。

【稼ぐためのマインドセット】3ヶ月間のプログラミング独学で30万円

これから、プログラミング学習を始める方に向けた、準備体操のような記事となっております。

まずはじめに、

この記事を見ることであなたが得られる知識

✅ 稼ぐためのWeb制作において、何を学習すべきかが明確になる
✅ ぼくが購入してこれはよかったぞ！と実感した「有料教材」を知ることができる
✅ 超有益な、無料教材を知ることができる
✅ どの程度のスキルがあれば、営業をして良いのかが明確になる。不安がなくなる

この辺りを網羅した、記事になっています。

そして、長々読むのはめんどくさい。結論だけ教えてくれよ！という方向けに。

早速、結論をお伝えいたします。

お忙しい方向けに本記事のポイント4点です。ここだけ抑えましょう！

✅ 暗記は一切不要。学習手順に沿って、手を動かしてコツコツ勉強。ググる力を身につける
✅ 3万円程度の投資は必要。必要な教材やツールは即購入。だいたいは無料
✅ スクールは不要。MENTAを活用して、分からないを素早く解決
✅ プログラミングのほか、「Adobe Xd」「Webマーケティング」「ライティング」の基礎をおさえつつ、即営業

この、4つのポイントは常に忘れないようにしておきたいです。

ここだけを、しっかり守って3ヶ月間勉強にフルコミットすれば稼げるスキルは確実に得られます。実際に、学習開始前までは、HTMLという言葉すら知らなかった、ITリテラシーが超低めだった、ど素人のぼくが体感済みです。

ただ、このスキル感でも実務はこなせますが、仕事を獲るためには営業する努力が必要になります。

ただ、ご安心ください！ポイントをつかんで、地道に営業を続けることで成果につながるはずです。

この辺りは、次回記事にて詳細をまとめていきたいと思います。わりと、営業活動が重要になってくると思います。

まず、前提として、ぼくのブログでは、学習の目的はスキルを上げて「優秀なエンジニア」になることではなく、効率よく学習をして「稼ぐ」を目的としています。

バリバリのエンジニアの如く、コーディングスキルを身につけるのが目的ではありませんのでご了承ください。

しかし、学習過程では「稼ぐ」という本来の目的を忘れてしまい、スキルの向上にのみフォーカスしがちです。実際にぼくも、全くスキルの上がらない自分を思っては、日々落ち込んでいました。

しかし、今振り返っても、どうすれば「稼ぐ」ことができるのかを常に考えつつ、学習を積み上げる。そして、自分の行動のPDCAサイクルを高速で回し続けることが、何よりも重要です。

それでは、順番に4つのポイントの詳細を解説してきましょう！

暗記は一切不要。学習手順に沿って、手を動かしてコツコツ勉強。ググる力を身につける

学習の基本スタンスは、この一文にぎゅっと凝縮されていると思います。

そして、Web制作に携わるのであれば、下記学習項目の大枠がつかめれば、実務はこなせます。

このコンテンツは、前回に続き「はらブログ」の内容を踏襲しています。と言いますのも、ぼくの学習手順は、ほぼほぼ祐太さんのやり方を完コピしただけです。

といえど、部分的には自分のオリジナルのやり方も、当然取り入れています。

まずは、真似をしてそして、自分のやり方を構築していく。当然、学習を進める中では、毎日わからないことだらけ。独学なので、会社のように周りに聞ける人もいません。ただ、大体答えは、ググると出てくるものです。

限られた時間の中で、「車輪の再発明(*)」は不要ですので、自分に合った方法で効率よく学んでいきましょう！

※車輪の再発明：例えば馬車を作りたい場合、車輪というベーシックなパーツから設計をし直さなくても、すでにある車輪を使えば効率よく馬車を作ることができる

では、具体的な学習手順の解説です。

【環境構築】

① Visual Studio Code：コードを書く際に使用するツール
② Google Chrom＋拡張機能導入＋デベロッパーツール：コーディングやデザインを行う際の必須ツールです
③ GitHub：作成したサイトを、世界中に公開する
④ Local by Flywheel：WordPressのローカル環境構築。環境構築ツールは他にも多くありますが、一番簡単に使いこなせると思います

※ 環境構築に、お金はかかりません！一部ツールでは、課金が発生する場合もありますが、基本的には全て無料プランでことは足りちゃいます

【学習手順】

◆学習I：HTML
概要：WEBサイトの見た目の「骨組み」。プログラミング言語ではなく、マークアップ言語
学習教材：Progate・ドットインストール・iSara模写コーディング（学習Ⅲ終了後にチャレンジ）
費用：2,000円程度/月

◆学習II：CSS
概要：WEBサイトの見た目の装飾
学習教材：Progate・ドットインストール・iSara模写コーディング（学習Ⅲ終了後にチャレンジ）
費用：なし（学習Ⅰと同一教材）

◆学習Ⅲ：jQuery・JavaScript
概要：WEBサイトに動きをつける。jQueryはオワコンだという記事をよく見かけますが、とりあえずは気にせずでOKです！
学習教材：Progate・ドットインストール・YouTube・iSara模写コーディング
費用：なし（学習Ⅰ・IIと同一教材）

◆ここで模写コーディング

◆学習Ⅳ：Bootstrap
概要：レスポンシブデザインをサッと実現するフレームワーク。サイトそのものを作ったり、コンテンツの一部を実装できたりと、自由度が大きいです
学習教材：ドットインストール・YouTube
費用：なし（学習Ⅰ・II・Ⅲと同一教材）

◆学習Ⅴ：PHP
概要：WEBサイトのデータを担う。WordPressを学習する前におさえたい
学習教材：Progate・Kindle Unlimited・YouTube
費用：なし（ProgateもPHPの無料公開講座のみでOK）

◆学習Ⅵ：WordPress
概要：ブログやホームページを簡単に作成できるCMS
学習教材：YouTube・技術書３冊・有料テーマColorful
費用：￥14,000程度（￥6,000（技術書）＋￥8,000（Colorful））

さぁ、学習だ。

と言う前に、是非見ておいていただきたい動画が1つあります。

まずは、マナブさんのコチラの動画を見て自分の進む方向の再確認をしておきましょう。ぼくも、繰り返し繰り返し見た、超有料級の動画です！

学習に行き詰まった時の、心のコンパスになりますので、困ったときにはこの動画を見て、自分の進むべき方向を再度確認してみてください。

それでは、ここから、それぞれの学習過程で、ぼくが実際に活用した動画を紹介いたします。

3万円程度の投資は必要。必要な教材やツールは即購入。だいたいは無料

【環境構築：① Visual Studio Code】

全くの初心者の場合、環境構築が最初の関門です。ただ、そこまで難しい作業ではないので、動画の手順に従ってトライしましょう。実務でもよく使います。

こちらのチャンネルのたにぐちまことさん動画は、今後も多くお世話になりますので、チャンネル登録をめちゃくちゃオススメいたします！

たにぐちまことさんの YouTubeチャンネルへ

【環境構築：② Google Chrom＋拡張機能導入＋デベロッパーツール】

ここで紹介する2つの動画は、「拡張機能」の紹介動画と「デベロッパーツール」の説明動画です。

そもそも、Google ChromはGoogleでネット検索やメール確認を行うときなどに、使用するツールです。しかし、Google Chromは優れた機能がたくさんあります。使ってみると、こんな凄い機能があったんだ！しかも無料で！！！

と、驚くこと間違いなしのツールです。

【環境構築：③ GitHub】

GitHubは、学習開始直後には必要ないツールですが、自分で作成したコードを公開するときなどに、使用をしたりできます。多機能ツールとなりますが、この動画の手順に従って、基本がおさえられれば充分です！

【環境構築：④ Local by Flywheel】

WordPress開発を行う際の、必須ツールです。MAMPやXAMPPなど、類似ツールはたくさんありますが、いちばんのオススメは、Local by Flywheel。

理由は単純で「早い」「簡単」「無料」この3つに尽きます！

続いて、プログラミング学習のフローについて、言語ごとにご紹介いたします！

【学習I：HTML（重要度：★★★★★）】
【学習II：CSS（重要度：★★★★★）】

ドットインストール「はじめてのHTML」
ドットインストール「はじめてのCSS」
プロゲート「HTML＆CSS」

HTMLとCSSはセットで学習が良いです。理由としては、HTMLで作成したコードの、色付けやサイズ変更を行うのが、CSSとなるためです。まずは、「ドットインストール」「プロゲート」２つの教材を並行して、学んでいきましょう！

ぼくは、プロゲートで課題を進めつつ、ドットインストールの動画教材を使用して学んでいきました。同時学習が効果的だと思います。

どちらの教材も、ど素人のぼくにとっては、超絶難しい。。。

ただ、暗記する必要は全くないので、コツコツと続けましょう！手を動かしながらの学習がポイントです。

【◆学習Ⅲ：jQuery・JavaScript（重要度：★★☆☆☆）】

WEBサイトに動きをつけるための要素です。jQuery・JavaScriptと2つありますが、どちらも概要だけ押さえておけば問題ないです。関数や変数など、元々数字に弱かったぼくには、めちゃくちゃハードルが高かったです。

学習は、「Progate」「ドットインストール」に加え、たにぐちまことさんのYouTube動画で学びましょう。

コードも複雑怪奇なものが多いのですが、アニメーションを実装する際も、基本的にはググってコピペで、ある程度は乗り越えられるものです。

とはいえど、全く学ばず大枠が掴めていないと、実装のイメージがつかなくなってしまうので、ここは地道に進めていきましょう。

【◆学習Ⅰ・Ⅱ・Ⅲ：実践編 iSara模写コーディング】

学習Ⅰ・Ⅱ・Ⅲまで終わったら、ここで、iSara模写コーディングにとりかかりましょう。

やってみると、自分の無力さに愕然とします。マジで、雑魚だって。。。

今まで、VSコードを使って、ゼロからコーディングをすることなんかなかったので、VSコードを立ち上げ、真っ暗な画面が出てきた瞬間に、どうしよう、、、、と言う気持ちになります。笑

ただ、iSaraに関しては、模写コーディングの王道ということもあり、ネット上に多くの情報が転がっています。

コツコツと続けていけば、２週間後にはレスポンシブ対応含め、意外とできているものです！

ちなみに、ぼくの模写コーディング実績は、コチラです！

iSara模写コーディング実績

チャレンジして、どうしてもわからなかったら、是非ご連絡ください。

超絶コードは汚いのですが、一応崩れることなく実装できていますので、コードシェアいたします！

【◆学習Ⅳ：Bootstrap（重要度：★★☆☆☆）】

レスポンシブデザインを簡単に実現するフレームワークです。こちらは、たにぐちまことさんに加え、しもむらともきさんのYouTube動画で学びます。

CSSを理解し、レスポンシブデザインを勉強した後だと、そのシンプルさにびっくりです！ただ、実務ではWebサイトの動作が遅くなったりすることも多いらしく、あまり使わないのかなぁ。という印象を受けています。

【◆学習Ⅳ：PHP（重要度：★★★★☆）】

PHPでも、jQuery・JavaScriptのように理解に苦しむ、謎の記号が出てきます。

<?php
$fp = fopen(“sample.txt”, “w”);
fwrite($fp, “==== ==== ==== ==== ====\n”);
fwrite($fp, “= ファイルへの書き込みテスト\n”);
fwrite($fp, “==== ==== ==== ==== ====\n”);
fclose($fp);
?>

コレなんすか？？みたいな。。。

勉強方法としては、YouTube動画＋Progate（無料コンテンツのみでOK）＋Kindle本（PHP「直す力」養成ドリル）が効果的だったかな。と思っています。

ただ、あくまでも目的は「稼ぐ」です。PHPの全体像を掴むことを目標に、手を動かして学習を進めていきましょう。

【◆学習Ⅵ：WordPress（重要度：★★★★★）】

いよいよ、WordPressというCMSを使用してWEBサイトを作成する流れの学習です。ここは超重要項目ですので、時間をかけてでも、しっかりとおさえたいところです。

Step1：マナブさんのYouTube動画「WordPressを使ったブログの始め方」

ここでも、マナブさんの動画で学びましょう。レンタルサーバの設置、ドメインの取得、ワードプレスとの紐付けという部分まで丁寧な解説があります。

SEO対策を考慮した、導入すべきプラグインも紹介してくれています。

Step2：金子晃之さんのYouTube動画「2020年Wordpress初心者使い方・始め方【ホームページ・ブログ作成】」

金子さんの動画も、マナブさん動画同様に、サーバー、ドメインの紐付けから、cocoonテーマを使った、カスタマイズをレクチャーしています。

そして、非常にわかりやすい！！2時間30分ほどの超大作ですので、休日などまとまった時間が取れるときの学習が、効果的です。

Step3：技術書を2冊活用してのWordPress学習
WordPressレッスンブック

WordPressユーザーのためのPHP入門 はじめから、ていねいに。

この２冊を使ってみましょう！順番はどちらからでも大丈夫です。

すでに、２本の動画で、WordPressの使い方の大枠はつかんでいますが、この２冊の技術書を使うことで、WordPressのテーマ開発を学ぶことができます。

さらには、WordPressとPHPの関係性なども知ることができ、よりあなたの理解が深まるはずです。

はい、プログラミングの学習はこれで、ひとまずは十分です！

完璧ではないけれど、大枠はバッチリおさえられていますので、実戦でも十分に通用するレベルです。

学習に費やせる時間によりますが、平日6時間＋休日10時間の学習時間が取れるのであれば、3ヶ月間で到達できます。

しかし、学習を進めると気がつくことがあります。それは、毎日毎日、驚くほどにわからないことが多い。。。

ググってわかることも多いですが、調べても解決しないことも多かったりします。

そこで、効率よく学習を進める上で、オススメなサービスをご紹介です！

スクールは不要。MENTAを活用して、分からないを素早く解決

MENTAって、ご存知ですか？

一言で説明すると、オンラインのスキルシェアサービスです。月額のサブスクで、月額数千円からプログラミングなどメンターをつけて自分の好きな場所、時間で学べるコンテンツです。

ぼくは、このプランを2ヶ月間（￥10,000×2ヶ月間）利用しました。メンターも変えました。

学習開始直後の、はじめの1ヶ月は、何が分からないのかもわからない状態なので不要です。

ただ、2ヶ月目を過ぎると、何となくプログラミングの流れがわかってきて、何がわからないのかがわかり始めます。

そのような時に、良いのがMENTAサービスです。

2ヶ月間、MENTAを利用したぼくが感じた、「メリット」と「デメリット」

メリット
✅ 低価格で自分の目的にあった、メンターを選ぶことができる
✅ chatworkやslackをつかって、好きな時に好きな場所で学ぶことができる
✅ 数時間かけてわからなかったことが、あっという間に解決できる
✅ 質問力があがる

デメリット
✅ メンターによってクオリティがまちまち

このような、感じでしょうか。圧倒的にメリットの方が多く、ぼくからするとオススメしない理由があまり見当たりません。

ただ、唯一のデメリットにも記したように、メンターによって、クオリティーはまちまちです。

ぼくの場合は、1ヶ月目のメンターはちょっとイマイチ。だったのですが、2ヶ月目のメンターは、レスポンスも早く教え方も上手、最高！！の一言に尽きます。

ご本人の承諾も得られましたので、ぼくが2ヶ月目にお世話になった久保さんをご紹介しておきます。久保さんに書かれた口コミを見ても、非常に評価の高い方だということがわかります！

あなたにも、久保さんをオススメです！笑

実は、久保さんとはMENTA契約終了後も、意気投合して、新規ビジネス創出を一緒にやっていたりします。

実は、ここで投資したお金で、かけがいのない財産を得たのかもしれません！

さあ、ここまで来れば、実務をこなせるだけの、９割のチカラは身につけているはずです。

とはいえど、プログラミングスキルだけだと、何か物足りない。

そこで学んでおきたいのが、コチラ。

「Adobe Xd」「Webマーケティング」「ライティング」の基礎をおさえつつ、即営業

① Adobe Xd

まずは、PhotoshopやIllustratorでお馴染みの、Adobeのツール。デザインカンプもXdで支給されたり、デザイン作成時では共同編集などが行うことができる、便利ツールです。

アップデートが、2ヶ月に1回程度行われることもあり、ちょこちょこ触っていないと、アップデートについていけなくなってしまうので、注意が必要です。共同編集はできませんが、データ閲覧や作成は、無料会員プランでご利用いただけます。

② Webマーケティング

正直、Webマーケティング領域は対象範囲が広く、サクッと習得は非常に困難です。しかしなら、営業活動やWeb制作を行う上では、必須のスキルになります。

また、Webメディア構築では、SEOを考慮したサイト設計が必要です。この分野の学習については、ぼくも継続的に学習中ですが、SEOに関しての超有益動画をシェアいたします。

③ ライティング

ライティングに関しても、ポイントは抑えたいです。

Amazon Unlimitedでの読書や、YouTube教材を通しても、学ぶことができるため、あなたにとって、最適な方法での学習が一番良いかと思います。

おさえておきたい項目だけをピックアップしましたが、詳細をお伝えしていくと、結構長めの解説になってしまいそうです。

ただ、この3項目は営業や実務をこなす中で、同時並行でのスキル習得でも、問題ないのかなぁというのがぼくの考えです。

ニーズがありそうな分野ですので、次回記事冒頭で詳細をご紹介したいと思います！

今回も、だいぶ長い記事にしてしまい、すいません。笑

本記事のまとめ

✅ 暗記は一切不要。学習手順に沿って、手を動かしてコツコツ勉強。ググる力を身につける
✅ 3万円程度の投資は必要。必要な教材やツールは即購入。だいたいは無料
✅ スクールは不要。MENTAを活用して、分からないを素早く解決
✅ プログラミングのほか、「Adobe Xd」「Webマーケティング」「ライティング」の基礎まで抑えたら、即営業

ここまで来れば、あとは営業に出るだけです！

今のあなたが見える景色は、3ヶ月前とは全く別のものになっているはずです。

次回ブログでは、
・営業過程でおさえたいていおきたい、プログラミング以外の学習
・3週間の営業で3件受注30万円を売り上げた理由

の詳細をお伝えしていこうと思います。

具体的には、
・どこでどうやって営業をしてきたのか
・初心者が、目立つためにはどうすれば良いのか
・何を目標に営業をしているのか

この部分にフォーカスして解説をして行きます。

今回も、お伝えしたいことが非常に多く、盛りだくさんな内容になってしまいました。

本記事も、少しずつブラッシュアップして行きます。

もし、「案件が取れない・稼げない・提案書の書き方がわからない」などでお困りでしたら、TwitterからDMをください。
↓ お気軽にフォローしてくださいね！
Tweets by OWTR8

提案書の書き方や、参考になる企画書など、シェアいたします。

本記事が少しでもお役に立ちましたら、Twitterなどで拡散いただけると、すごく嬉しいです！