こんにちは！
フロントエンド・マークアップエンジニアのリクです！
僕は元々、Fラン大学卒業後、マーケティング会社にて、目標金額を達成できない売れない営業マンをしていました…
現在は、システム開発の会社で未経験からWebエンジニアとして、サラリーマンをしつつ、副業でもWebエンジニアとしてのお仕事をしています。
そんな僕が、2021年から副業を始めて、1年以内に20万円を稼げるようになったロードマップをご紹介します！
Fラン大学卒業で、「頭が良い」や、「優秀」だなんて言葉が似合わない僕でも稼げることに気がつきました！←ここ大事です！(笑)
では、早速本編へ！
1.コーディングスキルを身につけよう（HTML、CSS）
Web制作でお仕事をするためには、スキルが必須となります。
まずは、基本言語となる、HTMLと、CSSのスキルを身につけましょう！
勉強方法として僕は、Progateを使用して学習をしました。
無料登録で基本となるコースを学習することができます。
また、有料会員になると、簡単な1ページのLPサイトを完成させることができます。
有料プランは、月額980円ほどで登録できます。
Progateをやってみて、足りないと思った方は、ドットインストールというサービスも使用すると良いです。
僕はどちらも利用し、Progateに関して、有料会員で利用し、テレワーク期間中に本業を終えた後、Progateで勉強していました。
挫折が心配…という方へ
プログラミング学習でよく、「挫折しました…」、「理解できません…」といった声を見かけますが、エンジニアの登竜門なので、気にせず進めてみましょう！
大体（6割ほど）を理解できたら次へ進めていくことをおすすめします！
また、無料相談から丁寧にご対応していただけるプログラミングスクールもありますので、どうしても分からない方は、下記のサービスも利用しましょう。
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】
2.HTML、CSSの知識を更に深めましょう
更にHTMLと、CSSの知識を深めるために、実践的に学べる本をご紹介します。
僕自身も未経験で独学している際に勉強した本になります。（実際に存在するような架空のWebサイトを作成することができます。）
3.デベロッパーツールを使えるようになりましょう
デベロッパーツールは、Web制作の現場で絶対使用します。扱いに慣れておくと効率良く制作を進められます。
こちらの記事を参考に実際に触ってみましょう。
様々なWebサイトをデベロッパーツールで見ることで、どんなHTMLで設計して、どんなCSSを記述しているのかが見ることができます。
4.実際に静的サイトを模写コーディングをしてみましょう
下記のサイトの模写コーディングをしてみましょう。
- しずおかライフサポート（https://s-ls.net/）
- イサラ（https://isara.life/）
- オーシャンスタジオ（https://ocean.go2k.net/）
こちらは、完璧に作り切ることも大事なのですが、できるところまでやってみましょう。
分からないところが発生した場合は、最大30分調べてそれでも分からない場合は諦めて飛ばしましょう。
作成できるところから進めていくことがコツです。
画像に関しては、Web上から取得することが可能なので、ダウンロードして素材を準備しましょう。
最初はなるべく、デベロッパーを見ずに作成し、分からなければデベロッパーを見て制作していきましょう。
わかりやすいオススメ参考書
模写ができるようになった方、できなくて悩んでいる方でも下記の参考書を一度挑戦してみてください！
学生でもわかりやすく丁寧に解説され、HTML、CSSの基本を学ぶことができます。
初心者にはかなりちょうど良い参考書となります。
こちらの本では、実際にコードを書いて最終的には本格的なWebサイトを制作するまでがゴールとなっています。
冊ですべて身につくHTML & CSSとWebデザイン入門講座
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2ac08d61.681b9b8a.2ac08d62.8167a13a/?me_id=1213310&item_id=19519150&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F8892%2F9784797398892_1_2.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
5.JavaScriptとjQueryでWebサイトに動きをつけてみましょう
HTMLと、CSSで静的なWebサイトを制作し、慣れてきたところで、Webサイトに動きをつける際によく使用されるJavaScriptとjQueryに触れてみましょう。
JavaScriptを使用することによって、HTMLとCSSではできない、Webサイトに動きをつけることができます。（CSSアニメーションも可能ですが…）
そして、jQueryとは、JavaScriptの仲間であり、JavaScriptでできることを、より簡単な記法で実現できるように設計されたJavaScriptのライブラリ（一部）なのです。
以下の手順で学びましょう。
- プロゲートで最低限、JavaScriptとjQueryの無料プランコースを終えましょう。
- 下記のサイトを参考に模写したサイトの要素をフワッと表示させたりしてみましょう。
参考：【超図解】jQueryでスクロール時に要素をフェードインさせる方法
6.サイトを公開するためのサーバーに関する基本的な知識を身につけておきましょう
一通り制作が完了しましたら、実際にWebサイトが一般公開される仕組みも理解する必要があります。
模写を作成した段階で、現状Webサイトは自分のパソコンでしか見れない状況で、次のステップとして、一般公開させる作業を行います。
結論から言いますと、レンタルサーバーと、使用したいドメインを自分で取得（契約）し、これまで制作したファイルをサーバー上へアップロードすることでやっとWebサイトがブラウザで見れるようになります。
イメージがつかない方は、下記のURLを参考にすると良いです。
参考：ホームページ（Webサイト）の仕組みとドメイン・サーバーとの関係を解説
ここに関しましては、インターネットに関して、基本的な知識となりますので覚えておきましょう。
※僕のおすすめレンタルサーバーは、「エックスサーバー」、「ConoHa」です。個人的な意見になりますが、Webサイトの安定性、サーバー管理画面の利便性、WordPressのインストールや移行などなどで扱いやすいです。
7.架空のサイトを作成し（作成済みのサイトを）、サーバーへアップロードして公開して実績にしましょう
サーバーに関してもある程度理解できたところで、実際にファイルをサーバーへアップロードし、公開してみましょう。
ここで注意点があります。
模写したサイトに関しましては、アクセス制限をかけて公開してください。（著作権に引っかかる可能性があります。）
サーバーを借りるときは必ずお金がかかります。
エックスサーバーに関しましては、年間2万円前後です。
月にすると、2000円弱です。必要経費かつ、自己投資として契約してみましょう。（それ以上のリターンも考えられます。）
8.WordPressを学びましょう
そもそもWordPressとは何か？WordPressで何ができるの？を理解する必要があります。
まずは、僕が書いた下記の記事を参考に他の方の記事も参考にすると良いです。
【初心者向け】WordPressとは？WordPressでできること？
9.PHPを学びましょう
WordPressでよく使用されるPHPを最低限理解しておきましょう。
ブログ機能の実装する際など、WordPressの機能を最大限に引き出すための知識となります。
Progateの無料プランにもPHPコースがあるので、最低限やっておきましょう。
PHPはサーバーサイド言語になりますので、全てを網羅する必要はないです。
10.WordPressで自作テーマを作りましょう
WordPressでは、Webサイトが決まった形が既に存在するテンプレートを使用して作成も可能ですが、コーディング知識があるなら、せっかくなので自作テーマ（オリジナルテンプレート）で実践してみましょう。
何も無い真っ新な状態から、コーポレートサイトを制作し、更にブログ機能をつけてみると言った流れで作成ができると理想です。
WordPressを学ぶオススメ参考書
WordPressを学ぶ際にここで読んで欲しい1冊の本があります。
こちらもわかりやすく、丁寧に解説されている参考書になります。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2ac08d61.681b9b8a.2ac08d62.8167a13a/?me_id=1213310&item_id=20579168&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F9405%2F9784815609405_1_4.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
11.実案件をこなしていきましょう
自力でブログ機能つきのコーポレートサイトが作れるようになりましたね！お疲れ様でした！
ここまでのスキルがつけば、月に20万円以上は稼げます。
今現状、僕はコーポレートサイトを制作して、本業以外に月20万円以上稼げています。
案件は、黙っていても依頼はきませんので、自分から営業をかけてみたり、友達のWebサイトを制作して実案件につなげたりなど、いろいろ模索しながら行動していきましょう。
ここからがやっとスタートラインです。
こちらの記事は、僕自身が経験してきた道をそのまま記載しています。
元々、スキルも実績も無い、売上目標を達成できない営業マンから、独学でここまでのスキルを身につけ、実際に自分で稼げるようになりました。
独学も向き不向きがありますので、向いていない方はスクールを利用したり工夫をしていきましょう。
ぜひ、こちらの記事を参考に、自分で自分の人生を変えてみるのも一つの手段かと思います。
コメント