【本記事を読むことによる目標到達点】
- 今は未経験の方でも（最短）3ヶ月の努力でフロントエンドエンジニアとして現場で働けるスキルが身に付く
- Web制作案件を受注して月収30万円以上の継続的な収入が手に入る
- 独学でも大丈夫かな・・
- フロントエンドエンジニア・コーダーに必要なスキルはなに？・・
- Web制作で稼ぐための具体的な方法を知りたい・・
- いろんな方法を試したけど、全然稼げるようにならなかった・・
- 毎日努力しているのに全然スキルが上達しない・・
- 未経験からエンジニアはきついって聞くけど大丈夫かな・・
こんな悩みや疑問を５分で解消できる記事内容になっています。
本記事はフリーランスエンジニアが目標の方にも参考となる内容です。
ふたご
筆者がスキルなし・人脈なし・お金もない、なにもない中で実現できたフロントエンドエンジニア独学ロードマップをご紹介。そして6ヶ月以上も改善し続けた集大成であり、なにより『再現性の高い』内容です。
全てを無料で公開していますが、はっきり言ってnoteなどで売られている1万円ほどのロードマップ記事よりも再現性の高さには自信があります。
この記事の信頼性（ゆうけんブログの筆者はこんな人）
- 現役フロントエンドエンジニア・コーダーが執筆
- 最高月収7桁のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数2,000人超（→@twinzvlog_yk）
- Web制作のメンター経験多数
- 認定ランサー（ランサーズ最高ランク）
目次
未経験からの「フロントエンドエンジニア」独学ロードマップ｜フリーランス・副業
何からやればいいの？と不安な方も多いかと思いますが、これから４ステップで順番に手順を説明していくので、未経験からフロントエンドエンジニアとして稼いでいくための ”はじめの一歩” として読み進めてみてください。
ふたご
エンジニアが解説。給料もらいながらプログラミングを学習する方法
STEP1. 目標設定｜フロントエンドエンジニアにはどんな案件があるのか確認
まず、自分の目標を明確に設定するために自分がどんな案件をこなしていくのかを確認してみましょう。「いや、そんなステップ必要ないでしょ〜」と思うかもしれませんが、1番大事なことなので、実践してみてほしいです。
ここをおろそかにしてしまうと、当然ですが、目標が曖昧なので、ゴールに辿り着けません。しかも、必ず「あれ、なんのために学習してるんだっけ」となります。時間を無駄にしたくない方は、まず目標を明確に設定しましょう。
クラウドテックは現役フロントエンドエンジニアの筆者がイチオシの求人サイトです。フリーランス向けフロントエンドエンジニア案件なら確実に業界トップクラス！営業かけずに案件に困らなくなる近道と言えます。しかも、完全無料です。
（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
ふたご
\ フロントエンドエンジニアの実務未経験OK・リモート案件数トップクラスの求人サイト /無料登録をして案件を見てみる >>
もっと詳しく知りたい方は
>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。
目標を設定できた方は次のステップに進みましょう！
STEP2. Udemyでフロントエンドエンジニアに必要なスキルを独学で学習
「本やネット教材で学習したけど全然身につかなかった。。」
「もう何を使って学習すればいいのかわからない。。」
「フロントエンドエンジニアに必要な学習教材ってどれなのかな。。」
上記のような悩みは全て解決できます。下の記事で紹介しているUdemy講座は、これ以上時間を無駄にしたくない方にはドンピシャな内容となっています。最短で１ヶ月後には『フロントエンドエンジニアに必要なスキル』をほぼ身につけられるように厳選しています。
Udemyでのコーディング学習が完了したらスキルの精度をグンっと上げていきましょう。
おすすめは「写経コーディング」と「模写コーディング」の繰り返しです。これをやることでスキルが確実に定着し、実務でほぼ困らない程度の応用力もつきます。
【具体的なやり方】
- 写経コーディング
YouTubeで「create website html css」や「create website wordpress from scratch」等で検索するとコーディング動画がたくさん出てきます。その動画のコードを見たままにそのまま自分のエディターに書き写していきましょう。 - 模写コーディング
Googleで「ホームページ 参考」や「ホームページ サンプル」等で検索すると参考HPのまとめサイトが出てくるので、気に入ったHPを選んでください。そのHPをそっくりそのまま模写コーディングしましょう。
（ルール：レスポンシブ対応、検証画面等からのHTML/CSSコピーはNG）
写経・模写コーディングで作成したサイトやページは全て実績としてクライアントに提出できます。経験上、提出する実績が多ければ多ければ契約には有利となります。さて、提出するにはレンタルサーバーでWeb上に公開し、クライアントがすぐ確認できる状態にすることが必要です。
個人的におすすめなレンタルサーバーはConoHa WINGです。ここでConoHa Wingを用意しておけばポートフォリオを作った際にも使えるので、頭の良い方は前もって用意しておくのがベストです。
無料は注意！ポートフォリオおすすめレンタルサーバーと公開方法
※そのまま公開すると著作権上問題があるのでベーシック認証（ディレクトリアクセス制限）を設定しましょう。やり方は下の公式ページからご確認いただけます。
参考 ご利用ガイド ディレクトリアクセス制限の設定をするConoHa
余談ですが、筆者が学習段階ですごく助けられた有益記事/ツールを厳選しました。
一生涯重宝するくらいには使えるので確実にどこかにメモしておくことを推奨します。
- 解説付き。コーディング練習なら
Codestep - Flexboxを習得するなら
日本語対応！CSS Flexboxのチートシートを作ったので配布します - Gridレイアウトを習得するなら
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する - HTML/CSSで困ったら
HTML&CSS入門 Webデザインをイチから学ぼう - Sass/Scss→CSSへの変換ツール
SassMeister - CSS→Sass/Scssへの変換ツール
CSS 2 SASS/SCSS CONVERTER
「中級者向け」CSS設計を学ぶなら
STEP3. フロントエンドエンジニアのスキルを活かして、ポートフォリオを作ろう（期間：１ヶ月）
ポートフォリオってなに？
ポートフォリオは簡単にいうと実績を示すための作品集です
自分はこれだけのことができるんだぞ！とアピールする際に使います。
クライアントに自分のスキルを理解してもらうためには必須です。例えば、企業にメール営業する際にも優れたポートフォリオがあれば数倍も契約率が変わってきます。逆に、もしポートフォリオがない状態で案件を獲得しようとすると全く相手にされないので気をつけましょう。
更にいうと魅力的なポートフォリオさえあれば営業が苦手な方でもなんとかなっちゃいます
ふたご
フロントエンドエンジニアはどんなポートフォリオを作ればいいの？
全てのフロントエンドエンジニアにおすすめしたい自作ポートフォリオの作り方をかなり詳しくまとめてみました
執筆した本人がいうのもアレですが、正直ここまで再現性の高い『ポートフォリオの作り方』は他では見たことないです.. ！実際、筆者自身もこの記事の通りにポートフォリオを作成し、公開することでクライアントの獲得や案件対応がかなりスムーズでした。
無料！自作「WordPressテーマ」作り方｜ポートフォリオに最適
ここまでくればあとはクライアントに売り込むだけ！あなただけの魅力溢れるポートフォリオをアピールしましょう。
ふたご
STEP4. フロントエンド案件を受注する｜２パターン紹介
ここまでくればあとは実際に案件を受注して稼いでみましょう。ただ注意してほしいことやオススメの受注方法があるので最後まで気を抜かずいきましょう！
ふたご
でも本当に案件取れるのかな・・
初案件だし、ちゃんとできるか不安・・
そんな方でも大丈夫です。筆者の体験をベースに『初心者におすすめの案件獲得方法』をご紹介するので安心して最後までご覧ください。
これからご紹介する案件獲得方法は下の２つ
- 【難易度：易】未経験可の求人サイトを利用する
- 【難易度：中】メール営業でWeb制作会社と契約する
新卒・転職希望者の方はこちら
>> Webエンジニア転職・新卒・フリーランス｜おすすめ求人サイト・評判あり
【難易度：易】未経験可の求人サイトを利用する
フリーランス初期のあなたにオススメの案件獲得方法はズバリ！未経験可の求人サイトを利用することです。いきなり「Web制作会社と契約する」とか「エンド営業」は不安だな。。という方には特におすすめ◎（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
正直、クラウドソーシングで案件を提案していくのも一つの手なのですが、最近だと競合となるフリーランスが多すぎてあまり推奨はできません。なので現役Webエンジニアの筆者が実際に使ってみて『これなら大丈夫！』と判断した求人サイトを紹介します。
完全無料で使える求人サイトなのでまずは登録だけしてみて、どんな案件があるのかを見てみるといいですよ。サポートも手厚いので初心者の方でも大丈夫です。
対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター
公式サイト
クラウドテック公式ページ
特徴
- クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
- 実務未経験者OK
- 登録社数14万社
- フリーランスや副業案件がケタ違いに多い
- 報酬額や勤務地・職種など希望が通りやすい
- Web制作・コーディングの高単価案件が多い
- リモートワーク案件数は業界トップクラス
- 最短3日で案件獲得できる
現役Webエンジニアの筆者イチオシの求人サイト！フリーランス向けWeb制作案件なら確実に業界トップクラス！営業かけずに案件を獲得できる近道と言えます。しかも、完全無料です。
ふたご
\ フロントエンドエンジニア・Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /無料登録をして案件を見てみる >>
もっと詳しく知りたい方は
>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。
でもどんな案件に応募すればいいの？自分のスキルでできるのかな・・
応募する案件の目安としては８割がた自分のチカラでなんとかできそうかな？くらいのイメージがいいかなと。あとの２割は調べればだいたいクリアできますのでご安心を。
ふたご
フロントエンドエンジニア案件や開発業務に慣れている方にはこの求人サイトがおすすめ！
対象
Webエンジニア・Webディレクター・Webデザイナー・PMなど
公式サイト
フォスターフリーランス
特徴
- クラウドソーシング企業大手の株式会社フォスターネットが運営する案件・求人サイト
- CMでも話題の有名フリーランス求人サイト
- 実務未経験者もOK
- 優良案件が常時5,000件以上
- フリーランス案件がケタ違いに多い
- フルリモートよりも、常駐型案件がメイン（※新型ウイルスにより、在宅勤務急増中）
- 報酬額や勤務地・職種など希望が通りやすい
- Webエンジニアの高単価案件が多い
- 最短3日で案件獲得できる
- 普段お目にかかれない非公開案件多数（全体の90％）
- 登録者の90％以上が高評価
フォスターフリーランスは現役フリーランスエンジニアの筆者がイチオシの案件・求人サイト！フリーランス向けWebエンジニア案件なら確実に業界トップクラス！初めてのフリーランスでもサポートが抜群に厚いので安心。しかも、完全無料です。
（フォスターフリーランスの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
ふたご
＼初めてでも安心のサポート・高単価案件多数／
フォスターフリーランスに無料登録 >>
もっと詳しく知りたい方は
>> フォスターフリーランスの評判・口コミを徹底調査！をご覧ください。
【難易度：中】メール営業でWeb制作会社と契約する｜超有益です
何件か実績のある方はもちろんですが、実務は未経験だけど『WordPressでオリジナルテーマを作れる』などの強みがある方はメール営業でWeb制作会社と契約した方が安定的に収入を得るには近道です。加えて、メール営業は直接取引となるので手数料などが発生しない分、高単価を狙えます。
とは言っても「メール営業なんてやったことないし・・」と不安に感じる方もいると思います。しかし、筆者もメール営業なんて経験はありませんでしたが、営業開始の初月からWeb制作会社3件の契約を獲得できたのでご安心ください。
ご報告です。
ぼくが無料メンターをしている、みそしるさん（@nishinoya_eng ）がWeb制作会社さんとの契約を獲得しました👏
なんと、営業開始から1週間での達成。これはさすがに驚きです….
案件も無事いただけそうとのこと。こんなに嬉しいことってありますか🥲
— ゆうけん@Web制作×ブロガー (@twinzvlog_yk) June 18, 2021
- 「クラウドソーシングでの提案には疲れた」
- 「継続案件で安定的に稼ぎたい」
- 「自分でメールを作るはめんどくさい」
こういったお悩みを抱えている方のために現在記事を執筆中です。
しばしお時間をいただけますと幸いです。
ひとこと言わせてください
ここまでやり切ったあなたは誰に何を言われようがプロのWebエンジニアです！未経験からのスタートで大変だったかと思いますが本当にお疲れ様でした。尊敬します。楽しいWebエンジニアライフを！
まとめ
最後まで読んでいただきありがとうございます。ちょっと長かったかとは思いますが、その分出し惜しみせずだれが実践しても確実に稼げるように書いたつもりです。
【この記事の要約】
筆者が歩んできたロードマップを数十回もの修正と改善を重ねた『超決定版』なのでぜひ挑戦してみてください。この方法が唯一無二で他に方法はないとは言いませんが、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。
