ポートフォリオ・実績・Web制作のお問い合わせはコチラ!▶︎▶︎▶︎

【独学でWeb制作】月5万稼ぐための学習マップ【0円!未経験でもOK】

学習法
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回のお悩み

プログラミングを独学で勉強して月に5万円くらい稼ぎたいけど、どうすればいのか分からない。

この通りに勉強すれば、月5万円のWeb制作の案件が受注できる学習マップが欲しい!

今回の記事では、僕がWeb制作の案件を受注できるまでに学習したことを学習マップにして、0円で公開したいと思います。

HikoPro
HikoPro

プログラミング学習歴は1年、フリーランスエンジニアとして独立し2ヶ月目で時給5000円を突破しました!

この記事では、完全未経験(プログラミングが何か知らない人)〜Web制作で月5万円稼げるノウハウが詰まっているコンテンツなので、この通りにやればパソコン音痴の人でも、文系の人でも問題なく達成できます。

  • 目標:Web制作で月5万円を稼ぐ
  • 対象者:プログラミング未経験(パソコン音痴でも可能)
  • 期間:130時間(1日2時間 勉強したとして約2ヶ月)
  • 費用:基本0円
スポンサーリンク

マインド・目標設定

プログラミング学習を始める前に、最も重要なことがマインド設定と目標設定です。

目標設定に関しては、冒頭でも述べたようにWeb制作で月5万円を目指すというゴールです。

Web制作で月5万円を達成する案件の例

デザインからコーディング作業

  • 予算:3~5万円
  • 納期:2週間
  • 用意してる物:デザインカンプ、画像素材
  • 作業ボリューム:ランディングページ1ページ(PC/SP2パターンでのレスポンシブコーディング)
  • お問い合わせフォームはフォームのHTML作成まで
  • 出来ればご対応:SCSSかSASSでのCSS作成(※必須ではない)

※この案件例は実際にクラウドワークス で募集されている案件です。

HikoPro
HikoPro

学習のゴールは、このような案件を受注することをよく理解しておいてください!

目標を立てるのは誰でも簡単にできますが、最も重要なのがマインドセットです。

マインドセットとは目標を達成するのに必要なマインドのことであり、これができていないと100%挫折することになります。

【断言】80%の人が挫折をします

この優良な学習マップ通りに進めていても80%近くの人が挫折すると思います。

プログラミング学習はそこまで甘いものではありません。

なぜかというとマインドセットがしっかりとできていないからです。

重要なマインドセット
  • なぜWeb制作で月に5万円稼ぎたいか明確にする
  • 必ず毎日プログラミングを学習する(目安2時間)
  • 自己投資には妥協しない
  • 課題ができたら、必ず自分で考えて解決する
  • 目標を達成するまで試行錯誤して続ける

このようなマインドセットと、目標設定を明確にしておけば、挫折する確率は下がるので、この学習マップに取り掛かる前に必ず明確にしておきましょう!

プログラミングはカンニングOK

「勉強=暗記」この概念が長年の学校教育から染み付いている人がいますが、プログラミングは暗記する必要はありません。

分からないことや、忘れたことは調べて思い出せばそれでOKです。

HikoPro
HikoPro

僕も仕事の時は「これなんだっけなぁ〜」と忘れる時も多々あるので、すぐに調べて解決してます!

これから学習する内容はテストに合格するための勉強ではなくて、仕事をするために必要な勉強をするので、少し学習の仕方が特殊です。

プログラミング学習のポイント
  • 暗記はしない
  • 何度も同じことを繰り返さない
  • 忘れたらすぐに調べる
  • アウトプットを意識する

プログラミング学習を始める準備

さて、これから実際にプログラミングの学習を初めて行くのですが、プログラミングの学習を始める準備を行いましょう。

プログラミングの学習を始める準備に必要なものとして、以下のものがあります。

  • パソコン
  • 学習に集中できる環境
  • ある程度のタイピングスキル
  • プログラミングとは何か?基礎知識
  • ググる力

この準備を怠ると、挫折する原因にもなるので、必ずこちらの記事を読んで、プログラミング学習を始める準備をしましょう!

独学でWeb制作をマスターする学習マップ

独学でWeb制作をマスターする学習マップ
  • STEP1
    Webサイトの仕組みを知ろう!【HTML/CSS編】
    • Progateの上級編まで

  • STEP2
    エディタを準備しよう!【VSCodeがオススメ】
  • STEP3
    エディタを使って、Webサイトを作ってみよう!
    • ドットインストールのHTML/CSSコースを学習
    • Chromeのディベロッパーツールを使いこなそう!
  • STEP4
    Flexboxをマスターしよう!
    • ProgateのFlexbox編
  • STEP5
    効率よくコーディングするためのコツを知ろう!
    • Emmetをマスター
    • VSCodeのLiveServerを使う
    • Sassの使い方を学ぼう!
  • STEP6
    HTML/CSSの実践学習!模写コーディングにチャレンジ!
    • Progateの上級編
    • はにわマン
    • Airbnb
  • STEP7
    Webサイトに動きをつけよう!【JavaScript/jQuery編】
    • ProgateのjQuery編
  • STEP8
    jQueryを使って本格的なWebサイトを作ろう!
  • STEP9
    ポートフォリオを作成しよう!
    • Firebaseにポートフォリオをアップロード
  • STEP10
    クラウドソーシングで案件を受注しよう!
HikoPro
HikoPro

この学習マップ通りに勉強すれば、クラウドソーシングサイトでWeb制作の案件を受注できるようになります!

1.Webサイトの仕組みを知ろう!【HTML/CSS編】

まず始めに、Webサイトができる仕組みを勉強していきます。

Web上にあるどのWebサイトも、このHTML/CSSと呼ばれるマークアップ言語で構成されており、Web制作をするには必須のスキルです。

HTML/CSSを学ぶのに使用する教材は、Progateと呼ばれる「プログラミングの入り口」といっても過言ではないくらい、分かりやすく楽しい教材です。

»Progate|HTML&CSSコース

まずは、ProgateのHTML&CSSコースの上級編までをして、Webサイトはどのようにしてできるのか、HTML/CSSの書き方の基礎を学習しましょう。

合わせて読みたい!

何周も繰り返さない

冒頭にもお伝えしましたが、プログラミングはカンニングOKです。

なので、Progateで学習する時も、暗記しようと何周も繰り返さないようにしましょう。

Progateでは、HTML/CSSとは何か、書き方などを80%くらい理解していればOKです。

HikoPro
HikoPro

ProgateのHTML&CSSコースは最大でも2周までにしておいてください!

2.エディタを準備しよう!【VSCodeがオススメ】

プログラミング言語を扱うには、専用のエディタが必要なので準備していきます。

僕がオススメするエディタはVisual Studio Code(通称VS Code)がオススメで、実務でも十分使えるエディタになっています。

あのMicrosoftが開発したエディタとなっており、軽量かつ機能も豊富で無料で使えるので、ダウンロードしましょう!

»Visual Studio Codeインストール・公式ページ

使い方・特徴・インストール方法はこちら!

3.エディタを使って、Webサイトを作ってみよう!

ProgateではProgateが用意してくれている、テンプレートやエディタを用いて勉強をしていましたが、実務になるとそんな便利な環境でコーディングすることはありません。

自分でエディタを開いて、0からコーディングをしてWeb制作をしていきます。

実際にダウンロードしたVSCodeを使って、0からWebサイトを作る練習をドットインストールを活用してやりましょう!

ドットインストールは3~5分程度の短い動画コンテンツ教材になっており、動画をみながら自分のVSCodeで同じようにコーディングして学習していきます。

HikoPro
HikoPro

スマホや外部モニターでドットインストールの動画を流しながらPCを開いて、同じようにコーディングをしていきましょう!

3.1.Chromeのディベロッパーツールを使いこなそう!

ドットインストールの中でGoogle Chromeのディベロッパーツールの使い方を少し学習したと思いますが、より詳しく学習していきましょう!

ディベロッパーツールはとは名の通り、Web開発者の為のツールで、HTML/CSSをリアルタイムで編集したり、便利な機能が沢山備わっています。

HikoPro
HikoPro

ディベロッパーツールは、実務でもよく使うので使い方に慣れておきましょう!

Chromeのディベロッパーツールの使い方

4.Flexboxをマスターしよう!

Webサイトを作る上では欠かせない、サイトのレイアウト構造を自由自在に操ることができるCSSのFlexboxの使い方をマスターしましょう!

マメ知識

以前は要素の横並べ配置や、レイアウト調整にはCSSのfloatがよく使われていましたが、最近ではFlexboxが主流です。

理由としては、Flexboxの方がレスポンシブデザインに強い、柔軟にレイアウトを整えれるからです。

Flexboxを勉強するにはProgateのHTML&CSSコースの最後にあるFlexbox編を勉強しましょう!

»Progate|Flexbox編

Flexboxをマスターすれば、Webサイトのレイアウトや要素の横並びなどを自由自在にできるようになります!

しかし、Flexboxは覚えることが多く忘れがちなので、WebクリエイターボックスのFlexboxのチートシートを印刷して常にデスクに置いて使いこなせるようにしましょう!

»WebクリエイターボックスのFlexboxのチートシート

5.効率よくコーディングするためのコツを知ろう!

ここまで勉強を続けれた方は、HTML/CSSをある程度扱えるようになって、十分Webサイトを作れるスキルは身についています!

HikoPro
HikoPro

これからが本番なので気を引き締めていきましょう!

これから実際にWebサイト制作をしながら実践学習をしていくのですが、その前にHTML/CSSを効率よくコーディングする為のコツを知っておきましょう!

効率よくコーディングするための3つのコツ
  • Emmet:HTML/CSSを爆速でコーディングする為の手法
  • VSCodeのLiveServer:ブラウザをリロードする手間を省く
  • Sass/Scss:CSSを爆速で書く為の言語

5.1.Emmetをマスター

EmmetはWeb制作をするコーダーには必須のスキルで、HTML/CSSを爆速でコーディングして作業効率を上げる為の記述方です。

Emmetを使うと少ない文字で効率よくコーディングできる!

<div class=”header”> このようなコードを1文字1文字書いていくと膨大な時間がかかってしまいますが、Emmet記法を使用すると、少ないコードで大量のコードを生成できるので効率よくコーディングできます!

Emmetの記法の勉強法はドットインストールのEmmet入門コースで勉強しましょう!

»Emmet入門(全12回)|ドットインストール

ネコ君
ネコ君

わー!すごい!コーディング速度が2倍くらい早くなったよ!

5.2.VSCodeのLiveServerを使う

これまで、HTML/CSSでコーディングして、どのようにできているかブラウザで確認する場合は、【エディタを保存する→ブラウザをリロード】このような手順でしていたと思いますが、LiveServerを使うと、この手間をなくすことができます。

VSCodeを(Ctrl+S)で保存するとブラウザも自動的にリロードされる

実務では、外部モニターを使って仕事することが多いので、PCでエディタを開いてコーディングし、外部モニターでリアルタイムで変更を表示するようにすると効率が上がります!

LiverServerの使い方・インストール方法
  1. VSCodeの拡張機能で「LiveServer」と検索する
  2. インストールボタンをクリックする

3. 下にある「Go Live」をクリックするとブラウザで http://127.0.0.1:5500/ が立ち上がる。

5.3.Sassの使い方を学ぼう!

次に、CSSを効率よくコーディングするためにSass(Scss)の書き方を覚えましょう!

Sass(サス)は簡単に言うと、CSSをより効率的に書ける言語で 、イメージ的にはCSSでは10分かかったスタイリングがSassを使うことにより3分でスタイリングできてしまうと言うことです!

左がSassで右がCSSで全く同じスタイリングをしていますが、Sassの方が記述量が少ないことがわかります!

HikoPro
HikoPro

実務やWeb制作会社ではCSSではなくSassを用いるのがベーシックです!

Sassの使い方や書き方については以下の3つの記事を読めばOKです。

Sassについて読むべき記事3本

6.HTML/CSSの実践学習!模写コーディングにチャレンジ!

では、実践学習ということで、実際のWebサイト制作案件に近い形で学習をしていきましょう!

冒頭でもお伝えしたように、今回の目標である案件は、デザインカンプからコーディングする作業内容となっているので、それに近い環境を準備しました!

ズバリ、模写コーディングという勉強法で、実務で通用するスキルを身につけていきましょう!

模写コーディングとは?

模写コーディングとは、既存であるWebサイト(見本)を見ながら、それと全く同じサイトをHTML/CSSを使って0からコーディングしていくことを言います。

HikoPro
HikoPro

このステップでは初級〜上級レベルの模写コーディングに最適なサイトを準備しました!

上から1つづつ模写コーディングしていきましょう!Airbnbのかっこいいサイトが作れるようになるなんてワクワクしますよね!

模写コーディングのルール
  • レスポンシブデザイン(ブレイクポイントは1つでOK)
  • 見本のソースコードを見ない
  • フォントやカラーコードは確認してOK
  • 画像の取得はOK
  • 必ず完成させる!!

6.1.ピクセルパーフェクトを目指して頑張ろう!

仕事でWeb制作をするとなると、再現度の高いコーディングスキルが求められます!

デザインデータと大幅に要素の位置がずれていたり、フォントの違い、色の違いなどこのようなことがあってはご法度です!

デザインデータと100%同じにするのは、無理ですが90%は再現できるようにしましょう!

再現度の高いコーディングを実現するためには、Googleの拡張機能のPerfectPixelを使用します!

PerfectPixelの使い方はこちらの記事を読んでください!

【Chrome拡張機能】ピクセルパーフェクトをPerfectPixelを使ってする方法

7.Webサイトに動きをつけよう!【JavaScript/jQuery編】

HTML/CSSだけで作られたサイトは、動きアニメーションが無いので、クオリティが高いサイトとは言えません!

案件によっては、「アニメーションを実装してください!」「フェードインで要素を表示させてください!」などの要求があるので、簡単な動きのあるサイトを作れるようにしましょう!

そこで必要になってくるスキルがJavaScript(jQuery)と呼ばれるプログラミング言語です。

JavaScriptとは?

JavaScriptとはフロントエンド言語と呼ばれており、ほぼ全てのWebサイトに用いられるプログラミング言語です。

人気のプログラミング言語ランキング第一位に選ばれるほど、需要の高いスキルです!

HikoPro
HikoPro

JavaScriptを習得するとなると、かなりの時間が必要になるので、Webサイトに動きをつけるために最低限必要なスキルを身につけます!

Webサイトに簡単な動きをつけるには、JavaScriptのライブラリの一つであるjQueryを使用します。

ライブラリとは簡単にいうと、 JavaScriptを書きやすくしたパッケージのことで、簡単な記述で動きを実装できるようになります。

まずは、ProgateのjQueryコースで基礎を勉強しましょう!

»Progate|jQuery編

jQueryでは様々な動きやアニメーションを実装することができるので、書き方の基本だけをマスターして、必要に応じて調べて実装できるレベルでOKです!

合わせて読みたい!

【jQuery入門】jQueryとは〜導入まで、初心者向けに使い方を解説

7.1.jQueryを使って本格的なWebサイトを作ろう!

HikoPro
HikoPro

お疲れ様でした!インプットすることはこれで以上になります!

これからはアウトプット学習をして、実務レベルまでスキルを上げていきましょう!

これまで学んだ、HTML/CSS/jQuery/その他ツールなど、このようなスキルの総まとめとして本格的なWebサイトの模写コーディングにチャレンジして見ましょう!

今回模写コーディングするサイトはこちら!

フリーランスエンジニアを多数輩出している、養成講座iSaraのランディングページを模写コーディングしましょう。

かなりのボリュームで、jQueyも適度に使用されており、Webサイト制作に必要なスキルがだいたい詰め込まれたページになっています!

iSaraの模写した作品はルールを守れば実績として使用できるので、案件を受注するときにポートフォリオとして活用できます!

iSara模写コーディングのルール
  • 納品する気持ちで再現度の高いコーディング
  • レスポンシブデザイン
  • jQueryでアコーディオン、スムーズスクロールの実装

8.ポートフォリオを作成しよう!

HikoPro
HikoPro

iSaraの模写コーディングお疲れ様でした!これでWebサイト制作に必要なスキルの習得は完了です!

クラウドソーシング系のサイトで案件を受注するには、ただ応募すれば仕事をもらえるわけではなく、自分のスキルや実績を提案文を通じて、発注者にアピールする必要があります。

そこで必要になってくるのが、自分のスキルや実績を載せたポートフォリオサイトです!

僕のポートフォリオサイト

エンジニアとして仕事するには、このポートフォリオが必須で、履歴書のようなものです!

今まで身につけたスキルを使って、自分のオリジナルのポートフォリオサイトを作ってみましょう!

ポートフォリオに含めるべき項目
  • インパクトのあるメインビジュアル
  • 信頼感のあるプロフィール(顔出しするとなお良い)
  • 持っているスキルと、できること
  • 実績やこれまで作った作品
  • 仕事で大事にしていること
  • 料金表、サービスの詳細
  • お問い合わせフォーム(どっちでもいい)

ポートフォリオサイトを作れと言っても、デザインに悩まれる方も多いと思うので、僕のポートフォリオサイトを参考にしてもらってOKです!(クオリティ低いですが、、、)

HikoPro
HikoPro

かっこいい、可愛いデザインのポートフォリオを作りたい方は、themeforestと言うサイトでHTMLのテンプレートやサンプルが沢山あるので、参考にして見てください!

合わせて読みたい!

【現役エンジニアが教える】ポートフォリオの作り方【プログラミング初心者でも簡単】

8.1Firebaseにポートフォリオをアップロードしよう!

ポートフォリオを作成したら、それを全世界の人が見れるようにインターネット上に公開する必要があります。

一般的にWebサイトをインターネット上に公開するには、サーバーをレンタルし、ドメインを取得する必要があり年間で1万円くらい固定費がかかってしまいます!

お金をかけたくない人が大半だと思うので、今回は無料でHTMLファイルをインターネット上に公開できるFirebaseで公開をしましょう!

Firebaseでポートフォリオを公開する手順

【ドメイン・サーバ費不要】Firebaseを使って無料でWEBサイトを公開する方法

9.クラウドソーシングで案件を受注しよう!

ポートフォリオが完成したら、いよいよ仕事デビューの開幕戦です!

HikoPro
HikoPro

初めはとてもドキドキしますが、勇気を出して案件を受注していきましょう!

Webサイトの制作の案件を受注するには、クラウドソーシングサイトを利用します。

登録するべきクラウドソーシングサイト

※どちらも手数料やサービス内容はほぼ同じなので、両方に登録しておきましょう!

Web制作のスキルは持っているが、案件をなかなか受注できない人が非常に多いですが、それは当然のことで、新規参入者が経験者に勝つことは難しいです。

クラウドソーシングでは、評価が高い人や実績が豊富な人に仕事が集まるので、新規参入者は「信頼感」と「付加価値」を意識して、案件に応募する必要があります。

「信頼感」と「付加価値」をアピールす場面は、プロフィールと提案文を送る時です!

9.1 プロフィールの充実、提案文の書き方

クラウドソーシングサイトで、新規参入者が案件を受注するのは非常に難しいので、他の人との差別化が必要になってきます。

ライバルが増えるのであまり教えたくはないですが、プロフィールの作り方と提案文の書き方を無料公開します!

クラウドソーシングで案件が受注できるようになる文章の書き方

提案文を送る時に、テンプレートを作って送る人がいますが、バレバレなのでやめましょう。

自分の持っているスキルを売り込むわけですから、相手の潜在的ニーズを汲み取り、そこにどんなメリットを提供できるのかを1つ1つ気持ちを込めて書きましょう!

初めは勉強のつもりで!安い案件を受注しよう!

とは言っても、新規参入者の人は20件提案して1件受注できれば上出来だと思います。

クラウドソーシング系では、単価が高い案件がもちろん人気なので、その分応募者が多いので選ばれる可能性は低いです。

しかし、単価が安い案件に関しては、実績がある人や経験者は応募せずに、あなたと同じように新規参入者が多く応募するので、受注できる確率が高いです。

初めのうちは、単価の高い案件を受注したい気持ちはわかりますが、我慢して安い案件から受注していきましょう!

HikoPro
HikoPro

お疲れ様でした!案件を受注できるようになったら、場数をこなしていき、高単価な案件も受注できるようにしていきましょう!

月30万円以上稼ぐフリーランスエンジニアになるには?

ここで残念なお知らせですが、クラウドソーシングは時間とお金を消耗するので、生計を立てるのはお勧めできません。

クラウドソーシングはお勧めできない理由

【駆け出しフリーランス向け】クラウドソーシングは時間とお金を消耗します。

月収30万円、年収1000万円稼ぐフリーランスエンジニアになるには、クラウドソーシングに依存しては正直キビシイです。

HikoPro
HikoPro

クラウドソーシングで案件を終えた時に、時給換算して見てください!

時給が2000円を下回るようだったら、スキルを安売りしすぎなので、キャリアチェンジしたほうがいいです!

まずはエンジニア就職してスキルを身につける

高単価な案件を受注するには、未経験、独学でプログラミングを勉強した程度では正直難しいです。

出典:MIDWORKS

MIDWORKSにあるような高単価な案件を受注するには、実務経験の経歴がないと案件を発注してくれないケースがほとんどです。

この記事を読んで実際にWeb制作の案件を受注できたら、十分にWeb制作会社に転職・就職できるスキルはあるので、まずは1~2年勤務して実務経験を積むことがオススメです!

HikoPro
HikoPro

実務を経験したフリーランスエンジニアと、未経験のフリーランスの収入の差は非常に大きいです!

会社で働くとたくさんの学びがありますよ!

未経験でもOKなIT系に特化した求人サイト

これらの求人サイトを利用して、IT系の企業に勤めてフリーランスエンジニアとして独立すれば、収入も安定するので、オススメです!

プログラミングスクールに通って、Web系の言語を取得する

企業に就職するのはちょっとなぁ〜

このように考える人は、スキルを身につけて、できる仕事の幅を増やしていきましょう!

現状だと、Webサイト制作のコーディング案件しかできない状態なので、収入も低いです。

例えば、デザインスキルやPHP、Rubyなどのスキルを習得すると単価50万円くらいの案件も受注できるようになります。

PHPやRuby、Pythonなどのプログラミング言語を取得すれば、このような高単価な案件も受注できるようになります!

このようなプログラミングスキルの習得も記事にして公開したいところですが、莫大な量になってしまいますし、テキストや動画学習だとどうしても限界があります。

そこでオススメなのがプログラミングスクールで、【TECH::EXPERT】(フリーランスコース) などのスクールでは、卒業後に案件獲得サポートもしてくれるので、元本をすぐに回収できます!

オススメのプログラミングスクール
  • TECH::EXPERT:フリーランスエンジニアを目指すならここしかない特化スクール
  • CodeCampGATE:転職サポート付きで、最短でエンジニアになれる
  • RaiseTech:稼ぐことに特化した、高案件を取れるスキルを学べる
  • TechAcademy :日本最大級のプログラミングスクール!ここにいけば間違いなし!

高度なプログラミング言語を学ぶとなると、今まで学習してきた難易度の比にならないくらい難しいので、挫折しないためにもスクール選びは非常に重要です!

合わせて読みたい!

まとめ

いかがでしたでしょうか!

この学習マップが役に立ったら、Twitterなどでシェアしていただけると幸いです!

プログラミングは生活やあなたの人生を豊かにしてくれる、素晴らしいツールです。

世界を変える武器にもなりうるプログラミングなので、このスキルだけで満足せずにぜひ僕と一緒に高みを目指して勉強を頑張りましょう!

合わせて読みたい!
HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
学習法
HikoPro Blog

コメント

タイトルとURLをコピーしました