Web制作

【2023年最新】Web制作で月5万円稼ぐ独学ロードマップ【完全初心者向け】

2020-08-20

「Web制作を独学しようと思っているけど、月5万円稼ぐまでのロードマップが知りたい...」

こういった方向けです。
 

 

この記事を書いた人

Shun
24歳|Web制作しながら世界中を旅してます|学生時代にAUSでワーホリ→Web制作の独学開始→制作会社で実務経験を積む→新卒で独立|サブスクHP制作事業運営|旅暮らし2年目|場所に縛られない自由な生き方を発信中

 

今回は「完全独学」でWeb制作フリーランスになった僕の経験をもとに、月5万円稼ぐまでの学習ロードマップをシェアしていきます。
 

それでは、さっそく見ていきましょう。
 

Web制作で月5万円稼ぐ独学ロードマップ

Web制作独学ロードマップ
 
まず初めに、全体像がこちら。

  1. HTML、CSSを学ぼう
  2. レスポンシブ対応を習得しよう
  3. 模写コーディングに挑戦しよう
  4. jQuery、Sassを学ぼう
  5. ポートフォリオを作ろう
  6. サイトの公開方法を理解しよう
  7. PHPの基礎を学ぼう
  8. WordPressを学ぼう
  9. デザインツールを触ってみよう
  10. 案件の流れを理解しよう

 

上記が、月5万円稼ぐまでのロードマップです。
 

ちなみにこの時点で、「なんて言ってるか全然理解できない」という人は、まずは「TechAcademyの無料体験」に参加して、プログラミングとはどういうものなのかを理解しましょう。

>>TechAcademyの無料体験はこちら
 

というわけで、順番に解説していきますね。
 

①HTML、CSSを学ぼう

まずはWeb制作独学の入り口として、HTMLとCSSを学びます。
 

学習方法

Progate、ドットインストール


 

イメージで言うと・・・

  • HTML:サイトの構造をつくる
  • CSS:サイトのデザインをする

 

こういった感じです。どちらもWeb制作学習の中で一番重要となるスキルになるので、特に重視して学習してください。
 

②レスポンシブ対応を習得しよう

レスポンシブとは「PC・タブレット・スマホ」など、どの端末でも最適に表示することを言います。
 

学習方法

Progate、ドットインストール


 

また、この時点でデベロッパーツールも理解しておきましょう。
 

下記記事が参考になります。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
 

③模写コーディングに挑戦しよう

模写コーディングとは、既存のサイトを見ながら、同じようにコーディングしていくことです。
 

大半の人は、ここで挫折します。
 

学習方法

いきなり模写はハードル高いので、まずは写経からやってみましょう。


 

写経とは、既存のコードをそのまま写すことです。これをやることによって、コーディングの流れが理解でき、模写がスムーズにできるようになります。
 

写経用サイトが欲しい方は、こちらからどうぞ。
【Web制作独学】写経用サイトを無料公開します【完全初心者向け】
 

④jQuery、Sassを学ぼう

この2つに関しては、軽く学習すればOKです。
 

学習方法

Progate


 

簡単に説明すると、

  • jQuery:サイトに動きをつけるスキル
  • Sass:CSSが効率的に書けるスキル

 

こんなイメージです。両方とも「基礎だけ学び、何となくイメージを掴んでおく→必要となったら、しっかり学ぶ」これで大丈夫です。
 

どちらも短期習得可能なので、必要となったらちゃんと学べば問題ありません。
 

⑤ポートフォリオを作ろう

これまで学習したことを活かして、営業用のポートフォリオを作りましょう。
仕事を受注したいなら、これは必須です。
 

ただ、初心者がゼロからデザインを考えて作るのは不可能なので、初めに2〜3つほど参考サイトを探しましょう。
 

「参考にしつつ、自分なりにアレンジして作る」といったやり方がおすすめです。
 

よければ、僕のnoteも活用してください。
【Web制作初心者向け】 ポートフォリオをゼロから一緒に作ってみよう!
 

⑥サイトの公開方法を理解しよう

ポートフォリオが完成したら、世の中へ公開してみましょう。
 

「サーバー料金がかかるから」と言ってやらない人がいますが、今後Web制作を仕事にしていくなら、この時点で実践しながら理解しておくことが大切です。
 

簡単に公開方法を説明すると・・・

  • サーバーを契約
  • ドメインを契約
  • サーバーとドメインを紐付ける
  • FTPソフトを使って、サーバー上にファイルをアップロード

 

こういった流れです。
 

ぶっつけ本番でやるのはリスクなので、最初は自分のポートフォリオで練習してみましょう。
 

⑦PHPの基礎を学ぼう

PHPを学ぶ理由は、WordPressの学習につなげるためです。
 

学習方法

Progate


 

余裕のある方は、何か簡単なWebサービスをPHPで作ってみましょう。
 

とは言え、PHPを深く理解しなくてもWordPressはできるので、基礎だけ押さえておけば大丈夫です。(Progate1〜2周でOK)
 

⑧WordPressを学ぼう

WordPressができると、案件の幅が広がり、単価も大幅にUPします。
なので、ここは重点的に学びましょう。
 

学習方法

書籍、Youtube


 

こちら1冊読めば、最低限必要な知識は身につきます
ビジネスサイトを作って学ぶWordPressの教科書
 

Youtubeに関しては、以下3名の動画で学びましょう。

 

WordPressは非常に奥が深いため、どこまで学べばいいか分からなくなってしまう方も多いです。なのでまずは、以下3つを目標に進めることをおすすめします。

  • HTMLで構築したサイトをWordPress化できる知識
  • 投稿記事を取得し、表示できる知識
  • プラグインを使ってお問い合わせフォームを作れる知識

 

上記3つができれば、十分仕事になります。ある程度理解してきたら、自分のポートフォリオをWordPress化してみましょう。
 

WordPressの詳しい解説は、こちらをどうぞ。


 

⑨デザインツールを触っておこう

コーディング案件では、「PSDデータ」「aiデータ」「XDデータ」のどれかでデザインを渡されるケースが多いので、基本的なツールの使い方は理解しておきましょう。
 

押さえておくこと

  • 画像の書き出し
  • 幅の確認
  • フォントの確認
  • カラーコードの確認

 

まずは上記5つができれば問題ありません。僕はこれをやらずに案件受注してしまい、めちゃくちゃ苦労した思い出があるので、皆さんはしっかり学習しておいてください。
 

デザインカンプからのコーディング練習は、しょーごさんという方のnoteがおすすめです。
【即戦力編】Photoshopデザインカンプからのコーディング練習
 

⑩案件の流れを理解しよう

下請けの場合、制作会社の指示に従って動くので問題ないですが、直案件(エンドクライアントからの受注)の場合は、「全体像」を把握しておく必要があります。
 

下記のnoteでは、「受注から納品までの具体的な流れ」をまとめたので、直案件に挑戦したい方はこちらもぜひ。
【Web制作エンド案件】受注から納品までの進め方【全体像が分かる】

 

以上が僕のロードマップとなります。
 

しかし、これだけではスキルを習得しただけなので、まだ月5万円は稼げません。
 

というわけで次から、「案件を受注する方法」を解説していきますね。
 

独学ロードマップを完走後、Web制作案件を受注する方法

独学ロードマップを完走後、Web制作案件を受注する方法
 
結論から言うと、以下2つがおすすめです。

  • メール営業
  • インスタ営業

 

制作会社の下請け狙いなら、メール営業。
企業やお店の直請け狙いなら、インスタ営業。

 

といった感じです。
 

詳しいやり方に関しては、長くなるので別記事でまとめました。


 

分からないことがあれば、TwitterのDMでご相談くださいませ。
@shunkurahayashi
 

以上、Web制作学習頑張ってください!
 

最後まで読んでいただきありがとうございました(^_^)

-Web制作
-