こういった方向けです。
この記事を書いた人
今回は「完全独学」でWeb制作フリーランスになった僕の経験をもとに、月５万円稼ぐまでの学習ロードマップをシェアしていきます。
それでは、さっそく見ていきましょう。
Web制作で月5万円稼ぐ独学ロードマップ
まず初めに、全体像がこちら。
- HTML、CSSを学ぼう
- レスポンシブ対応を習得しよう
- 模写コーディングに挑戦しよう
- jQuery、Sassを学ぼう
- ポートフォリオを作ろう
- サイトの公開方法を理解しよう
- PHPの基礎を学ぼう
- WordPressを学ぼう
- デザインツールを触ってみよう
- 案件の流れを理解しよう
上記が、月５万円稼ぐまでのロードマップです。
ちなみにこの時点で、「なんて言ってるか全然理解できない」という人は、まずは「TechAcademyの無料体験」に参加して、プログラミングとはどういうものなのかを理解しましょう。
というわけで、順番に解説していきますね。
①HTML、CSSを学ぼう
まずはWeb制作独学の入り口として、HTMLとCSSを学びます。
学習方法
Progate、ドットインストール
イメージで言うと・・・
- HTML：サイトの構造をつくる
- CSS：サイトのデザインをする
こういった感じです。どちらもWeb制作学習の中で一番重要となるスキルになるので、特に重視して学習してください。
②レスポンシブ対応を習得しよう
レスポンシブとは「PC・タブレット・スマホ」など、どの端末でも最適に表示することを言います。
学習方法
Progate、ドットインストール
また、この時点でデベロッパーツールも理解しておきましょう。
下記記事が参考になります。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
③模写コーディングに挑戦しよう
模写コーディングとは、既存のサイトを見ながら、同じようにコーディングしていくことです。
大半の人は、ここで挫折します。
学習方法
いきなり模写はハードル高いので、まずは写経からやってみましょう。
写経とは、既存のコードをそのまま写すことです。これをやることによって、コーディングの流れが理解でき、模写がスムーズにできるようになります。
写経用サイトが欲しい方は、こちらからどうぞ。
【Web制作独学】写経用サイトを無料公開します【完全初心者向け】
④jQuery、Sassを学ぼう
この２つに関しては、軽く学習すればOKです。
学習方法
Progate
簡単に説明すると、
- jQuery：サイトに動きをつけるスキル
- Sass：CSSが効率的に書けるスキル
こんなイメージです。両方とも「基礎だけ学び、何となくイメージを掴んでおく→必要となったら、しっかり学ぶ」これで大丈夫です。
どちらも短期習得可能なので、必要となったらちゃんと学べば問題ありません。
⑤ポートフォリオを作ろう
これまで学習したことを活かして、営業用のポートフォリオを作りましょう。
仕事を受注したいなら、これは必須です。
ただ、初心者がゼロからデザインを考えて作るのは不可能なので、初めに２〜３つほど参考サイトを探しましょう。
「参考にしつつ、自分なりにアレンジして作る」といったやり方がおすすめです。
よければ、僕のnoteも活用してください。
【Web制作初心者向け】 ポートフォリオをゼロから一緒に作ってみよう！
⑥サイトの公開方法を理解しよう
ポートフォリオが完成したら、世の中へ公開してみましょう。
「サーバー料金がかかるから」と言ってやらない人がいますが、今後Web制作を仕事にしていくなら、この時点で実践しながら理解しておくことが大切です。
簡単に公開方法を説明すると・・・
- サーバーを契約
- ドメインを契約
- サーバーとドメインを紐付ける
- FTPソフトを使って、サーバー上にファイルをアップロード
こういった流れです。
ぶっつけ本番でやるのはリスクなので、最初は自分のポートフォリオで練習してみましょう。
⑦PHPの基礎を学ぼう
PHPを学ぶ理由は、WordPressの学習につなげるためです。
学習方法
Progate
余裕のある方は、何か簡単なWebサービスをPHPで作ってみましょう。
とは言え、PHPを深く理解しなくてもWordPressはできるので、基礎だけ押さえておけば大丈夫です。（Progate１〜２周でOK）
⑧WordPressを学ぼう
WordPressができると、案件の幅が広がり、単価も大幅にUPします。
なので、ここは重点的に学びましょう。
学習方法
書籍、Youtube
こちら１冊読めば、最低限必要な知識は身につきます
ビジネスサイトを作って学ぶWordPressの教科書
Youtubeに関しては、以下３名の動画で学びましょう。
WordPressは非常に奥が深いため、どこまで学べばいいか分からなくなってしまう方も多いです。なのでまずは、以下３つを目標に進めることをおすすめします。
- HTMLで構築したサイトをWordPress化できる知識
- 投稿記事を取得し、表示できる知識
- プラグインを使ってお問い合わせフォームを作れる知識
上記３つができれば、十分仕事になります。ある程度理解してきたら、自分のポートフォリオをWordPress化してみましょう。
WordPressの詳しい解説は、こちらをどうぞ。 続きを見る
WordPress案件で稼ぐために必要な知識と勉強方法を解説【Web制作初心者向け】
⑨デザインツールを触っておこう
コーディング案件では、「PSDデータ」「aiデータ」「XDデータ」のどれかでデザインを渡されるケースが多いので、基本的なツールの使い方は理解しておきましょう。
押さえておくこと
- 画像の書き出し
- 幅の確認
- フォントの確認
- カラーコードの確認
まずは上記５つができれば問題ありません。僕はこれをやらずに案件受注してしまい、めちゃくちゃ苦労した思い出があるので、皆さんはしっかり学習しておいてください。
デザインカンプからのコーディング練習は、しょーごさんという方のnoteがおすすめです。
【即戦力編】Photoshopデザインカンプからのコーディング練習
⑩案件の流れを理解しよう
下請けの場合、制作会社の指示に従って動くので問題ないですが、直案件（エンドクライアントからの受注）の場合は、「全体像」を把握しておく必要があります。
下記のnoteでは、「受注から納品までの具体的な流れ」をまとめたので、直案件に挑戦したい方はこちらもぜひ。
【Web制作エンド案件】受注から納品までの進め方【全体像が分かる】
以上が僕のロードマップとなります。
しかし、これだけではスキルを習得しただけなので、まだ月５万円は稼げません。
というわけで次から、「案件を受注する方法」を解説していきますね。
独学ロードマップを完走後、Web制作案件を受注する方法
結論から言うと、以下２つがおすすめです。
- メール営業
- インスタ営業
制作会社の下請け狙いなら、メール営業。
企業やお店の直請け狙いなら、インスタ営業。
といった感じです。
詳しいやり方に関しては、長くなるので別記事でまとめました。 続きを見る
Web制作で案件受注するための営業方法【トーク力はいらない】
分からないことがあれば、TwitterのDMでご相談くださいませ。
@shunkurahayashi
以上、Web制作学習頑張ってください！
最後まで読んでいただきありがとうございました（＾_＾）