Progateが終わった後は何をすればいい？模写や写経をはじめる前にこの記事を読んでください！

こんにちは！

主にWeb制作のフリーランスとして活動している「はやた」と申します！

今回はWeb制作・コーダーとしてフリーランスを目指している方に向けた記事になります。

プログラミング・コーディングの勉強をする際に誰もが通る道であろうProgate。

おそらく一番初めにおこなう人が多いんじゃないでしょうか？

しかし、Progateが終わったあとに何をして良いかわからなくなる方も多いと思います。

SNSやネット検索で主に出てくるのは、サイトの模写です。

しかし、僕はいきなり模写に行くべきとは思っておりません。

今回はProgateが終わった時点で僕がおこなった勉強方法を解説します！

Progateが終わったあとはUdemyでサイトを作ってみよう！

みなさんUdemyって知ってますか？

こちら←がUdemyです。

簡単に言ってしまうと動画教材です。

Web制作の教材の多くは、一緒にWebサイトを作ってみようという内容になっています。

HTML・CSSの基礎から教材はありますが、解説しながらライブコーディングをしてくれるので、Progateを修了した段階で始めると良いです！

教材の多くは1万〜2万円と高額なのですが、月に2回ほど割引キャンペーンをおこなっており、なんと1000〜2000円で購入できちゃうのです！

一度買った教材はいつでも見返せるので、セールの時に買ってしまいましょう！

それではProgateを終えたばかりの方におすすめの教材を紹介したいと思います！

Udemyのおすすめ教材！

Progateを修了した方に、学んで欲しい順番で紹介していきます！

優先順位でもあるので、上から順番に見ていってくださいね！

HTML5・CSS3をマスター！

まずはじめに勉強していただきたいのが、

です！

HTML・CSSの文法の基本から、最新のgridレイアウトまで丁寧に解説してくれます。

ProgateでFlexを習ったと思いますが、Gridレイアウトはそれの上位互換です。

これからのWeb制作ではガンガン使われていくと思います。

僕もここでGridを習っていたからこそ、実務で使いこなせています！

Flexまでしか使えない人もいるので、差別化するいいチャンスです！

そして、CSSにおけるレスポンシブ対応の仕方もしっかりと教えてくれます。

スマホとPCで表示をかえるレスポンシブ対応は実務では必須なので、ここで実践して学んでおきましょう！

このコースの一番のいいところは、さまざまな技術を使い、サイトを一つ完成させることができる点にあります。

Progateが終わったばかりだと、サイトってどうやって作るのか全くわからない状態だと思います。

一通り動画通りに実践をしてみて、経験を積んでください！

フロントエンドエンジニアのための「Sass」講座

次に学んで欲しいのがこちら！

みなさんSASSはご存知でしょうか？

簡単にいうと、CSSの上位互換です。

CSSを効率的に書けるシステムが備わっており、関数等も使用できるという優れものになります。

CSSを書けるだけでは、実務では通用しません！

SASSを使えることは必須となります！

この講座はSASSについて簡潔に要点だけを絞って説明してくれており、とても実践向きなので今回紹介しました！

本格的なSASSの書き方を学ぶと、CSSを書きたくなくなっちゃいます(笑)

先ほど紹介した教材の次に是非学んで実践力をつけていきましょう！

6時間でjQueryをマスターしよう

HTML・CSS・SASSの次はjQueryです！

Progateで学んだ方もいるかもしれませんが、jQueryとはサイトにさまざまな動きをつける為に使用するものです。

プログラミング言語ではなく、JavaScriptを簡単に実装する為のライブラリーになります。

サイトでよく見かけるスライドやハンバーガーメニュー、Q＆Aによく使われるアコーディオンやタブの切り替えなど、jQueryが使われている場合は多いです。

この技術も実務をおこなう上で必須となります。

今回紹介しているこの講座は、一番初めに紹介した村守先生の動画教材になります。

jQueryの文法の基礎から、実践的な使い方まで一通り学べます！

注意して欲しいのは、この教材を学んだからと言って、そのまま実務に使えるわけではないです。

jQueryを使う際は、ほとんどの場合コピペとなると思います。

実務ではググってコードを持ってきてもいいですし、自分で過去に作ったコードを利用しても良いです。

この教材で実践的な使い方は学べるので、十分実務で対応するだけの力を身につけることはできます！

他の教材と比べて、特に短時間で学べるのでこの教材をおすすめしました！

jQuery身につけましょう！

サイトの模写について

今回僕は、Progateを修了させた後にUdemyで学ぶことをおすすめしました。

ネットで調べてみたり、SNSを見てみると、Web制作のインフルエンサーの方々はサイトを模写することをオススメしていることが多いです。

特にisaraさんのサイト模写は有名です！

ただ、Progateが終わってすぐにサイト模写をすることを、僕はオススメしていません。

サイト模写ではダメな理由

まず、Progateが終わったあとにサイト模写に入ると、ほとんどの人は手が全く動かないと思います。

それもそのはず、Progateではサイト制作の力はつかないのです。

模写で手が動かなくても、検証でサイトのコードを見て最初は写経（丸写し）すればいいとSNSで話している方が結構います。

その方たちの中に僕も尊敬しているような有名コーダーさんもいらっしゃるのですが、、、

果たして写経して楽しいのでしょうか、、、？

コーディングって結構しんどい作業なんです。

サイトが形になっていく様子を見ることで達成感を感じ、次のステップへと進んでいくものだと思ってます。

それがただコードを写すだけの写経をしていては、Web制作はつまらないものと感じてしまいます。

僕はそう思いました。

Progateは自分の力で進めていき、それが形になっていくので楽しかったですよね？

動画教材は自分の力で進めてないだろうという意見もあるかと思いますが、動画をみながら順を追ってサイトを作り上げていくのはとても楽しいです！

サイト模写をするのは、一度サイト制作の流れを知ってからでも遅くないんじゃないでしょうか？

せっかくプログラミングを勉強するので、楽しみながら成長していきましょう！

楽しみながらWeb制作を学んでいく上で、サイト模写はProgateの次にやるべきではないと僕は思います！

サイト模写よりもデザインカンプ

Udemyでの動画教材をいくつか修了させたら、いよいよサイト模写！！

ではなく、、、

Webデザイナーの方はNoteなどで販売しているデザインカンプを購入し、デザインからのコーディングをしてみましょう！

「え、結局サイト模写はしなくていいの？？」

って思うかもしれませんが、僕はしなくて良いと思います。

Webサイト制作の勉強が終わったら、次は営業をおこない案件を獲得します。

営業をする際に必要なのが実績です。

模写をしたサイトでは自分の実績とならないのです。

isaraさんなどは実績にしていいと書いてありますが、かなり多数の方が実績としているためオススメできません。

デザインカンプからコーディングした制作物は、自分の実績として良いと言ってくださっている方がほとんどです！

見た目のチェックまでしてくれるという方もいます。

そしてもう一つ大事な理由があります。

それは実務ではデザインカンプからコーディングをおこなうということ。

模写力をつけても実務には役に立ちません。

デイトラ運営のショーヘーさんのツイートを参考に貼っておきます！

https://twitter.com/showheyohtaki/status/1348807488729042945

サイト模写より、デザインカンプ！

覚えておいてください！

まとめ

今回はProgate終了後に何をしたらいいのかということを書いてきました！

Progateを楽しんでできた方には、今回紹介したUdemyの動画講座はもっと楽しんで学習することができると思います！

ぜひこの記事を参考にしてフリーランスを目指してください！

ここまでお読みいただきありがとうございました！