本記事では独学で月３０万円以上稼ぐ「Webエンジニア・コーダー」になるためのロードマップを、Web制作で月８０万超稼ぐ筆者がどこよりもわかりやすく解説いたします。
【本記事を読むことによる目標到達点】
- 今は未経験の方でも（最短）3ヶ月の努力でWebエンジニア・コーダーとして現場で働けるスキルが身に付く
- Web制作案件を受注して月収30万円以上の継続的な収入が手に入る
- 独学でも大丈夫かな・・
- Webエンジニア・コーダーに必要なスキルはなに？・・
- Web制作で稼ぐための具体的な方法を知りたい・・
- できるだけ節約したい・・
- いろんな方法を試したけど、全然稼げるようにならなかった・・
- 毎日努力しているのに全然スキルが上達しない・・
- 案件の受注方法を知りたい・・
こんな悩みや疑問を５分で解消できる記事内容になっています。
ふたご
筆者がスキルなし・人脈なし・お金もない、なにもない中で実現できたロードマップをご紹介。そして6ヶ月以上も改善し続けた集大成であり、なにより『再現性の高い』内容です。
全てを無料で公開していますが、はっきり言ってnoteなどで売られている1万円ほどのロードマップ記事よりも再現性の高さには自信があります。
この記事の信頼性（ゆうけんブログの筆者はこんな人）
- 現役Webエンジニア・コーダーが執筆
- 最高月収7桁のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数2,000人超（→@twinzvlog_yk）
- Web制作のメンター経験多数
- 認定ランサー（ランサーズ最高ランク）
目次
【月30万稼ぐ】未経験からの「Webエンジニア・コーダー」3ヶ月独学ロードマップ｜フリーランス・副業【Webマーケティング含む】
何からやればいいの？と不安な方も多いかと思いますが、これから３ステップで順番に手順を説明していくので、未経験からWebエンジニア・コーダーとして稼いでいくための ”はじめの一歩” として読み進めてみてください。
ふたご
案件獲得方法からご覧になりたい方は>>STEP3からご覧ください！
STEP1. UdemyでWeb制作（コーディング）スキルを独学で学習（期間：１〜２ヶ月）
「本やネット教材で学習したけど全然身につかなかった。。」
「もう何を使って学習すればいいのかわからない。。」
「Web制作で本当に必要な学習教材ってどれなのかな。。」
上記のような悩みは全て解決できます。下の記事で紹介しているUdemy講座は、これ以上時間を無駄にしたくない方にはドンピシャな内容となっています。最短で１ヶ月後には『Web制作に必要なコーディングスキル』をほぼ身につけられるように厳選しています。
【厳選７選】Udemy『Web制作』おすすめ講座｜レビューあり
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設計を学ぶなら
STEP2. Web制作スキルを活かして、ポートフォリオを作ろう（期間：１ヶ月）
ポートフォリオってなに？
ポートフォリオは簡単にいうと実績を示すための作品集です
自分はこれだけのことができるんだぞ！とアピールする際に使います。
クライアントに自分のスキルを理解してもらうためには必須です。例えば、Web制作会社にメール営業する際にも優れたポートフォリオがあれば数倍も契約率が変わってきます。逆に、もしポートフォリオがない状態で案件を獲得しようとすると全く相手にされないので気をつけましょう。
更にいうと魅力的なポートフォリオさえあれば営業が苦手な方でもなんとかなっちゃいます
ふたご
ポートフォリオってなにを作ればいいの？
全てのWebデザイナーが作るべき自作ポートフォリオの作り方をかなり詳しくまとめてみました
執筆した本人がいうのもアレですが、正直ここまで再現性の高い『ポートフォリオの作り方』は他では見たことないです.. ！実際、筆者自身もこの記事の通りにポートフォリオを作成し、公開することでクライアントの獲得や案件対応がかなりスムーズでした。
【無料】自作「WordPressテーマ」作り方｜ポートフォリオに最適
ここまでくればあとはクライアントに売り込むだけ！あなただけの魅力溢れるポートフォリオをアピールしましょう。
ふたご
STEP3. Web制作案件を受注する｜２パターン紹介
ここまでくればあとは実際に案件を受注して稼いでみましょう。ただ注意してほしいことやオススメの受注方法があるので最後まで気を抜かずいきましょう！
ふたご
でも本当に案件取れるのかな・・
初案件だし、ちゃんとできるか不安・・
そんな方でも大丈夫です。筆者の体験をベースに『初心者におすすめの案件獲得方法』をご紹介するので安心して最後までご覧ください。
これからご紹介する案件獲得方法は下の２つ
- 【難易度：易】未経験可の求人サイトを利用する
- 【難易度：中】メール営業でWeb制作会社と契約する
新卒・転職希望者の方はこちら
>> Webエンジニア転職・新卒・フリーランス｜おすすめ求人サイト・評判あり
【難易度：易】未経験可の求人サイトを利用する
フリーランス初期のあなたにオススメの案件獲得方法はズバリ！未経験可の求人サイトを利用することです。
正直、クラウドソーシングで案件を提案していくのも一つの手なのですが、最近だと競合となるフリーランスが多すぎてあまり推奨はできません。なので現役Webデザイナーの筆者が実際に使ってみて『これなら大丈夫！』と判断した求人サイトを紹介します。
完全無料で使える求人サイトなのでまずは登録だけしてみて、どんな案件があるのかを見てみるといいですよ。サポートも手厚いので初心者の方でも大丈夫です。
対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター
公式サイト
クラウドテック公式ページ
特徴
- クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
- 実務未経験者でもOK
- 登録社数14万社
- フリーランス・個人事業主向け案件がケタ違いに多い
- 報酬額や勤務地・職種など希望が通りやすい
- Web制作・コーディングの高単価案件が多い
- リモートワーク案件数は業界トップクラス
- 最短3日で案件を獲得できる
現役Webデザイナーの筆者イチオシの求人サイト！フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。
ふたご
もっと詳しく知りたい方は
>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。
でもどんな案件に応募すればいいの？自分のスキルでできるのかな・・
応募する案件の目安としては８割がた自分のチカラで完成できそうかな？くらいのイメージがいいかなと。あとの２割は調べればだいたいクリアできますのでご安心を。
ふたご
【難易度：中】メール営業でWeb制作会社と契約する｜超有益です
何件か実績のある方はもちろんですが、実務は未経験だけど『WordPressでオリジナルテーマを作れる』などの強みがある方はメール営業でWeb制作会社と契約した方が安定的に収入を得るには近道です。加えて、メール営業は直接取引となるので手数料などが発生しない分、高単価を狙えます。
とは言っても「メール営業なんてやったことないし・・」と不安に感じる方もいると思います。しかし、筆者もメール営業なんて経験はありませんでしたが、営業開始の初月からWeb制作会社3件の契約を獲得できたのでご安心ください。
先に言っておきます。
筆者はこれからご紹介する記事の内容を９割型真似してメール営業をしました。
なぜなら、素人が考えた手法で営業をしても失敗する未来しか見えなかったからです。
それでは時間をドブに捨てるようなものなので『投資だと思って』デイトラ（Web制作のオンラインスクール）を運営するショーヘーさんが執筆した記事を購入しました。価格は2,980円なので飲み会を1回我慢すれば購入できる金額です。結果は大正解。いわば、営業の加速装置でした。
実際、ぼくがメンターをしている方もこちらの記事通りにメール営業をしたら、1週間で制作会社との契約を獲得できました。
ご報告です。
ぼくが無料メンターをしている、みそしるさん（@nishinoya_eng ）がWeb制作会社さんとの契約を獲得しました👏
なんと、営業開始から1週間での達成。これはさすがに驚きです….
案件も無事いただけそうとのこと。こんなに嬉しいことってありますか🥲
— ゆうけん@Web制作×ブロガー (@twinzvlog_yk) June 18, 2021
- 「クラウドソーシングでの提案には疲れた」
- 「継続案件で安定的に稼ぎたい」
- 「自分でメールを作るはめんどくさい」
こんな悩みを抱えている方はぜひ読んでみてください。
内容を具体的にいうと、
- 営業に必要なスキルレベルや準備するものがわかる
- 直営業での注意点がわかる
- 営業先の見つけ方がわかる
- 相手に響く提案文の書き方がわかる
- 提案文のテンプレが記載されている(ほぼコピペで使える)
- 直営業の成功率を上げる方法がわかる
控えめに言っても『筆者がWeb制作で月収7桁を超えることができたのはこの記事があってこそ』です。
この記事を読んでその通りに実践することで、月収30万円を達成するまでの時間を大幅に節約できます。筆者自身、『有料記事なんて怪しいし、嫌だなー』と思っていましたが、これなら3倍の金額を出してもいいと、初めて思えた記事なのでこれだけはぜひ読んでもらいたいです。
あとはやるだけです！
番外編1｜【応用編】Skillshareでより高度な学習を始めよう
Skillshareとはアメリカ発祥の年額制の動画学習サービスです。よくUdemyと比較されるサービスですが、
- Udemyよりもクリエイティブに特化している
- より応用的な講座が多い
- とにかく安い・・！！
- 日本語音声がない
これらが大きな特徴です。
つまり、実際の案件をこなしていく際にも『これやっておいてよかった。。』と思えるような講座が多く配信されています。
そして何よりも、安いです。。
年額99ドル（11,000円ほど）、つまり月々約900円の計算になります。
しかも、初回のみ2週間無料で利用できるので、気に入らなかった場合は即解約もOK！
特にWordPressの講座は山ほどあるので、中級レベルへの階段を上りたい方はぜひ受講してみてください。
ちなみに、筆者のおすすめ講座は『The Complete WordPress Theme Development Course』です！
筆者はこの講座を受講したことでWeb制作会社との案件対応も楽々こなせました。多分ですが、UdemyにもYouTubeにもこれ以上の講座は存在しません。
番外編2｜Adobe Photoshop/Illustrator/XDの基本的な使い方を学習
まずはWebサイトのデザインを作っていく上で必要となってくるAdobeソフトをインストールしていきます。
Adobeソフトは使ってみたいけど、どのプランを選べばいいのかわからない・・
そんな疑問がお持ちの方もいるかもしれません。
現役Webエンジニアの筆者としては『結論、コンプリートプラン一択でOK』だと考えています。
根拠は下の説明をご覧ください。
コンプリートプラン
【料金】
本体価格5,680 円 / 月
【プラン内容】
Adobeツールをほぼ全て（20以上）利用できます。特にWebデザイナーなら確実に使うことになる『Photoshop / Illustrator / Adobe XD /Dreamweaver』を格安で使えるので迷わずコンプリートプランをインストールすることを推奨します。（下記参照）
※『Photoshop / Illustrator / Adobe XD / Dreamweaver』を単体で購入した場合
- 2,480 円/月：Photoshop – 単体プラン
- 2,480 円/月：Illustrator – 単体プラン
- 1,180 円/月：Adobe XD – 単体プラン
- 2,480 円/月：Dreamweaver – 単体プラン
合計：8,620 円/月
つまり、コンプリートプランなら3,000円近くお得に使える計算になります。
ちなみに現役Webデザイナーはほとんどの方がこのプランを使っているのでご安心を。
Adobeのプランは14日間の返金保証あり
コンプリートプランのインストール方法がわからない方は【失敗しない】Adobeコンプリートプランのインストール手順をご覧ください。
それでは、Webデザインの基礎となるAdobeツールの学習を始めていきましょう。Webエンジニア・コーダーとして案件を取っていく場合にはAdobeソフトを完璧に使えるようになる必要はありません。
なんなら「XD/Photoshop/Illustratorから素材を取り出す」ことさえ出来れば他の使い方はほぼ無視で大丈夫です。とはいえAdobeの使い方を熟知していれば受注できる案件の幅が飛躍的に広がるので僕個人としては学習しておくに越したことはないかなと。
ということで今回ご紹介するAdobe学習講座はWebデザイナーの現場で即戦力としても働けるように厳選しています。これらの講座を全て受講しておけば、実際のWebデザイン案件でも失敗しません。
Webデザイナーに必要な全てのAdobeスキルが身につくので普段Twitterでコンサルしている方々にも４講座全てを受講しておくことを推奨しています。（学習開始から2ヶ月で初案件を獲得した方もいます）
- 『教材には極力お金をかけたくない』
- 『学習の段階で失敗したくない』
- 『初心者向けの教材で学び始めたい』
こんな方のための講座です。完全初心者の方が独学で「Adobeツールの使い方」をマスターするには十分すぎる内容なので、Adobeコンプリートプランをインストールできた方は下の記事を参考に学習を開始しましょう！
【Webデザイナー厳選】Udemy『Adobe』おすすめ講座4選+本｜評判あり
Webデザイナーに必要な講座をまとめて知りたい方は下記記事をご覧ください。
番外編3｜【エンド営業】Webマーケティングスキルを習得して高単価案件＆副収入ゲット｜SEO・SNS
なぜ、Web制作のエンド営業でWebマーケスキルが有利に働くのでしょうか？
単純ですが、HPやLPに興味を持っている店舗や企業は売上や利益を増やしたいと考えています。それを解決できるのがWebマーケティングだからです。僕自身の経験で恐縮ですが、エンド営業では制作物や制作費よりも「出来上がった後のサポート」により関心を持つクライアントが多い印象です。そのサポートに「Webマーケティング」を絡めればサブスクでの契約で月3~5万円以上というのも普通に可能です。
本章でご紹介するWebマーケティングスキルは、下の２つとなります。
- SEO集客方法
- SNS集客方法
ここからは筆者自身が１年間本気で取り組んで成果を出した方法を余すことなくお伝えいたします。これらを実践し、１年間継続してみてください。ほぼ労働なしにも毎月収益が発生する上に、Webマーケの実績が作れ、エンド営業でかなり優位な立場を取ることができます。
正直、全てを赤裸々に公開したところで僕に金銭的なプラスはほとんどありません。しかし「Web制作スキルは身に付いたけど稼げない」といった相談をTwitterで毎日受けるたび、なんとかしたいけど何もできない自分がもどかしいと感じていました。でも記事にしてしまえば、微力ながら誰かの辛さや苦しみを取り除けるんじゃないか。。そんな想いから今回本気でWebマーケティングスキルの習得方法を書いて見ることにしました。
というわけで本気でWebマーケティングスキルを身につけたい方は下の記事をご覧ください。
ただいま執筆中ですので少々お待ちください。
ひとこと言わせてください
ここまでやり切ったあなたは誰に何を言われようがプロのWebエンジニアです！未経験からのスタートで大変だったかと思いますが本当にお疲れ様でした。尊敬します。楽しいWebエンジニアライフを！
まとめ
最後まで読んでいただきありがとうございます。ちょっと長かったかとは思いますが、その分出し惜しみせずだれが実践しても確実に稼げるように書いたつもりです。
【この記事の要約】
- 【月30万稼ぐ】未経験からの「Webエンジニア・コーダー」3ヶ月独学ロードマップ｜フリーランス・副業
- まとめ
筆者が歩んできたロードマップを数十回もの修正と改善を重ねた『超決定版』なのでぜひ挑戦してみてください。この方法が唯一無二で他に方法はないとは言いませんが、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。
