【本記事を読むことによる目標到達点】
- 今は未経験の方でも（最短）3ヶ月の努力でWebエンジニア・コーダーとして現場で働けるスキルが身に付く
- Web制作案件を受注して月収30万円以上の継続的な収入が手に入る
- 独学でも大丈夫かな・・
- Webエンジニア・コーダーに必要なスキルはなに？・・
- Web制作で稼ぐための具体的な方法を知りたい・・
- できるだけ節約したい・・
- いろんな方法を試したけど、全然稼げるようにならなかった・・
- 毎日努力しているのに全然スキルが上達しない・・
- 案件の受注方法を知りたい・・
こんな悩みや疑問を５分で解消できる記事内容になっています。
ふたご
筆者がスキルなし・人脈なし・お金もない、なにもない中で実現できたロードマップをご紹介。そして6ヶ月以上も改善し続けた集大成であり、なにより『再現性の高い』内容です。
全てを無料で公開していますが、はっきり言ってnoteなどで売られている1万円ほどのロードマップ記事よりも再現性の高さには自信があります。
この記事の信頼性（ゆうけんブログの筆者はこんな人）
- 現役Webエンジニア・コーダーが執筆
- 最高月収7桁のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数2,000人超（→@twinzvlog_yk）
- Web制作のメンター経験多数
- 認定ランサー（ランサーズ最高ランク）
目次
【月30万稼ぐ】未経験からの「Webエンジニア・コーダー」3ヶ月独学ロードマップ｜フリーランス・副業【Webマーケティング含む】
何からやればいいの？と不安な方も多いかと思いますが、これから４ステップで順番に手順を説明していくので、未経験からWebエンジニア・コーダーとして稼いでいくための ”はじめの一歩” として読み進めてみてください。
ふたご
STEP1. 目標設定｜どんな案件があるのか確認
まず、自分の目標を明確に設定するために自分がどんな案件をこなしていくのかを確認してみましょう。「いや、そんなステップ必要ないでしょ〜」と思うかもしれませんが、1番大事なことなので、実践してみてほしいです。
ここをおろそかにしてしまうと、当然ですが、目標が曖昧なので、ゴールに辿り着けません。しかも、必ず「あれ、なんのために学習してるんだっけ」となります。時間を無駄にしたくない方は、まず目標を明確に設定しましょう。
クラウドテックは現役Webデザイナーの筆者がイチオシの求人サイトです。フリーランス向けWeb制作案件なら確実に業界トップクラス！営業かけずに案件に困らなくなる近道と言えます。しかも、完全無料です。
（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
ふたご
\ エンジニア・Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /無料登録をして案件を見てみる >>
もっと詳しく知りたい方は
>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。
目標を設定できた方は次のステップに進みましょう！
STEP2. 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設計を学ぶなら
STEP3. Web制作スキルを活かして、ポートフォリオを作ろう（期間：１ヶ月）
ポートフォリオってなに？
ポートフォリオは簡単にいうと実績を示すための作品集です
自分はこれだけのことができるんだぞ！とアピールする際に使います。
クライアントに自分のスキルを理解してもらうためには必須です。例えば、Web制作会社にメール営業する際にも優れたポートフォリオがあれば数倍も契約率が変わってきます。逆に、もしポートフォリオがない状態で案件を獲得しようとすると全く相手にされないので気をつけましょう。
更にいうと魅力的なポートフォリオさえあれば営業が苦手な方でもなんとかなっちゃいます
ふたご
ポートフォリオってなにを作ればいいの？
全てのWeb制作学習者におすすめしたい自作ポートフォリオの作り方をかなり詳しくまとめてみました
執筆した本人がいうのもアレですが、正直ここまで再現性の高い『ポートフォリオの作り方』は他では見たことないです.. ！実際、筆者自身もこの記事の通りにポートフォリオを作成し、公開することでクライアントの獲得や案件対応がかなりスムーズでした。
無料！自作「WordPressテーマ」作り方｜ポートフォリオに最適
ここまでくればあとはクライアントに売り込むだけ！あなただけの魅力溢れるポートフォリオをアピールしましょう。
ふたご
STEP4. Web制作案件を受注する｜２パターン紹介
ここまでくればあとは実際に案件を受注して稼いでみましょう。ただ注意してほしいことやオススメの受注方法があるので最後まで気を抜かずいきましょう！
ふたご
でも本当に案件取れるのかな・・
初案件だし、ちゃんとできるか不安・・
そんな方でも大丈夫です。筆者の体験をベースに『初心者におすすめの案件獲得方法』をご紹介するので安心して最後までご覧ください。
これからご紹介する案件獲得方法は下の２つ
- 【難易度：易】未経験可の求人サイトを利用する
- 【難易度：中】メール営業で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
- 「クラウドソーシングでの提案には疲れた」
- 「継続案件で安定的に稼ぎたい」
- 「自分でメールを作るはめんどくさい」
こういったお悩みを抱えている方のために現在記事を執筆中です。
しばしお時間をいただけますと幸いです。
番外編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ヶ月独学ロードマップ｜フリーランス・副業
- まとめ
筆者が歩んできたロードマップを数十回もの修正と改善を重ねた『超決定版』なのでぜひ挑戦してみてください。この方法が唯一無二で他に方法はないとは言いませんが、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。
