- Web制作を独学で勉強して月に5万円くらい稼ぎたいけど、どうすればいのか分からない。
- この通りに勉強すれば、月5万円のWeb制作の案件が受注できる学習マップが欲しい！
このような方に向け、今回の記事では、僕がWeb制作の案件を受注できるまでに学習したことを学習マップにして、0円で公開したいと思います。
プログラミング学習歴は1年、フリーランスエンジニアとして独立し2ヶ月目で時給5000円を突破しました！
この記事では、完全未経験（プログラミングが何か知らない人）〜Web制作で月5万円稼げるノウハウが詰まっているコンテンツなので、この通りにやればパソコン音痴の人でも、文系の人でも問題なく達成できます。
✔︎概要
- 目標：Web制作で月5万円を稼ぐ
- 対象者：プログラミング未経験（パソコン音痴でも可能）
- 期間：130時間（1日2時間 勉強したとして約2ヶ月）
- 費用：基本0円
✔︎実際にこちらの記事をもとに学習した人の声
本日初めてクラウドワークスで案件を頂きました！！
— たーさん@Web制作に人生救われた男 (@ta3_web) October 15, 2020
こんな丸顔に任せていただけるなんてありがたすぎます😂
もうー頑張っちゃいます！！
そして参考にさせていただいた記事がこちら。@haraponta1496さんhttps://t.co/3JYdl5Aosp@Hiko_Proさんhttps://t.co/taqOeNDgg1
お二人にも感謝です🙏
@Hiko_Pro さんの学習ロードマップの通りに進めています👩🏻💻✨
— こましお🐱ゆる自由人 (@machiii0303) September 24, 2020
このロードマップの通りに進めたら挫折せずに続けられており、感謝です🥺
応援嬉しいです、ありがとうございます🥺✨✨✨
少しコードいじって
— ゆうき (@genzo39) April 11, 2020
あとはフリーランスで活躍してる方のブログやインターネットのコードを見て参考にさせてもらってました。
特に@Hiko_Pro さんのブログはすごくわかりやすくて独学の自分には向いててより意識が増しました！
また地道に頑張ります#プログラミング初心者#目指せノマド#先は長い
3か月で月5万円稼ぐことは残念ながらできませんでしたが、プログラミング独学でついに案件受注しました！
— いちろー＠副業web制作 (@TSE55753942) September 25, 2020
泣けるほどうれしい。
原さん@haraponta1496
Shokoさん
@cho_kokoS
hikoproさん@Hiko_Pro
以上3名の方の記事やtwitter等を参考にここまで来れてよかった。死ぬ気で案件こなします！ pic.twitter.com/TIg23Yvw34
独学でWeb制作をするにはマインド・目標設定が大事！
Web制作の学習を始める前に、最も重要なことがマインド設定と目標設定です。
目標設定に関しては、冒頭でも述べたようにWeb制作で月5万円を目指すというゴールです。
✔︎Web制作で月5万円を達成する案件の例
- デザインからコーディング作業
- 予算：3~5万円
- 納期：2週間
- 用意してる物：デザインカンプ、画像素材
- 作業ボリューム：ランディングページ１ページ(PC/SP2パターンでのレスポンシブコーディング)
- お問い合わせフォームはフォームのHTML作成まで
- 出来ればご対応：SCSSかSASSでのCSS作成（※必須ではない）
※この案件例は実際にクラウドワークスで募集されている案件です。
学習のゴールは、このような案件を受注することをよく理解しておいてください！
目標を立てるのは誰でも簡単にできますが、最も重要なのがマインドセットです。
マインドセットとは目標を達成するのに必要なマインドのことであり、これができていないと100%挫折することになります。
【断言】80%の人が挫折をします
この優良な学習マップ通りに進めていても80％近くの人が挫折すると思います。
Web制作・プログラミング学習はそこまで甘いものではありません。
なぜかというとマインドセットがしっかりとできていないからです。
✔︎重要なマインドセット
- なぜWeb制作で月に5万円稼ぎたいか明確にする
- 必ず毎日プログラミングを学習する（目安2時間）
- 自己投資には妥協しない
- 課題ができたら、必ず自分で考えて解決する
- 目標を達成するまで試行錯誤して続ける
このようなマインドセットと、目標設定を明確にしておけば、挫折する確率は下がるので、この学習マップに取り掛かる前に必ず明確にしておきましょう！
プログラミングはカンニングOK
「勉強＝暗記」この概念が長年の学校教育から染み付いている人がいますが、プログラミングは暗記する必要はありません。
分からないことや、忘れたことは調べて思い出せばそれでOKです。
僕も仕事の時は「これなんだっけなぁ〜」と忘れる時も多々あるので、すぐに調べて解決してます！
✔︎プログラミング学習のポイント
- 暗記はしない
- 何度も同じことを繰り返さない
- 忘れたらすぐに調べる
- アウトプットを意識する
これから学習する内容はテストに合格するための勉強ではなくて、仕事をするために必要な勉強をするので、少し学習の仕方が特殊です。
独学でWeb制作の学習を始める準備
さて、これから実際にWeb制作の学習を初めて行くのですが、プログラミングの学習を始める準備を行いましょう。
プログラミングの学習を始める準備に必要なものとして、以下のものがあります。
✔︎準備するもの
- パソコン
- 学習に集中できる環境
- ある程度のタイピングスキル
- プログラミングとは何か？基礎知識
- ググる力
この準備を怠ると、挫折する原因にもなるので、必ずこちらの記事を読んで、プログラミング学習を始める準備をしましょう！
独学でWeb制作をマスターする学習マップ
- Progateの上級編まで
- ドットインストールのHTML/CSSコースを学習
- Chromeのディベロッパーツールを使いこなそう！
- ProgateのFlexbox編
- Emmetをマスター
- VSCodeのLiveServerを使う
- Sassの使い方を学ぼう！
- Progateの上級編
- はにわマン
- Airbnb
- ProgateのjQuery編
- Firebaseにポートフォリオをアップロード
この学習マップ通りに勉強すれば、クラウドソーシングサイトでWeb制作の案件を受注できるようになります！
1.Webサイトの仕組みを知ろう！【HTML/CSS編】
まず始めに、Webサイトができる仕組みを勉強していきます。
Web上にあるどのWebサイトも、このHTML/CSSと呼ばれるマークアップ言語で構成されており、Web制作をするには必須のスキルです。
HTML/CSSを学ぶのに使用する教材は、Progateと呼ばれる「プログラミングの入り口」といっても過言ではないくらい、分かりやすく楽しい教材です。
まずは、ProgateのHTML&CSSコースの上級編までをして、Webサイトはどのようにしてできるのか、HTML/CSSの書き方の基礎を学習しましょう。
何周も繰り返さない
冒頭にもお伝えしましたが、プログラミングはカンニングOKです。
なので、Progateで学習する時も、暗記しようと何周も繰り返さないようにしましょう。
Progateでは、HTML/CSSとは何か、書き方などを80％くらい理解していればOKです。
ProgateのHTML&CSSコースは最大でも2周までにしておいてください！
2.エディタを準備しよう！【VSCodeがオススメ】
プログラミング言語を扱うには、専用のエディタが必要なので準備していきます。
僕がオススメするエディタはVisual Studio Code（通称VS Code）がオススメで、実務でも十分使えるエディタになっています。
あのMicrosoftが開発したエディタとなっており、軽量かつ機能も豊富で無料で使えるので、ダウンロードしましょう！
»Visual Studio Codeインストール・公式ページ
✔︎使い方・特徴・インストール方法はこちら！
3.エディタを使って、Webサイトを作ってみよう！
ProgateではProgateが用意してくれている、テンプレートやエディタを用いて勉強をしていましたが、実務になるとそんな便利な環境でコーディングすることはありません。
自分でエディタを開いて、０からコーディングをしてWeb制作をしていきます。
実際にダウンロードしたVSCodeを使って、０からWebサイトを作る練習をドットインストールを活用してやりましょう！
ドットインストールは3~5分程度の短い動画コンテンツ教材になっており、動画をみながら自分のVSCodeで同じようにコーディングして学習していきます。
スマホや外部モニターでドットインストールの動画を流しながらPCを開いて、同じようにコーディングをしていきましょう！
3.1.Chromeのディベロッパーツールを使いこなそう！
ドットインストールの中でGoogle Chromeのディベロッパーツールの使い方を少し学習したと思いますが、より詳しく学習していきましょう！
ディベロッパーツールはとは名の通り、Web開発者の為のツールで、HTML/CSSをリアルタイムで編集したり、便利な機能が沢山備わっています。
ディベロッパーツールは、実務でもよく使うので使い方に慣れておきましょう！
✔︎Chromeのディベロッパーツールの使い方
4.Flexboxをマスターしよう！
Webサイトを作る上では欠かせない、サイトのレイアウト構造を自由自在に操ることができるCSSのFlexboxの使い方をマスターしましょう！
✔︎マメ知識
以前は要素の横並べ配置や、レイアウト調整にはCSSのfloatがよく使われていましたが、最近ではFlexboxが主流です。
理由としては、Flexboxの方がレスポンシブデザインに強い、柔軟にレイアウトを整えれるからです。
Flexboxを勉強するにはProgateのHTML&CSSコースの最後にあるFlexbox編を勉強しましょう！
Flexboxをマスターすれば、Webサイトのレイアウトや要素の横並びなどを自由自在にできるようになります！
しかし、Flexboxは覚えることが多く忘れがちなので、WebクリエイターボックスのFlexboxのチートシートを印刷して常にデスクに置いて使いこなせるようにしましょう！
5.効率よくコーディングするためのコツを知ろう！
ここまで勉強を続けれた方は、HTML/CSSをある程度扱えるようになって、十分Webサイトを作れるスキルは身についています！
これからが本番なので気を引き締めていきましょう！
これから実際にWebサイト制作をしながら実践学習をしていくのですが、その前にHTML/CSSを効率よくコーディングする為のコツを知っておきましょう！
✔︎効率よくコーディングするための3つのコツ
- Emmet：HTML/CSSを爆速でコーディングする為の手法
- VSCodeのLiveServer：ブラウザをリロードする手間を省く
- Sass/Scss：CSSを爆速で書く為の言語
5.1.Emmetをマスター
EmmetはWeb制作をするコーダーには必須のスキルで、HTML/CSSを爆速でコーディングして作業効率を上げる為の記述方です。
<div class=”header”> このようなコードを1文字1文字書いていくと膨大な時間がかかってしまいますが、Emmet記法を使用すると、少ないコードで大量のコードを生成できるので効率よくコーディングできます！
Emmetの記法の勉強法はドットインストールのEmmet入門コースで勉強しましょう！
わー！すごい！コーディング速度が2倍くらい早くなったよ！
5.2.VSCodeのLiveServerを使う
これまで、HTML/CSSでコーディングして、どのようにできているかブラウザで確認する場合は、【エディタを保存する→ブラウザをリロード】このような手順でしていたと思いますが、LiveServerを使うと、この手間をなくすことができます。
実務では、外部モニターを使って仕事することが多いので、PCでエディタを開いてコーディングし、外部モニターでリアルタイムで変更を表示するようにすると効率が上がります！
✔︎LiverServerの使い方・インストール方法
- VSCodeの拡張機能で「LiveServer」と検索する
- インストールボタンをクリックする
- 下にある「Go Live」をクリックするとブラウザで
http://127.0.0.1:5500/が立ち上がる。
5.3.Sassの使い方を学ぼう！
次に、CSSを効率よくコーディングするためにSass（Scss）の書き方を覚えましょう！
Sass（サス）は簡単に言うと、CSSをより効率的に書ける言語で 、イメージ的にはCSSでは10分かかったスタイリングがSassを使うことにより3分でスタイリングできてしまうと言うことです！
左がSassで右がCSSで全く同じスタイリングをしていますが、Sassの方が記述量が少ないことがわかります！
実務やWeb制作会社ではCSSではなくSassを用いるのがベーシックです！
Sassの使い方や書き方については以下の3つの記事を読めばOKです。
6.HTML/CSSの実践学習！模写コーディングにチャレンジ！
では、実践学習ということで、実際のWebサイト制作案件に近い形で学習をしていきましょう！
冒頭でもお伝えしたように、今回の目標である案件は、デザインカンプからコーディングする作業内容となっているので、それに近い環境を準備しました！
ズバリ、模写コーディングという勉強法で、実務で通用するスキルを身につけていきましょう！
✔︎模写コーディングとは？
- 模写コーディングとは、既存であるWebサイト（見本）を見ながら、それと全く同じサイトをHTML/CSSを使って0からコーディングしていくことを言います。
このステップでは初級〜上級レベルの模写コーディングに最適なサイトを準備しました！
上から1つづつ模写コーディングしていきましょう！Airbnbのかっこいいサイトが作れるようになるなんてワクワクしますよね！
✔︎模写コーディングのルール
- レスポンシブデザイン（ブレイクポイントは1つでOK）
- 見本のソースコードを見ない
- フォントやカラーコードは確認してOK
- 画像の取得はOK
- 必ず完成させる！！
6.1.ピクセルパーフェクトを目指して頑張ろう！
仕事でWeb制作をするとなると、再現度の高いコーディングスキルが求められます！
デザインデータと大幅に要素の位置がずれていたり、フォントの違い、色の違いなどこのようなことがあってはご法度です！
デザインデータと100%同じにするのは、無理ですが90%は再現できるようにしましょう！
再現度の高いコーディングを実現するためには、Googleの拡張機能のPerfectPixelを使用します！
【Chrome拡張機能】ピクセルパーフェクトをPerfectPixelを使ってする方法
7.Webサイトに動きをつけよう！【JavaScript/jQuery編】
HTML/CSSだけで作られたサイトは、動きアニメーションが無いので、クオリティが高いサイトとは言えません！
案件によっては、「アニメーションを実装してください！」「フェードインで要素を表示させてください！」などの要求があるので、簡単な動きのあるサイトを作れるようにしましょう！
そこで必要になってくるスキルがJavaScript（jQuery）と呼ばれるプログラミング言語です。
✔︎JavaScriptとは？
JavaScriptとはフロントエンド言語と呼ばれており、ほぼ全てのWebサイトに用いられるプログラミング言語です。
人気のプログラミング言語ランキング第一位に選ばれるほど、需要の高いスキルです！
JavaScriptを習得するとなると、かなりの時間が必要になるので、Webサイトに動きをつけるために最低限必要なスキルを身につけます！
Webサイトに簡単な動きをつけるには、JavaScriptのライブラリの一つであるjQueryを使用します。
ライブラリとは簡単にいうと、 JavaScriptを書きやすくしたパッケージのことで、簡単な記述で動きを実装できるようになります。
まずは、ProgateのjQueryコースで基礎を勉強しましょう！
jQueryでは様々な動きやアニメーションを実装することができるので、書き方の基本だけをマスターして、必要に応じて調べて実装できるレベルでOKです！
▶︎【jQuery入門】jQueryとは〜導入まで、初心者向けに使い方を解説
7.1.jQueryを使って本格的なWebサイトを作ろう！
お疲れ様でした！インプットすることはこれで以上になります！
これからはアウトプット学習をして、実務レベルまでスキルを上げていきましょう！
これまで学んだ、HTML/CSS/jQuery/その他ツールなど、このようなスキルの総まとめとして本格的なWebサイトの模写コーディングにチャレンジして見ましょう！
フリーランスエンジニアを多数輩出している、養成講座iSaraのランディングページを模写コーディングしましょう。
かなりのボリュームで、jQueyも適度に使用されており、Webサイト制作に必要なスキルがだいたい詰め込まれたページになっています！
せっかく多くの方が https://t.co/41tkKy1Ku7 のLPを模写してくださってるので、iSaraのLPを模写コーディングした場合、ご自身の制作ポートフォリオとして掲載することを許可しようと思います。
— ケースケ🇹🇭バンコク (@Keisukexlife) December 1, 2018
要は、「ご自身の制作実績として公開してOK」です。※ただし注意点があるので、添付画像をごらんください pic.twitter.com/kxamsjGTHK
iSaraの模写した作品はルールを守れば実績として使用できるので、案件を受注するときにポートフォリオとして活用できます！
✔︎iSara模写コーディングのルール
- 納品する気持ちで再現度の高いコーディング
- レスポンシブデザイン
- jQueryでアコーディオン、スムーズスクロールの実装
8.ポートフォリオを作成しよう！
iSaraの模写コーディングお疲れ様でした！これでWebサイト制作に必要なスキルの習得は完了です！
クラウドソーシング系のサイトで案件を受注するには、ただ応募すれば仕事をもらえるわけではなく、自分のスキルや実績を提案文を通じて、発注者にアピールする必要があります。
そこで必要になってくるのが、自分のスキルや実績を載せたポートフォリオサイトです！
✔︎僕のポートフォリオサイト
- HikoProduction （メインのポートフォリオ）
- ポートフォリオサイト （初めて作ったポートフォリオサイト）
エンジニアとして仕事するには、このポートフォリオが必須で、履歴書のようなものです！
今まで身につけたスキルを使って、自分のオリジナルのポートフォリオサイトを作ってみましょう！
✔︎ポートフォリオに含めるべき項目
- インパクトのあるメインビジュアル
- 信頼感のあるプロフィール（顔出しするとなお良い）
- 持っているスキルと、できること
- 実績やこれまで作った作品
- 仕事で大事にしていること
- 料金表、サービスの詳細
- お問い合わせフォーム（どっちでもいい）
ポートフォリオサイトを作れと言っても、デザインに悩まれる方も多いと思うので、僕のポートフォリオサイトを参考にしてもらってOKです！（クオリティ低いですが、、、）
かっこいい、可愛いデザインのポートフォリオを作りたい方は、themeforestと言うサイトでHTMLのテンプレートやサンプルが沢山あるので、参考にして見てください！
【現役エンジニアが教える】ポートフォリオの作り方【プログラミング初心者でも簡単】
8.1Firebaseにポートフォリオをアップロードしよう！
ポートフォリオを作成したら、それを全世界の人が見れるようにインターネット上に公開する必要があります。
一般的にWebサイトをインターネット上に公開するには、サーバーをレンタルし、ドメインを取得する必要があり年間で1万円くらい固定費がかかってしまいます！
お金をかけたくない人が大半だと思うので、今回は無料でHTMLファイルをインターネット上に公開できるFirebaseで公開をしましょう！
▼Firebaseでポートフォリオを公開する手順
【ドメイン・サーバ費不要】Firebaseを使って無料でWEBサイトを公開する方法
9.クラウドソーシングで案件を受注しよう！
ポートフォリオが完成したら、いよいよ仕事デビューの開幕戦です！
初めはとてもドキドキしますが、勇気を出して案件を受注していきましょう！
Webサイトの制作の案件を受注するには、クラウドソーシングサイトを利用します。
Web制作のスキルは持っているが、案件をなかなか受注できない人が非常に多いですが、それは当然のことで、新規参入者が経験者に勝つことは難しいです。
クラウドソーシングでは、評価が高い人や実績が豊富な人に仕事が集まるので、新規参入者は「信頼感」と「付加価値」を意識して、案件に応募する必要があります。
「信頼感」と「付加価値」をアピールす場面は、プロフィールと提案文を送る時です！
9.1 プロフィールの充実、提案文の書き方
クラウドソーシングサイトで、新規参入者が案件を受注するのは非常に難しいので、他の人との差別化が必要になってきます。
ライバルが増えるのであまり教えたくはないですが、プロフィールの作り方と提案文の書き方を無料公開します！
✔︎クラウドソーシングで案件が受注できるようになる文章の書き方
提案文を送る時に、テンプレートを作って送る人がいますが、バレバレなのでやめましょう。
自分の持っているスキルを売り込むわけですから、相手の潜在的ニーズを汲み取り、そこにどんなメリットを提供できるのかを1つ1つ気持ちを込めて書きましょう！
初めは勉強のつもりで！安い案件を受注しよう！
とは言っても、新規参入者の人は20件提案して1件受注できれば上出来だと思います。
クラウドソーシング系では、単価が高い案件がもちろん人気なので、その分応募者が多いので選ばれる可能性は低いです。
しかし、単価が安い案件に関しては、実績がある人や経験者は応募せずに、あなたと同じように新規参入者が多く応募するので、受注できる確率が高いです。
初めのうちは、単価の高い案件を受注したい気持ちはわかりますが、我慢して安い案件から受注していきましょう！
お疲れ様でした！案件を受注できるようになったら、場数をこなしていき、高単価な案件も受注できるようにしていきましょう！
次はWordPress、Webマーケティングに挑戦してみよう！
ここまで、主にHTML/CSSでのWeb制作の学習方法をご紹介しましたが、ぶっちゃけできる人が最近多くて、案件の奪い合いになり、結果的に案件の単価も下がってしまう傾向にあります。
「もっと、市場価値を高めたい！」「高単価な案件を受注できるようになりたい！」このように考える人も多いでしょう。
そんな人には、結論WordPressでのWeb制作＋Webマーケティングのスキルを身につけることをおすすめします！
僕自身は、独学でWordPressと、Webマーケティング（主にSEO、ライティング）を勉強し、Web制作〜Webマーケコンサルまでの案件を高単価で受注した経験があります！
（正直、HTML/CSSコーディング案件の数倍の単価です）
WordPressを習得するには、PHPと言うサーバーサイドの言語とWordPressについて勉強する必要があり、またWebマーケティングに関しては、答えがない分野なので、プロに教えてもらうのが最も効率的です。
テックアカデミーの「WordPress＋Webマーケティングセットコース
」では、WordPressとWebマーケティングを同時に学べるコースとなっています。
今ならなんと最大60,000円もお得になりますし、スキルを身につけてしまえば、すぐに案件を受注して受講費は回収できるので、行動するしかないですね。
月30万円以上稼ぐフリーランスエンジニアになるには？
ここで残念なお知らせですが、クラウドソーシングは時間とお金を消耗するので、生計を立てるのはお勧めできません。
▼クラウドソーシングはお勧めできない理由
駆け出しフリーランス向け】クラウドソーシングは時間とお金を消耗します。
月収30万円、年収1000万円稼ぐフリーランスエンジニアになるには、クラウドソーシングに依存しては正直キビシイです。
クラウドソーシングで案件を終えた時に、時給換算して見てください！
時給が2000円を下回るようだったら、スキルを安売りしすぎなので、キャリアチェンジしたほうがいいです！
プログラミングスクールに通って、Web系の言語を取得する
現状だと、Webサイト制作のコーディング案件しかできない状態なので、収入も低いです。
結論、PHPやRubyなどのWeb系の言語を習得して、Web系のエンジニアになることをおすすめします！
例えば、デザインスキルやPHP、Rubyなどのスキルを習得すると単価50万円くらいの案件も受注できるようになります。
PHPやRuby、Pythonなどのプログラミング言語を取得すれば、このような高単価な案件も受注できるようになります！
このようなプログラミングスキルの習得も記事にして公開したいところですが、莫大な量になってしまいますし、テキストや動画学習だとどうしても限界があります。
そこでオススメなのがプログラミングスクールで、中には卒業後に案件獲得サポートもしてくれるので、元本をすぐに回収できます！
✔︎オススメのプログラミングスクール
- TechAcademy ：日本最大級のプログラミングスクール！ここにいけば間違いなし！
- TECH CAMP：転職保証、全額返金保証付きのノーリスクスクール
高度なプログラミング言語を学ぶとなると、今まで学習してきた難易度の比にならないくらい難しいので、挫折しないためにもスクール選びは非常に重要です！
▼合わせて読みたい！
Web制作の学習は独学でできる！
いかがでしたでしょうか！
この学習マップが役に立ったら、Twitterなどでシェアしていただけると幸いです！
プログラミングは生活やあなたの人生を豊かにしてくれる、素晴らしいツールです。
世界を変える武器にもなりうるプログラミングなので、このスキルだけで満足せずにぜひ僕と一緒に高みを目指して勉強を頑張りましょう！
▼合わせて読みたい！
