ProgateでHTML、CSS、jQuery、PHPが終わったらやるべきこと【僕の実体験です】

完全未経験からWEBエンジニアになったがむしゃらワーカーしゅう丸(@shumarukiti)です!

ProgateでHTML、CSS、jQueryを勉強してとりあえず終わったけどやることがわからないな・・・。WEB制作の案件を受注したいけど、まだ仕事を取るのは早いだろうし、それまでに何やればいいか教えて欲しいな。

といった疑問にお答えします。

結論ですが、実務を想定したスキルを積むべしです!

残念ながらProgateをやるだけじゃ実務レベルに到達することはできません。

ただProgateで勉強すると基礎固めはある程度の状態になっているので、一通り勉強をし終わった方が一気に実務レベルにもっていく方法について解説します。

ちなみにこの記事を書いている僕はプログラミング未経験からProgateでHTML、CSS、jQuery、PHPを勉強しまして1ヶ月目には3万円のHP制作案件、3ヶ月目には20万円ほどのHP制作案件を受注しました。Progateでの学習が終わってからの僕は、次にやることがわからんずに足踏みをしていましたが、この記事に書いていることを実践することで実務レベルまでレベルアップすることができました。

また後半部分でProgateでフリーランスになれるかどうかも語ります。

そういった背景から語ります。

〜本記事の内容〜

  • サイト制作は HTML、CSS、jQuery、PHPで十分
  • Progateが終わったらやるべき3ステップ【実務を経験するまで】
  • Progateだけでフリーランスは厳しい【実体験】

サイト制作は HTML、CSS、jQuery、PHPで十分


まずこの記事を読んでいる方はProgateでHTML、CSS、jQuery、PHPを勉強し終えた方を対象としています。

この段階まで来ると制作案件を取るのに必要な最低限の基礎スキルは身についています。

とはいえ、当時の僕もこの段階では、

これだけで仕事できるようになるのかな?

と思っていました。

この疑問がどこから来るのか考えてみたのですが、それは単純でして自分で0からサイトを制作した経験がない不安から来ているんですね。

自転車の乗り方を練習したときも、補助輪があれば乗れますが補助輪を外すと乗れませんよね?
だからProgateという補助輪で身に付けた感覚を、補助輪を外して乗れる様になるように頑張ればOKです。

余談:ちなみにProgateのHTML、CSS、jQueryは全講座を受ける必要はありません

これは僕のツイートなのですが、Progateでサイト制作のスキルを身に付けるときに受講すべき最低な講座です。
これ以上やる必要はなしなので、無駄な勉強時間は避けましょう。

  1. HTML&CSS 初級編、中級編、上級編(学習・道場)
  2. PHP Ⅰ、Ⅱ(学習・道場)
  3. jQuery初級・中級(学習・道場)

ちなみにPHPはWordPress案件を取る際に必要でして、手っ取り早くコーディングだけで稼ぎたいという人は勉強する必要なしです。

Progateが終わったらやるべき3ステップ【実務を経験するまで】

「Progateが終わったらやるべきこと=実務レベルを身に付ける」方法を3つご紹介します。

ざっくりですが実務レベルに持っていく方法は下記3ステップです。

  1. サイト模写 ← コーディングスキル+デベロッパーツールの使い方を身に付ける
  2. デザインカンプからのコーディング ← 実務スキルを身に付ける
  3. 実案件をこなす

上記の通りに進めれば実務レベルまでスキルアップが可能。僕が実践して未経験からWEB制作で稼げる様になった勉強方法です。

その1. サイト模写でコーディングスキル+デベロッパーツールの使い方を身に付ける

まずはサイト模写をゴリゴリ進めましょう。

聞きなれない言葉かもですが、方法は単純でして自分が作りたいと思ったサイトを真似して作るだけ。

サイト模写で身につくスキルは、

  • 実際に0からサイトを制作する経験
  • デベロッパーツールの使い方

上記の2点です。

Progateが終わった初学者は実際に0からサイトを作ったことがないので、サイト模写をすることで0からサイトを作る経験が身に付きますよ。またWEB制作に必須スキルである「デベロッパーツールの使い方」も身に付きます。

デベロッパーツールって何?と思うかもですが、Googleブラウザに標準のツールでしてサイト制作をする時の必須ツール。CSSは効いているのか?エラーはどこに出ているのか?などWEB制作がスムーズにいくツールという認識でOK。詳しくはググってください。簡単です。

▼サイト模写する際の注意点

いざ模写すると思うと「このサイト難しいなぁ。こんなの出来ない。」と感じると思います。

実際に僕もサイト模写を経験しましたが、

素材を配置するだけでもかなり時間がかかる・・・。こんなアニメーション出来ないよ。せっかくProgateで勉強したのに何も出来ない。

と、自暴自棄にななりました。笑
これも良い思い出で、それでOKなんです。

はじめから完璧に出来るわけありませんし、はじめは3割程度出来ればOKです。

模写する際にはこの点に気をつけてみてください。

  1. いっきに仕上げようとしない。
  2. 完璧に出来なくてもいい
  3. 動きやスライドなどは無視していい

誰でも完璧にできないとダメと思いがちですが、3割の完成度でもOKです。

とりあえず3割できたら、次の日に4割まで持っていきましょう。
徐々に徐々に毎日レベルアップすることが大切です。

そうしているうちにだんだん自分が出来ること、出来ないことが明確になって、勉強すべき点も見えてきます。

ステップ.2 デザインカンプからコーディングするスキルを身に付ける

サイト模写だけでは実務スキルは身に付きません…理由は単純で「実務はAdobeソフトで作られたaiデータやpsdデータと呼ばれるデザインカンプを元にコーディング業務を行う」からです。実際に公開されているサイトを真似して作るといったことは実務ではないので。
※ちなみにpsdデータはPhotoshop、aiデータはIllustratprで作れらます。

なのでサイト模写でサイト制作が出来るようになった状態で実務に挑戦した人は十中八九、

psdデータって何?画像どうやって取るの?fontのサイズはどうやって確認するの?デザインカンプからコーディング難しい…

と必ずなってしまいます。

なのでpsdデータからコーディングを経験することをおすすめします。
※ちなみにコーディングのデザインカンプはpsdデータがほとんどで、たまにaiデータです。

ただそういった教材はなかったので、僕が駆け出し時に困った経験から、3万円のLP案件を想定したコーディング練習用デザインカンプを作成しました!

僕が駆け出し時に喉から手が出るほど欲しかったものなのできっと有益なものになっているはず。

>>練習用デザインカンプはこちら

ProgateでHTML、CSS、jQueryあたりの基礎を勉強が終わった方を想定してまして、実務を擬似体験できる内容になっています。

またステップ1.を飛ばしてこのデザインカンプをするだけでもOK。デザインカンプからのサイト制作は0からのサイト制作、デベロッパーツールの使い方が身に付くので。

余談:サイト模写は実績にもなる

はじめはポートフォリオがないかと思います。

でもサイト模写した制作物は自分の実績にもなり、ポートフォリオとして使うことができます。(著作権の問題があるのでサーバーにアップとかは駄目かと思います。あくまでオフラインでこんなサイト模写できるよ。と言う感じ。)

はじめはクラウドワークスランサーズで仕事を取ることが多いのですが、案件受注にはポートフォリオ必須です。

サイト模写してレベルアップ、実績にもなるので一石二鳥ですね。

とはいえクライアントや就職先にはサイト模写したものですと言って提出してください。
(自分が書いたコードも提出するとより親切です。)

その3. 実案件をこなす

ここまできたらLP制作などのボリュームの小さい実案件を経験するといいですよ。

実案件は納期があるので、いやでも納品する必要があります。その過程でレベルアップができますよ。

またLP制作の案件は、クラウドワークスで受注でいるので、登録がまだの人は登録してどんな案件があるか確認してみると良いですよ。

クラウドワークスのプロフィールの設定方法はこの記事を読んでみてください。

【クラウドワークス】月5万円分の案件を受注するプロフィールの書き方【裏技】

2018.02.03

ここまでProgateが終わってからやるべきことを紹介してきましたが、より詳しく解説した実体験のnoteがあります。おかげさまで400部以上読まれているので、初学者の方にとってかなり有益かと思います。

※WEB制作(コーディング)で3万円稼ぐまでの実体験を書いたnote
僕が完全未経験からプログラミングを勉強して3万円の案件をこなすまでの実体験を勉強方法から案件受注まで詳しくまとめたnoteです。このnoteにも記載している通り完全未経験からProgateで勉強をはじめました。1週間で300人以上のWEB制作で稼ぎたい方に読んでいただいたnoteで、有益な情報満載なのでぜひ読んでみてください。

Progateだけでフリーランスは厳しい【実体験】

ProgateでHTML、CSS、jQuery、PHPが終わったらやるべきことについて解説しましたが、同時によくこんな質問をされることが多いです。

Progateだけでフリーランスになれますか?

といった質問です。

フリーランスはプログラミングスキル以外も重要

僕はProgateでプログラミングスキルを身に付けて、上記で説明した手順で学習を進めてある程度は稼げる様になりましたが、結論から言うと失敗しました。

失敗理由は明確で、フリーランスに必要なのはプログラミングスキルもですが、それよりも営業スキルだったり、クライアント対応だったりします。フリーランスで生きていくには、オールマイティーなスキルが必要だったりします。

僕はフリーランス失敗後はWEB系の企業に就職してからフリーで生きていくスキルを身に付けて独立していま活動しています。

▼フリーランスを目指すなら「Progate独学→スクール→転職→フリーランス」がおすすめ

Progateで勉強してフリーランスになるおすすめの方法は、「Progate独学→スクール→転職→フリーランス」といった感じ。転職保証付のスクールから転職して実力をつけてからの方が安定してフリーランス生活を送れると思うので。

就職斡旋付きのスクールはたくさんありますが、TECH::EXPERTが就職でいなければ受講料全額返金保証も付いているのでおすすめ。まずは無料相談会に行ってみるといいかと思います。

▼補足:スクール行くならProgate必要なくない…

と思うかもですが、スクール行くにしても、転職するにしてもProgateでの勉強はかなり有利になりますよ。

スクールの醍醐味は何と言ってもメンターに質問し放題という点です。全くプログラミングについて知らない状態からスクールに行ったら、メンターに何を質問すれば良いかわからなかったりして、せっかくメンターを使い倒して成長できるのに勿体ないですからね。

この質問にはいつも「Progateだけでフリーランスは厳しい」と回答しています。

まとめ:Progateが終わったら実務レベルまでレベルアップすべき

Progateで基礎固めをした後にしたことは、サイト模写や実務を想定したスキルを身に付けるべきです。

とはいえいつまでも準備ばかりしているとレベルアップしないので、個人的にはデザインカンプからのコーディングを経験したらすぐにでも案件を経験した方が良いかなと思います。

Progateが終わってからの独学はしんどいかもしれませんが、僕も実際に勉強を続けまして働きながら空いた時間に月20万円ほどWEB制作で稼ぐことができたので、努力すれば誰でも出来るはずです。

デザインカンプからのコーディングは、「psdデザインカンプからのコーディング模写」で練習できるのでぜひ挑戦してみてください。

プログラミングは続けていればある程度出来るようになるので、せっかくProgateで基礎を学習したなら次の段階に行くのがおすすめですよ。ここで諦めるのは勿体無いのでぜひ頑張ってみてください!

〜おすすめ記事〜

【フリーランス向け】HTML、CSSスキルを身につけてコーディング案件を受注する方法【月5万稼ぐ】

2018.04.07

【フリーランス向け】おすすめエージェント3選をご紹介【エンジニア必見】

2018.02.02